social-community-management
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Social Community Management | About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
margin:0;
padding:0;
outline:0
}
body {
font:11px/18px Georgia, Palatino, "Times New Roman", Times, Serif;
background:#f4f4f4 url(social-community-management-images/bg.jpg) no-repeat center top;
color:#777;
}
a {
text-decoration:none;
color:#89A213;
}
a:hover {
color:#556314;
}
p {
margin:0 0 15px;
line-height:1.6em;
}
h1 {
float:left;
width:320px;
line-height:1.5em;
font-size:2.7em;
color:#fff;
margin:0 0 20px;
text-shadow:#89A213 1px 1px 1px;
}
h2 {
margin:0 0 15px;
font-size:1.6em;
}
h3 {
margin:0 0 7px;
font-size:1.3em;
clear:both;
color:#444;
line-height:1.3em;
}
h4 {
margin:0 0 10px;
font-size:1.2em;
}
img {
border:0;
}
.x {
clear:both;
}
#content {
margin:0 auto;
width:960px;
}
#header {
height:350px;
}
#top {
padding:13px 0 0;
margin:0 0 60px;
color:#fff;
height:31px;
}
#pitch {
clear:left;
float:left;
width:610px;
font-size:1.2em;
padding:20px 0 0;
color:#59690C;
margin:0 0 60px;
}
#menu {
float:right;
margin:10px 15px 0 0;
}
#menu li {
display:inline;
}
#menu li a {
float:left;
color:#EFF4D7;
font-size:1.2em;
margin:0 0 0 20px;
padding:4px;
}
#menu li a:hover, #menu li a.current {
color:#fff;
border-bottom:1px solid #A5BE2E;
}
#cols {
clear:both;
}
.col {
float:left;
width:300px;
margin:0 39px 30px 0;
}
.last {
position:relative;
float:right;
margin:-76px 0 0;
background:#fff;
width:280px;
}
.col.last div {
padding:12px;
}
.img {
clear:both;
margin:0 0 15px;
border:1px solid #ddd;
padding:5px;
}
.date {
margin:0 0 12px;
color:#444;
}
.col h4 {
background:#83981F;
padding:15px;
color:#fff;
}
#main {
float:left;
clear:both;
width:640px;
font-size:1.2em;
}
.left {
float:left;
margin:0 30px 10px 0;
}
#main p {
text-align:justify;
}
#footer {
clear:both;
border-top:1px solid #ddd;
color:#999;
padding:35px 0 15px 0;
}
#footer a {
margin:0;
color:#999;
}
#footer .left {
float:left;
}
#footer .right {
float:right;
}
</style>
</head>
<body>
<div id="content">
<p id="top">Duis aute irure dolor in reprehenderit in voluptate</p>
<h1>Social Community Management</h1>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="#">Media Presence</a></li>
<li><a href="#">Social Networks</a></li>
<li><a href="#">Blog</a></li>
<li><a class="current" href="about-us.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="pitch">
<p>Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
</div>
<div id="main">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<img src="social-community-management-images/img.gif" class="img left" alt="" />
<p>Nunc eget nunc libero. Nunc commodo euismod massa quis vestibulum. Proin mi nibh, dignissim a pellentesque at, ultricies sit amet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel lorem eu libero laoreet facilisis. Aenean placerat, ligula quis placerat iaculis, mi magna luctus nibh, adipiscing pretium erat neque vitae augue. Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
<p>Aenean placerat, ligula quis placerat iaculis, mi magna luctus nibh, adipiscing pretium erat neque vitae augue. Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum. </p>
<div class="x"></div>
</div>
<div class="col last">
<h4>Lorem ipsum dolor sit amet</h4>
<div>
<p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">»</a></p>
<p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">»</a></p>
<p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">»</a></p>
</div>
</div>
<div id="footer">
<p class="left">Copyright © 2010, Your Company Here, All Rights Reserved</p>
<p class="right"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.solucija.com/">Solucija</a></p>
<div class=".x"></div>
</div>
</div>
</body>
</html>
Related examples in the same category