Html2

HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The CCS Department Website</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Welcome to the CCS Department Website!</h1>
</header>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>View Prospectus</li>
</ul>
</nav>
<section id="main_section">
<article>
<header>
<hgroup>
<h1>The new course of CCS</h1>
<h2>Basis for the innovative approach</h2>
</hgroup>
</header>
<p> The new course for the CCS is on Entertainment and Multimedia
Computing which caters programs such as Digital Animation and Game
Development.</p>
<footer>
<p> - written by Mark Lester Catungal</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>The exciting events of CCS</h1>

<h2>A formation of students' holistic perspective</h2>
</hgroup>
</header>
<p> Get ready for the Himugso Event which highlights the CCS Got Talent
season II.</p>
<footer>
<p> - written by Syril Glein T. Flores</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
We have a new MIT instructor.
</aside>
<footer id="the_footer">
Copyright theCCSDepartment 2015
</footer>
</div>
</body>
</html>
CSS STYLE
*{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;
}
h2{
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
body{
text-align: center;
}
#big_wrapper{
border:1px solid black;

width:1000px;
margin: 20px auto;
text-align:left;
}
#top_header{
background: #992211;
color: white;
border:1px solid blue;
padding: 20px;
}
#top_menu{
background: blue;
color: white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding: 5px;
}
#main_section{
float: left;
width:660px;
margin: 30px; /* 720px, 280 left */
}
#side_news{
float:left;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
clear: both;
text-align: center;
padding: 20px;
border-top:2px solid green;
}
article{
background: #FFFBCC;
border:1px solid red;
padding: 20px;
margin-bottom: 15px;
}

article footer{
text-align: right;
}

Html2

More Related Content

Recently uploaded

Featured

Html2