{ Magic of the M.O.M.E.N.T }

Website Templates / 2 Columns

Designer's Comments

Look carefully for specific instructions

...

Layout Code

Copy and paste to Template HTML

Help

<html>
<head>
<title>{ Magic  of the M . O . M . E . N . T }</title>
<style type="text/css">
<!--

body {
          background-image:url(http://cbimg6.com/layouts/09/10/35849aa.png); 
          background-repeat: no-repeat;
          background-color: #747474;
          scrollbar-face-color: #ffffff;
          scrollbar-shadow-color: #e9a372;
          scrollbar-highlight-color: #f4789e;
          scrollbar-3dlight-color: #f4789e;
          scrollbar-darkshadow-color: #e9a372;
          scrollbar-track-color: #f87291;
          scrollbar-arrow-color: #f4789e;
          color: #fff6f6;
	font-size: 10px;
	line-height: 16px;
	font-family: Arial;

}

#content {
	width: 600px;
	position: absolute;
	top: 0;
	left: 0;	}

#main {
	margin-top: 500px;
	width: 600px;
	position: absolute;
	top: 0;
	margin-left: 10px;
	}

#side {
	margin-top: 10px;
          margin-left: 660px;
	position: absolute;
	}

#footer {
    position:fixed;
    background:#efefef;
    text-align:center;
    top:768px;
    width:400px;
}

a:link,a:visited,a:active {
text-decoration:none;
font-family:arial ; 
cursor:help;
font-size: 10px;
color: #ffc8d6;  
font-weight: none;
}

a:hover { 
font-family: arial ;
font-size: 10px;
text-decoration: none;
color: #ffffff; 
font-style:italic ; 
}

h1 {
width: 600px;
font-family: arial ;
font-size:10pt;
text-align: center;
color:#fff6f6;
background-image:url(http://cbimg6.com/layouts/09/10/35849ab.png); 
background-repeat: no-repeat;
line-height: 25px;
text-transform: uppercase; 
margin-top: 10x;

}

h2 {
width: 150px;
font-family: arial ;
font-size: 10pt;
text-align: center;
color:#fff6f6;
background-image:url(http://cbimg6.com/layouts/09/10/35849ac.png); 
background-repeat: no-repeat;
line-height: 20px;
text-transform: lovercase; 
}

a.navigation:link, a.nav:visited, a.nav:active {
	color : #f5988c;   
	letter-spacing: 5px;
	display : block; 
          background-image:url(http://cbimg6.com/layouts/09/10/35849ad.png);   
          background-repeat: no-repeat;
  	height:20px;
          text-transform:lowercase;  
  	font-size:14px;
  	width: 150px; 
          text-align: center;  
          background-color: #f4f4f4;      
          font-family: Times new Roman;  
  	padding: 0px 0px 0px 0px;
  	line-height:20px;
	margin: 2px 0px 2px 1px;
           
}

a.navigation:hover { 
	color : #ffffff;  
  	background-color: #ffffff;  
  	width: 150px; 
          font-size:9px;
          text-transform:uppercase; 
 	padding: 0px 0px 0px 0px;
  	line-height:20px;
	margin: 2px 0px 2px 1px; 
}

b,strong {
          color: #f59181; 
	font-family: "Verdana", Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	}

i, em	{ 
	color: #beb18e;     
	font-family: "Verdana", Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: italic;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
	}

u 	{
	color: #f388ae; 
	font-family: "Verdana", Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: normal;
	text-decoration: none; 
	text-transform: uppercase;
	border-bottom: 2px solid #e1dcd6;
	}

blockquote {
	background-color:#f5f5f5;
	font-family: Arial;  
	font-size: 10px;
	font-style: italic;
	line-height:20px;
  	padding-left: 38px;
	color: #747474; 
  	margin-left: 0px;
	text-align:left;
          border-left: 15px solid #ffb2cd; 
         border-right: 20px solid #fcc8a3; 
} 
/*CALENDAR*/

td.month {
font-family: tahoma ;
font-size: 15px;
text-decoration: none;
background-image:url(http://cbimg6.com/layouts/09/10/35849ae.png); 
text-transform: uppercase; 
text-align: left;
color:#ffffff;   
border: 1px dotted #71D6BE;}
	
td.week {
color: #f36356 ; 
font-family: tahoma;
font-size: 10px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background-color: #ffffff ; 
border: 1px solid #f5a6be ; 
}

td.day {
color: #ffb1cf;   
font-family: tahoma;
font-size: 10px;
font-weight: normal;
text-decoration: none;
text-transform: none;
text-align: center;
background-color: #747474 ; 
border-left: 1px solid #343434;
border-right: 1px solid #a49768;  
}

-->
</style></head>

<a class="navigation" href="#">WEBMISS</a>
<a class="navigation" href="#">FOR YOU </a>
<a class="navigation" href="#">Domain</a>
<a class="navigation" href="#"> Exit</a>
<h2>About me</h2> 
My name is <i>amara</i> , I´m 14 and  live in <u>Germany</u> . I love the <b>blue sky</b> , animes ( code geass , stellvia , special A , DN Angel....) and  <i>Final Fantasy</i> , <br><b>THE VOLTURI (twilight)</b> XD I cant speak english well , because its only  a school subject for me and   blah blah blah blah blah blah blah <b>BLAH!</b>

<h2>Affiliates/Friends</h2>

<B>?</b> Name <a href="#"><i>website</i></a><br>
<B>?</b> Name <a href="#"><i>website</i></a><br> 
<B>?</b> Name <a  href="#"><i>website</i></a><br>

<B>?</b> Name <a  href="#"><i>website</i></a><br>
<B>?</b> Name <a  href="#"> <i>website</i> </a> <br>

<h2>Calendar</h2>   
<table tableborder="0" cellpadding="0" cellspacing="1" width="150" align="center">

<tr>
<td colspan="7" class="month">October</td>
</tr>
<tr>
<td class="week">Mo</td>
<td class="week">Di</td>

</table>  
<h2>Credits</h2> 
<center><a href="http://aethereality.net/" target="blank">one </a> &
 <a href="http://www.animerain.com/" target="blank" >two </a>   <br> Layout by <a href="http://celestialdicio.createblog.com/" target="blank" >Amara / CelestialDicio </a>    <br>

<b>DONT REMOVE THE CREDITS ! ! ! </b></center> 
</div>

<h1>HEADER</h1></P>
 <i>Lorem ipsum dolor sit amet,</i><b> consetetur sadipscing elitr</b>, <u>aed diam nonumy eirmod </u>tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
<blockquote>

Have you ever wondered which hurts the most: saying something and wishing you had not, or saying nothing, and wishing you had?<br>
 </blockquote>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <h1>HEADER</h2>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
			
		
</div>
			 
</div> 
</body>
</html>

Layout Comments

Showing latest 7 of 7 comments

thx :)

By CelestialDicio on Nov 6, 2009 12:49 pm

Pretty banner image!

By Cristy on Oct 27, 2009 4:18 pm

i love the link hovers
great job, as usual

By x-one2three on Oct 24, 2009 1:31 am

Looks very nice. I like the textures you used on the banner. The only thing that bugs me is the fact that the circles on the navigation to change color when you hover a link. :p Other than that, great job!

By Mikeplyts on Oct 21, 2009 7:04 am