M(ath)+me

So I figured I would make a website, with just pictures, why? Because Lorium ipsum is ugly text. I'm gonna try to make as many as I can in this 2 week break, as well as grasp C and a lot of math, (why am I talking about math, this is computers stuff, get out of here math, just go home), ANYWAY, I'l post the CSS, and the html, and how it looks, k.

SO, not much html is implemented, my main focus is just CSS.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <link rel="stylesheet" type="text/css" href="style.css" media="all" />
 <link href='http://fonts.googleapis.com/css?family=Overlock:400,400italic' rel='stylesheet' type='text/css'>
 <title>samir</title>
</head>
<body>

 <div id="head">
  <h1><small>The</small>Black <br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& <small>The</small>White</h1>
 </div>
 <br />
 <div id="nav">
  <li><a href="#">home</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">portfolio</a></li>
  <li><a href="#">images</a></li>
  <li><a href="#">contact</a></li>
 </div>
 
 <br />
 <br />

 <center>
 <div class="wrap">
 <img src="img/head.jpg">
  <div id="left">
  <img src="img/1.jpg" width="265" height="200px">
  </div>
  
  
  
  
  <div id="middle">
  <img src="img/2.jpg" width="265" height="200px">
  </div>
  
  
  
  
  
  <div id="right">
  <img src="img/3.jpg" width="265" height="200px">
  </div>
  

 <img src="img/head2.jpg">
 </div>
 
 
</body>
</html>

AND here is the CSS code.

body {
 margin:20px 0px; padding:0px;
 text-align:center;
 font-family:sans-serif;
 width:80%;
 margin:auto;
 
 }
 
#head h1 {
 font-size:60px;
 margin:auto;
 font-family: 'Overlock', cursive;
}

#head h1 small {
 font-size:40px;
 color:black;
}
 
#nav {
 width:500px;
 margin: auto;
 text-align:center;
 top:1px;
 border:1px;
 }

#nav li {
 display:inline;
 list-style-type:none;
 
}

#nav a {
 text-decoration:none;
 text-transform:capitalize;
 font-size:20px;
 padding:15px;
 color: inherit;
 
}

#nav a:hover {
 color: gray;
 font-size:19px;
 border:1px solid black;
 border-radius:5px;
}

.wrap {
 width:800px;
 font-size:12px;
}

#left {
    float:left;
    width:265px;
}

#middle {
    display: inline-block;
    margin:0 auto;
    width:265px;
}

#right {
    float:right;
    width:265px;
}

AND HERE oops no bold? AND HERE is the screenshot.

Yes, it's black and white, SO WHAT, i like dem colers

#fb { width:100%; font-family:sans-serif; color:white; text-decoration:bold; font-size: 30px; background-color: #3b5999; padding-left: 24%; } #content { width: 860px; height: 1000px; margin: auto; border: 1px solid #e3e3e3; }

HTML/CSS | New Web design

CSS | Facebook template (not even)