HpBk-TemplateWorld

Block 3D

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.

Block 3D

» Erlebe eine neue Dimension
Das Design "Block 3D" enthält tolle 3D Elemente mit bunten Farben. Besonders das obere Menü wurde witzigerweise in den 3D Elementen eingebaut. Der Content befindet sich in der Mitte und wächst mit dem Inhalt eurer Seite mit. Rechts und links habt ihr jeweils Platz für Informationen, Partnerlinks usw. Ein großer Footer ist ebenfalls vorhanden. Bei diesem Design werden eure Besucher garantiert überrascht sein!

» Bewertung:

Design-Code

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

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

<div class="section_w170_p15">
					<a href="#"> </a></div>
				<div class="section_w170_p15">
					<div class="header_02">
						News</div>
					<div class="news_section">
						<div class="header_03">
							<a href="#">Lorem ipsum dolor sit amet consectetur </a></div>
						<p>
							Maecenas tellus erat, dictum vel semper a, dapibus ac elit. Nunc rutrum pretium porta.</p>
					</div>
					<div class="news_section">
						<div class="header_03">
							<a href="#">Aenean feugiat mattis est nec egestas</a></div>
						<p>
							Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
					</div>
					<div class="news_section">
						<div class="header_03">
							<a href="#"> Pellentesque lacus enim, bibendum id lacinia in</a></div>
						<p>
							Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
					</div>
				</div>
			</div>
			<div class="cleaner">
				 </div>
		</div>
	</div>
</div>
<div id="templatemo_footer_wrapper">
	<div id="templatemo_footer">
		<div class="section_w180px">
			<div class="header_04">
				Popular</div>
			<ul class="footer_menu_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 class="section_w180px">
			<div class="header_04">
				About</div>
			<ul class="footer_menu_list">
				<li>
					<a href="#">Nullam quis</a></li>
				<li>
					<a href="#">Sed consequat</a></li>
				<li>
					<a href="#">Cras dapibus</a></li>
				<li>
					<a href="#">Lorem ipsum dolor</a></li>
				<li>
					<a href="#">Cum sociis</a></li>
			</ul>
		</div>
		<div class="section_w180px">
			<div class="header_04">
				Friends</div>
			<ul class="footer_menu_list">
				<li>
					<a href="#">Aenean vulputate</a></li>
				<li>
					<a href="#">Etiam ultricies</a></li>
				<li>
					<a href="#">Nullam quis</a></li>
				<li>
					<a href="#">Sed consequat</a></li>
				<li>
					<a href="#">Cras dapibus</a></li>
			</ul>
		</div>
		<div class="section_w180px">
			<div class="header_04">
				Useful Links</div>
			<ul class="footer_menu_list">
				<li>
					<a href="#">Donec quam</a></li>
				<li>
					<a href="#">Nulla consequat</a></li>
				<li>
					<a href="#">In enim justo</a></li>
				<li>
					<a href="#">Aenean vulputate</a></li>
				<li>
					<a href="#">Etiam ultricies</a></li>
			</ul>
		</div>
		<div class="section_w180px">
			<div class="header_04">
				XHTML/CSS Validators</div>
			<a href="http://validator.w3.org/check?uri=referer"><img alt="Valid XHTML 1.0 Transitional" border="0" height="31" src="http://www.w3.org/Icons/valid-xhtml10" style="border:0" vspace="8" width="88" /></a>
			<div class="margin_bottom_10">
				 </div>
			<a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="Valid CSS!" border="0" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" style="border:0" vspace="8" /></a></div>
		<div class="margin_bottom_20">
			 </div>
		Copyright © 2048 <a href="#">Your Company Name</a> | <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.iwebsitetemplate.com">Free CSS Templates</a> | Coding: <a href="http://HpBk-TemplateWorld.de.tl">HpBk-TemplateWorld</a></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; }

#counter {
display: none;
}

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

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

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

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #000000;
	background: #ffffff;
}
		
a:link, a:visited { color: #004358; text-decoration: none; font-weight: normal;} 
a:active, a:hover { color: #004358; text-decoration: underline;}

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

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

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

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px;	}
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px;	}
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px;	}
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px;	}
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px;	}
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px;	}

.margin_right_20 { margin-right: 20px; }
.margin_right_40 { margin-right: 40px; }

.fl {
	float: left;
}

.fr {
	float: right;
}

.divider {
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569956.jpg) bottom repeat-x;
}

#templatemo_container {
	width: 990px;
	margin: 0 auto;
}

#templatemo_header_wrapper {
	width: 1200px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569957.jpg) center top no-repeat;
}

#templatemo_header {
	clear: both;
	width: 990px;
	height: 320px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569957.jpg) center top no-repeat;
}

#templatemo_header #site_title {
	float: left;
	width: 180px;
	height: 50px;
	margin: 205px 0 0 75px;
	padding: 25px 20px 0 20px;
	font-size: 40px;
	color: #000000;
}

#templatemo_header #site_title a{
	color: #000000;
	text-decoration: none;
}

#templatemo_header #site_title span {
	display: block;
	margin-top: 10px;
	margin-left: 5px;
	font-size: 12px;
}

/* menu */
#templatemo_menu_wrapper {
	clear: both;
	width: 1200px;
	height: 50px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569958.jpg) top center no-repeat;
}

#templatemo_menu {
	width: 957px;
	height: 50px;
	padding: 0 0 0 33px;
	margin: 0 auto;

}

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

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

#templatemo_menu ul li a{
	float: left;
	display: block;
	height: 35px;
	width: 156px;
	margin-right: 3px;
	padding-top: 15px;
	text-align: center;
	font-size: 14px;
	text-decoration: none;
	color: #000000;	
	font-weight: bold;
	outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
	color: #ffffff;
}

/* end of menu*/

/* content */

#templatemo_content_outer_wrapper {
	clear: both;
	width: 1200px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569959.jpg) repeat-y;
}

#templatemo_content_inner_wrapper {
	width: 1200px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569960.jpg) top center no-repeat;
}

#tempatemo_content {
	width: 900px;
	padding: 0 45px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569960.jpg) top center no-repeat;
}

.side_column_w200 {
	float: left;
	width: 200px;
	padding-top: 80px;
}

.content_column {
	position: relative;
	float: left;
	width: 400px;
	padding: 0 30px;
	padding-top: 80px;	
	background: none repeat-y;
}

.header_01 {
	font-size: 20px;
	color: #004358;
	font-weight: bold;
	margin-bottom: 10px;
}

.header_02 {
	font-size: 16px;
	color: #004358;
	font-weight: bold;
	padding-bottom: 10px;
	margin-bottom: 10px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569956.jpg) bottom repeat-x;
}

.header_03 {
	font-size: 12px;
	color: #32697a;
	font-weight: bold;
	margin-bottom: 5px;
}

.header_04 {
	font-size: 12px;
	color: #000000;
	font-weight: bold;
	margin-bottom: 10px;
}

.header_03  a{
	color: #32697a;
	font-weight: bold;
}

.section_w170_p15 {
	width: 170px;
	padding: 0 15px;
	margin-bottom: 30px;
}

.side_column_w200 form {
	margin: 0px;
	padding: 0px;
}

.inputfield {
	height: 16px;
	width: 160px;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-size: 12px;
	font-variant: normal;
	line-height: normal;
}

.submitbutton{
	float: right;
	margin: 0px;
	padding: 0 6px 3px 6px;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
}

#message_input {
	background:#FFFFFF none repeat fixed 0 0;
	border:1px solid #BBBBBB;
	display:block;
	height: 80px;
	margin-top:5px;
	padding:5px;
	width: 160px;
	margin-bottom: 5px;
}

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

.side_menu li {
	padding: 0;
	margin: 5px 0;
}

.side_menu li a {
	display: block;
	color: #ffffff;
	padding: 2px 10px;
	background: #999;
}
.side_menu li a:hover {
	text-decoration: none;
	background: #666;
}

.section_rss_twitter a{
	display: block;
	width: 170px;
	padding: 20px 0 0 0;
	font-size: 16px;
	font-weight: bold;
	color: #004358;	
}

.section_rss_twitter a:hover {
	text-decoration: none;	
}

.section_rss_twitter a span {
	font-size: 12px;
	margin-top: 5px;
	display: block;
	letter-spacing: 5px;
}

.rss a{

background: url(https://img.webme.com/pic/h/hpbk-templateworld/569961.png) right bottom no-repeat;
}

.twitter a{

background: url(https://img.webme.com/pic/h/hpbk-templateworld/569962.png) right bottom no-repeat;
}

.news_section {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #999;
}

.post_section {
	clear: both;
	padding-bottom: 20px;
	background:  none bottom repeat-x;	
	margin-bottom: 20px;
}

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

.post_info {
	font-size: 14px;
	margin-bottom: 20px;
}

.post_info a {
	color: #000000;
	text-decoration: underline;
}

.post_content img {
	margin-bottom: 10px;
}

.post_content .link_button a{
	margin-top: 10px;
	color: #004358;
	text-decoration: none;
}
/* end of content */

/* footer */

#templatemo_footer_wrapper {
	clear: both;
	width: 100%;
	margin: 0 auto;
}

#templatemo_footer {
	clear: both;
	width: 900px;
	margin: 0 auto;
	padding: 30px 45px;
	margin-top: 30px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/569956.jpg) top repeat-x;
}

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

.footer_menu_list li {
	margin: 0px;
	padding: 0px;
}

.footer_menu_list li a {
	color: #333;
}

.section_w180px {
	float: left;
	width: 140px;
	padding-right: 40px;
}

/* 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: