<body>
<div id="header">
<div id="clock">
<div id="position">
<div id="London" class="cityTimeDate"></div>
</div><!-- close position -->
</div><!-- close clock -->
<div id="title">
<h1>Travel Secrets</h1>
</div><!-- close title -->
</div><!-- close header -->
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li><a href="#">Option 6</a></li>
<li><a href="#">Option 7</a></li>
<li><a href="#">Option 8</a></li>
</ul>
</div><!-- close nav -->
<div id="wrapper">
<div id="main">
<section>
<div class="img-container">
<img src="https://placehold.it/375x210" alt="" width="375" height="210">
</div>
<div class="main text">
<h2>How to get the lowest <br> hotel rates anywhere</h2>
<h4>Jorge Bravo 7/03/2014 36 Comments</h4>
<p>
Despite the abundance of travel sites offering the best and cheapest prices,
the fact remains that most major hotel chains guarantee the lowest Internet
rates, if they are booked in their websites. </p>
</div><!-- close main text -->
</section>
<section>
<div class="img-container">
<img src="https://placehold.it/375x210" alt="" width="375" height="210">
</div>
<div class="main text">
<h2>Do not disturb my bags</h2>
<h4>Camilo Barros 7/03/2014 36 Comments</h4>
<p>
The first thing many travellers do on arrival at a hotel is to unpack and place their carefully chosen clothes and accessories in the various cupboards and drawers available in the hotel room. Hopefully, they will still be there when it is time to leave.</p>
</div><!-- close main text -->
</section>
</div><!-- close Main -->
<div id="side">
<div id="inside">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div><!-- close inside -->
</div><!-- close side -->
</div><!-- close wrapper -->
<div id="footer">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</div>
</body>body, html {
margin:0;
padding:0;
}
#header{
width:100%;
height:auto;
background-color:brown;
}
#title h1 {
float: none;
text-align:center;
font-size: 40px;
font-family: 'Times New Roman', Times, Baskerville, Georgia, serif;
line-height: 30px;
font-weight: bold;
color: #E1E19D;
padding: 3em 1em;
margin: 0;
}
#clock {
float:left;
width: 170px;
height:140px;
background-color:#A52A2A;
background: #f00; /* temp, just so you see it */
padding-top:65px;
margin-left:60px;
}
#clock #position{
float:left;
text-align:center;
margin-top:5px;
margin-left:20px;
color:white;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.cityTimeDate span {
display:block;
}
#city {
font-size:16px;
color:white;
}
#time {
font-size:36px;
color:#CDCD5C;
}
#nav{
width:100%;
background-color:#CD853F;
text-align:center;
padding:60px 0;
}
#nav ul {
margin-top:-10px;
list-style:none;
padding-bottom:25px;
}
#nav li {
display:inline;
padding:0 30px;
}
#nav li a{
text-decoration:none;
color:white;
}
#wrapper{
display: table;
}
#main{
display: table-cell;
width:70%;
background-color:white;
padding: 1em;
}
#main section {
display: table;
max-width: 700px;
float: right;
margin-bottom: 2em;
}
#main section div{
display: table-cell;
vertical-align: top;
}
.img-container{
margin:0 auto;
border:none;
padding-top:0;
margin-top: 25px;
max-width: 375px;
width: 50%;
}
.img-container img{
width:100%;
height:auto;
padding-top: 1.6em;
}
#main .text{
display:inline-block;
font-weight:400;
padding-left:40px;
}
#main .text p{
max-width:500px;
}
#main .text h2{
font-family: 'Roboto Slab', serif;
font-weight:400;
font-size:25px;
}
.clear{
clear:both;
}
#side{
display: table-cell;
width:30%;
vertical-align: top;
height:auto;
background-color:#F1F1F1;
}
#inside{
width:80%;
background-color:white;
margin:0 auto;
}
#inside p{
padding:20px;
}
#footer {
clear:both;
text-align:center;
background:#cc9;
}
#footer ul {
list-style:none;
}
#footer li {
display:inline;
}
#footer li a{
text-decoration:none;
}
@media screen and (max-width: 950px) {
#main section {
display: block;
width: auto;
float: none;
margin: 0 auto;
}
#main section div {
display: block;
margin: 0;
padding: 0;
}
.img-container,
#main .text {
display: block;
width: 95%;
padding: 0;
}
}
@media screen and (max-width: 700px) {
#wrapper,
#main,
#side {
display: block;
width: auto;
vertical-align: baseline;
}
}
@media screen and (max-width: 450px) {
#clock {
float: none;
margin: 0 auto;
padding-top: 0.5em;
}
#title h1 {
padding: 1em;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.