BrainMix
Design "Brain Mix"
<---- Zurück
Infos zum diesem Design:
Das Design ist ein simples,aber auch sehr elegantes. Man kann es so ziemlich für alle Themenbereiche einsetzten.
Ihr dürft alle Grafiken austauschen! - Das Copyright von turbopage muss stehen bleiben!
Text über dem Design:
<head>
<link rel="stylesheet" type="text/css" href="http://www.loaditup.de/files/772667_ydct43rgda.css" />
<script type="text/javascript" src="http://www.loaditup.de/files/772660_m8vpxqxcve.js"></script>
<script type="text/javascript" src="http://www.loaditup.de/files/772662_g9yrupu76m.js"></script>
<script type="text/javascript" src="http://www.loaditup.de/files/772661_z83gtwc3kk.js"></script>
<script type="text/javascript" src="http://www.loaditup.de/files/772659_r8hm53ga2y.js"></script>
<script type="text/javascript" src="http://www.loaditup.de/files/772658_x4qu5yqnnm.js"></script>
</head>
<body>
<div class="main">
<div class="headeri">
<div class="headeri_resize">
<div class="logo">
<h1><a href="index.html">Brain<span>Mix</span> <small>Company Slogan Here</small></a></h1>
</div>
<div class="menu_nav">
<ul>
<li class="active"><a href="index.html"><span>Home Page</span></a></li>
<li><a href="support.html"><span>Support</span></a></li>
<li><a href="about.html"><span>About Us</span></a></li>
<li><a href="blog.html"><span>Blog</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</ul>
</div>
<div class="clr"></div>
<div class="slider">
<div id="coin-slider">
<a href="#"><img src="http://www.loaditup.de/files/772655_u8pvwt8hn7.jpg" width="960" height="333" alt="" /> </a>
<a href="#"><img src="http://www.loaditup.de/files/772656_zdsgcrugdq.jpg" width="960" height="333" alt="" /> </a>
<a href="#"><img src="http://www.loaditup.de/files/772655_u8pvwt8hn7.jpg" width="960" height="333" alt="" /> </a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="content">
<div class="content_resize">
<div class="mainbar">
<div class="article">Text unter dem Design:
</div> </div>
<div class="sidebar">
<div class="clr"></div>
<div class="gadget">
<h2 class="star"><span>Sidebar</span> Menu</h2>
<div class="clr"></div>
<ul class="sb_menu">
<li><a href="#">Home</a></li>
<li><a href="#">TemplateInfo</a></li>
<li><a href="#">Style Demo</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Web Templates</a></li>
</ul>
</div>
<div class="gadget">
<h2 class="star"><span>Sponsors</span></h2>
<div class="clr"></div>
<ul class="ex_menu">
<li><a href="#">Lorem ipsum dolor</a><br />
Donec libero. Suspendisse bibendum</li>
<li><a href="#">Dui pede condimentum</a><br />
Phasellus suscipit, leo a pharetra</li>
<li><a href="#">Condimentum lorem</a><br />
Tellus eleifend magna eget</li>
<li><a href="#">Fringilla velit magna</a><br />
Curabitur vel urna in tristique</li>
<li><a href="#">Suspendisse bibendum</a><br />
Cras id urna orbi tincidunt orci ac</li>
<li><a href="#">Donec mattis</a><br />
purus nec placerat bibendum</li>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="fbg">
<div class="fbg_resize">
<div class="col c1">
<h2><span>Image</span> Gallery</h2>
<a href="#"><img src="http://www.loaditup.de/files/772669_dvt84y8ypb.jpg" width="75" height="75" alt="" class="gal" /></a>
<a href="#"><img src="http://www.loaditup.de/files/772669_dvt84y8ypb.jpg" width="75" height="75" alt="" class="gal" /></a>
<a href="#"><img src="http://www.loaditup.de/files/772669_dvt84y8ypb.jpg" width="75" height="75" alt="" class="gal" /></a>
<a href="#"><img src="http://www.loaditup.de/files/772669_dvt84y8ypb.jpg" width="75" height="75" alt="" class="gal" /></a>
<a href="#"><img src="http://www.loaditup.de/files/772669_dvt84y8ypb.jpg" width="75" height="75" alt="" class="gal" /></a>
<a href="#"><img src="http://www.loaditup.de/files/772669_dvt84y8ypb.jpg" width="75" height="75" alt="" class="gal" /></a> </div>
<div class="col c2">
<h2><span>Services</span> Overview</h2>
<p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet lacus sagittis posuere cursus vitae nunc.Etiam venenatis, turpis at eleifend porta, nisl nulla bibendum justo.</p>
<ul class="fbg_ul">
<li><a href="#">Lorem ipsum dolor labore et dolore.</a></li>
<li><a href="#">Excepteur officia deserunt.</a></li>
<li><a href="#">Integer tellus ipsum tempor sed.</a></li>
</ul>
</div>
<div class="col c3">
<h2><span>Contact</span> Us</h2>
<p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui.</p>
<p class="contact_info"> <span>Address:</span> 1458 TemplateAccess, USA<br />
<span>Telephone:</span> +123-1234-5678<br />
<span>FAX:</span> +458-4578<br />
<span>Others:</span> +301 - 0125 - 01258<br />
<span>E-mail:</span> <a href="#">mail@yoursitename.com</a> </p>
</div>
<div class="clr"></div>
</div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="lf">© <a href="#">Deine Webseite</a> //Für den HpBk umgecodet von:<a href="http://turbopage.de.tl">Turbopage</a> </p>
<p class="rf">Get More <a target="_blank" href="http://www.free-css.com/">Free CSS Templates</a> By <a target="_blank" href="http://www.dreamtemplate.com/">DreamTemplate</a></p>
<div style="clear:both;"></div>
</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%;
}
body {
margin:0;
padding:0;
width:100%;
color:#6d6d6d;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
background:#f6f6f6 url(http://www.loaditup.de/files/772646_3v8w3tfazw.gif) repeat-x left top;
}
html, .main {
padding:0;
margin:0;
}
.main {
background:url(http://www.loaditup.de/files/772647_rp2qp883ey.jpg) no-repeat center top;
}
.clr {
clear:both;
padding:0;
margin:0;
width:100%;
font-size:0;
line-height:0;
}
h2 {
margin:8px 0;
padding:8px 0;
font-size:24px;
font-weight:normal;
color:#6e6e6e;
}
p {
margin:8px 0;
padding:0 0 8px 0;
}
a {
color:#869cbc;
text-decoration:underline;
}
.headeri, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.headeri {
}
.headeri_resize {
margin:0 auto;
padding:0;
width:960px;
}
.logo {
padding:0;
float:none;
float:left;
width:auto;
height:115px;
}
h1 {
margin:0;
padding:32px 0 0;
font-size:38px;
font-weight:bold;
line-height:1.2em;
text-transform:none;
}
h1 a, h1 a:hover {
color:#869cbc;
text-decoration:none;
}
h1 span {
}
h1 small {
display:block;
font-size:13px;
line-height:1.2em;
letter-spacing:normal;
text-transform:none;
color:#7d6f6a;
}
.slider {
padding:0 0 8px;
background:url(http://www.loaditup.de/files/772648_7x4nphx6v4.png) no-repeat center bottom;
}
.rss {
padding:18px 20px 0 0;
float:right;
width:auto;
}
.rss p {
margin:0;
padding:0;
float:right;
width:auto;
color:#fff;
font-size:13px;
line-height:1.5em;
font-weight:bold;
}
.rss a {
color:#fff;
text-decoration:none;
}
.rss a:hover {
text-decoration:underline;
}
.rss img {
margin:-3px 0 -3px 6px;
border:none;
}
.menu_nav {
margin:0 auto;
padding:43px 0 0;
height:29px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0;
height:29px;
float:left;
}
.menu_nav ul li {
margin:0;
padding:0 0 0 4px;
float:left;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:4px 20px;
font-size:13px;
line-height:17px;
font-weight:bold;
color:#fdfdfe;
text-decoration:none;
text-transform:none;
background:#a9b0ba;
border:2px solid #a9b0ba;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#fff;
background:#92a5c1;
border:2px solid #8698b1;
}
.content {
padding:40px 0 40px;
}
.content_resize {
margin:0 auto;
padding:0;
width:960px;
}
div#content {
float:left;
margin-top: -35px;
}
.content .mainbar {
margin:0;
padding:0;
float:right;
width:684px;
}
.content .mainbar h2 {
margin-bottom:0;
padding-bottom:8px;
font-size:24px;
line-height:1.2em;
color:#6e6e6e;
}
.content .mainbar div.img {
padding:12px 0 0;
float:left;
}
.content .mainbar img {
}
.content .mainbar img.fl {
margin:0;
}
.content .mainbar .article {
margin:0 0 8px;
padding:6px 20px;
}
.content .mainbar .post_content {
float:right;
width:440px;
}
.content .mainbar .post_content strong {
color:#6d6d6d;
}
.content .sidebar {
padding:0;
float:left;
width:260px;
}
.content .sidebar .gadget {
margin:0 0 12px;
padding:12px 20px 24px;
}
.content .sidebar h2 {
color:#6e6e6e;
}
ul.sb_menu, ul.ex_menu {
margin:0;
padding:0;
list-style:none;
color:#6e6e6e;
}
ul.sb_menu li, ul.ex_menu li {
margin:0;
}
ul.sb_menu li {
padding:8px 0;
width:220px;
}
ul.ex_menu li {
padding:4px 0;
}
ul.sb_menu li a {
color:#6e6e6e;
text-decoration:none;
margin-left:-16px;
padding:4px 8px 4px 16px;
}
ul.ex_menu li a {
font-weight:bold;
color:#6e6e6e;
text-decoration:none;
}
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
color:#869cbc;
font-weight:bold;
text-decoration:none;
}
p.spec {
padding:0 0 16px;
}
.fbg {
padding:0;
background:#a1a9b4 url(http://www.loaditup.de/files/772651_dd8r42bpwz.gif) repeat-x left bottom;
border-top:3px solid #bcc2ca;
}
.fbg_resize {
margin:0 auto;
width:960px;
padding:16px 0;
color:#e8e4e4;
}
.fbg h2 {
color:#fff;
padding-bottom:24px;
}
.fbg img.gal {
margin:0 8px 8px 0;
padding:0;
border:4px solid #cad2dc;
}
.fbg .col {
margin:0;
float:left;
}
.fbg .c1 {
padding:0 16px 0 0;
width:280px;
}
.fbg .c2 {
padding:0 36px 0 16px;
width:280px;
}
.fbg .c3 {
padding:0 0 0 16px;
width:274px;
}
.fbg .fbg_ul {
margin:0;
padding:0;
list-style:none;
}
.fbg .fbg_ul li {
margin:0;
padding:0;
list-style:none;
}
.fbg .fbg_ul li a {
display:block;
margin:0;
padding:2px 0 2px 12px;
color:#e8e4e4;
text-decoration:none;
background:url(http://www.loaditup.de/files/772653_xg5xm3cs9u.gif) no-repeat left center;
}
.fbg .fbg_ul li a:hover {
color:#fff;
text-decoration:underline;
}
.fbg p.contact_info {
line-height:1.8em;
}
.fbg p.contact_info a {
color:#fff;
text-decoration:underline;
}
.fbg p.contact_info span {
display:block;
float:left;
width:74px;
font-weight:bold;
color:#fff;
}
ol {
list-style:none;
}
ol li {
display:block;
clear:both;
}
ol li label {
display:block;
margin:0;
padding:16px 0 0 0;
}
ol li input.text {
width:480px;
border:1px solid #c0c0c0;
margin:0;
padding:5px 2px;
height:16px;
background-color:#fff;
}
ol li textarea {
width:480px;
border:1px solid #c0c0c0;
margin:0;
padding:2px;
background-color:#fff;
}
ol li .send {
margin:16px 0 0 0;
}
.footer {
background:#a1a9b4;
}
.footer_resize {
margin:0 auto;
padding:0;
width:960px;
line-height:1.5em;
color:#e8e4e4;
}
.footer_resize p {
margin:24px 0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
}
.footer_resize a {
color:#fff;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footer_resize a:hover {
color:#fff;
background-color:transparent;
text-decoration:none;
}
.footer_resize .lf {
float:left;
}
.footer_resize .rf {
float:right;
}
a {
outline:none;
}
