Ivan Harmat

Draw Your Own American Flag - HTML, CSS, Photoshop

Sunday, 29 May 2011 14:10 | Written by Ivan

Here is the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="/style.css" rel="stylesheet" type="text/css" />
<title>American Flag - HTML, CSS, Photoshop</title>
</head>
<body>
 
 <div id="wrapper">
 
 <div id="blue_square">
 
 <div id="stars"></div>
 
 </div><!-- end #blue_square -->
 
 <div class="red_stripe"></div>
 <div class="white_stripe"></div>
 <div class="red_stripe"></div>
 <div class="white_stripe"></div>
 <div class="red_stripe"></div>
 <div class="white_stripe"></div>
 <div class="red_stripe"></div>
 <div class="white_stripe"></div>
 <div class="red_stripe"></div>
 <div class="white_stripe"></div>
 <div class="red_stripe"></div>
 <div class="white_stripe"></div>
 <div class="red_stripe"></div>
 
 
 
 </div><!-- end #wrapper -->
 
 
</body>
 
</html>

Here is the CSS code:

body
{
 background: white;
 margin: 100px 0 0 0;
 padding: 0;
}
 
#wrapper
{
 width: 704px;
 height: auto;
 padding: 0;
 margin: 0 auto;
 border: 1px solid black;
}
 
.red_stripe
{
 width: 704px;
 height: 28px;
 background-color: #d40b01;
}
 
.white_stripe
{
 width: 704px;
 height: 28px;
 background-color: white;
}
 
#blue_square
{
 background-color: #000040;
 width: 279px;
 height: 196px;
 position: absolute;
 margin: 0;
}
 
#stars
{
 background-image: url('stars.gif');
 background-repeat: repeat;
 width: 246px;
 height: 180px;
 position: relative;
 margin: 7px 16px;
}

Demo here Download the zip file

Five Finger Death Punch - Under And Over It (new song)

Draw Your Own American Flag - HTML, CSS, Photoshop