Hey,
So I started attempting to do web design and going through tutorials about a week ago. I used to do it about 10 years ago but now am looking to get serious and possibly pursue it as a career path. Anyway, I am currently just trying to copy layouts of websites or remake websites just to get good at coding. Get some practice type thing. Anyway I am currently working on recreating yardbarker.com. (Just a random site I visit often and decided to do. Anyway I have attached what the banner currently looks like compared to the real one.
Here is what I have currently, please give me feedback on what is wrong and how I can improve. I really want to become good at this.
HTML
<header>
<img src="pictures/logo.png" id="logo" alt="Logo">
<p id="one">
REALTIME RUMORS, GOSSIP, OPINIONS AND HUMOR FROM THE BEST SPORTS BLOGS
</p>
<p id="login">
<a href="http://www.yardbarker.com/account/signin">Login</a>|<a href="http://www.yardbarker.com/account/signin">Sign Up</a>
</p>
<div id="search">
<input type="text" name="search">SEARCH</input>
</div>
</header><!--End Header-->
CSS
header {
width: 970px;
height: 125px;
border-top: solid #b72321 5px;
background: white;
}
header #logo {
margin: 20px;
position: relative;
}
header #login {
position: relative;
float:right;
text-align: left;
left: 0px;
top: -105px;
margin: 10px;
font-family: sans-serif;
}
header a {
color: #555555;
text-decoration: none;
font-size: 15px;
}
header a:hover {
text-decoration: underline;
}
header #one {
color: #b72321;
font-family: sans-serif;
font-weight: 600;
font-size: 13px;
margin-left: 30px;
float:left;
}
header #search {
float: right;
position: relative;
left: 100px;
color: #000000;
font-family: sans-serif;
}