HpBk-TemplateWorld

General

Design-Übersicht

» Dieses Design darfst du kostenlos für deine Homepage verwenden. Unter "Und so geht´s" (weiter unten auf dieser Seite) findest du eine kurze Anleitung, wie du dieses Design im Homepage-Baukasten einfügst. Mit einem Klick auf das Bild des Designs vergrößert du die Vorschau.

» Bitte beachte:
Die Copyright Informationen im Footer des Designs dürfen auf keinen Fall entfernt oder geändert werden, da du sonst gegen die Lizenz- und Nutzungsrechte des Designs verstößt. Der Link zu HpBk-TemplateWorld darf ebenfalls nicht verändert werden. Dieses Design ist ein kostenloses Design von www.templatemo.com.

Genreal

» Außergewöhnlich
Dieses Design ist, wie es der Titel schon verrät, wirklich außergewöhnlich. Es gibt einen großen Header, in dem sogar News auf den ersten Blick einen Platz finden. Zudem gibt es direkt unter dem Header eine tolle Navigation, deren Icons man selbstverständlich austauschen kann. Außerdem ist auf der rechten Seite genügend Platz für weitere Infos vorhanden und auch der Footer bietet reichlich Platz.

» Bewertung:

Design-Code

» Text über dem Design | Code in einem separaten Fenster öffnen.

<div id="templatemo_header_wrapper">
<div id="templatemo_header">
<div id="site_title">
<h1><a href="http://www.templatemo.com" target="_parent">                  <img width="157" height="24" src="images/templatemo_logo.png" alt="General Template"> <span>slogan deiner homepage</span>             </a></h1>
</div>
</div>
</div>

<div id="templatemo_banner_wrapper">
<div id="templatemo_banner">
<h2>FREE CSS TEMPLATES<span>In turpis nunc, consectetur ut porta id, semper vitae justo. Nulla facilisi. Curabitur et eros sapien, ut feugiat lectus</span></h2>
<p>Praesent malesuada, risus vel posuere laoreet, lacus lorem imperdiet tortor, id semper nunc orci ac turpis. Donec fermentum ullamcorper justo a vehicula. Curabitur rhoncus lobortis mauris, vitae varius nisl scelerisque ut. Praesent luctus magna quis risus dapibus rutrum.</p>
</div>
</div>

<div id="templatemo_menu_wrapper">
<div id="templatemo_menu">
<ul>
	<li><a href="#"><span class="home">Home</span></a></li>
	<li><a href="#"><span class="aboutus">About</span></a></li>
	<li><a href="#"><span class="services">Services</span></a></li>
	<li><a href="#"><span class="news">News</span></a></li>
	<li><a href="#"><span class="gallery">Gallery</span></a></li>
	<li><a href="#"><span class="contact">Contact</span></a></li>
</ul>
</div>
</div>

<div id="templatemo_content_wrapper">
<div id="templatemo_content">
<div class="content_section">
<div class="service_box float_l">
<div class="service_text"></div>

» Text unter dem Design | Code in einem separaten Fenster öffnen.

</div>
<div class="service_box float_r">
<div class="service_text">
<div class="section_410 float_r">
<h2>News oder Infobox</h2>
<div class="news_box">
<h3><a href="#">Praesent pretium diam quam</a></h3>
<p align="justify">Praesent malesuada, risus vel posuere laoreet, lacus lorem imperdiet tortor, id semper nunc orci ac turpis. Donec fermentum <a href="#">ullamcorper</a> justo a vehicula. Curabitur rhoncus lobortis mauris.</p>
</div>
<div class="cleaner_h20"></div>
<div class="button_01"><a href="#">Mehr dazu</a></div>
<div class="section_410 float_r">
<h2>News oder Infobox</h2>
<div class="news_box">
<h3><a href="#">Praesent pretium diam quam</a></h3>
<p align="justify">Praesent malesuada, risus vel posuere laoreet, lacus lorem imperdiet tortor, id semper nunc orci ac turpis. Donec fermentum <a href="#">ullamcorper</a> justo a vehicula. Curabitur rhoncus lobortis mauris.</p>
</div>
<div class="cleaner_h20"></div>
<div class="button_01"><a href="#">Mehr dazu</a></div>
</div>
</div>
</div>
<div class="cleaner"></div>
</div>
<div class="content_section">
<div class="section_410 float_l"></div>
</div>
<div class="cleaner"></div>
</div>
</div>
</div>

<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
<div class="section_w300">
<h3>Partner</h3>
<div class="sub_content">
<ul class="footer_list">
	<li><a href="http://www.templatemo.com/page/1" target="_parent">Free CSS Templates</a></li>
	<li><a href="http://www.flashmo.com/page/1" target="_parent">Free Flash Templates</a></li>
	<li><a href="http://www.flashmo.com/store" target="_parent">Premium Templates</a></li>
	<li><a href="http://www.webdesignmo.com" target="_parent">Web Design Blog</a></li>
	<li><a href="http://www.koflash.com">Best Flash Gallery</a></li>
</ul>
</div>
</div>
<div class="section_w300">
<h3>Links</h3>
<div class="sub_content">
<ul class="footer_list">
	<li><a href="#">Lorem ipsum dolor</a></li>
	<li><a href="#">Cum sociis</a></li>
	<li><a href="#">Donec quam</a></li>
	<li><a href="#">Nulla consequat</a></li>
	<li><a href="#">In enim justo</a></li>
</ul>
</div>
</div>
<div class="section_w300">
<h3>Copyright</h3>
<div class="sub_content">
<p>Nullam ultrices tempor nisi, ac egestas diam aliquam a. Ut eleifend semper turpis, id feugiat arcu dignissim eu. Donec mattis adipiscing imperdiet.</p>
</div>
</div>
<div class="cleaner_h40"> </div>
<center>         Copyright © 2048 <a href="#">Your Company Name</a> |          <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a> | Coding: <a href="http://HpBk-TemplateWorld.de.tl">HpBk-TemplateWorld</a>     </center></div>
</div>

» CSS-Code ohne Style Tags | Code in einem separaten Fenster öffnen.

/* ---Dieses Design und noch viele weitere kostenlose Designs findest du auf HpBk-TemplateWorld.de.tl - der Community für Designs und Tutorials im HpBk.--- */

#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_heading {
display:none;
}

#nav {
display:none;
}

div.header {
display:none;
}

h1#title {
display:none;
}

h2#title span {
display:none;
}

td[height="102"] { 
position:absolute; 
left:50%; 
margin-left:-384px; }a

#counter {
display: none;
}

#webme_sky_ad {
top: 600px;
z-index: 1000000000000000000;
}

#webme_footer_textlink_dont_hide{
background: transparent;
position:absolute;
left:50%;
margin-left:-225px;
color: grey;
z-index:200;}

1/*
Credit: http://www.templatemo.com
*/

body {
	margin: 0;
	padding: 0;
	line-height: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #2a3c48;
	background: #ffffff;
}
		
a:link, a:visited { color: #0066CC; text-decoration: none; font-weight: normal; } 
a:active, a:hover { color: #CC0000; text-decoration: underline; }

p { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.float_l {
	float: left;
}

.float_r {
	float: right;
}

.divider {
	background:  none repeat-x bottom;
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

.button_01 a {
	display: block;
	width: 95px;
	height: 23px;
	padding: 6px 6px 0 0;
	
	color: #163142;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567650.png)

no-repeat;
}

.button_01 a:hover {
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567651.png)

no-repeat;
}

/* header */

#templatemo_header_wrapper {
	width: 100%;
	height: 80px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567652.jpg)

repeat-x;
}

#templatemo_header {
	width: 980px;
	height: 80px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567653.jpg)

no-repeat;
}

#templatemo_header  #site_title {
	float: left;
	width: 400px;
	padding: 20px 0 0 40px;
}

#templatemo_header  #site_title h1 {
	margin: 0;
	padding: 0;
}

#templatemo_header  #site_title h1 a {
	margin: 0px;
	padding: 0px;
	font-size: 30px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#templatemo_header  #site_title h1 a span {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #CCC;
	font-weight: bold;
	letter-spacing: 2px;
}

#templatemo_header .social_network {
	float: right;
	margin: 0px;
	padding: 20px 40px 0 0;
	list-style: none;
}

.social_network li {
	margin: 0px;
	padding: 0px;
	display: inline;
}

.social_network li a {
	float: left;
	display: block;
	width: 40px;
	height: 50px;
	margin-left: 5px;
}
/* end of header */

/* banner */

#templatemo_banner_wrapper {
	clear: both;
	width: 100%;
	height: 260px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567654.jpg)

repeat-x;
}

#templatemo_banner {
	width: 900px;
	height: 180px;
	padding: 40px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567655.jpg)

no-repeat;
}

#templatemo_banner h2 {
	margin: 0 0 30px 0;
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	line-height: 26px;
}

#templatemo_banner h2 span {
	clear: both;
	display: block;
	margin-top: 10px;
	font-size: 24px;
	color: #e2e8ed;
}

#templatemo_banner p {
	font-size: 16px;
	color: #9eb4c7;
}
/* end of banner */

/* menu */

#templatemo_menu_wrapper {
	width: 100%;
	height: 110px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567656.jpg)

repeat-x;
}

#templatemo_menu {
	width: 980px;
	height: 110px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567656.jpg)

repeat-x;
}

#templatemo_menu ul {
	margin: 0;
	padding: 1px 40px 0 40px;
	list-style: none;
}

#templatemo_menu ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
}

#templatemo_menu ul li a {
	float: left;
	display: block;
	width: 120px;
	height: 95px;	
	padding: 15px 0 0 0;
	margin-right: 5px;
	text-align: center;
	font-size: 16px;
	text-decoration: none;
	color: #163142;	
	font-weight: bold;
	outline: none;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567657.jpg)

no-repeat;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
	color: #000000;	
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567658.jpg)

no-repeat;
}

#templatemo_menu ul li a .home {
	display: block;
	height: 20px;
	padding: 55px 0 0 0;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567659.png)

no-repeat center top;
}

#templatemo_menu ul li a .aboutus {
	display: block;
	height: 20px;
	padding: 55px 0 0 0;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567660.png)

no-repeat center top;
}

#templatemo_menu ul li a .services {
	display: block;
	height: 20px;
	padding: 55px 0 0 0;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567662.png)

no-repeat center top;
}

#templatemo_menu ul li a .news {
	display: block;
	height: 20px;
	padding: 55px 0 0 0;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567663.png)

no-repeat center top;
}

#templatemo_menu ul li a .gallery {
	display: block;
	height: 20px;
	padding: 55px 0 0 0;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567665.png)

no-repeat center top;
}

#templatemo_menu ul li a .contact {
	display: block;
	height: 20px;
	padding: 55px 0 0 0;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567666.png)

no-repeat center top;
}

/* end of menu */

/* content */

#templatemo_content_wrapper {
	clear: both;
	width: 100%;
}

#templatemo_content {
	width: 900px;
	padding: 40px;
	margin: 0 auto;
	background:  none top center no-repeat;
}

.content_section {
	width: 100%;
	clear: both;
	margin-bottom: 20px;
	padding-bottom: 30px;
}

.content_section h2 {
	color: #455e72;
	font-size: 28px;
	margin-bottom: 30px;
	font-weight: normal;
}

.content_section p {
	margin: 0 0 10px 0;
}

.recent_project {
	margin: 0;
	padding: 0;
	list-style: none;
}

.recent_project li {
	margin: 0;
	padding: 0;
	display: inline;
}

.recent_project li a {
	float: left;
	display: block;
	width: 200px;
	height: 100px;
	padding: 2px;
	margin: 0 15px 15px 0;
	border: 2px dashed #613c21;
	display: inline;
}

.service_box {
	width: 410px;
}

.service_image {
	width:150px;
	float: left;
	margin: 3px 0 0 0;
	border: 5px solid #d5d5d5;
}

.service_box .service_text {
	float: right;
	width: 230px;
	text-align: justify;
}

.service_text h3 {
	font-size: 18px;
	color: #2a3e4c;
	margin: 0 0 15px 0;
	font-weight: bold;
}

.service_text p {
	margin-bottom: 20px;
}

.section_410 {
	width: 410px;
}

.recent_project {
	margin: 0;
	padding: 0;
	list-style: none;
}

.recent_project li {
	margin: 0;
	padding: 0;
	display: inline;
}

.recent_project li a {
	float: left;
	display: block;
	width: 80px;
	height: 80px;
	margin: 0 10px 10px 0;
	border: 5px solid #303030;
	display: inline;
}

.news_image {
	float: left;
	margin: 3px 25px 0 0;
	border: 5px solid #303030;
}

.news_box {
	clear: both;
	margin-bottom:20px;
}
	
.news_box h3 {
	font-size: 14px;
	margin: 0 0 10px 0;
}

.news_box h3 a {
	font-weight: bold;
}
/* end of content */

/* footer */

#templatemo_footer_wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 30px 0;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/567668.jpg)

repeat;
}

#templatemo_footer {
	width: 900px;
	margin: 0 auto;
	padding: 0 40px;
	color: #ffffff;
}

#templatemo_footer  a {
	text-decoration: underline;
}

#templatemo_footer .section_w300 {
	float: left;
	width: 260px;
	padding-right: 40px;
}

#templatemo_footer .section_w300 h3 {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 15px 0;
	color: #6f818d;
	
}

#templatemo_footer .footer_list {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#templatemo_footer .footer_list li {
	margin: 0px;
	padding: 3px 0;
}

#templatemo_footer a {
	color: #ffffff;
	text-decoration: none;
}

#templatemo_footer a:hover {
	color: #CCCC00;
	text-decoration: none;
}
/* end of footer */

Und so geht´s

» Zuerst musst du dich in den Homepage-Baukasten einloggen.
» Dann klickst du auf "Design einstellen" und wählst dort das "CSS-Design - Nur für Profis geeignet" aus.
» Danach klickst du auf "Erweiterte Einstellungen" und fügst die Codes, die hier auf der Seite stehen, in die verschiedenen Felder "Text über dem Design", "Text unter dem Design" und "CSS-Code ohne Style Tags" ein.
» Danach speicherst du das Ganze ab und darfst dein neues Design bestaunen.
» Beachte bitte, dass deine Menüpunkte nicht automatisch übernommen werden. Du musst deine Menüpunkte manuell einfügen. Dies geschieht meistens im Code von "Text über dem Design" oder "Text unter dem Design".

Download des Original-Designs

» Auf folgender Seite kannst du das Paket des Designs kostenlos von TemplateMo.com herunterladen. Darin enthalten sind die Bilder des Designs, der unbearbeitete CSS-Design-Code und eine Live-Vorschau des Designs. Zum Download.

Du hast Fragen oder Probleme?

» Klappt etwas bei dir nicht? Oder du hast eine bestimmte Frage? Dann melde dich bitte in der "TemplateWorld Community". Nur dort kann ich dir schnell helfen. Wenn du deine Frage hier als Kommentar hinterlässt, kann ich dir leider keinen Support geben, da ich nicht alle Design-Seiten durchsuchen kann, wo dein Kommentar geschrieben wurde. Deshalb bitte ich um dein Verständnis.

Kommentar zu dieser Seite hinzufügen: