konnekt-media
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Konnekt Media | About</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type='text/css'>
@import url('reset.css');
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#939393;
}
a {
color:#32A700;
font-weight:bold;
}
a:hover {
color:#0D112F;
}
blockquote {
margin:22px 0;
padding:3px;
padding:0 40px;
background:transparent url(konnekt-media-images/blockquote.gif) no-repeat;
}
.box-holder-content blockquote {
margin:15px 30px;
padding:0 40px;
text-align:left;
background:transparent url(konnekt-media-images/blockquote.gif) no-repeat;
}
.wrapper {
float:left;
margin:0 auto;
width:100%;
}
.right {
float:right;
}
.left {
float:left;
}
.padding-separator {
padding-top:25px;
padding-bottom:22px;
}
.margin-separator {
margin-top:22px;
margin-bottom:22px;
}
.header-holder {
float:left;
margin:0 auto;
background:url(konnekt-media-images/header_bg.png) repeat-x;
height:128px;
width:100%;
}
.slider-holder, .main-content-holder {
float:left;
margin:0 auto;
width:100%;
background:#fff url(konnekt-media-images/featured-work.png) repeat-x bottom;
}
.main-content-holder {
padding:50px 0;
}
.content-holder {
float:left;
margin:0 auto;
width:100%;
background:url(konnekt-media-images/content-holder.png) repeat-x top;
}
.main-content {
width:960px;
margin:0 auto;
text-align:left;
}
.left-column {
float:left;
width:279px;
text-align:center;
}
.main {
float:right;
width:658px;
}
.main ul {
list-style:disc;
padding:10px 20px;
color:#0D112F;
font-weight:bold;
display:block;
}
.main ul li {
color:#939393;
font-weight:bold;
padding:5px;
}
.footer-holder {
float:left;
margin:0 auto;
width:100%;
background:#fff url(konnekt-media-images/footer.png) repeat-x top;
}
.footer-holder-copyright {
float:left;
margin:0 auto;
width:100%;
background:#fff;
padding:30px 0;
}
.footer-copyright {
margin:0 auto;
width:960px;
}
.footer-copyright a {
color:#939393;
font-weight:normal;
text-decoration:none;
}
.footer-copyright a:hover {
text-decoration:none;
}
.footer-copyright p {
margin:0;
padding:0;
line-height:normal;
}
.footer-copyright .lf {
float:left;
}
.footer-copyright .rf {
float:right;
}
.footer {
height:266px;
}
.header, .content, .footer {
width:960px;
margin:0 auto;
}
.content {
height:270px;
}
.separator-50px {
margin-top:64px;
height:280px;
}
.header a.logo {
float:left;
background:url(konnekt-media-images/logo.png) no-repeat left top;
width:232px;
height:37px;
text-indent:-9999px;
overflow:hidden;
display:block;
margin-top:25px;
}
.header ul.header-menu {
float:right;
}
.header ul.header-menu li {
float:left;
height:74px;
text-align:center;
padding:0 10px;
display:inline;
}
.header ul.header-menu li a {
color:#0D112F;
font-size:16px;
font-weight:bold;
letter-spacing:-1px;
line-height:100px;
text-align:center;
height:74px;
display:block;
float:left;
}
.header ul.header-menu li a:hover, .header ul.header-menu li a.selected {
color:#32A700;
}
.open-close {
background:url(konnekt-media-images/open-close.png) no-repeat center;
width:24px;
height:24px;
margin:0 auto;
padding:25px 0;
cursor:pointer;
}
.slider {
margin:0 auto;
width:960px;
text-align:left;
}
div.featured-work {
float:left;
width:55%;
}
div.featured-work ul li {
display:inline;
}
.box-holder-top {
background:url(konnekt-media-images/box-holder-top.png) no-repeat top left;
padding:15px 0 0 0;
width:319px;
float:left;
display:block;
}
div.box-holder {
width:320px;
float:left;
}
div.box-holder-content {
background:url(konnekt-media-images/box-holder.png) repeat-y top left;
width:319px;
float:left;
padding:0;
height:105px;
text-align:left;
}
div.box-holder-content p {
margin-left:30px;
margin-right:30px;
text-align:left;
}
div.box-holder-content p span {
float:right;
display:block;
width:200px;
}
div.box-holder-bottom {
background:url(konnekt-media-images/box-holder-bottom.png) no-repeat top left;
height:47px;
width:319px;
float:left;
display:block;
}
div.box-holder-bottom-footer {
background:url(konnekt-media-images/box-holder-bottom-footer.png) no-repeat top left;
height:47px;
width:319px;
float:left;
display:block;
}
div.box-holder-bottom a, div.box-holder-bottom-footer a {
text-transform:uppercase;
color:#fff;
text-shadow:0 1px 2px #000000;
line-height:57px;
}
div.box-holder-bottom a:hover, div.box-holder-bottom-footer a:hover {
color:#fff;
}
.sIFR-hasFlash h1.h1-main-page {
font-size:50px;
line-height:50px;
text-transform:uppercase;
}
.sIFR-hasFlash h2.h2-main-page {
font-size:32px;
line-height:32px;
display:block;
margin:15px 0;
text-transform:uppercase;
}
a.green-button {
color:#fff;
text-align:center;
background:url(konnekt-media-images/green-button.png) no-repeat;
float:left;
display:block;
width:212px;
font-weight:bold;
line-height:45px;
height:45px;
text-transform:uppercase;
text-shadow:0 1px 2px #000000;
}
a.green-button:hover, a.blue-button:hover {
color:#fff;
}
a.blue-button {
color:#fff;
text-align:center;
background:url(konnekt-media-images/blue-button.png) no-repeat;
float:left;
display:block;
width:212px;
font-weight:bold;
line-height:45px;
height:45px;
text-transform:uppercase;
text-shadow:0 1px 2px #000000;
margin-left:20px;
}
div.box-holder h1 {
width:auto;
height:auto;
float:none;
font-size:36px;
}
span.h1-separator {
background:url(konnekt-media-images/h1-separator.png) no-repeat center center;
display:block;
float:left;
width:320px;
height:9px;
}
div.box-holder-content a {
display:block;
margin:0 30px;
}
div.box-holder-content em {
display:block;
margin:0 30px 10px 30px;
}
p {
margin:1em 0;
text-align:left;
}
.left-column .title {
background:url(konnekt-media-images/left-title.png) no-repeat top;
width:279px;
padding:15px 0 0 0;
height:45px;
}
.left-column .title h4 {
}
.left-column ul.left-content {
background:url(konnekt-media-images/left-column.png) repeat-y top;
width:277px;
float:left;
display:block;
position:relative;
}
.left-column div.left-content {
background:url(konnekt-media-images/left-column.png) repeat-y top;
width:279px;
float:left;
display:block;
position:relative;
}
.left-column ul.left-content li {
background:url(konnekt-media-images/separator-left-column.png) no-repeat top center;
display:block;
line-height:50px;
height:50px;
width:242px;
margin:0 auto;
}
.left-column ul.left-content-contact li {
background:url(konnekt-media-images/separator-left-column-contact.png) no-repeat bottom center;
display:block;
height:97px;
line-height:97px;
width:242px;
margin:0 auto;
}
.left-column ul.left-content li a {
color:#0D112F;
font-size:14px;
}
.left-column ul.left-content li a.quote {
background:url(konnekt-media-images/quote.png) no-repeat center top;
color:#0D112F;
font-size:14px;
width:242px;
height:82px;
display:block;
padding-top:20px;
margin-top:10px;
}
.left-column ul.left-content li a.brochure {
background:url(konnekt-media-images/download-brochure.png) no-repeat center top;
color:#0D112F;
font-size:14px;
height:82px;
display:block;
padding-top:20px;
margin-top:10px;
width:242px;
}
.left-column ul.left-content li a:hover, .left-column ul.left-content li a.selected {
color:#32A700;
}
.left-column .bottom {
background:url(konnekt-media-images/left-column-bottom.png) no-repeat top;
width:279px;
height:14px;
display:block;
float:left;
}
.left-column address {
margin:0 2px;
}
.clear-right {
clear:right;
}
.clear-left {
clear:left;
}
.image-services {
height:120px;
background:url(konnekt-media-images/websites.jpg) no-repeat center center;
float:left;
width:100px;
}
.image-applications {
height:120px;
background:url(konnekt-media-images/applications.jpg) no-repeat center center;
float:left;
width:100px;
}
.image-media {
height:120px;
background:url(konnekt-media-images/motion-graphics.jpg) no-repeat center center;
float:left;
width:100px;
}
.boxgrid h4 {
color:#0D112F;
font-size:14px;
font-weight:bold;
padding:15px 15px 0 15px;
}
.boxgrid {
width:323px;
height:286px;
margin:10px 0;
overflow:hidden;
position:relative;
}
.boxgrid img {
position:absolute;
top:0;
left:0;
border:0;
cursor:pointer;
}
.boxgrid p {
padding:0 15px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxgrid a {
padding:15px;
text-decoration:underline;
}
.boxcaption {
float:left;
position:absolute;
background:#000;
height:100px;
width:100%;
opacity:.8;
}
.captionfull .boxcaption {
top:260px;
left:0;
}
.caption .boxcaption {
top:220px;
left:0;
}
a.view-larger-image {
display:block;
clear:both;
vertical-align:bottom;
}
.main img {
padding:5px;
border:1px solid #ccc;
}
.form-contact {
width:430px;
float:left;
}
.form-contact .holder {
margin:5px 0;
float:left;
}
.form-contact em {
margin:15px;
display:block;
float:left;
}
.error, .succes {
background:#32A700;
display:block;
float:left;
text-align:center;
color:#fff;
width:100%;
padding:5px;
}
.green {
color:#32A700;
}
input:focus, textarea:focus {
border-color:#32A700;
}
input {
padding:5px;
border:1px solid #ccc;
width:500px;
line-height:1.7em;
float:left;
color:#403F41;
height:30px;
}
.form-contact input.send {
border:0;
background:url(konnekt-media-images/send-btn.png) no-repeat left top;
width:112px;
height:45px;
text-align:center;
line-height:45px;
cursor:pointer;
color:#FFF;
text-shadow:0 1px 2px #000000;
text-transform:uppercase;
padding:0;
margin:0;
}
textarea {
padding:5px;
border:1px solid #ccc;
width:500px;
float:left;
color:#403F41;
}
label {
float:left;
line-height:1.25em;
margin:0 8px 0 0;
padding:6px 0;
text-align:left;
width:80px;
}
.slideshow-back {
width:380px;
height:230px;
background:url(konnekt-media-images/slideshow-back.png) no-repeat;
float:right;
padding:0 10px 10px 17px;
margin-top:-5px;
}
address span {
margin:10px 0;
display:block;
}
img.map {
margin-top:15px;
}
span.date-comments {
font-size:11px;
font-style:italic;
margin:10px 0 20px 0;
display:block;
color:#939393;
}
.holder-separator {
margin-bottom:30px;
}
h1, h2, h3, h4, h5 {
font-family:Helvetica, Arial, Verdana, sans-serif;
font-weight:bold;
letter-spacing:-.05em;
margin:0;
padding:0;
line-height:1em;
}
#container {
}
#main {
margin:.5em 20px 0 20px;
border-top:1px solid #000;
text-align:left;
padding:20px 0;
}
#left {
float:left;
width:140px;
margin:0 20px 14px 0;
background-color:#DCDCDC;
border:3px double #FFF;
font-size:10px;
line-height:1.4em;
}
.gutter {
margin:10px;
}
#right {
float:right;
width:120px;
margin:0 0 14px 20px;
}
#center {
}
#pullquote {
float:right;
margin:0 0 .4em 1em;
width:145px;
font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
font-size:20px;
line-height:1.3em;
}
.sIFR-flash {
visibility:visible !important;
margin:0;
}
.sIFR-replaced {
visibility:visible !important;
}
span.sIFR-alternate {
position:absolute;
left:0;
top:0;
width:0;
height:0;
display:block;
overflow:hidden;
}
.sIFR-flash + div[adblocktab=true] {
display:none !important;
}
.sIFR-hasFlash h1 {
visibility:hidden;
font-size:36px;
padding:0;
line-height:36px;
}
.sIFR-hasFlash h2 {
visibility:hidden;
font-size:30px;
line-height:30px;
margin:20px 0;
}
.sIFR-hasFlash h3 {
visibility:hidden;
font-size:24px;
line-height:24px;
margin:15px 0;
}
.clear {
clear:both;
}
h3 a {
}
.sIFR-hasFlash .title h4 {
font-size:24px;
line-height:24px;
}
.sIFR-hasFlash .title h4 a {
font-size:14px;
}
.sIFR-hasFlash h5#pullquote {
letter-spacing:-4px;
visibility:hidden;
font-size:24px;
}
</style>
<script src="sifr/sifr.js" type="text/javascript"></script>
<script src="sifr/sifr-addons.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.localscroll.js" type="text/javascript"></script>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/styleIE7.css" /><![endif]-->
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<link rel="stylesheet" type="text/css" href="css/styleIE6.css">
<script>DD_belatedPNG.fix('*')</script>
<![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="wrapper">
<div class="header-holder">
<div class="header padding-separator"> <a href="#" class="logo padding-separator">Konnekt media</a>
<ul class="header-menu" id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="our-work.html">Our Work</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div class="main-content-holder">
<div class="main-content">
<div class="left-column">
<div class="title">
<h4>About</h4>
</div>
<ul class="left-content">
<li><a href="#">Company</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Our Philosophy</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
<div class="bottom"></div>
</div>
<div class="main">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p><strong>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</strong> Lorem Ipsum has been the industry?s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p><strong>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</strong> Lorem Ipsum has been the industry?s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<h3>List styling</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
<li>Nullam ultrices lectus a neque gravida pharetra.</li>
<li>Suspendisse eget purus nec mi laoreet molestie vel</li>
<li>Phasellus varius purus venenatis nulla convallis</li>
<li>Phasellus fermentum vestibulum turpis, sit amet </li>
</ul>
<h3>Testimonials</h3>
<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget felis nisl. Sed eu pharetra nunc. Ut mollis, justo at bibendum tristique, mauris tellus vulputate arcu, ac elementum lacus arcu ac enim. </blockquote>
<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget felis nisl. Sed eu pharetra nunc. Ut mollis, justo at bibendum tristique, mauris tellus vulputate arcu, ac elementum lacus arcu ac enim. </blockquote>
</div>
</div>
</div>
<div class="content-holder">
<div class="open-close"></div>
<div class="content">
<div class="left box-holder">
<div class="box-holder-top">
<h1>Websites</h1>
<span class="h1-separator"></span> </div>
<div class="box-holder-content">
<p> <img src="konnekt-media-images/websites.jpg" alt="" class="left"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span> </p>
</div>
<div class="box-holder-bottom"><a href="#">View our services</a></div>
</div>
<div class="center box-holder">
<div class="box-holder-top">
<h1>Applications</h1>
<span class="h1-separator"></span> </div>
<div class="box-holder-content">
<p> <img src="konnekt-media-images/applications.jpg" alt="" class="left"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span> </p>
</div>
<div class="box-holder-bottom"><a href="#">View our services</a></div>
</div>
<div class="right box-holder">
<div class="box-holder-top">
<h1>Motion Graphics</h1>
<span class="h1-separator"></span> </div>
<div class="box-holder-content">
<p> <img src="konnekt-media-images/motion-graphics.jpg" alt="" class="left"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span> </p>
</div>
<div class="box-holder-bottom"><a href="#">View our services</a></div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer-holder">
<div class="open-close"></div>
<div class="footer">
<div class="left box-holder">
<div class="box-holder-top">
<h1>News</h1>
<span class="h1-separator"></span> </div>
<div class="box-holder-content">
<p> <a href="#">Lorem Ipsum is simply dummy text</a> <em>02 october 2009 / 20 comments</em> <a href="#">Lorem Ipsum is simply dummy text</a> <em>02 october 2009 / 20 comments</em> </p>
</div>
<div class="box-holder-bottom-footer"><a href="#">View our blog</a></div>
</div>
<div class="center box-holder">
<div class="box-holder-top">
<h1>Twitter</h1>
<span class="h1-separator"></span> </div>
<div class="box-holder-content">
<p> <a href="#">Lorem Ipsum is simply dummy text</a> <em>about 3 hours ago</em> <a href="#">Lorem Ipsum is simply dummy text</a> <em>about 3 hours ago</em> </p>
</div>
<div class="box-holder-bottom-footer"><a href="#">Follow us on Twitter</a></div>
</div>
<div class="right box-holder">
<div class="box-holder-top">
<h1>Testimonials</h1>
<span class="h1-separator"></span> </div>
<div class="box-holder-content">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget felis nisl. Sed eu pharetra nunc. Sed eu pharetra nunc.</blockquote>
</div>
<div class="box-holder-bottom-footer"><a href="#">Read our testimonials</a></div>
</div>
</div>
</div>
<div class="footer-holder-copyright">
<div class="footer-copyright">
<p class="lf">Copyright © 2009 <a href="#">Konnekt Media</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.gogothemes.com/">GogoThemes</a></p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"body h1.h1-main-page", sFlashSrc:"sifr/h1-main-page.swf", sColor:"#0D112F", sLinkColor:"#6F6F6F", sBgColor:"#FFFFFF", sHoverColor:"#C90000", sWmode:"transparent"}));
sIFR.replaceElement(named({sSelector:"body h2.h2-main-page", sFlashSrc:"sifr/h2-main-page.swf", sColor:"#32A700", sLinkColor:"#C90000", sBgColor:"#FFFFFF", sHoverColor:"#6F6F6F", sWmode:"transparent"}));
sIFR.replaceElement(named({sSelector:".box-holder-top h1", sFlashSrc:"sifr/h1.swf", sColor:"#0D112F", sLinkColor:"#0D112F", sBgColor:"#FFFFFF", sHoverColor:"#0D112F", sWmode:"transparent", sFlashVars:"textalign=center"}));
sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"sifr/h1.swf", sColor:"#0D112F", sLinkColor:"#0D112F", sBgColor:"#FFFFFF", sHoverColor:"#0D112F", sWmode:"transparent"}));
sIFR.replaceElement(named({sSelector:"body h2", sFlashSrc:"sifr/h2.swf", sColor:"#32A700", sLinkColor:"#32A700", sBgColor:"#FFFFFF", sHoverColor:"#32A700", sWmode:"transparent"}));
sIFR.replaceElement(named({sSelector:"body h3", sFlashSrc:"sifr/h3.swf", sColor:"#0D112F", sLinkColor:"#0D112F", sBgColor:"#FFFFFF", sHoverColor:"#0D112F", sWmode:"transparent"}));
sIFR.replaceElement(named({sSelector:".title h4", sFlashSrc:"sifr/left-title.swf", sColor:"#FFFFFF", sLinkColor:"#FFFFFF", sBgColor:"#FFFFFF", sHoverColor:"#FFFFFF", sWmode:"transparent", sFlashVars:"textalign=center"}));
}
jQuery(function () {
jQuery('.content-holder .open-close').click(function (event) {
event.preventDefault();
jQuery(this).parent().parent().find('.content').slideToggle('slow');
return false;
});
jQuery.localScroll({
duration: 500,
target: jQuery(window)
});
jQuery('.footer-holder .open-close').click(function (event) {
event.preventDefault();
jQuery(this).parent().parent().find('.footer').slideToggle('slow');
return false;
});
jQuery.localScroll({
duration: 500,
target: jQuery(window)
});
jQuery('.footer-holder .open-close, .content-holder .open-close').parent().parent().find('.footer, .content').hide("slow");
});
</script>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category