YellowStone
Design "YellowStone"
<---- Zurück
Infos zum diesem Design:
Dieses Design ist vielfältig einsetzbaer und eignet sich für jede Art von Homepage.
1 horizontales und 1 vertikals Menü ; rchte Boxen sind vorhanden!
Ihr dürft alle Grafiken austauschen! - Das Copyright von turbopage muss stehen bleiben!
Text über dem Design:
</head>
<body>
<div class="main">
<div class="Kopf">
<div class="Kopf_resize">
<div class="menu_nav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="clr"></div>
<div class="logo">
<h1><a href="#">Yellow<span>stone</span> <small>put your slogan here</small></a></h1>
</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="gadget">
<h2 class="star"><span>Menü</span></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="#">Donec mattis</a><br />
Phasellus suscipit, leo a pharetra</li>
<li><a href="#">Dui pede condimentum</a><br />
Tellus eleifend magna eget</li>
<li><a href="#">Condimentum lorem</a><br />
Curabitur vel urna in tristique</li>
<li><a href="#">Fringilla velit magna</a><br />
Cras id urna orbi tincidunt orci ac</li>
<li><a href="#">Suspendisse bibendum</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 Gallery</span></h2>
<a href="#"><img src="http://www.loaditup.de/files/765471_2udh95pgvy.jpg" width="58" height="58" alt="" /></a>
<a href="#"><img src="http://www.loaditup.de/files/765471_2udh95pgvy.jpg" width="58" height="58" alt="" /></a>
<a href="#"><img src="http://www.loaditup.de/files/765471_2udh95pgvy.jpg" width="58" height="58" alt="" /></a>
<a href="#"><img src="http://www.loaditup.de/files/765471_2udh95pgvy.jpg" width="58" height="58" alt="" /></a>
<a href="#"><img src="http://www.loaditup.de/files/765471_2udh95pgvy.jpg" width="58" height="58" alt="" /></a>
<a href="#"><img src="http://www.loaditup.de/files/765471_2udh95pgvy.jpg" width="58" height="58" alt="" /></a> </div>
<div class="col c2">
<h2><span>Lorem Ipsum</span></h2>
<p>Lorem ipsum dolor<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. <a href="#">Morbi tincidunt, orci ac convallis aliquam</a>, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
</div>
<div class="col c3">
<h2><span>Contact</span></h2>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue.</p>
<p><a href="#">support@yoursite.com</a></p>
<p>+1 (123) 444-5677<br />
+1 (123) 444-5678</p>
<p>Address: 123 TemplateAccess Rd1</p>
</div>
<div class="clr"></div>
</div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="lf">Copyright © <a href="#">Domain Name</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.rocketwebsitetemplates.com/">RocketWebsiteTemplates</a></p>
<div class="clr"></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%;
}
@charset "utf-8";
body {
margin:0;
padding:0;
width:100%;
color:#959595;
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
background:#f5f1e6 url(http://www.loaditup.de/files/765468_3nt36s3894.gif) repeat-y center center;
}
html, .main {
padding:0;
margin:0;
}
.main {
background:no-repeat center top;
}
.clr {
clear:both;
padding:0;
margin:0;
width:100%;
font-size:0;
line-height:0;
}
.logo {
padding:0;
float:left;
width:auto;
}
h1 {
margin:0;
padding:115px 0 0;
width:974px;
height:160px;
color:#43bad2;
font:normal 42px/1.2em Arial, Helvetica, sans-serif;
letter-spacing:-3px;
background:url(http://www.loaditup.de/files/765469_q3n8gpsdpn.jpg) no-repeat center center;
text-align:center;
}
h1 span {
color:#dc802d;
}
h1 a, h1 a:hover {
color:#43bad2;
text-decoration:none;
}
h1 small {
display:block;
font:normal 12px/1.2em Arial, Helvetica, sans-serif;
color:#b7b7b7;
letter-spacing:normal;
}
h2 {
font:normal 24px/1.5em Arial, Helvetica, sans-serif;
padding:8px 0;
margin:8px 0;
color:#323a3f;
}
p {
margin:8px 0;
padding:0 0 8px 0;
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
p.spec {
text-align:left;
}
a {
color:#43bbd3;
text-decoration:underline;
}
a.com {
display:block;
position:absolute;
margin:20px 0 0 -52px;
padding:12px 0;
width:50px;
font:bold 23px/1em Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
text-align:center;
background-color:#fcbe03;
border:2px solid #ede9df;
border-right:none;
}
.Kopf, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.Kopf {
}
.Kopf_resize {
margin:0 auto;
padding:24px 0 0;
width:974px;
background:url(http://www.loaditup.de/files/765470_bhzs57ak5k.gif) repeat-x center top;
}
.menu_nav {
float:right;
margin:0;
padding:4px 24px 0;
height:42px;
background:repeat-x center top;
}
.menu_nav ul {
list-style:none;
}
.menu_nav ul li {
margin:0 8px 0 0;
padding:0;
float:left;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:6px 24px;
color:#959595;
text-decoration:none;
font-size:13px;
border:2px solid transparent;
border-bottom:none;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
color:#fff;
background-color:#fed14a;
border:2px solid #ede9df;
border-bottom:none;
}
.content_resize {
margin:0 auto;
padding:24px 0;
width:970px;
}
.content .mainbar {
margin:0;
padding:0;
float:left;
width:670px;
}
.content .mainbar img {
border:none;
}
.content .mainbar img.fl {
margin:4px 16px 4px 0;
float:left;
}
.content .mainbar .article {
margin:0;
padding:8px 24px 8px 40px;
}
.content .sidebar {
padding:0;
float:right;
width:300px;
}
.content .sidebar .gadget {
margin:0;
padding:8px 16px 8px 40px;
}
ul.sb_menu, ul.ex_menu {
margin:0;
padding:0;
list-style:none;
color:#959595;
}
ul.sb_menu li, ul.ex_menu li {
margin:0;
}
ul.sb_menu li {
padding:4px 0;
width:220px;
}
ul.ex_menu li {
padding:4px 0;
}
ul.sb_menu li a, ul.ex_menu li a {
color:#959595;
text-decoration:none;
margin-left:-12px;
padding-left:12px;
}
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
color:#43bbd3;
font-weight:bold;
background:no-repeat left center;
}
ul.sb_menu li a:hover {
text-decoration:underline;
}
ul.ex_menu li a:hover {
text-decoration:none;
}
div#content {
float:left;
margin-top: -45px;
}
.content p.pages {
padding:0 24px 0 40px;
font-size:11px;
color:#959595;
text-align:right;
}
.content p.pages span, .content p.pages a:hover {
padding:5px 10px;
color:#fff;
background-color:#fcbe03;
border:1px solid #fcbe03;
}
.content p.pages a {
padding:5px 10px;
color:#959595;
background-color:#fff;
border:1px solid #fcbe03;
text-decoration:none;
}
.content p.pages small {
font-size:11px;
float:left;
}
.content .mainbar .comment {
margin:0;
padding:16px 0 0 0;
}
.content .mainbar .comment img.userpic {
border:1px solid #dedede;
margin:10px 16px 0 0;
padding:0;
float:left;
}
.fbg {
}
.fbg_resize {
margin:0 auto;
width:890px;
padding:24px 40px;
border-top:1px solid #efefef;
}
.fbg ul li {
padding:4px 0;
}
.fbg a {
margin:0;
padding:2px 4px;
}
.fbg ul li a {
margin:0;
padding:2px 4px;
background:none;
text-decoration:none;
}
.fbg ul li a:hover {
text-decoration:underline;
font-weight:normal;
}
.fbg h2 {
}
.fbg img {
padding:3px;
border:1px solid #cfd2d4;
}
.fbg .col {
margin:0;
float:left;
}
.fbg .c1 {
padding:0 16px 0 0;
width:266px;
}
.fbg .c2 {
padding:0 16px;
width:300px;
}
.fbg .c3 {
padding:0 0 0 16px;
width:260px;
}
.footer {
}
.footer_resize {
margin:0 auto;
padding:15px 24px 24px;
width:922px;
border-top:1px solid #DADADA;
color:#959595;
}
.footer p {
margin:0;
padding:4px 0;
line-height:normal;
color:#959595;
}
.footer a {
color:#959595;
padding:inherit;
text-decoration:underline;
}
.footer a:hover {
text-decoration:none;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
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:2px 0;
padding:5px 2px;
height:16px;
background:#fff;
}
ol li textarea {
width:480px;
border:1px solid #c0c0c0;
margin:2px 0;
padding:2px;
background:#fff;
}
ol li .send {
margin:16px 0 0 0;
}
