BaukastenHilfe24

BaukastenHilfe24 - Hier wird dir geholfen!

BkH24_Design

"BaukastenHilfe24":






  Veröffentlicht am: 09.06.2015

  Bewertung:








Sonstige Vorschaubilder:
bild

Header und Menü

bild

Content

bild

Footer



Dieses Design ist das BaukastenHilfe24 Design v1.0. Es ward das erste Design, welches bei BkH24 im Einsatz war.

Text über dem Design:

<script type="text/javascript" src="http://yourjavascript.com/04221123292/script.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/21321254210/jquery-1-4-2-min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/61142212062/cufon-yui.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/07226142221/cufon-aller.js"></script>
<script>
$(document).ready(function(){

// hide #nach_oben first
$("#nach_oben").hide();

// fade in #nach_oben
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#nach_oben').fadeIn();
} else {
$('#nach_oben').fadeOut();
}
});

// scroll body to 0px on click
$('#nach_oben a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

<head>
<title>Deine Seite</title>
</head>
<body>
<div class="main">
<div class="header1">
<div class="header1_resize">
<div class="menu_nav">
<ul>
<li><a href="#LINK"><span>Startseite</span></a></li>
<li><a href="#LINK"><span>Button 2</span></a></li>
<li><a href="#LINK"><span>Button 3</span></a></li>
<li><a href="#LINK"><span>Button 4</span>
<li><a href="#LINK"><span>Button 5</span></a></li>
</a></li>
</ul>
</div>
<div class="logo">
<h1><a href="http://baukastenhilfe24.de.tl"><small>Dein Slogan</small> <span>Deine Seite</span></a></h1>
</div>
<div class="clr"></div>
<div class="slider">
<div id="coin-slider"> <a href="#"><img src="https://img.webme.com/pic/b/baukastenhilfe24/headernovember.png" width="970" height="305" alt="" /> </a> </div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="content">
<div class="content_resize">
<div class="mainbar">


Text unter dem Design:
 </div>  
<div class="sidebar">
<div class="clr"></div>
<div class="gadget">
<h2 class="star"><span><center>Sonstiges</center></span></h2>
<div class="clr"></div>
<ul class="sb_menu">
<li><a href="#LINK">Button 1</a></li>
<li><a href="#LINK">Button 2</a></li>
<li><a href="#LINK">Button 3</a></li>
</ul><br/>
<h2 class="star"><span><center>Updates</center></span></h2>
<p>Hier kann dein Text stehen</p>

<br/>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="fbg">
<div class="fbg_resize">
<div class="col c1">
<h2>Überschrift 1</h2>
<p>Baukastenhilfe24 möchte jedem User, der ein Problem hat ,weiterhelfen. Wir bieten dir zu verschiedenen Bereichen unsere Hilfe an:</p>
<ul class="fbg_ul">
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit deinem Design</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit Grafiken oder Videos</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit den HpBk-Extras</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Sonstige Probleme</a></li>
</ul>
</div>
<div class="col c2">
<h2>Überschrift 2</h2>
<p>Baukastenhilfe24 möchte jedem User, der ein Problem hat ,weiterhelfen. Wir bieten dir zu verschiedenen Bereichen unsere Hilfe an:</p>
<ul class="fbg_ul">
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit deinem Design</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit Grafiken oder Videos</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit den HpBk-Extras</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Sonstige Probleme</a></li>
</ul>
</div>
<div class="col c3">
<h2>Überschrift 3</h2>
<p>Baukastenhilfe24 möchte jedem User, der ein Problem hat ,weiterhelfen. Wir bieten dir zu verschiedenen Bereichen unsere Hilfe an:</p>
<ul class="fbg_ul">
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit deinem Design</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit Grafiken oder Videos</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Probleme mit den HpBk-Extras</a></li>
<li><a href="http://baukastenhilfe24.de.tl/kontakt.htm">Sonstige Probleme</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="lf">©2015 <a href="http://baukastenhilfe24.de.tl/">Deine Seite</a> - Alle Rechte vorbehalten<br/> Design by <a target="_blank" href="http://www.dreamtemplate.com/">DreamTemplate</a> // Coding by <a target="_blank" href="http://www.baukastenhilfe24.de.tl/">BaukastenHilfe24</a></p>
<p class="rf"><a href="#LINK">Impressum </a> / <a href="http://www.baukastenhilfe24.de.tl/datenschutz.htm">Datenschutz </a>
<div style="clear:both;"></div>
</div>
</div>
</div>
</body>
</html>

<script type="text/javascript" src="http://yourjavascript.com/04221123292/script.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/21321254210/jquery-1-4-2-min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/61142212062/cufon-yui.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/07226142221/cufon-aller.js"></script>

Hinweis unter dem Inhalts-Bereich:
 <p id="nach_oben"><a href="#top"><img src="https://img.webme.com/pic/b/baukastenhilfe24/top.png" alt="Nach oben" /></a></p>


CSS-Code:
/* Dieses CSS-Template wurde von www.baukastenhilfe24.de.tl für den HpBk umgecodet */ 
/* Designname: "BaukastenHilfe24" ; Erscheinungsdatum: 09.06.2015 */



#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6, #pre_content, #nav_heading, #nav, div.header, h1#title, h2#title span {
display : none;
}

table[height="102"] {
margin : 0 auto;
}
#webme_footer_textlink_dont_hide {
display : block;
width : 980px;
margin : 8px auto 0;
color : #000;
text-align : center;
text-shadow : 0 1px 0 #c9c9c9;
background : transparent;
}
div#webme_sky_ad {
width : 160px;
position : absolute;
top : 250px;
left : 50%;
right : 0;
margin-left : 520px;
box-shadow : 0 0 5px #000;
}

body {
visibility:none;
margin:0;
padding:1;
width:100%;
color:#000;
font:normal 15px/1,5em "Liberation sans", Arial, Helvetica, sans-serif;
background:#fff url(https://img.webme.com/pic/b/baukastenhilfe24/main_bg.gif) repeat left top;
}
html, .main {
padding:0;
margin:0;
}
.main {
}
.clr {
clear:both;
padding:0;
margin:0;
width:100%;
font-size:0;
line-height:0;
}

hr {
border-style:dotted;
}
h2 {
font-size:20px;
font-weight:bold;
line-height:1.2em;
color:#fff;
text-transform:none;
}
p {
margin:8px 0;
padding:0 0 8px 0;
}
a {
color:#000;
text-decoration:underline;
}

a:hover {
color:#c9c9c9;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header1 {
}
.header1_resize {
margin:0 auto;
padding:0;
width:960px;
}
.logo {
padding:0;
float:none;
float:left;
width:auto;
height:137px;
}
h1 {
margin:0;
padding:40px 0 0 20px;
font-size:45px;
font-weight:bold;
line-height:1.2em;
text-transform:none;
letter-spacing:2px;
}
h1 a, h1 a:hover {
color:#7E0000;
text-decoration:none;
}
h1 span {
}
h1 small {
display:block;
padding-left:120px;
font-size:14px;
line-height:1.2em;
letter-spacing:normal;
text-transform:none;
color:#7E0000;
}
.slider {
margin:0 -5px;
padding:0 0 24px;
}

.menu_nav {
margin:0;
padding:42px 0 0;
float:right;
}
.menu_nav ul {
position:relative;
list-style:none;
padding:8px 10px 8px 8px;
float:left;
background:#7E0000;
}


.menu_nav ul li {
margin:0;
padding:0 0 0 2px;
float:left;
}

.menu_nav ul li:hover {
margin:0;
padding:0 0 0 2px;
float:left;
background: #eee;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
;

}
.menu_nav ul li a {
display:block;
margin:0;
padding:12px 16px;
font-size:15px;
line-height:20px;
font-weight:normal;
color:#fff;
text-decoration:none;
text-transform:none;
text-align:center;
}


.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:underline;
color:#000;
font-weight:normal;
}
.content {
padding:1
}
.content_resize {
margin:0 auto;
padding:24px 0 40px;
width:960px;
}
.content .mainbar {
margin:0;
padding:0;
float:right;
width:680px;
}


.content .mainbar img {
}

.content .mainbar .article {
margin:0 0 16px;
padding:0 20px 30px;
}
.content .mainbar .post_content {
float:right;
width:460px;
}
.content .mainbar .post_content strong {
color:#585757;
}
.content .sidebar {
padding:0;
float:left;
width:260px;
}
.content .sidebar .gadget {
margin:0 0 16px;
padding:0 20px 16px;
}
.content .sidebar h2 {
margin:0 -20px 12px;
padding:12px 20px;
background:#7E0000;
}
ul.sb_menu, ul.ex_menu {
margin:0;
padding:0;
list-style:none;
color:#959595;
}
ul.sb_menu li {
margin-top:3px;
margin-bottom:3px;
margin-right:3px;
margin-left:-8px;
background:#eee;
border-left: 7px solid #7E0000;
border-right: 7px solid #7E0000;
border-radius: 5px;
}

ul.sb_menu li:hover {
margin-top:3px;
margin-bottom:3px;
margin-right:3px;
margin-left:-8px;
background:#c9c9c9;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

ul.sb_menu1, ul.ex_menu1 {
margin:0;
padding:0;
list-style:none;
color:#3B5998;
}

ul.sb_menu1 li {
margin-top:3px;
margin-bottom:3px;
margin-right:3px;
margin-left:-8px;
background:#eee;
border-left: 10px solid #3B5998;
border-right: 10px solid #3B5998;
font-family:'Lucida Sans';
font-color: #3B5998;
}

ul.sb_menu1 li:hover {
margin-top:3px;
margin-bottom:3px;
margin-right:3px;
margin-left:-8px;
background:#c9c9c9;
border-left: 10px solid #3B5998;
border-right: 10px solid #3B5998;
}

ul.ex_menu1 li {
margin:0;
}
ul.sb_menu1 li, ul.ex_menu1 li {
padding:8px 0;
width:220px;
}
ul.sb_menu1 li a {
color:#3B5998;
text-decoration:none;
margin-left:25%;
padding:4px 8px 4px 0;
}
ul.ex_menu1 li a {
font-weight:bold;
color:#585757;
text-decoration:none;
}
ul.sb_menu1 li a:hover, ul.ex_menu1 li a:hover {
font-weight:bold;
text-decoration:none;
}


ul.ex_menu li {
margin:0;
}
ul.sb_menu li, ul.ex_menu li {
padding:8px 0;
width:220px;
}
ul.sb_menu li a {
color:#585757;
text-decoration:none;
margin-left:25%;
padding:4px 8px 4px 0;
}
ul.ex_menu li a {
font-weight:bold;
color:#585757;
text-decoration:none;
}
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
font-weight:bold;
text-decoration:none;
}

.content p.pages {
margin:0;
padding:24px 0 0;
height:60px;
font-size:11px;
line-height:16px;
text-align:left;
}
.content p.pages span, .content p.pages a {
display:block;
float:left;
margin:0 2px 0 0;
padding:7px 0;
width:30px;
text-decoration:none;
text-align:center;
}
.content p.pages span, .content p.pages a:hover {
color:#fff;
background:#f4be04;
}
.content p.pages a {
color:#7e7e7e;
border:none;
}
.content p.pages small {
padding:8px 0 0;
font-size:12px;
float:right;
line-height:24px;
}
.content .mainbar .comment {
margin:0;
padding:16px 0 0 0;
}

.fbg {
}
.fbg_resize {
margin:0 auto;
width:920px;
padding:16px 20px;
border-top:2px solid #7E0000;
border-bottom:2px solid #7E0000;
}
.fbg h2 {
margin-bottom:24px;
padding-bottom:8px;
color:#827f7f;
}
.fbg img.gal {
margin:0 8px 8px 0;
padding:0;
border:4px solid #fff;
}
.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:#585757;
text-decoration:none;
background:url(https://img.webme.com/pic/b/baukastenhilfe24/li.gif) no-repeat left center;
}
.fbg .fbg_ul li a:hover {
color:#c9c9c9;
text-decoration:none;
font-weight:normal;
}
.fbg p.contact_info {
line-height:1.8em;
}
.fbg p.contact_info a {
color:#f4be04;
text-decoration:underline;
font-weight:normal;
}
.fbg p.contact_info span {
display:block;
float:left;
width:74px;
font-weight:bold;
}
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 {
}
.footer_resize {
margin:0 auto;
padding:0;
width:920px;
line-height:1.5em;
color:#7E0000;
}
.footer_resize p {
margin:22px 0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
}
.footer_resize a {
color:#7E0000;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footer_resize a:hover {
color:#c9c9c9;
background-color:transparent;
text-decoration:none;
}
.footer_resize .lf {
float:left;
}
.footer_resize .rf {
float:right;
}
a {
outline:none;
}


.coin-slider {
width:970px;
height:305px;
padding:0;
overflow:hidden;
zoom:1;
position:relative;
float:right;
opacity:1;

}
.coin-slider a {
text-decoration:none;
outline:none;
border:none;
}
/* buttons for switching */
.cs-buttons {
margin:-38px 0 0;
padding:0;
font-size:0;
float:left;
}
.cs-buttons a {
margin:0 2px;
width:20px;
height:20px;
float:left;
color:#000;
text-indent:-10000px;
background:no-repeat center center;
}
.cs-buttons a.cs-active {
color:#000;
}
/* text in slider */
.cs-title {
display:none;
padding:16px 60px 16px 24px;
width:876px;
color:#000;
font-size:15px;
line-height:1.5em;
background:url(https://img.webme.com/pic/b/baukastenhilfe24/overlay.png) repeat left top;
}
.cs-title big {
font-size:20px;
}

/* +++++++++++Button NACH OBEN+++++++++++++ */

/* Position */
#nach_oben {
position: fixed;
bottom: 100px;
margin-left: 750px; }

/* Aussehen des Buttons */
#nach_oben a {
width: auto;
padding: 7px 12px 7px 17px;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #000;
font-size: 11px;
font-family: arial;
background-color: transparent;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s; }

/* Hover bei Mauskontakt */
#nach_oben a:hover {
color: #000;
background-color: transparent;
}





Ihr dürft dieses Template kostenlos verwenden und verändern, allerdings muss das Copyright unverändert bleiben!

Kurz-Infos

Datumsausgabe
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=