So I\'m quite new to writing code (about a few weeks) and I\'ve hit a wall while writing code for my website. I want to have a layout like this:
This is just a simple(not-responsive) HTML/CSS translation of the wireframe you provided.
HTML
Logo
Video Explaning Site
Sign up Info
CSS
.container {
width:900px;
height: 150px;
}
header {
width:900px;
float:left;
background: pink;
height: 50px;
}
.logo {
float: left;
padding: 15px
}
.menu {
float: right;
padding: 15px
}
.first-box {
width:300px;
float:left;
background: green;
height: 150px;
margin: 50px
}
.first-box p {
color: #ffffff;
padding-left: 80px;
padding-top: 50px;
}
.second-box {
width:300px;
height: 150px;
float:right;
background: blue;
margin: 50px
}
.second-box p {
color: #ffffff;
padding-left: 110px;
padding-top: 50px;
}
footer {
width:900px;
float:left;
background: black;
height: 50px;
color: #ffffff;
}
footer div {
padding: 15px;
}