TMPH00036

BaukastenHilfe24 - Hier wird dir geholfen!

BkH24_Design_2

"BaukastenHilfe24 V.2":


->Zurück zur Übersicht <-
 



  Veröffentlicht am: 20.07.2018

  Bewertung:








Sonstige Vorschaubilder:
bild

Header und Menü

bild

Content

bild

Footer



Dieses Design ist das BaukastenHilfe24 Design v2.0. Es war das zweite Design, welches bei BkH24 im Einsatz war.

Text über dem Design:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('img').animate({left:'250px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
});
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

$('.top .thema').click(function(){
if($(this).hasClass('closed')) {
$(this).addClass('open').removeClass('closed');
$(this).siblings('.inhalt').slideDown(200);
} else {
$(this).addClass('closed').removeClass('open');
$(this).siblings('.inhalt').slideUp(200);
}
});

});
</script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://wtheme.webme.com/js/thickbox_compressed2.js"></script>
<link rel="stylesheet" href="https://theme.webme.com/designs/globals/thickbox.css" type="text/css" media="screen">

<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>

<script type="text/javascript" src="https://img.webme.com/designs/globals/jquery.js"></script>
<link rel="stylesheet" href="https://img.webme.com/designs/globals/thickbox.css" type="text/css" media="screen">

<head>
<title>BaukastenHilfe24</title>

</head>
<body>
<!-- Begin Gesamt -->
<div id="wrapper">
<!-- Anfang Header -->

<div id="header">
<div style="text-align: center;"><img width="514" height="122" class="transparent" alt="https://img.webme.com/pic/b/baukastenhilfe24/Logog_weiss.png" src="https://img.webme.com/pic/b/baukastenhilfe24/Logog_weiss.png" /></div>
</div>
<!-- Ende Header -->
<!-- Anfang Navigation -->
<div class="menu_nav">
<ul>
<li><a class="active" href="#"><img width="30" align="absMiddle" height="30" class="transparent" alt="https://img.webme.com/pic/b/baukastenhilfe24/Home_Icon.png" src="https://img.webme.com/pic/b/baukastenhilfe24/Home_Icon.png" /><span>Startseite</span></a></li>

<li><a class="active2" href="#"><img width="30" align="absMiddle" height="30" class="transparent" alt="https://img.webme.com/pic/b/baukastenhilfe24/Hilfeseiten_Icon.png" src="https://img.webme.com/pic/b/baukastenhilfe24/Hilfeseiten_Icon.png" /><span> Hilfeseiten</span></a></li>

<li><a class="active5" href="#"><img width="30" align="absMiddle" height="30" class="transparent" alt="https://img.webme.com/pic/b/baukastenhilfe24/Streamline-26-128.png" src="https://img.webme.com/pic/b/baukastenhilfe24/Streamline-26-128.png" /><span> Designs</span></a></li>

<li><a class="active3" href="#"><img width="30" align="absMiddle" height="30" class="transparent" alt="https://img.webme.com/pic/b/baukastenhilfe24/Anleitung_Icon.png" src="https://img.webme.com/pic/b/baukastenhilfe24/Anleitung_Icon.png" /><span> Anleitungen</span></a> </li>


<li><a class="active4" href="#"><img width="30" align="absMiddle" height="30" class="transparent" alt="https://img.webme.com/pic/b/baukastenhilfe24/Archiv_Icon.png" src="https://img.webme.com/pic/b/baukastenhilfe24/Archiv_Icon.png" /><span>Archiv</span></a></li>
</ul>
</div>
<!-- Ende Navigation -->

<!-- Begin Faux Columns -->
<div id="faux">
<!-- Anfang linke Box -->
<div id="leftcolumn">
<h2 class="star"><span><center>Sonstiges</center></span></h2>
<ul class="menulinks">
<li class="link"> <a href="#">Kontakt</a> </li>
<li class="link"> <a href="#">Topliste</a> </li>
<li class="link"> <a href="#">Gästebuch</a> </li>
<li class="link"> <a href="#">Werbematerial</a> </li>

</ul>
<br/>


</div>
<!-- Ende linke Box -->
<!-- Anfang Content -->
<div id="content">



Text unter dem Design:

 </div>
<!-- Anfang rechte Box -->
<div id="rightcolumn">
<center>
<h2 class="star"><span><center>Kurz-Infos</center></span></h2>
<ul id="newsbox">

<li><a class="news-title" href="#"> 03.05.18: Hilfeseiten </a> <span class="news-text"> Neue Darstellung der Hilfeseiten</span></li>

<li><a class="news-title" href="#"> 16.03.18: Topliste </a> <span class="news-text"> Inaktive Seiten wurden aus der Topliste entfernt</span></li>

<li><a class="news-title" href="#"> 16.03.18: Hilfeseiten aktuelisiert </a> <span class="news-text"> Die Übersicht der Hilfeseiten wurde aktualisiert</span></li>

<li><a class="news-title" href="#"> 15.03.18: BkH24 wieder online </a> <span class="news-text"> Die Webseite wurde wieder aktiviert...</span></li>

</ul>
</center>
<html>
<head>
<title>Datumsausgabe</title>
<script type="text/javascript">
monate = new Array("Januar","Februar","März",
"April","Mai","Juni","Juli","August",
"September","Oktober","November","Dezember");
wochentage = new Array("Sonntag","Montag",
"Dienstag","Mittwoch","Donnerstag","Freitag",
"Samstag");
datum = new Date();
wtg = datum.getDay();
tag = datum.getDate ();
mon = datum.getMonth();
jhr = datum.getFullYear();
ausgabe = wochentage[wtg]+", der "+tag+"."
+monate[mon]+" "+jhr;
document.write(ausgabe);
</script>
</head>
<body>
</body>
</html>

</div>
<!-- Ende Rechte Box -->
</div>
<!-- End Faux Columns -->
<!-- Anfang Footer -->
<div id="footer"><table cellspacing="1" cellpadding="1" border="0" width="1200" height="27">
<tbody>
<tr>
<td>© 2018 by <a href="#">Deine Seite</a> // Template: <a href="https://baukastenhilfe24.de.tl">BaukastenHilfe24</a></td>
<td style="text-align: right;"><a href="#">Login</a> / <a href="#">Informationen</a> / <a href="#">Impressum</a> / <a href="#">Datenschutz</a></td>
</tr>
</tbody>
</table> </div>
<!-- Ende Footer -->
</div>
<!-- Ende Gesamt -->
</body>
</html>

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



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

/* +++++++++++Horizontale Werbung+++++++++++++ */

table[height="102"] {
width: 730px;
margin : 0 auto;
margin-top: 10px;
padding: 3px;
border-radius: 10px;
box-shadow : 0 0 5px #000;
background:#eee repeat left top;
}

/* +++++++++++Werbung Textlink+++++++++++++ */

#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;
}

/* +++++++++++Vertikale Werbung+++++++++++++ */

div#webme_sky_ad {
width : 160px;
height: 601px;
position : absolute;
top : 140px;
left : 50%;
right : 0;
margin-left : 650px;
box-shadow : 0 0 5px #000;
background:#eee repeat left top;
padding: 3px;
border-radius: 10px;
}

padding: 3px;
border-radius: 10px;
}

* { padding: 0; margin: 0; }

/* +++++++++++Body+++++++++++++ */

body {
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;
cursor:url(https://img.webme.com/pic/w/web-cube/cursor3-rot.png), default;
overflow:marquee; /* Inhalt scrollen*/
}



/* +++++++++++Links+++++++++++++ */

a {
color:#000;
text-decoration: underline;
}

a:hover {
color:#7E0000;
text-decoration: overline underline;

}

/* +++++++++++Überschirften+++++++++++++ */

h1 {
color:#fff;
margin:0;
padding:25px 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:#fff;
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:#fff;
}

#wrapper {
margin: 0 auto;
width: 1200px;
}
#faux {
background: url(faux-1-3-col.gif);
margin-bottom: 5px;
overflow: marquee;
width: 100%;
}

/* +++++++++++Header+++++++++++++ */
#header {
color: #fff;
width: 100%;
padding: 10px;
height: auto;
margin: 20px 0px 5px 0px;
background: #ad0000;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

/* +++++++++++Horizontale Navigation+++++++++++++ */

.menu_nav {
width: 100%;
margin-top:-30px;
float:left;
}

.menu_nav ul {
position:relative;
list-style:none;
padding:5px 10px 5px 245px;
float:left;
background: #AD0000;
width:965px;
border-top: 4px solid #fff;
box-shadow:4px 4px 4px #c9c9c9;
}


.menu_nav ul li {
margin-left: -5px;
padding: 0px 0px 0px 0px;
float:left;
transition: all 1.0s ease;
}

.menu_nav ul li:hover {
float:left;
color:#fff;
background: #c9c9c9;
border-radius:5px;
}

.menu_nav ul li a {
display:block;
margin-left:0px;
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 {
color:#fff;
font-weight:normal;
}

/* +++++++++++Linke Box+++++++++++++ */

#leftcolumn {
margin-top: -20px;
margin-left: 10px;
display: inline;
color: #333;
padding:0;
width: 195px;
float: left;
}


/* +++++++++++Menü links NEU+++++++++++++ */

ul.menulinks {
list-style-type: none !important;
margin-left: -10px; }

ul.menulinks li.link {
background-image: url(https://img.webme.com/pic/b/baukastenhilfe24/pfeilrotklein.png);
background-repeat: no-repeat;
padding-left: 30px;
height:40px; }

ul.menulinks li.link:hover {
background-image: url(https://img.webme.com/pic/b/baukastenhilfe24/pfeilgrauklein.png); }

ul.menulinks li.link a {
font-size: 14px;
color: #343434;
text-decoration: none; }

ul.menulinks li.link a:hover { color: #ad0000; }

/* +++++++++++Menü rechts NEU+++++++++++++ */

ul.menurechts {
list-style-type: none !important;
margin-left: -10px; }

ul.menurechts li.link {
background-image: url(https://img.webme.com/pic/b/baukastenhilfe24/pfeilrotklein.png);
background-repeat: no-repeat;
padding-left: 30px;
height:40px; }

ul.menurechts li.link:hover {
background-image: url(https://img.webme.com/pic/b/baukastenhilfe24/pfeilgrauklein.png); }

ul.menurechts li.link a {
font-size: 14px;
color: #343434;
text-decoration: none; }

ul.menurechts li.link a:hover { color: #ad0000; }


/* +++++++++++Content+++++++++++++ */

#content {
float: left;
color: #333;
margin: 5px 20px;
margin-top: -20px;
padding:0;
width: 700px;
overflow:marquee; /* Inhalt scrollen*/
}

/* +++++++++++Rechte Box+++++++++++++ */

#rightcolumn {
display: inline;
position: relative;
color: #333;
margin: 10px 10px 10px;
margin-top: -20px;
padding:0;
width: 205px;
float: right;

/* +++++++++++Footer+++++++++++++ */

}
#footer {
width: 100%;
clear: both;
color: #fff;
background: #ad0000;
margin: 0px 0px 10px 0px;
padding: 10px;
box-shadow:4px 4px 4px #c9c9c9;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.clear { clear: both; background: none; }

#footer a {
color:#fff;
text-decoration: underline;
}

#footer a:hover {
color:#fff;
text-decoration: overline underline;

}

/* +++++++++++News Box+++++++++++++ */

/* Gesamte News-Box */
#newsbox{
margin-left: -10px;
height: 230px;
width: 200px;
overflow: hidden;
padding: 2px 2px 2px 2px;
background-color: transparent;
box-shadow:4px 4px 4px #c9c9c9;
border: 1px solid #973232;
border-radius: 8px;
border-left:4px solid #ad0000;
border-right:4px solid #ad0000;}

/* News-Felder */
#newsbox li{
height: 70px;
padding: 5px;
list-style-type: none;}

/* News-Felder */
#newsbox li:hover{
background-color: #e5e5e5;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
opacity: .6;
border-radius: 8px;
}

/* Linkfarbe */
#newsbox a{ color: #000000;}

/* Aussehen News-Titel */
.news-title {
display: block;
font-weight: bold;
margin-bottom: 4px;
font-size: 13px; }

/* Aussehen Newstext */
.news-text {
display: block;
font-size: 13px;
color: #666666; }


/* +++++++++++News Box ENDE+++++++++++++ */


/* +++++++++++BOX GANZE SEITE+++++++++++++ */
#boxseite{
color: #000;
background: transparent;
border: 1px solid #7E0000;
border-radius: 10px 10px 10px 10px;
width: 650px;
padding: 5px;
margin: 5px;
box-shadow:8px 8px 8px #c9c9c9;
border-left:4px solid #ad0000;
border-right:4px solid #ad0000;
}

/* +++++++++++BOX GANZE SEITE ENDE+++++++++++++ */

/* +++++++++++Bild verblassen+++++++++++++ */

#hilfeseiten {
border-left:4px solid #7E0000;
border-right:4px solid #7E0000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin-right: 10px;
margin-bottom: 10px;
box-shadow:4px 4px 4px #c9c9c9;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
opacity: .6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
filter: alpha(opacity=60); }


#hilfeseiten:hover {
border-left:4px solid #973232;
border-right:4px solid #973232;
opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100); }

/* +++++++++++Bild verblassen ENDE+++++++++++++ */

/* +++++++++++Buttons für Magazin+++++++++++++ */

#buttonmagazinleft{
width: 125px;
padding: 5px;
padding-left: 8px;
border: 1px solid #e0e0e0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #fff;
float: left;
margin: 10px 10px 10px 10px;
}

#buttonmagazinleft:hover{
padding-left: 4px;
border-left: 5px solid #cc0000;
border-right: 5px solid #cc0000;
background: #eeeeee;
}

#buttonmagazinright{
width: 125px;
padding: 5px;
padding-right: 8px;
border: 1px solid #e0e0e0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #fff;
float: right;
margin: 10px 10px 10px 10px;

}

#buttonmagazinright:hover{
padding-right: 4px;
border-left: 5px solid #cc0000;
border-right: 5px solid #cc0000;
background: #eeeeee;
}


#buttonmagazincenter{
width: 125px;
padding: 5px;
border: 1px solid #e0e0e0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #fff;
margin: 10px 10px 10px 10px;
margin-left: 260px;

}

#buttonmagazinright a, #buttonmagazinleft a {
color:#000;
}

/* +++++++++++Buttons für Magazin ENDE+++++++++++++ */


/* Feld um das Klappmenu */
#klappmenu {
position: relative;
margin-top: 40px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
}

#klappmenu ul { list-style-type: none; margin:0px; padding: 0px; }
#liste ul li { margin: 0; border: none; }

/* Button Breite + Rahmen + Abstand */
#liste li {
width: 135px;
float: left;
text-align: center;
border: 1px solid #c9c9c9;
margin-right: 5px;
margin-left: 5px; }

/* Button Linkfarbe + Hintergrundfarbe */
#liste a {
display: block;
padding: 5px 5px 5px 5px;
color: #000000;
font-size: 13px;
background-color: #FFFFFF;
text-decoration: none; }

/* Button Hover-Farbe */
#liste a:hover {
color: #FFFFFF;
background-color: #008080; }

#liste li ul { display:none;
position: relative; } /* eingeklappt */
#liste li:hover ul { display:block;
position: relative; } /* ausgeklappt */




#boxgruen{
width: 650px;
padding: 5px;
background: -moz-linear-gradient(top, #97DFB4, #BAF2D0);
background: -webkit-linear-gradient(top, #97DFB4, #BAF2D0);
background: -ms-linear-gradient(top, #97DFB4, #BAF2D0);
background: -o-linear-gradient(top, #97DFB4, #BAF2D0);
border: 3px solid #e0e0e0;
border-radius: 5px;

}

#boxgruen:hover{
background: -moz-linear-gradient(top, #8EC3A3, #BAF2D0);
background: -webkit-linear-gradient(top, #8EC3A3, #BAF2D0);
background: -ms-linear-gradient(top, #8EC3A3, #BAF2D0);
background: -o-linear-gradient(top, #8EC3A3, #BAF2D0);
background-repeat: no-repeat;
}

#boxgroß{
color: #000;
background: transparent;
border: 1px solid #7E0000;
border-radius: 10px 10px 10px 10px;
width: 600px;
padding: 5px;
margin: 5px;
box-shadow:8px 8px 8px #c9c9c9;
border-left:4px solid #ad0000;
border-right:4px solid #ad0000;
}

#boxgroß a {
color:#000;
}

#boxsocial{
color: #000;
background: transparent;
border: 1px solid #7E0000;
border-radius: 10px 10px 10px 10px;
width: 170px;
height: auto;
padding: 10px;
box-shadow:4px 4px 4px #c9c9c9;
border-left:4px solid #ad0000;
border-right:4px solid #ad0000;
}

/* +++++++++++Award-Boxen+++++++++++++ */

#awardseiten {
border-left:4px solid #ad0000;
border-right:4px solid #ad0000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin-right: 10px;
margin-bottom: 10px;
box-shadow:4px 4px 4px #c9c9c9;
}


#boxawardrechts {
color: #000;
background: transparent;
border: 1px solid #7E0000;
border-radius: 10px 10px 10px 10px;
width: 163px;
height: auto;
padding: 10px;
box-shadow:4px 4px 4px #c9c9c9;
border-left:4px solid #ad0000;
border-right:4px solid #ad0000;
}

#boxawardrechts a {
color:#000;
}



/* +++++++++++Award-Boxen ENDE+++++++++++++ */

/* +++++++++++Code-Box+++++++++++++ */

pre.codebox {
width: 650px;
height: 150px;
font-family: arial;
font-size: 11px;
display: block;
padding: 10px;
background-color: transparent;
border: 2px solid #7E0000;
overflow: auto; }

#TB_window{border-radius: 15px;}
#TB_Image{border: none !important;}

/* +++++++++++Bild-Anzeige+++++++++++++ */

.bildbox {
width:172px;
height: 130px;
float: left;
text-align: center;
padding: 10px;
margin: 10px;
background-color: #eee;
border-left:4px solid #7E0000;
border-right:4px solid #7E0000;
border-radius: 8px;
box-shadow: 3px 3px 7px #202020;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
opacity: .6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
filter: alpha(opacity=60);}

.bildbox p {
font-size:11px!important;
font-family:arial;
color: #000000;
margin-top: 10px; }

.bild {
width: 170px;
height: 100px;
border: 1px solid #FFFFFF;}

.bildbox:hover {
border-left:4px solid #7E0000;
border-right:4px solid #7E0000;
opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100); }

/* +++++++++++Bild Anzeige ENDE+++++++++++++ */

p.textblock {padding: 5px 5px 5px 5px; margin-bottom:10px;}
p.textblock a {
display: block;
color: #343434;
text-decoration: none;
font-weight: bold;
font-size: 13px;
float: right;
margin: 5px 15px 0px 0px;
font-style: italic; }





Ihr dürft dieses Template kostenlos verwenden und verändern, allerdings muss das Copyright unverändert bleiben!
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=