CMS Style : Design « Templates « HTML / CSS






CMS Style

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><style type="text/css">
html, body {
margin:0;
padding:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
.top {
  height: 100px;
  width: 100%;
  border-bottom-style: solid;
  border-top-color: #000;
  border-right-color: #000;
  border-bottom-color: #000;
  border-left-color: #000;
  background-image: url(CMS Style-images/topbg.png);
}
.top_content {
  background-image: url(CMS Style-images/logo.gif);
  background-repeat: no-repeat;
  background-position: left 15px;
  height: 100px;
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  vertical-align: bottom;
}
.tab {
  float: left;
  height: 26px;
  margin-top: 74px;
  margin-right: 4px;
}
.marquee {
  background-color: #FFF;
  height: 20px;
  width: 778px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #000;
  border-right-color: #000;
  border-bottom-color: #000;
  border-left-color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  vertical-align: middle;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
}
.content {
  width: 778px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid #000;
  padding-right: 10px;
  padding-left: 10px;
  background-color: #FFF;
  margin-top: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding-top: 5px;
}
.footer {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-color: #FFF;
  text-align: center;
  height: 35px;
  width: 778px;
  padding-right: 10px;
  padding-left: 10px;
  border: 1px solid #000;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  padding-top: 5px;
}
.hotelview {
  height: 130px;
  width: 650px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #000;
  border-right-color: #000;
  border-bottom-color: #000;
  border-left-color: #000;
  margin-right: auto;
  margin-left: auto;
  background-image: url(CMS Style-images/hotelview.png);
  border-right-style: solid;
  border-left-style: solid;
  padding-top: 20px;
  padding-left: 50px;
}


</style>


<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body {
  background-image: url(CMS Style-images/beach_bg.png);
}
</style>
</head>

<body onload="MM_preloadImages('CMS Style-images/community2.png','CMS Style-images/home2.png','CMS Style-images/staff2.png')">
<div class="top">
  <div class="top_content">
    <div class="tab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','CMS Style-images/home2.png',1)"><img src="CMS Style-images/home1.png" name="Image2" width="80" height="26" border="0" id="Image2" /></a></div> 
    <div class="tab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('community','','CMS Style-images/community2.png',1)"><img src="CMS Style-images/community1.png" name="community" width="114" height="26" border="0" id="community" /></a></div>
    <div class="tab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','CMS Style-images/staff2.png',1)"><img src="CMS Style-images/staff1.png" name="staff" width="73" height="26" border="0" id="staff" /></a></div>
    <div class="tab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('credits','','CMS Style-images/credits2.png',0)"><img src="CMS Style-images/credits1.png" name="credits" width="89" height="26" border="0" id="credits" /></a></div>
<br />
  </div>
</div>
<div class="marquee"><!-- HTML codes by Quackit.com -->
<marquee behavior="scroll" direction="left">Welcome to our hotel! You can edit this.</marquee>
</div>
<div class="content">
  <br />
  <div class="hotelview"><a href="#"><img src="CMS Style-images/loginbutton.gif" width="96" height="109" border="0" /></a></div>
  <br />
  <br />
  <p><strong>Welcome!</strong><br />
    <br />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit lacus, iaculis et cursus quis, vestibulum vel turpis. Nunc tempus aliquet aliquam. In at nibh nisi, in pellentesque erat. Phasellus facilisis, turpis aliquet hendrerit egestas, urna magna scelerisque velit, ac consectetur ipsum risus quis velit. Aenean sapien velit, consequat eget accumsan id, vulputate non eros. Maecenas enim dui, scelerisque eu posuere sit amet, tincidunt et eros. Pellentesque dui dolor, iaculis sit amet lacinia vehicula, vestibulum eu odio. Integer et euismod magna. Donec vulputate, elit eget tristique pharetra, tortor erat tristique mauris, in mattis mauris nibh varius leo. Fusce vitae eros nunc, et vulputate nisl.</p>
  <p>Morbi nibh risus, bibendum non lobortis eget, condimentum in odio. Praesent ornare eros et urna venenatis blandit. Donec ut libero sit amet diam vehicula facilisis placerat vel dui. Sed euismod, magna eu semper tempor, risus libero consequat orci, a vulputate tellus mauris id leo. Vivamus mattis sollicitudin lectus ut tincidunt. Nam viverra dictum dolor, et eleifend libero molestie a. Ut sit amet semper ipsum. Quisque felis leo, tincidunt in euismod a, molestie id mauris. Ut porttitor, eros vitae euismod fermentum, sem urna adipiscing turpis, ut tristique metus felis eu mi. Morbi ut consequat velit. Fusce ac elit odio, sed scelerisque massa. Integer ut velit nibh. Pellentesque diam enim, vulputate a sagittis tincidunt, auctor in nibh. In leo arcu, laoreet a fermentum eget, auctor at ligula. Phasellus fringilla tempor metus, sed congue elit feugiat sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="footer">Copyright Yoursitename 2010<br />
</div>
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.wcsst-10
2.wcsst-11
3.wcsst-12
4.wcsst-15
5.wcsst-16
6.wcsst-17
7.wcsst-18
8.wcsst-19
9.wcsst-2
10.wcsst-20
11.wcsst-21
12.wcsst-22
13.wcsst-23
14.wcsst-24
15.wcsst-25
16.wcsst-26
17.wcsst-3
18.wcsst-4
19.wcsst-5
20.wcsst-6
21.beez-design
22.metamorph_camomile
23.metamorph_champagne
24.metamorph_clover
25.metamorph_dao
26.metamorph_dna
27.metamorph_lilac
28.metamorph_lilium
29.metamorph_lime
30.metamorph_limemint_lt
31.metamorph_lionpride
32.metamorph_swallowtail-indexl
33.metamorph_synchronized_lt
34.metamorph_temple
35.metamorph_vectorart
36.metamorph_wow
37.wcsst-7
38.wcsst-9
39.bouquet
40.baseline
41.beautifulday
42.bedazzled
43.Beehives
44.beez
45.begeodan
46.cleo-studio
47.cloverleaf
48.dragonfly
49.nautica
50.Nautica022
51.Nautica02Liquid
52.Nautica03
53.Nautica04
54.nautica05
55.nautica05dark
56.nautica08
57.nauticax
58.soothing