Proper
Design "Proper"
<---- Zurück
Infos zum diesem Design:
Das Design ist ein ein wirklich sehr tolles. Es bietet viele Möglichkeiten und es ist sehr modern.
Ihr dürft alle Grafiken austauschen! - Das Copyright von turbopage muss stehen bleiben!
Text über dem Design:
<head> <script src="http://www.loaditup.de/files/777005_ugdxhud4ta.js"></script> <script src="http://www.loaditup.de/files/777003_wg5ryyym5v.js"></script> <script src="http://www.loaditup.de/files/777002_wztnnuzzzs.js"></script> </head> <body> <div id="wrapper"> <div class="shell"> <div class="container"> <header class="header"> <h1 id="logo"><a href="#">Proper</a></h1> <nav id="navigation"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Über uns</a></li> <li> <a href="#">Untermenü1<span></span></a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Blog</a></li> </ul> </li> <li> <a href="#">Untermenü2<span></span></a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Blog</a></li> </ul> </li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> <li> <a href="#">Untermenü3<span></span></a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Blog</a></li> </ul> </li> </ul> </nav> <div class="cl"> </div> </header> <div class="main"> <div class="flexslider"> <ul class="slides"> <li> <img src="http://www.loaditup.de/files/777259_4cmna4mbcd.jpg" alt=""> <div class="slide-cnt"> <h2>Lorem Ipsum Dolor <br> Amet Consectetur</h2> <p>Sed vel lacus lorem, non auctor ante. Aliquam posuere libero non felis euismod ac volutpat augue ullamcorper. Suspendisse convallis mi eget leo laoreet eu tincidunt metus sollicitudin. Proin vulputate pharetra porttitor. Quisque eu nisi dolor. Donec ipsum libero, impect lipsum dolor.</p> </div> <a href="#" class="slider-btn"><span>Order Now</span></a> </li> <li> <img src="http://www.loaditup.de/files/777259_4cmna4mbcd.jpg" alt=""> <div class="slide-cnt"> <h2>Lorem Ipsum Dolor <br> Amet Consectetur</h2> <p>Sed vel lacus lorem, non auctor ante. Aliquam posuere libero non felis euismod ac volutpat augue ullamcorper. Suspendisse convallis mi eget leo laoreet eu tincidunt metus sollicitudin. Proin vulputate pharetra porttitor. Quisque eu nisi dolor. Donec ipsum libero, impect lipsum dolor.</p> </div> <a href="#" class="slider-btn"><span>Order Now</span></a> </li> <li> <img src="http://www.loaditup.de/files/777259_4cmna4mbcd.jpg" alt=""> <div class="slide-cnt"> <h2>Lorem Ipsum Dolor <br> Amet Consectetur</h2> <p>Sed vel lacus lorem, non auctor ante. Aliquam posuere libero non felis euismod ac volutpat augue ullamcorper. Suspendisse convallis mi eget leo laoreet eu tincidunt metus sollicitudin. Proin vulputate pharetra porttitor. Quisque eu nisi dolor. Donec ipsum libero, impect lipsum dolor.</p> </div> <a href="#" class="slider-btn"><span>Order Now</span></a> </li> </ul> </div> <section class="cols"> <div class="col"> <h3><a href="#">Überschrift 1</a></h3> <p>Sed vel lacus lorem, non auctor ante. Aliquam posuere libero non felis euismod ac volutpat augue ullamcor-<br> per suspendisse convallis mi eget leo.</p> <a href="#" class="col-btn">View All</a> </div> <div class="col"> <h3><a href="#">Überschrift 2</a></h3> <p>Aenean quis feugiat nibh. Nunc feugiat sem vel odio dapibus pretium. Proin mollis, ante sit amet egestas tristique, ipsum erat dapibus nulla dolor porta. </p> <a href="#" class="col-btn">View Portfolio</a> </div> <div class="col"> <h3><a href="#">Überschrift 3</a></h3> <p>Nulla id tellus in neque hendrerit commodo. In interdum dignissim molestie. Donec pulvinar neque vel sem bibendum phare integer dorem.</p> <a href="#" class="col-btn">Read More</a> </div> <div class="col"> <h3><a href="#">Überschrift 4</a></h3> <p>Cras adipiscing tincidunt nulla ac er ultrices. Vestibulum in erat in erat can sodales. Proin fringilla eros nibh, sed varius turpis el vel adipiscing nibh. </p> <a href="#" class="col-btn">Request Proposal</a> </div> <div class="cl"> </div> </section> <section class="box"> <span class="shadow-t"></span> <h3>Letzte Arbeiten</h3> <a href="#" class="alignright"> + Weiteres</a> <div class="cl"> </div> <div class="entries"> <div class="entry"> <a href="#"><img src="http://www.loaditup.de/files/777260_s5dxqs2m59.png" alt=""></a> <span class="shadow"></span> </div> <div class="entry"> <a href="#"><img src="http://www.loaditup.de/files/777260_s5dxqs2m59.png" alt=""></a> <span class="shadow"></span> </div> <div class="entry"> <a href="#"><img src="http://www.loaditup.de/files/777260_s5dxqs2m59.png" alt=""></a> <span class="shadow"></span> </div> <div class="entry"> <a href="#"><img src="http://www.loaditup.de/files/777260_s5dxqs2m59.png" alt=""></a> <span class="shadow"></span> </div> <div class="cl"> </div> <span class="shadow-b"></span> </div> </section> <section class="services">
Text unter dem Design:
<div class="cl"> </div> </section> </div> </div> <div class="footer"> <nav class="footer-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Bonus Pages</a></li> </ul> </nav> <p class="copy"> © Deine Seite // Design by <a target="_blank" href="http://chocotemplates.com">ChocoTemplates</a> // Für den HpBk umgecodet von <a target="_blank" href="http://turbopage.de.tl">Turbopage</a></p> </div> </div> </div> </body> </html>
CSS-Code ohne Styletags:
*Dieses Design wurde von www.turbopage.de.tl für den HpBk umgecodet*
*Wir bieten in unserer Designerbase noch viele weitere kostenlose Designs an*
***www.turbopage.de.tl***
------------------------------------------------------------------------
#extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;}
table[height="102"] { margin: auto; }
#webme_footer_textlink_dont_hide {
width: 550px;
color: black;
background-color: transparent;
display: block;
margin: auto; }
div#webme_sky_ad{
width: 200px;
position: absolute;
top: 175px;
margin-left: 505px;
right: 0;
left: 50%;
}
* { margin: 0; padding: 0; outline: 0; }
body, html { height: 100%; }
body {
font-size: 12px;
line-height: 19px;
font-family: arial, sans-serif;
color: #999ea2;
background: #edf6ff url(http://www.loaditup.de/files/777244_gdwd6f89qs.png) repeat-x 0 0;
min-width: 956px;
}
a { color: #47a1c4; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }
article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }
.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }
#wrapper { padding-top: 20px; }
.shell { margin: 0 auto; width: 956px; }
.container {
background: #fff;
box-shadow: 0px 0px 7px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 7px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 7px rgba(0,0,0,0.3); -o-box-shadow: 0px 0px 7px rgba(0,0,0,0.3);
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;
}
.header { padding: 32px 32px 16px; }
#logo { width: 149px; float: left; }
#logo a { height: 48px; display: block; background: url(http://www.loaditup.de/files/777245_zk9pbhbn4c.png) no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }
#navigation { height: 35px; line-height: 35px; float: right; position: relative; z-index: 20; }
#navigation ul { list-style: none; list-style-position: outside; font-size: 13px; text-shadow: rgba(255,255,255,0.5) 0px 1px 1px; }
#navigation ul li { float: left; position: relative; padding-right: 2px; background: url(http://www.loaditup.de/files/777246_k6s2y32wq7.png) no-repeat right 0; }
#navigation ul > li.last { background: transparent; width: auto; float: left; padding-right: 0; }
#navigation ul > li.last a { border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px; border-right: 1px solid #d7e1e8 !important; }
#navigation ul > li.first a { border-radius: 5px 0px 0px 5px ; -moz-border-radius: 5px 0px 0px 5px ; -webkit-border-radius: 5px 0px 0px 5px ; -o-border-radius: 5px 0px 0px 5px; border-left: 1px solid #d7e1e8 !important; }
#navigation ul li a { color: #324957; float: left; padding: 0 18px; border: 1px solid #d7e1e8; border-left: 0; border-right: 0; background: url(http://www.loaditup.de/files/777247_azdey8nhwf.png) repeat 0 0; }
#navigation ul li a:hover,
#navigation ul li.active a { background: url(http://www.loaditup.de/files/777248_epnnbhu399.png) repeat 0 0; color: #3995d6; text-decoration: none; }
#navigation ul li a span { background: url(http://www.loaditup.de/files/777249_y85ztb92um.png) no-repeat right 0; width: 10px; height: 6px; float: right; padding-left: 3px; margin-top: 14px; }
#navigation ul li ul { display: none; float: none; line-height: 28px; position: absolute; top: 35px; left: 0; width: 100%; background: #e1efff; border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; }
#navigation ul li:hover ul { display: block; }
#navigation ul li ul li { display: block; float: none; padding: 0; background: transparent; }
#navigation ul li ul li a { float: none; display: block !important; padding: 0 18px; }
#navigation ul li ul li a:hover { float: none; display: block; background: transparent; background-color: #bdd7f4; }
#navigation ul li.last ul li a { padding: 0 18px !important; float: none; display: block; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
#navigation ul li ul li.last { float: none; display: block; }
#navigation ul li ul li.last a { border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; }
#navigation ul li ul li.first a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
#navigation ul li.first ul li a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
.main h3 { color: #293237; font-size: 19px; line-height: 21px; font-weight: normal; }
.main h3 a { color: #293237; }
.flexslider { width: 892px; height: 331px; margin: 0 auto; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; overflow: hidden; margin-bottom: 27px; }
.flexslider ul { list-style: none; list-style-position: outside; position: relative; }
.flexslider ul li { width: 892px; height: 331px; float: left; }
.flexslider ul li img { width: 892px; height: 331px; }
.flexslider ul li .slide-cnt { width: 412px; position: absolute; top: 38px; right: 74px; }
.flexslider ul li .slide-cnt h2 { font-size: 42px; font-weight: bold; color: #fff; line-height: 53px; text-shadow: rgba(0,0,0,0.5) 1px 1px 1px; padding-bottom: 17px; }
.flexslider ul li .slide-cnt p { color: #1f3e50; line-height: 26px; }
.flexslider ul li a.slider-btn { position: absolute; bottom: 0; left: 50%; min-width: 176px; height: 34px; margin-left: -88px; background: #fff; border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; color: #1e3d51; font-size: 19px; font-weight: bold; text-align: center; line-height: 36px;
}
.flexslider ul li a.slider-btn:hover { text-decoration: none; color: #3995d6; }
.flexslider ul li a.slider-btn span { background: url(http://www.loaditup.de/files/777250_6948zxt7zs.png) no-repeat 0 9px; padding-left: 15px; }
section { padding: 0 32px 27px; }
.last-section { border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; }
.cols { background: url(http://www.loaditup.de/files/777251_ux4kmgy8tp.png) repeat-x 0 bottom; }
.cols h3 { padding-bottom: 14px; }
.cols p { padding-bottom: 10px; }
.cols .col { width: 212px; float: left; }
.cols .col+.col { padding-left: 14px; }
.cols .col a.col-btn { background: url(http://www.loaditup.de/files/777252_eav4n82du9.png) repeat 0 0; float: left; border: 1px solid #afd1f6; height: 21px; line-height: 21px; text-align: center; padding: 0 15px; color: #324957;
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
text-shadow: rgba(255,255,255,0.9) 1px 1px 1px;
}
.cols .col a.col-btn:hover { background-position: 0 bottom; text-decoration: none; }
.box { background: url(http://www.loaditup.de/files/777253_s2v2rk4q7t.png) repeat 0 0; padding: 19px 32px 29px 32px; position: relative; height: 100%; }
.box span.shadow-t { width: 956px; height: 11px; background: url(http://www.loaditup.de/files/777255_4kky8dcq2r.png) no-repeat 0 0; position: absolute; top: 0; left: 0; display: block;}
.box span.shadow-b { width: 956px; height: 11px; background: url(http://www.loaditup.de/files/777254_dn2zq286ek.png) no-repeat 0 0; position: absolute; bottom: -4px; left: 0; display: block;}
.box h3 { float: left; }
.entries { padding-top: 24px; }
.entries .entry { background: #fff; padding: 1px; border: 1px solid #d6dae1; width: 206px; height: 115px; float: left; position: relative; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; }
.entries .entry a img { width: 206px; height: 115px; display: block; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; }
.entries .entry + .entry { margin-left: 17px; }
.entries .entry span.shadow { background: url(http://www.loaditup.de/files/777256_8qndwbvzyd.png) no-repeat 0 0; width: 197px; height: 6px; position: absolute; bottom: -6px; left: 5px; display: block; }
.services { border-top: 3px solid #fff; background: url(http://www.loaditup.de/files/777257_q3hd696hhq.png) repeat-x 0 0; padding-top: 23px; }
.services h3 { padding-bottom: 14px; }
.services p { padding-bottom: 15px; }
.services .widget { float: left; width: 435px; }
.services .widget ul { list-style: none; list-style-position: outside; }
.services .contact-widget { width: 200px; }
.services .widget + .widget { padding-left: 19px; }
.services .socials-widget { width: 219px; }
.services .socials-widget a { width: 27px; height: 27px; background: url(http://www.loaditup.de/files/777258_nnag2yaewy.png) no-repeat 0 0; float: left; margin-right: 9px; font-size: 0; line-height: 0; text-indent: -4000px; }
.services .socials-widget a:hover { opacity: 0.7;
-moz-opacity: 0.7;
filter:alpha(opacity=70); }
.services .socials-widget a.facebook-ico { background-position: 0 0; }
.services .socials-widget a.twitter-ico { background-position: -36px 0; }
.services .socials-widget a.rss-ico { background-position: -72px 0; }
.services .socials-widget a.in-ico { background-position: -108px 0; }
.services .socials-widget a.skype-ico { background-position: -144px 0; }
.services .socials-widget a.google-ico { background-position: -180px 0; }
.footer { padding: 18px 0 64px 0; }
.footer-nav { float: left; }
.footer-nav ul { list-style: none; list-style-position: outside; font-size: 11px; }
.footer-nav ul li { float: left; padding-right: 33px; }
.footer-nav ul li a { color: #a6abb2; }
.footer-nav ul li a:hover { color: #3995d6; text-decoration: none; }
.footer p.copy { float: right; font-size: 11px; color: #a6abb2; }
.footer p.copy a { color: #8c929b; text-decoration: underline; }
.footer p.copy a:hover { color: #3995d6; text-decoration: none; }
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flexslider .slides > li {display: none;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
.no-js .slides > li:first-child {display: block;}
.flexslider { border: 0; position: relative; }
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
.flex-container {zoom: 1; position: relative;}
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
.flex-direction-nav li a {width: 24px; height: 33px; margin: 0px 0 0; display: block; background: no-repeat 0 0; position: absolute; top: 170px; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li .next {background-position: 0px bottom; right: -40px;}
.flex-direction-nav li .prev {left: -40px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
