<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Travel the World - Blog</title>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<header>
<h1>Let's Travel the World!</h1>
<h2>It's the Journey AND the Destination</h2>
</header>
<nav>
<ul>
<li class="home"><a href="index.html">Home</a></li>
<li class="tutorials"><a href="destination.html">Desination</a>
<ul>
<li><a href="washington.html">Washington</a></li>
<li><a href="paris.html">Paris</a></li>
<li><a href="london.html">London</a></li>
</ul>
</li>
<li class="special"><a href="special.html">Special</a></li>
<li class="blog"><a class="active" href="blog.html">Blog</a>
</li>
<li class="contact"><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<figure class="lisbon">
<img src="http://www.charmingasiatours.com/wp-content/uploads/2013/05/lisbon-portugal.jpg" width="199" height="200" alt="Commerce Square in Lisbon">
<figcaption>Commerce Square in Lisbon, Portugal</figcaption>
</figure>
<main>
<article>
<h2>Just Got Back from Portugal!</h2>
<p class="postdate">POSTED: <time datetime="2013-06-24">June 24, 2013</time></p>
<p>We visited beautiful Portugal in <time datetime="2013-06">June of 2013</time> and had a wonderful trip.</p>
<p>Lisbon is a gorgeous city, full of plazas, cafes, museums, and nightlife. Not to mention the restaurants! Unfortunately, we didn't arrive until <time datetime="2013-06-12">June 12</time>, thus missing the Portugal Day holiday celebration, which is every <time datetime="06-10">June 10</time>.</p>
<p>Our favorite part of the trip was enjoying the views of the city from Tram 28. We had heard from other travelers that the best time to ride the tram is in the early morning, from <time datetime="06:00">6:00am</time> to <time datetime="09:00">9:00am</time>, before the crowds are heavy. This turned out to be great advice.</p>
<p>On our final day, we wanted to visit the beaches in Cascais, about 20 miles west of Lisbon, but our departing flight was at <time datetime="15:00">3:00pm</time>, so there just wasn't enough time. All the excuse we need to return for another visit in the future!</p>
<p>Tired but happy, we arrived back in Chicago at <time datetime="2013-06-19T07:00-06:00">7:00am on June 19</time>.</p>
</article>
</main>
<div class="clearfloat"></div>
<footer>
<p>© Travel The World LLC<br>123 Main Street<br>Somewhere, USA 99999</p>
</footer>
</body>
</html>
body {
margin: 0;
padding: 0font-family: Verdana, Geneva, sans-serif;
width:800px;
}
header {
background-color: #009999;
height: 100px;
text-align:center;
}
footer {
background-color: #FFD073;
height: 60px;
text-align: center;
width:100%;
}
.lisbon {
float: right;
margin: 10px 10px 10px 20px; /*This creates the margin between the aside section and the main content.*/
}
.lisbon figcaption {
color: #FFAA00;
font-size: 14px;
width: 200px;
text-align: center;
}
.postdate {
color: #FFAA00;
font-size: 16px;
font-weight: bold;
margin: 5px 0px;
}
h1 {
color: white;
text-align: center;
font-size: 32px;
padding-top: 5px;
margin-top: 0; /*This prevents there being an empty gap between the page content and the browser tab above.*/
margin-bottom: 5px;
}
h2 {
font-size: 20px;
margin: 0;
padding: 10px;
color: #FFAA00;
}
footer p {
font-size: 12px;
color: #A64B00;
margin: 0;
padding-top: 5px;
}
nav ul {
list-style: none;
background-color: #FFD073;
text-align: center;
padding: 0;
margin: 0;
}
nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
nav a:hover {
background-color: #009999;
}
nav a.active {
background-color: #005f5f;
cursor: default;
}
/* Sub Menus */
nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
@media screen and (min-width: 650px) {
nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
nav a {
border-bottom: none;
text-decoration:none;
}
nav > ul > li {
text-align: center;
}
nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
nav li ul {
position: absolute;
display: none;
width: inherit;
}
nav li:hover ul {
display: block;
}
nav li ul li {
display: block;
}
}
main {
padding: 10px;
background-color: #006363;
}
main p{
font-size: 14px;
}
