Check out the website we've started in the Result tab. Do you recognize it? It's the demo we showed you in the first CSS lesson!
It doesn't look quite the same, though. This is because much of the crucial display and positioning CSS we used has been removed. Your job? Add it back in!
Instructions
There's a navigation bar here somewhere, but it's lost due to display problems! On the CSS tab, give
#navbar a position of fixed and a top margin of -10px.
body {
background-color: #b7d1c4
}
h2 {
font-family: Verdana;
font-weight: bold;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
color: #acd1b2;
}
img {
height: 170px;
width: 170px;
box-shadow: rgba(0,0,0,0.2) 10px 10px;
}
#navbar {
position:fixed;
margin-top:-10px;
left:50%;
margin-left:-254px;
}
#header {
position: relative;
top: -10px;
background-color: #3c4543;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
ul{
list-style-type: none;
position: fixed;
margin: -10px;
}
li {
/*Add your CSS here!*/
border: 2px solid #000000;
font-family: Futura, Tahoma, sans-serif;
color: #ffffff;
border-radius: 5px 5px;
background-color: #cc0323
}
#left{
/*Add your CSS here!*/
}
p {
font-family: Tahoma;
font-size: 1em;
}
#right{
/*Add your CSS here!*/
}
table {
border: #000000 1px solid;
background-color: #acd1b2;
float: right;
margin-right: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
td {
height: 75px;
width: 75px;
}
td img {
height: 75px;
width: 75px;
box-shadow: none;
}
th {
font-family: Verdana;
font-size: 1em;
font-weight: normal;
color: #3c4543
}
#bottom_left{
border-bottom-left-radius: 15px;
}
#bottom_right{
border-bottom-right-radius: 15px;
}
#footer{
/*Add your CSS here!*/
position: relative;
bottom: -20px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 75px;
background-color: #3c4543;
}
#button{
border: 2px solid #000000;
float:left;
position: relative;
left: 229px;
bottom: -20px;
border-radius: 5px;
background-color: #cc0323;
height: 30px;
width: 150px;
}
#button p{
position: relative;
bottom: 10px;
font-size: 0.8em;
color: #acd1b2;
text-align: center;
}
.bold{
font-family: tahoma;
font-weight: bold;
font-size: 1.2em;
font-variant: small-caps;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Plans for World Domination</li>
<li>Contact</li>
</ul>
</div>
<h2>About Me</h2>
</div>
<div id="left">
<img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-main_zps26d178c5.jpg"/>
<p>I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p>
</div>
<div id="right">
<table>
<th colspan="3">My Bros</th>
<tr>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-1_zps5666b8e7.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-2_zps1539e6b2.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-3_zps4692eafa.png"/></td>
</tr>
<tr>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-4_zps63ff5aa8.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-5_zps0ee0d2c8.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-6_zpsc4450a60.jpg"/></td>
</tr>
<tr>
<td><img id="bottom_left" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-7_zps26e8a8d9.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-8_zps9a1469be.jpg"></td>
<td><img id="bottom_right" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-9_zps3bab7732.jpg"/></td>
</tr>
</table>
</div>
<div id="footer">
<div id="button">
<p>Send me an <span class="bold">e-mail</span>!</p>
</div>
</div>
</body>
</html>
No comments:
Post a Comment