I am not much of a web designer, more of a backend developer. However, the frontend designer left me with a problem I am facing. I have a login and register links and navigation links on the right. I want these links to line up and display in the same navigation bar. At the moment, my links are distorted. They appear in the middle of the page I am dealing with. I want the login/register links to align to the left side of the navigation bar and I also want the right navigation tp sit within the main navigation. Neither of these things are happening (screenshot provided). how do I get th e user links to align to the left of the top navigation bar an the other links to stay to the right?
Here is a link to my screenshot: https://s30.postimg.org/tlkvrcv5t/Screen_Shot_2017_01_05_at_11_11_55_AM.png
and here is my code:
app.blade.php:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="{!! asset('css/stylesheet.css') !!}" />
</head>
<body>
<div class="mainheader">
<div class="subcontainer">
<div class="subcontainer-left">
<div class="subcontainter-title">Cryptoflip</div>
#if (Auth::guest())
<div class="subcontainer-button">
Login
</div>
<div class="subcontainer-button">
Register
</div>
#else
<div class="subcontainer-button">
<a href="/user/{{$user->name}}"Your Profile</a>
</div>
<div class="subcontainer-button">
Logout
</div>
#endif
</div>
</div>
<div class="subcontainer-right noselect">
<div class="subcontainer-button">
Support
</div>
<div class="subcontainer-button">
<a>Provably Fair</a>
</div>
<div class="subcontainer-button">
<a>Dice</a>
</div>
<div class="subcontainer-button bt-active">
Coinflip
</div>
</div>
</div>
<!-- Decoration -->
<!--<div style="height: 10px; width: 200px; margin: auto; margin-top: -50px; background-color: gold"></div>-->
</div>
<div class="maincontainer">
#yield('content')
</div>
</body>
</html>
stylesheet.css;
#font-face {
font-family: NexaBold;
src: url(NexaBold.otf); }
#font-face {
font-family: NexaLight;
src: url(NexaLight.otf); }
#font-face {
font-family: OpenSans;
src: url(OpenSans-Regular.ttf); }
body {
margin: 0;
background-color: #ecf0f1; }
.mainheader {
height: 75px;
font-family: NexaBold;
font-size: 28px;
line-height: 75px;
text-align: center;
vertical-align: middle;
background-color: #dce0e1; }
.menu {
height: 40px; }
.subcontainer-left {
height: 75px;
float: left; }
.subcontainer {
height: 75px;
margin: auto; }
.subcontainer-right {
height: 75px;
width: auto;
float: right; }
.subcontainer-button {
height: 75px;
width: 100px;
float: right;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.subcontainer-button a {
text-decoration: none;
color: black; }
.subcontainer-button a:visited {
text-decoration: none;
color: black; }
.subcontainer-button a:active {
color: black; }
.subcontainer-button a:hover {
border-bottom: 3px solid gray;
cursor: pointer; }
.subcontainer-title {
height: 75px;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.bt-active a {
border-bottom: 3px solid gold; }
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.maincontainer {
height: 700px; }
.textheader {
height: 180px;
text-align: center;
vertical-align: middle;
line-height: 180px;
font-family: NexaLight;
font-size: 48px; }
.ongoing-header {
width: 700px;
margin: auto;
height: 70px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: #bcc0c1; }
.subheader {
height: 70px;
width: 260px;
font-family: OpenSans;
font-weight: bold;
font-size: 22px;
text-align: center;
line-height: 70px;
vertical-align: middle;
float: left; }
.subheader-menu {
height: 36px;
background-color: #ccd0d1; }
.button {
height: 36px;
width: auto;
margin: auto;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 36px;
font-family: OpenSans;
cursor: pointer;
border-radius: 4px;
transition: 0.3s; }
.button:hover {
background-color: #ecf0f1; }
.subheader-right {
float: right;
padding-top: 16px;
width: 260px;
margin: auto;
margin-right: 24px; }
.ongoing-container {
width: 700px;
margin: auto; }
.ongoing-game {
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-family: OpenSans;
transition: 0.3s; }
.ongoing-game:nth-child(even):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(odd):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(even) {
background-color: #d3d9da; }
.ongoing-game:nth-child(odd) {
background-color: #dce0e1; }
.iconholder {
height: 20px;
width: 20px;
float: left;
margin-top: 4px;
margin-right: 4px; }
#username {
float: left;
height: 40px;
width: 220px;
text-align: left;
padding-left: 24px; }
#btcamount {
float: left;
height: 40px;
width: 220px;
text-align: right;
padding-right: 24px; }
#ongoing {
height: 40px;
width: 212px;
float: left; }
.bitcoinlogo {
height: 15px; }
.helpcontainer {
height: 600px;
width: 500px;
margin: auto;
font-family: OpenSans; }
.helpform {
margin-top: 20px;
height: 400px;
font-size: 12px; }
.helpform textarea {
resize: none;
font-family: OpenSans; }
#issuetext {
height: 100px;
width: 480px; }
#emailtext {
height: 18px;
width: 220px;
font-family: OpenSans; }
.submitbutton {
height: 40px;
width: 180px;
float: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 40px;
font-size: 14px;
cursor: pointer;
border-radius: 3px;
transition: 0.2s background-color; }
.submitbutton:hover {
background-color: lightgrey; }
/*# sourceMappingURL=stylesheet.css.map */
EDIT:Updated code.
Get rid of width on .subcontainer-left. Then give a width to .subcontainer-button.
.subcontainer-left {
height: 75px;
/* width: 200px; */
float: left;
}
.subcontainer-button {
height: 75px;
width: 100px;
...
}
You need to place "Cryptoflip" inside a div, for example "subcontainer-title":
<div class="subcontainer">
<div class="subcontainer-left">
<div class="subcontainer-title">Cryptoflip</div>
<div class="subcontainer-button">
Login
</div>
<div class="subcontainer-button">
Register
</div>
</div>
</div>
Then add the style for it copying ".subcontainer-button" and modify the content to match what you want it to look (float: left in first place):
.subcontainer-title {
height: 75px;
width: auto;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px;
}
And change the width of subcontainer-left:
.subcontainer-left {
height: 75px;
width: 400px;
float: left;
}
Related
I am pretty new to coding and I am doing this for my online college class. For some reason, my footer is not going to the bottom. Neglect the navigation bar above.
I also need more words to post this so I'm going to keep adding word until it says I am fine. So yeah I keep talking and talking and talking well actually I'm typing and not talking so I'm typing typing typing until this post says I have enough words because this code is pretty big.
Here is my code:
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
float: left;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
What you should do is to provide height to the main class, provide how much height you need.
main{
height:800px; //just an example height.
}
Please find the code:
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main{
height:800px;
}
main nav {
display: inline-block;
float: left;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
You are using float:left in for left nav. That's why the height of that container is not being calculated and your footer showing in the middle.
Remove float:left, use display: inline-block for left nav and section with vertical-align:top. Avoid using fixed height in not necessary.
Below is the corrected code snippet.
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
vertical-align:top;
width: 198px;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: inline-block;
vertical-align:top;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
I have made an edit to your code and it works. the problem was tha you have used float for your elements and you did not make a "clearfix" element for them.
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
margin-top: 20px;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
.clearfix {
clear: both;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
Home
Items
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
<div class="clearfix"></div>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
reed#wilson.com</p>
</footer>
</div>
</body>
</html>
I have a problem converting html page into wordpress theme. When loading theme i just see white screen but other previously installed theme looks normal. I read earlier similar subject on stackoverflow but it seems that it doesnt help me. Can somebody help me solve this problem?
These are my theme files:
Theme Name: Vesti
Theme URI: www.komunalacbecej.com
Author: Aljosa Boskovic
Author URI: www.komunalacbecej.com
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
*/
* {
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
background-color: #faf6d0;
padding: 0;
//background-image: url('images/green.png');
background-size: cover;
}
header{
display: block;
width: 100%;
margin: 0 auto;
}
#uppermenu{
float: right;
margin-top: 4px;
}
#uppermenu ul{
margin-right: 15px;
}
#uppermenu ul li{
display: inline;
padding: 5px;
font-size: 15px;
color: grey;
font-weight: 540;
font-family: 'Oswald', sans-serif;
cursor: pointer;
}
#uppermenu ul li:hover{
color:#156038;
}
#flags{
float:right;
margin-top: 4px;
}
#flags img{
width: 20px;
height: 20px;
margin-right: 7px;
cursor: pointer;
}
#logo{
vertical-align: middle;
float: left;
height: 70px;
}
#naziv{
float: left;
color: #1a7645;
height: 70px;
width: 300px;
box-sizing: border-box;
padding: 5px;
font-family: sans-serif;
}
nav{
width: 100%;
background: #3d874d;
text-align: center;
position: relative;
z-index: 11;
border: 2px solid #a4a41b;
margin: 0 auto 10px auto;
clear: both;
border-radius: 2px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
padding: 15px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
nav ul li a{
text-decoration: none;
color: #fff;
display: block;
font-size: 1.1em;
}
nav ul li:hover{
background: #150;
}
nav ul li a:hover{
color: #fdf742;
}
nav ul ul {
position: absolute;
width: 150px;
background: #2a562c;
opacity: 0.8;
margin-top: 15px;
margin-left: -15px;
text-align: left;
display: none;
}
nav ul ul li{
display: block;
text-align: left;
border-bottom: 1px solid #5b7e5d;
}
nav ul li:hover > ul{
display: block;
}
#slide{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
margin: 0 auto;
}
#slidephoto{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
border-radius: 5px;
}
#leftbutton{
width: 5%;
height:500px;
position: absolute;
left: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#rightbutton{
width: 5%;
height:500px;
position: absolute;
right: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#leftarrow {
vertical-align: middle;
cursor: pointer;
}
#rightarrow {
vertical-align: middle;
cursor: pointer;
}
#leftarrow:hover{
background: grey;
}
#rightarrow:hover{
background: grey;
}
#naslov{
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px;
text-indent: 30px;
font-size: 20px;
color: #1a7645;
font-family: Georgia;
border-top: 1px solid #1a7645;
background: #639665;
color: #e6f3d1;
padding: 10px 0;
}
#firsttext{
width: 100%;
margin: 30px auto 0 auto;
font-family: 'Times New Roman';
line-height: 1.4em;
font-size: 19px;
text-align: justify;
padding-top: 10px;
box-sizing: border-box;
padding: 40px 90px;
color: white;
background: #6eae49;;
border-radius: 4px;
}
#firsttext span{
font-size: 28px;
font-weight: bold;
color: #1a7645;
}
#delatnosti {
width: 100%;
position: relative;
text-align: center;
background-color: #e6f3d1;
margin: 0px auto;
box-sizing: border-box;
border: 1px solid #6d9e6f;
padding: 20px ;
}
.boxes div {
display: inline-block;
border: 1px solid #a2b6c0;
width: 200px;
height: 210px;
vertical-align: top;
text-align: center;
background-color: white;
color: #46545b;
margin: 20px 10px;
cursor: pointer;
border-radius: 4px;
}
.boxes div:hover{
border: 1px solid green;
background-color: #dfdede;
}
.boxes a img{
width: 200px;
height: 110px;
}
.boxes a p, h3{
//margin: 5px;
text-decoration: none;
}
.boxes div a{
text-decoration: none;
color: black;
}
#obavestenja{
width: 100%;
height: 40px;
//border: 1px solid black;
font-size: 2em;
line-height: 40px;
text-indent: 210px;
}
#mainnews-banner{
width: 100%;
margin: 0 auto;
}
#mainnews-banner h1{
text-indent: 210px;
font-family: serif;
letter-spacing: 3px;
}
#sadrzaj{
width: 75%;
background-color: white;
display: inline-block;
box-sizing: border-box;
text-align: justify;
border: 1px solid black;
}
#vestikolone{
width: 80%;
}
#glavnavestslika{
width: 100%;
height: 430px;
background: url("images/slika4.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#glavnavesttekst{
width: 100%;
height: 180px;
background: black;
position: absolute;
bottom: 0;
opacity: .6;
}
#glavnavesttekst p{
color: #ded8d8;
opacity: 1;
padding: 10px;
font-size: 18px;
font-family: Georgia;
line-height: 23px;
}
#glavnavesttekst h2{
color: white;
font-weight: bold;
opacity: 1;
font-family: Georgia;
text-indent: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
#glavnavest {
font-size: 1.2em;
font-family: 'Oswald', sans-serif;
}
#datum{
width: 100%;
padding: 10px;
box-sizing: border-box;
color: white;
background: black;
}
#banner{
width: 25%;
float: right;
text-align: center;
//border: 3px solid green;
//background: #f1f1f1;
}
#banner img{
width: 120px;
height: 100px;
background: #9ac0f6;
border: 1px solid #9ac0f6;
cursor: pointer;
}
#banner p{
font-size: 1em;
font-family: Arial;
background: #fecd61;
width: 60%;
margin: 0 auto;
margin-bottom: 8px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
#pastnewspara{
text-transform: uppercase;
background-color: black;
color: white;
width: 75%;
box-sizing: border-box;
padding-left: 10px;
margin-bottom: 1px;
opacity: .9;
}
#pastnews{
border-top: none;
position: relative;
text-align: center;
width:75%;
height: 140px;
float: left;
border: 1px dashed black;
border-top: none;
}
.column{
width: 25%;
height: 140px;
display: inline-block;
margin-left: -4px;
background-color: white;
box-sizing: border-box;
vertical-align: top;
box-sizing: border-box;
}
.column img{
width: 100%;
height:140px;
}
.column h3,p{
text-align: left;
padding: 5px;
}
#prognoza{
clear: both;
width: 75%;
background: brown;
color: #a2b6c0;
border-bottom: 2px solid white;
}
.weatherwidget-io{
width: 100%;
display: block;
height: 20px;
text-align: left;
}
#footer{
width: 100%;
height: 130px;
background: white;
background: #a2b6c0;
text-align: center;
position: relative;
border-top: 3px solid white;
}
#icons{
line-height: 130px;
}
#footer i{
color: #554f4f;
font-size: 36px;
padding: 26px;
vertical-align: middle;
}
#footer span {
position: absolute;
right: 50px;
color: grey;
font-family: sans-serif;
}
#footer span i{
padding: 6px;
color: grey;
font-size: 0.6em;
}
/* stranica zelenilo.html */
#submenu ul li{
list-style: none;
font-size: 1.1em;
padding-bottom: 5px;
border-bottom: 2px solid green;
margin-bottom: 13px;
background: rgba(96,96,96,0.4);
}
#submenu {
margin-top: 30px;
width: 22%;
background: url('images/leaf3.jpg');
background-size: cover;
opacity: .9;
font-family: 'Oswald', sans-serif;
text-align: center;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding: 10px 0;
color: #cfcf05;
border: 2px solid green;
float: left;
}
#submenu ul {
opacity: 1;
padding: 40px 20px;
font-size: 16px;
}
#zelenilobody{
background: url('images/goranski.jpg');
background-size: cover;
height: 1000px;
}
#submenu ul li:hover{
background-color: grey;
background: rgba(96,96,96,0.7);
color: white;
cursor: pointer;
}
#navigation nav{
background-color: #61a239;
}
#zelenilo-naziv #naziv{
color: #60a23a;
background-color: rgba(96,96,96,0.7);
}
#zelenilo-uppermenu #uppermenu li{
color: #60a23a;
background-color: rgba(96,96,96,0.8);
}
#zelenilo-tekst{
width: 75%;
float: right;
margin-top: 30px;
border: 1px solid white;
background: rgb(246, 241, 241, 0.8);
box-sizing: border-box;
padding: 20px;
}
#zelenilo-tekst p{
line-height: 20px;
margin-top: 10px;
font-size: 17px;
}
#zelenilo-tekst ol{
padding-left: 20px;
line-height: 24px;
margin-top: 15px;
font-size: 17px;
}
/* stranica vesti.php */
#blognews {
background-color: white;
margin-top: 20px;
padding: 10px;
border: 1px solid black;
}
#article {
border: 1px solid black;
margin-top: 20px 0;
}
#article h2 {
margin-left: 15px;
margin-top: 10px;
}
#datumclanka{
display: block;
margin-left: 15px;
}
#article img{
height: 120px;
display: inline-block;
width: 180px;
vertical-align: middle;
margin-top: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
#article p{
display: inline-block;
width: 650px;
vertical-align: middle;
font-size: 1.1em;
margin-left: 10px;
}
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header>
<img src="images/logofirme.jpg" id="logo">
<div id="naziv">
<h1><?php bloginfo('name'); ?></h1>
<p>Javno preduzeće za komunalne usluge</p>
</div>
<div id="flags">
<img src="images/serbia.png">
<img src="images/hungary.png">
</div>
<div id="uppermenu">
<ul>
<li>Najčešća pitanja</li>
<li>Korisni linkovi</li>
</ul>
</div>
<?php wp_nav_menu(); ?>
</header>
footer.php
<div id="footer">
<div id="icons">
<i class="fa fa-phone"></i>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-facebook-official"></i>
<span><i class="fa fa-copyright"></i>Design by Aleksey</span>
</div>
</div>
</body>
</html>
index.php
<?php get_header(); ?>
test
<?php get_footer(); ?>
Can you try following solutions?
In first line of style.css add "/*" before "Theme Name: Vesti". So it will be like
/*
Theme Name: Vesti
Disable/deactivate all plugins to check if confliction happens between your active theme and plugins. And then enable it one by one if issue happens because of it.
Add following line in wp-config.php file for increasing PHP memory limit.
define(‘WP_MEMORY_LIMIT’, ’64M’);
For elements in my #vocational div, I want the h3 and the span class for my paragraphs to be the same color.
Essentially, what I have displayed in my #vocational div is a series of tweets. I want the hashtags and the name and #username of the tweet owners to be the same exact color, but even though the hex code is the same they are showing up as different colors.
Why is this? Should I be using paragraph for what I'm using h3 for? What could I do to make the colors the same?
Example of What I'd Like the #vocational div to look like:
* {
box-sizing: border-box;
}
#font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.clearfix:after {
content:" ";
display:table;
clear:both;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
#functions {
background-color: #FFFFFF;
display: block;
height: 1500px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: normal;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: normal;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
}
.hashtag {
color: #00AF78;
}
#hero {
background-color: #62CE9C;
height: 600px;
float: left;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herotext {
float: left;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
textarea:focus, input:focus {
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
float: center;
display: block;
margin: auto;
padding-top: 400px;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetone img {
float: left;
padding-top: 10px;
}
#tweetonetext {
float: left;
padding-left: 15px;
width: 450px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweettwo img {
float: left;
padding-top: 10px;
}
#tweettwotext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetthree img {
float: left;
padding-top: 10px;
}
#tweetthreetext {
float: left;
padding-left: 15px;
width: 450px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="hero">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
<img src="images/phone.png"/>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
</body>
</html>
Its of the same color as of <h3>, the difference is in the font-weight.
<h3> has font-weight: bold;, while
.hashtag has font-weight: normal;
Use bold font on .hashtag:
.hashtag {
font-weight: bold;
}
Have a look at the snippet below:
* {
box-sizing: border-box;
}
#font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.clearfix:after {
content:" ";
display:table;
clear:both;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
#functions {
background-color: #FFFFFF;
display: block;
height: 1500px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: normal;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: normal;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
}
.hashtag {
color: #00AF78;
font-weight: bold;
}
#hero {
background-color: #62CE9C;
height: 600px;
float: left;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herotext {
float: left;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
textarea:focus, input:focus {
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
float: center;
display: block;
margin: auto;
padding-top: 400px;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetone img {
float: left;
padding-top: 10px;
}
#tweetonetext {
float: left;
padding-left: 15px;
width: 450px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweettwo img {
float: left;
padding-top: 10px;
}
#tweettwotext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetthree img {
float: left;
padding-top: 10px;
}
#tweetthreetext {
float: left;
padding-left: 15px;
width: 450px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="hero">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
<img src="images/phone.png"/>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
</body>
</html>
Hope this helps!
Based on what I have done/seen, I would recommend that when you are linking the CSS file to your HTML file, that you use
<link rel="stylesheet" type="text/css" href="stylesheet.css">
As opposed to...
<link href="css/main.css" rel="stylesheet"/>
Because when I ran it with what I corrected it to, I got all of it to be the same font.
enter image description here
For some reason padding-top and padding-bottom are not working for my #functions div.
I can't seem to figure out what is canceling out the CSS to cause this, and for some reason padding-left and padding-right work fine.
I want the #functions div to look like this:
Is there something wrong with my HTML or CSS? Am I approaching this the wrong way?
* {
box-sizing: border-box;
}
#font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.clearfix:after {
content:" ";
display:table;
clear:both;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
#functions {
background-color: #FFFFFF;
height: 1500px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: normal;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: normal;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
}
.hashtag {
color: #00AF78;
}
#hero {
background-color: #62CE9C;
height: 600px;
float: left;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herotext {
float: left;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
textarea:focus, input:focus {
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
float: center;
margin: auto;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetone img {
float: left;
padding-top: 10px;
}
#tweetonetext {
float: left;
padding-left: 15px;
width: 450px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweettwo img {
float: left;
padding-top: 10px;
}
#tweettwotext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetthree img {
float: left;
padding-top: 10px;
}
#tweetthreetext {
float: left;
padding-left: 15px;
width: 450px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="hero">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
<img src="images/phone.png"/>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
</body>
</html>
This can be done using CSS Flexbox.
For Reference your CSS should be somewhat like:
#savefood, #savemoney, #savetime {
display: flex;
justify-content: center;
align-items: center;
}
#savefood {
flex-direction: row-reverse;
}
Look at the snippet below (use fullscreen to view it properly):
* {
box-sizing: border-box;
}
#font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.clearfix:after {
content:" ";
display:table;
clear:both;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
#functions {
background-color: #FFFFFF;
height: 1500px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: normal;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: normal;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
}
.hashtag {
color: #00AF78;
}
#hero {
background-color: #62CE9C;
height: 600px;
float: left;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herotext {
float: left;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
textarea:focus, input:focus {
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
float: center;
margin: auto;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetone img {
float: left;
padding-top: 10px;
}
#tweetonetext {
float: left;
padding-left: 15px;
width: 450px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweettwo img {
float: left;
padding-top: 10px;
}
#tweettwotext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetthree img {
float: left;
padding-top: 10px;
}
#tweetthreetext {
float: left;
padding-left: 15px;
width: 450px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}
#savefood,
#savemoney,
#savetime{
display: flex;
justify-content: center;
align-items: center;
}
#savefood {
flex-direction: row-reverse;
}
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="hero">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
<img src="images/phone.png"/>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="http://placehold.it/200/200"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="http://placehold.it/200/200"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="http://placehold.it/200/200"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
</body>
</html>
Hope this helps!
To apply padding make your element display: block and if your approach is to align it vertically. Make it display: flex; align-items: center and give a height to its parent element
I want to sharpen my HTML & CSS skills by recreating the Bootstrap homepage in pure HTML & CSS. I am almost finished, but I seem to be having trouble with my footer. Everything else is positioned the way I would like it, but everything on the footer shoots up to the top and middle of my page. Can anyone tell me what I am missing here?
HTML
<header>
<div class="top-bar">
<p>Aww yeah, Bootstrap 4 is coming!</p>
</div>
<nav>
<div class="nav-bar">
<div class="logo">
Bootstrap
</div>
<div class="left-nav">
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Customize</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Themes</li>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<nav>
</header>
</div>
<center>
<main>
<section>
<div class="head-component">
<div class="b-logo">
<p>B</p>
</div>
<div class="short-description">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
<div class="download-button">
<button class="dwn">Download Bootstrap</button>
</div>
<div class="current">
<p>Currently v3.3.5</p>
</div>
</div>
</section>
<section>
<div class="mid-section">
<div class="mid-info">
<h2>Designed for everyone, everywhere.</h2>
<p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div>
<hr class="hz-line" />
<div class="column-left">
<img src="http://getbootstrap.com/assets/img/sass-less.png" />
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="column-middle">
<img src="http://getbootstrap.com/assets/img/devices.png" />
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="column-right">
<img src="http://getbootstrap.com/assets/img/components.png" />
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
<div class="clear"></div>
<hr class="hz-line" />
<div class="github">
<p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div class="github-button">
<button class="view-git">View the Github Project</button>
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="clear"></div>
<div class="photo-section">
<hr class="hrln-full" />
<div class="second-mid-info">
<h2>Built with Bootstrap.</h2>
<p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
</div>
<hr class="hz-line" />
<div class="photos">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
</div>
<hr class="hz-line" />
<div class="expo-button">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<button class="expo">Explore the Expo</button>
</div>
<hr class="hrln-full" />
</div>
</div>
<div class="clearfooter"></div>
</section>
</main>
<div class="clear"></div>
<footer>
<p>Designed and built with all the love in the world by #mdo and #fat.
<br /> Maintained by the core team with the help of our contributors.
<br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
<ul>
<li>Github</li>
<li>Examples</li>
<li>v2.3.2 docs</li>
<li>About</li>
<li>Expo</li>
<li>Blog</li>
<li>Releases</li>
</ul>
</footer>
</center>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body, #wrap {
height: 100%;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fff;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 22px;
font-weight: 100px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 14px;
}
#container {}
ul {
list-style: none;
}
li {
list-style: none;
display: inline;
padding: 10px;
}
a {
list-style: none;
color: inherit;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
main {
padding-bottom: 150px;
display: block;
margin: 0 auto;
}
.top-bar {
margin: 0;
padding: 15px 0;
background-color: #0275D8;
text-align: center;
}
.top-bar p {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0;
}
.top-bar:hover {
margin: 0;
padding: 15px 0;
background-color: #0269C2;
text-align: center;
}
.nav-bar {
background-color: #fff;
position: relative;
color: #583F7E;
display: block;
width: 100%;
height: 50px;
}
.logo {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #583F7E;
padding: 15px;
line-height: 0.8em;
margin-left: 100px;
}
.left-nav {
float: left;
font-size: 15px;
font-weight: 500;
text-align: center;
margin-left: 200px;
}
.right-nav {
float: right;
text-align: right;
font-size: 15px;
font-weight: 500;
margin-right: 120px;
}
.left-nav a:hover {
background-color: #f9f9f9;
}
.right-nav a:hover {
background-color: #f9f9f9;
}
.head-component {
background-color: #583F7E;
height: 700px;
display: block;
margin: 0 auto;
}
.b-logo {
margin: 0 auto;
padding-top: 5px;
width: 160px;
height: 300px;
display: block;
}
.b-logo p {
font-size: 130px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 25px;
text-align: center;
}
.short-description {}
.short-description p {
font-size: 30px;
color: #fff;
font-weight: 300;
width: 850px;
text-align: center;
display: block;
margin: 0 auto;
padding-top: 40px;
}
.download-button {
padding-top: 40px;
}
.dwn {
background: none;
font-size: 20px;
padding: 15px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.dwn:hover {
background: #fff;
font-size: 20px;
padding: 15px;
color: #583F7E;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.current p {
color: #9781A9;
font-size: 14px;
padding-bottom: 75px;
padding-top: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.mid-section {
height: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
}
.mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
text-align: center;
display: block;
margin: 0 auto;
}
.mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
padding-bottom: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.hz-line {
width: 10%;
color: #f3f3f3;
opacity: 0.5;
}
.column-left {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-left img {
width: 100%;
}
.column-left p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-middle {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-middle img {
width: 100%;
}
.column-middle p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-right {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-right img {
width: 100%;
}
.column-right p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.clear {
clear: both;
}
.github {
padding-top: 15px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
text-align: center;
}
.github p {
font-weight: 400;
font-size: 18px;
color: #555;
padding-bottom: 20px;
text-align: center;
}
.view-git {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.view-git:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.hrln-full {
color: #f3f3f3;
opacity: 0.5;
}
.spacer {
height: 60px;
}
.second-mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
.second-mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
text-align: center;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
.photo-section {
height: 100%;
display: block;
margin: 0 auto;
}
.photos {
padding: 30px;
padding-left: 115px;
}
.photos img {
width: 23%;
}
.expo-button {
padding-top: 15px;
padding-bottom: 120px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
}
.expo-button p {
font-weight: 300;
font-size: 22px;
color: #555;
padding-bottom: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.clearfooter {
height: 130px;
clear: both;
}
footer {
text-align: center;
bottom: 0;
height: 100%;
left: 0;
width: 100%;
display: block;
margin: 0 auto;
}
footer p {
text-align: center;
}
footer ul {
position: relative;
}
footer li {
color: #489FD6;
}
footer li:hover {
color: #23517C;
text-decoration: underline;
}
footer a {}
From what I can tell I believe its because of two main reasons.
You have set fixed heights for elements with content that is height than the fixed height.
.mid-section {
height: 500px;
background-color: #fff;
margin: 0;
}
.photo-section {
height:500px;
}
The footer has position: absolute but isn't contained by a parent with position: relative. If you would like the footer to stick to the bottom use position: fixed instead.
footer {
text-align: center;
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}