<!DOCTYPE html>
<html lang="en">
<head>
<title>Day 5-1</title>
<link rel="stylesheet" href="CSS_Test_subject_02.css">
<meta charset="utf-8,tis-620">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="Container">
<header>
<h1>What Can Javascript Do?</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<section>
<article>
<header>Title Or Article 01</header>
<p>This the best Website</p>
</article>
<article>
<header>Title Or Article 02</header>
<p>This the best Website</p>
</article>
</section>
<aside>
<h4>News</h4>
<P>Now open new website
</aside>
<footer>
<p>Copyright By Anothai 2018</p>
</footer>
</div>
</body>
</html>
body{
background:AliceBlue;
font: 100% Ms sans Serif,Times New Roman, Tahoma, Verdana;
border: 1px solid blue;
}
#Container{
background:white;
width:800px;
margin:0 auto;
text-align:left;
}
header{
border:1px solid blue;
background:#99ccff;
padding:0 5px 0 20px;
}
nav{
border:1px solid blue;
background:#cc66ff;
}
nav ul{
margin:5px;
padding:5px;
}
nav ul li{
display:inline;
list-style:none;
padding:20px;
}
section{
float:left;
width:450px;
height:200px;
background:#ffcccc;
}
aside{
float:right;
width:350px;
height:200px;
background:#99ff99;
}
footer{
border:1px solid blue;
background:#99ccff;
text-align:center;
clear:both;
padding:5px;
}