html2
TRANSCRIPT
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{
font: bold 14px Tahoma;}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;font: bold 14px Tahoma;
}#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;
}