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> & <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