brightfolio
<!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>BrightFolio | About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
body {
font:11pt Arial, Helvetica, sans-serif;
background:url(brightfolio-images/bg_repeat_pattern.jpg) repeat;
margin:0;
padding:0;
}
img {
border:0;
}
a {
color:#fff;
text-decoration:none;
}
#bg_pattern {
background:url(brightfolio-images/bg_pattern.jpg) repeat-x;
}
#bg_wrapper {
width:100%;
background:url(brightfolio-images/large_bg.jpg) no-repeat top center;
}
#bg_wrapper2 {
width:100%;
background:url(brightfolio-images/large_bg2.jpg) no-repeat top center;
}
#container {
width:914px;
margin:auto;
}
#header {
display:inline-block;
margin:35px 0 12px 20px;
}
#logo {
float:left;
height:51px;
width:199px;
text-indent:-999999px;
background:url(brightfolio-images/logo.png) no-repeat;
}
.replace {
position:relative;
overflow:hidden;
}
.replace span {
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
#header ul {
float:right;
margin-left:180px;
}
#header ul li {
display:inline;
margin-left:8px;
}
#header ul li a {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:none;
color:#fff;
text-decoration:none;
padding:6px 15px;
text-shadow:1px 1px 2px #333;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
}
#header ul li a:hover {
background:url(brightfolio-images/hover.png) 0 0 repeat;
}
#header ul li a.active {
background:url(brightfolio-images/active.png) 0 0 repeat;
}
#slideshow {
height:358px;
background:url(brightfolio-images/ss_back.png) no-repeat center;
margin:0 0 20px 0;
}
#slider {
position:relative;
background:url(brightfolio-images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0;
left:0;
display:none;
}
#content_top {
display:block;
height:31px;
background:url(brightfolio-images/c_top.png) center no-repeat;
}
.content {
display:inline-block;
width:900px;
height:100%;
margin:0 0 0 7px;
background:url(brightfolio-images/c_repeat.png) repeat-y;
}
#intro {
display:inline-block;
width:520px;
padding:0 40px;
margin-bottom:60px;
}
#intro h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:13pt;
font-weight:normal;
line-height:1.6em;
color:#fff;
text-decoration:none;
margin:0 0 10px 0;
}
#intro p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ebebeb;
line-height:1.5em;
}
#content_end {
height:53px;
background:url(brightfolio-images/c_bottom.png) center no-repeat;
}
#content_top_page {
display:block;
height:73px;
margin:0;
background:url(brightfolio-images/c_page_top.png) center no-repeat;
}
#content_top_page h1 {
display:inline-block;
font-size:13pt;
font-weight:normal;
line-height:1.6em;
color:#fff;
margin:0 0 0 50px;
padding-top:23px;
}
#content_top_page ul {
display:inline-block;
float:right;
margin-left:180px;
margin-right:30px;
padding-top:11px;
}
#content_top_page ul li {
display:inline;
margin-left:8px;
}
#content_top_page ul li a {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:none;
color:#fff;
text-decoration:none;
padding:6px 15px;
}
.content_page {
display:inline-block;
width:900px;
height:100%;
margin:0 0 0 7px;
background:url(brightfolio-images/c_page_repeat.png) repeat-y;
}
#left {
display:inline-block;
float:left;
width:500px;
padding:15px 20px;
margin-left:13px;
}
#left p {
font-size:12px;
color:#d6d7d7;
line-height:1.6em;
}
#left h1 {
font-size:13pt;
font-weight:normal;
line-height:1.6em;
color:#fff;
margin:40px 0 0 0;
}
#left h2 {
font-size:13pt;
font-weight:normal;
color:#fff;
width:525px;
height:34px;
background:url(brightfolio-images/title_border_btm.png) no-repeat;
}
#left ul li {
font-size:12px;
color:#d6d7d7;
line-height:40px;
}
#left ol li {
font-size:12px;
color:#d6d7d7;
line-height:40px;
}
#left blockquote {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
font-style:italic;
color:#d4d2d2;
line-height:1.6em;
padding:25px;
background:url(brightfolio-images/quote.png) repeat;
border:1px #021c25;
width:400px;
}
#right {
display:inline-block;
float:left;
width:300px;
padding:15px 0;
}
#right ul li {
font-size:12px;
color:#d6d7d7;
line-height:1.6em;
list-style:none;
}
#right span {
font-weight:bold;
}
#right ul li img {
margin:15px 0 15px 0;
}
#right h2 {
font-size:13pt;
font-weight:normal;
color:#fff;
width:253px;
height:37px;
padding:0 20px;
margin:11px 0 0 30px;
background:url(brightfolio-images/title_border_btm_small.png) no-repeat;
}
#right img {
display:inline-block;
float:right;
padding:0 0 13px 0;
}
#contact_btn {
display:inline-block;
float:right;
height:24px;
width:116px;
text-indent:-999999px;
background:url(brightfolio-images/contact_btn.png) no-repeat;
}
#content_end_page {
height:29px;
background:url(brightfolio-images/c_page_bottom.png) center no-repeat;
}
@-moz-document url-prefix() {
#content_end_page {
margin-top:-4px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#content_end_page {
margin-top:-3px;
}
}
.portfolio_spot {
display:inline-block;
list-style:none;
float:left;
width:252px;
}
.portfolio_spot p {
font-size:12px;
color:#d6d7d7;
line-height:1.4em;
}
.portfolio_spot h1 {
font-size:14pt;
font-weight:normal;
line-height:1.3em;
color:#fff;
}
.portfolio_spot ul li {
list-style:none;
font-size:12px;
color:#d6d7d7;
line-height:1.3em;
}
#rss {
float:right;
height:14px;
width:14px;
text-indent:-999999px;
margin: 7px 0 0 15px;
background:url(brightfolio-images/rss_icon.png);
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#rss {
margin:-24px 0 0 15px;
}
}
.thumbnail {
border:20px;
color:#ffffff;
margin:20px 0 0 0;
}
.author {
margin-left:10px;
}
.blog {
display:inline-block;
float:left;
width:560px;
}
.blog h1 a {
font-size:18pt;
font-weight:100;
line-height:1.4em;
width:90%;
color:#fff;
padding:5px 5px;
background:url(brightfolio-images/hover.png) 0 0 repeat;
}
.blog ul {
list-style:none;
}
.blog ul li {
line-height:10px;
font-size:13px;
color:#FFF;
}
.blog p {
font-size:13px;
color:#d6d7d7;
line-height:1.5em;
margin-left:10px;
}
.blog span {
font-size:13px;
color:#ffffff;
margin:0 5px;
}
.readmore {
width:542px;
height:34px;
color:#d6d7d7;
margin:0 0 30px 35px;
padding:8px 0 8px 13px;
background:url(brightfolio-images/read_more.png) no-repeat;
}
.readmore span {
margin:0 5px;
}
.readmore a {
font-size:12px;
color:#7dd7f5;
}
#pagination {
width:542px;
height:53px;
padding:14px 0 8px 13px;
margin:0 0 0 35px;
background:url(brightfolio-images/pagination.png) no-repeat;
}
#pagination span {
margin:0 0 0 20px;
}
#pagination span a {
padding:6px 7px;
}
#pagination span a:hover {
height:26px;
width:20px;
background:url(brightfolio-images/page_active.jpg) no-repeat;
}
#pagination span a.active {
height:26px;
width:20px;
background:url(brightfolio-images/page_active.jpg) no-repeat;
}
#next_arrow {
float:right;
height:28px;
width:16px;
text-indent:-999999px;
margin-right:30px;
background:url(brightfolio-images/page_arrow.png) no-repeat;
}
.sidebar {
display:inline-block;
float:left;
width:270px;
margin:15px 0 0 5px;
}
.sidebar ul {
list-style:none;
font-size:12px;
color:#d6d7d7;
}
.sidebar ul li a {
width:257px;
height:30px;
font-size:12px;
padding:8px;
margin:-5px 0 0 0;
color:#7dd7f5;
}
.sidebar ul li {
height:30px;
width:257px;
padding:3px 0;
background:url(brightfolio-images/sidebar_link.png) no-repeat;
}
#recent_comments {
width:267px;
height:34px;
margin-left:35px;
background:url(brightfolio-images/recent_comments.png) no-repeat;
}
#meta {
width:267px;
height:34px;
margin-left:35px;
background:url(brightfolio-images/meta.png) no-repeat;
}
.search {
width:267px;
height:50px;
padding:10px;
margin-left:35px;
background:url(brightfolio-images/search_bg.png) no-repeat;
}
.input {
background:#081317;
width:165px;
height:26px;
color:#fff;
border:1px #073342;
padding:2px;
}
.search_btn {
height:28px;
width:69px;
margin-left:5px;
border:0;
background:url(brightfolio-images/search_btn.jpg) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#search_container {
display:inline-block;
}
.input {
float:left;
border:0;
margin:0;
}
}
#contact {
margin:30px 0 0 0;
}
.contact_input_back {
width:293px;
height:51px;
padding:10px;
background:url(brightfolio-images/inputbox_back.png) no-repeat;
}
.contact_input {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#081317;
width:250px;
height:26px;
color:#fff;
border:1px #073342;
padding:2px 10px;
margin-bottom:5px;
}
.contact_textarea_back {
width:528px;
height:212px;
padding:10px;
background:url(brightfolio-images/textbox_back.png) no-repeat;
}
.contact_textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#081317;
width:485px;
height:170px;
color:#fff;
border:1px #073342;
padding:10px 10px;
margin-bottom:10px;
}
.submit_btn {
height:26px;
width:85px;
margin-left:5px;
border:0;
background:url(brightfolio-images/submit_btn.jpg) no-repeat;
}
#twitter {
display:inline-block;
float:right;
padding:11px 40px 0 0;
}
#twitter p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
color:#000;
line-height:1.3em;
padding:0 10px;
}
#twitter span {
font-weight:bold;
}
#twit_t {
display:block;
float:left;
height:16px;
width:249px;
background:url(brightfolio-images/twit_t.png) no-repeat;
}
#twit_r {
display:block;
width:249px;
background:url(brightfolio-images/twit_r.png) repeat-y;
}
#twit_b {
display:block;
height:40px;
width:249px;
margin-top:-12px;
background:url(brightfolio-images/twitter_b.png);
}
#follow {
display:inline-block;
margin:22px 0 0 60px;
}
#follow a {
font-size:12px;
color:#FFFFFF;
text-decoration:none;
}
.services {
padding:0 25px;
}
.s_container {
display:inline-block;
width:280px;
}
.services h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:19px;
font-weight:none;
color:#fff;
text-decoration:none;
text-shadow:1px 1px 2px #333;
margin:0 0 5px 35px;
}
#design_ico {
float:left;
width:20px;
height:18px;
margin:3px 0 0 8px;
background:url(brightfolio-images/design_icon.png);
}
#build_ico {
float:left;
width:22px;
height:21px;
margin:3px 0 0 8px;
background:url(brightfolio-images/build_icon.png);
}
#manage_ico {
float:left;
width:22px;
height:20px;
margin:3px 0 0 8px;
background:url(brightfolio-images/manage_icon.png);
}
.title {
display:inline-block;
margin-left:5px;
width:271px;
}
.title_hr {
width:271px;
height:4px;
background:url(brightfolio-images/title_line.png);
}
.service_back {
width:277px;
height:144px;
background:url(brightfolio-images/services_back.png) no-repeat;
}
.service_back p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ebebeb;
line-height:1.6em;
padding:0 13px;
}
.service_back span {
font-weight:bold;
text-decoration:underline;
}
#footer {
padding:15px;
font-size:11px;
text-transform:uppercase;
}
#footer, #footer a {
color:#FFFFFF;
text-decoration:none;
}
#foot_line {
clear:both;
margin:10px 0 0 0;
height:17px;
background:url(brightfolio-images/foot_div.jpg) center;
}
#footer p {
margin:0;
padding:0;
line-height:normal;
}
#footer .lf {
float:left;
}
#footer .rf {
float:right;
}
</style>
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/custom-nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="css/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/IE7styles.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/IE8styles.css" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="bg_pattern">
<div id="bg_wrapper2">
<div id="container">
<div id="header"> <a href="#" id="logo" class="replace"><span>BrightFolio</span></a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="active">About us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content_top_page">
<h1>ABOUT US</h1>
</div>
<div class="content_page">
<div id="left">
<p>Sed eu molestie purus. Maecenas convallis faucibus viverra. Nulla malesuada vestibulum leo, non pharetra lacus cursus sed. Nam semper sagittis leo, vitae pharetra magna ultricies a. Vivamus blandit, tortor et vehicula fringilla, lectus est pellentesque augue, vitae accumsan augue nisl sed nibh. Etiam vel erat leo. Nam tempor posuere mi, congue auctor nisl tincidunt ut. Etiam ut turpis ligula. </p>
<h1>Lorem ipsum dolor sit amet</h1>
<blockquote> Nam sed dui nulla, quis fermentum diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </blockquote>
<h1>LOREM IPSUM</h1>
<p>Cras vel nunc a risus placerat placerat. Proin at sem aliquam enim ultrices blandit. Pellentesque imperdiet facilisis est, sit amet aliquet elit imperdiet nec.</p>
<ul>
<li>Nullam id purus nunc. Donec a erat eget metus condimentum faucibus. </li>
<li>Curabitur blandit accumsan libero, </li>
<li>non vulputate diam sagittis vel</li>
</ul>
<h1>LOREM IPSUM</h1>
<p>Cras vel nunc a risus placerat placerat. Proin at sem aliquam enim ultrices blandit. Pellentesque imperdiet facilisis est, sit amet aliquet elit imperdiet nec.</p>
<ol>
<li>Nullam id purus nunc. Donec a erat eget metus condimentum faucibus. </li>
<li>Curabitur blandit accumsan libero, </li>
<li>non vulputate diam sagittis vel</li>
</ol>
<br />
</div>
<div id="right"> <img src="brightfolio-images/about_stock.jpg" alt="" /> <a href="#" id="contact_btn" class="replace"><span>Contact us</span></a> </div>
</div>
<div id="content_end_page"></div>
<div id="footer">
<p class="lf">Copyright © 2010 <a href="#">Brightfolio</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://devisefunction.com/">Matthew Heidenreich</a></p>
<div id="foot_line"></div>
</div>
</div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category