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
