PHOTOSHOP TEMPLATE CONVER INTO HTML5 (Class 9 to 11am).

December 06, 2013

Width to Maintain Full Screen in any Device

HTML CODE FOR LAYOUT
----------------------------
<!doctype html>
<html>
<head>
<title>
Working with site design
</title>
<link href="styles/style.css" rel="stylesheet">
<link href="images/favicon.ico" rel="shortcut icon">
</head>
<body>

<header>
<section id="hcontainer">
<figure>
<img src="images/logo.png">
</figure>

<nav>
<ul>
<li>CONTACT</li>
<li>ABOUT</li>
<li>CAREER</li>
<li class="buttonbg">APPLY NOW</li>
</ul>
</nav>
</section>
</header>

<nav>
<ul>
<li class="home"><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a>
    <ul>
    <li><a href="#">ONLINE TRAINING</a></li>
    <li><a href="#">CLASS ROOM TRAINING</a></li>
    </ul>
</li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ONLINE REG.</a></li>
<li><a href="#">SITE MAP</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

<section id="banner">
<figure>
<img src="images/banners/banner1.jpg" width="100%">
</figure>
</section>
<section id="banner-content">

<div id="container">
<footer></footer>
</div>

<footer>dfsdsfds</footer>
</body>
</html>

CSS FOR ABOVE HTML CODE
----------------------------------
*{
border:0px;
margin:0px;
padding:0px;
}
body {
background:#ddd;
font-family:verdana;
font-size:100%;
color:#fff;
}
header {
width:100%;
height:100px;
background:#000;
}
header #hcontainer {
width:960px;
height:100px;
margin:0px auto;
position:relative;
}
header #hcontainer figure {
margin-top:15px;
position:absolute;
}
header #hcontainer nav {
height:30px;
line-height:30px;
position:absolute;
left:500px;
top:35px;
color:#fff;
background:none;
}
header #hcontainer nav li {
float:left;
padding:0px 10px;
list-style:none;
}
.buttonbg {
background:#0178b2;
}
nav {
width:100%;
height:30px;
background:#3d3d3d;
position:relative;
}
nav ul {
width:960px;
border:0px;
margin:0px auto;
padding:0xp;
}
nav ul li {
float:left;
line-height:30px;
list-style:none;
padding:0px 40px;
text-align:center;
}
nav ul li:hover {
background:#0178b2;

}
nav ul li a {
color:#fff;
text-decoration:none;
}
nav ul ul {
visibility:hidden;
height:30px;
background:#a9a9a9;
position:absolute;
width:100%;
left:0px;
}
nav ul li:hover ul {
visibility:visible;
}
nav ul li:hover ul li {
list-style:disc;
}
nav ul li:hover ul li a {
color:#ffc72a;
}

#banner {
width:100%;
height:495px;
background:#000;
}
#banner-content {
background:#0178b2;
height:100px;
width:100%;
}
.home {
background:#ffc72a;

}
.home a {
color:#000;
}
#container {
width:960px;
padding:5px;
margin:0px auto;
min-height:400px;
position:relative;
}
#container footer {
position:absolute;
left:0px;
bottom:0px;
background:#4d4d4d;
color:#000;
text-align:center;
}