Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<link rel="stylesheet" href="main2.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Welcome to thenewboston!</h1>
</header>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>Tutorial</li>
<li>Podcast</li>
</ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of article</h1>
<h2>Subtitle for article</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p> written by Zoloo</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Title of article 2</h1>
<h2>Subtitle for article 2</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p> written by Zoloo</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
Bucky has a new dog!
</aside>
</div>
<footer id="the_footer">
Copyright thenewboston 2011
</footer>
</div>
</body>
</html>
Main2.css
*{
margin:0px;
padding: 0px;
}
h1{ font: bold 20px Tahoma; }
h2{ font: bold 14px Tahoma; }
header, section, footer, aside, nav, article, hgroup{
display:block;
}
body{
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width:1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: yellow;
border: 3px solid black;
padding: 20px;
}
#top_menu{
border: red;
background:blue;
color: white;
}
#top_menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px Tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#main_section{
border: 1px solid blue;
-webkit-box-flex: 1;
margin: 20px;
padding:20px;
}
#side_news{
border: 1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding:20px;
border-top: 2px solid green;
}
No comments:
Post a Comment