Page Trial #2
by sapioit
HTML
<div id="wrapper">
<div id="header">
<div class="navBar">
<div class="Hbar"></div>
<div class="fullLogo"></div>
<ul class="navMenu">
<li class="elem"><a href="#">Home</a></li>
<li class="elem"><a href="#">Blog</a></li>
<li class="elem"><a href="#">Portfolio</a></li>
<li class="elem"><a href="#">Prices</a></li>
<li class="elem"><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="sidebar">
<div class="sidebarElem">SidebarElem</div>
<div class="sidebarElem">SidebarElem</div>
<div class="sidebarElem">SidebarElem</div>
</div>
<div id="contentWrapper">
<!-- <div id="slideShow"></div> -->
<a href="#" class="news">
<div class="news">
<h3>Title fda gfsdsg fa sdg ag sdf sa fdas fsa fad s</h3>
<img src="" alt="">
<div class="aText">LoremIpsum dag dag fd a dag sda ggfd hfd gfda gdaf a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda ggfd hfd gfda gdaf a a f ds fdsa fsda fsd fsa fsa fs dfadfd a dag sda ggfd hfd gfda gdaf a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda gg a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda gg a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda gg a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda gg </div>
<div class="readMore">Read More</div>
</div>
</a><a href="#" class="news">
<div class="news">
<h3>Title fda gfsdsg fa sdg ag sdf sa fdas fsa fad s</h3>
<img src="" alt="">
<div class="aText">LoremIpsum dag dag fd a dag sda ggfd hfd gfda gdaf a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda ggfd hfd gfda gdaf a a f ds fdsa fsda fsd fsa fsa fs dfadfd a dag sda ggfd hfd gfda gdaf a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda gg a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda gg a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda gg a a f ds fdsa fsda fsd fsa fsa fs dfad dag sda gg </div>
<div class="readMore">Read More</div>
</div>
...
CSS
@import url(http://fonts.googleapis.com/css?family=Roboto);
body{
font-family: 'Roboto', sans-serif, sans, Verdana;
background: #fff;
}
#wrapper{
max-width: 960px;
padding: 0;
margin: 0 auto;
}
.Hbar{
background: #4679BD;
height: 5px;
width: 100%;
padding: 0;
margin: 0;
}
.navBar{
display: block;
/*background: #444;*/
padding: 0;
margin: 0;
width: 100%;
height: 65px;
}
.fullLogo{
width: 60px;
height: 60px;
float: left;
background: url('');
-webkit-transition: background 0.7s linear 0.3s; /* For Safari 3.1 to 6.0 */
transition: background 0.7s linear 0.3s;
}
.fullLogo:hover{
background: #4679BD;
-webkit-transition: background 0.1s linear 0s; /* For Safari 3.1 to 6.0 */
-o-transition: background 0.3s linear 0s; /* For Opera */
transition: background 0.3s linear 0s;
}
.navMenu{
float: right;
border: none;
list-style: none;
margin: 0;
padding: 0;
font-size: 20px;
line-height: 40px;
display: inline-block;
}
.navMenu li{
float:right;
border: none;
margin 0;
padding: 0;
display: inline-block;
}
.navMenu a{
border: none;
margin: 0;
padding: 10px;
display: inline-block;
text-decoration: none;
color: #888;
-webkit-transition: color 1.5s linear 0s, background 0.3s linear 0.1s; /* For Safari 3.1 to 6.0 */
-o-transition: color 1.5s linear 0s, background 0.3s linear 0.1s; /* For Opera */
transition: color 1.5s linear 0s, background 0.3s linear 0.1s;
}
.navMenu a:hover{
color: #fff;
background: #4679BD;
-webkit-transition: color 0.2s linear 0s; /* For Safari 3.1 to 6.0 */
-0-transition: color 0.2s linear 0s; /* For Opera */
transition: color 0.2s linear 0s;
}
#content{
width: 100%;
background: #ddd;
padding: 0 auto;
margin: 20px 0;
}
#contentWrapper{
width: 70%;
height: 100%;
baclground: #579;
}
#sidebar{
width: 30%;
height: 100%;
float: right;
background:...