HpBk-TemplateWorld

Grand Mini

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.

Grand Mini

» Klein, aber fein!
Das Design Grand Mini ist, wie es der Name schon verrät, sehr klein gehalten. In der Navigation gibt es Platz für 5 Menüpunkte. Im Header kann man ebenfalls sein eigenes Logo einfügen. Trotz der einfachen Aufteilung bietet das Design mit seinen blauen Farbelementen etwas ganz Besonderes.

» Bewertung:

Design-Code

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

<div id="site_title">
            <h1><a href="http://www.templatemo.com">Free CSS Templates</a></h1>
        </div>
	</div> 
    <div id="twitter">“Nullam at erat ipsum, quis tincidunt mauris. Nunc sit amet sapien eget eros iaculis hendrerit quis a enim.”</div>
    <div id="templatemo_menu">
        <ul>

<li><a href="#home"><span class="home"></span>Home</a></li>
            <li><a href="#about"><span class="aboutus"></span>About Us</a></li>
            <li><a href="#news"><span class="news"></span>News</a></li>
            <li><a href="#portfolio"><span class="portfolio"></span>Portfolio</a></li>
            <li class="last"><a href="#contact"><span class="contactus"></span>Contact</a></li>
        </ul>    	
    </div>

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

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

#counter{
display: none; }

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

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

body {
	margin: 0;
	padding: 0;
	color: #686d73;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 1.5em; 
	background-color: #172b43;
	background-image: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_body2.jpg);
	background-position: top;
	background-repeat: repeat-x
}

a, a:link, a:visited { 
	color: #061c34; 
	font-weight: 400; 
	text-decoration: underline; 
}

a:hover { 
	text-decoration: none; 
}

a.gototop { 
	display: block; 
	clear: both; 
	margin: 0 auto; 
	width: 26px; 
	height: 24px; 
	background:  none no-repeat;  
}

a.gototop:hover { 
	background:  none; 
}

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

img { 
	border: none; 
}

blockquote { 
	font-style: italic; 
	margin: 0 0 0 10px;
}

cite { 
	font-weight: bold; 
	color:#061c34; 
}

cite span { 
	color: #63778c; 
}

em { 
	color: #1c80ed; 
	font-weight: 400; 
}

h1, h2, h3, h4, h5, h6 { color: #ff9c00; font-weight: normal;  }
h1 { font-size: 34px; margin: 0 0 20px; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px; padding: 5px 0 }
h3 { font-size: 20px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0;  }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }

.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }

.float_l { float: left }
.float_r { float: right }

.image_wrapper { 
	display: inline-block; 
	position: relative; 
	margin: 3px 0 10px 0; 
}

.image_wrapper span{ 
	position: absolute; 
	bottom: 0; 
	right: 0; 
	width: 120px; 
	height: 100px; 
	background: url(images/templatemo_image_frame.png) no-repeat;   
}

.image_fl { 
	float: left; 
	margin: 3px 20px 0 0;
}

.image_fr { 
	float: right; 
	margin: 3px 0 0 20px; 
}

.templatemo_list { 
	margin: 20px 0 20px 10px; 
	padding: 0; 
	list-style: none; 
}

.templatemo_list li { 
	color:#ff9c00; 
	margin: 0; 
	padding: 0 0 5px 10px; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_list.png) no-repeat scroll 0 7px;  
}

.templatemo_list li a { 
	color: #ff9c00; 
	font-weight: normal; 
	font-size: 12px; 
	text-decoration: none; 
}

.templatemo_list li a:hover { 
	color: #1c80ed; 
	text-decoration: underline; 
}

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

#templatmeo_header {
	width: 800px;
	height: 80px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_header.jpg) no-repeat top center
}

#site_title { 
	float: left; 
}

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

#site_title h1 a { 
	display: block; 
	width: 212px; 
	height: 49px; 
	margin: 20px 0 0; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_logo.png) no-repeat; 
	color: #fff; 
	font-size: 40px; 
	font-weight: 400; 
	outline: none; 
	text-indent: -10000px; 
}

#twitter {
	clear: both;
	width: 800px;
	height: 20px;
	padding: 10px 0;
	color: #fff;
	font-size:14px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_twitter.png) center right no-repeat;
}

#templatemo_menu { 
	clear: both; 
	width: 800px; 
	height: 70px; 
	background: #0e4981; 
	margin-bottom: 10px; 
}

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

#templatemo_menu ul li { 
	margin: 0; 
	padding: 0; 
}

#templatemo_menu ul li a {
	float: left;
	position: relative;
	display: block;
	padding-top: 45px;
	width: 140px;
	height: 25px;
	margin-right: 15px;
	font-size: 12px;
	color: #fff;	
	text-align: center;
	text-decoration: none;
	font-weight: 400;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_menu_bg.png) no-repeat;
	outline: none;
}

#templatemo_menu ul li span.home { 
	position: absolute; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_home.png) no-repeat; 
	top: 15px; 
	left: 58px; 
	width: 26px; 
	height: 25px; 
}

#templatemo_menu ul li span.aboutus { 
	position: absolute; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_about.png) no-repeat; 
	top: 15px; 
	left: 58px; 
	width: 26px; 
	height: 25px; 
}

#templatemo_menu ul li span.news { 
	position: absolute; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_service.png) no-repeat; 
	top: 15px; 
	left: 58px; 
	width: 26px; 
	height: 25px; 
}

#templatemo_menu ul li span.portfolio { 
	position: absolute; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_portfolio.png) no-repeat; 
	top: 10px; 
	left: 58px; 
	width: 26px; 
	height: 25px; 
}

#templatemo_menu ul li span.contactus { 
	position: absolute; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_contact.png) no-repeat; 
	top: 15px; 
	left: 58px; 
	width: 26px; 
	height: 25px; 
}

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

#templatemo_main {
	clear: both;
	width: 800px;
}

.content_box {
	clear: both;
	padding: 40px 40px 5px 40px;
	margin-bottom: 10px; 
	background: #fff url(https://img.webme.com/pic/h/hpbk-templateworld-test/gm_content_divider.jpg) bottom center no-repeat
}

.content_box_last {
	margin-bottom: 0;
	background: none;
}

.col_w340 { 
	width: 340px; 
}

.col_w220 { 
	width: 220px; 
	float: left; 
}

.col_mr30 { 
	margin-right: 30px; 
}

.post_box { 
	width: 340px; 
	margin-bottom: 30px; 
}

.post_header { 
	border-top: 3px solid #999; 
	border-bottom: 1px solid #ccc; 
	padding: 5px; 
	margin-bottom: 20px; 
}

.post_box h3 { 
	font-size: 24px; 
	margin-bottom: 15px; 
}

.post_box img { 
	margin-bottom: 5px; 
}

.post_box p.post_meta { 
	font-size: 10px; 
	margin-bottom: 0; 
	padding-bottom: 0; 
}

#gallery { 
	margin: 0; 
	padding: 0; 
}

#gallery ul { 
	margin: 0; 
	padding: 0;
}

#gallery ul li { 
	display: block; 
	position: relative; 
	float: left; 
	width: 220px; 
	height: 110px; 
	margin: 0 20px 30px 0;  
	border: 3px solid #ddd; 
}

#gallery ul .rm_col { 
	margin: 0 0 30px; 
}

#gallery ul li span { 
	position: absolute; 
	width: 220px; 
	height: 110px; 
	background:  none bottom right no-repeat; 
}

#gallery ul li a img { 
	width: 220px; 
	height: 110px; 
}

#contact_form { 
	padding: 0; 
	width: 300px; 
}

#contact_form form { 
	margin: 0px; 
	padding: 0px; 
}

#contact_form form .input_field { 
	width: 288px; 
	padding: 5px; 
	color: #111; 
	border: 1px solid #a7a7a7;  
	background: #e8e8e8; 
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	margin-top: 5px; 
}

#contact_form form label { 
	display: block; 
	width: 100px; 
	margin-right: 10px; 
	font-size: 14px; 
}

#contact_form form textarea { 
	width: 288px; 
	height: 150px; 
	padding: 5px; 
	color: #111; 
	border: 1px solid #a7a7a7;  
	background: #e8e8e8; 
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	margin-top: 5px; 
}

#contact_form form .submit_btn { 
	margin: 10px 0px;
	padding: 5px 14px; 
	font-weight: bold; 
	background: #e8e8e8;  
	color: #555; 
	border: 1px solid #a7a7a7; 
}

#templatemo_footer {
	clear: both;
	width: 760px;
	padding: 0 20px 30px;
	text-align: center;
	background:  none center top no-repeat
}

#templatemo_footer a {
	color: #fff;
}

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: