obsess : Design 6 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 6

obsess

   

<!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>
<title>Obsess</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
?/* regular */
body
{
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  font-family: Arial;
  background-color: Black;
}
img
{
  border: 0px;
}
.size
{
  width: 950px;
  margin: 0px auto;
}
/* header */
.header
{
  height: 138px;
  overflow: hidden;
  background-color: White;
}
.header01
{
  height: 91px;
  overflow: hidden;
}
.mnav
{
  height: 39px;
  overflow: hidden;
  background-image: url(obsess-image/img_38.jpg);
  background-repeat: repeat-x;
  margin-left: 10px;
  width: 930px;
  position: relative;
}
.mnm ul
{
  margin: 0px;
  padding: 0px;
}
.mnm li
{
  float: left;
  padding: 0 0px 0 0px;
  min-width: 155px;
  line-height: 44px;
  text-align: center;
  color: #a7a8a8;
  font-family: Arial;
  background-image: url(obsess-image/3_03.jpg);
  background-repeat: no-repeat;
  background-position: right center;
  list-style: none;
}
.mnm a
{
  color: #c7c7c7;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  width: 150px;
  height: 100%;
}
.mnm a:hover, .mnm a:active
{
  background: url(obsess-image/3_021.jpg) repeat-x;
}
.mnimgl
{
  position: absolute;
  left: 0px;
  top: 0px;
}
.mnimgr
{
  position: absolute;
  right: 0px;
  top: 0px;
}
.logo
{
  float: left;
  padding-top: 11px;
  padding-left: 30px;
}
.hright
{
  float: right;
  width: 422px;
  overflow: hidden;
}
.hr01
{
  width: 407px;
  height: 28px;
  background-image: url(obsess-image/img_09.jpg);
  background-repeat: no-repeat;
}
.hr01 div
{
  float: left;
  line-height: 30px;
  font-size: 11px;
}
.hr01 a:link, .hr01 a:visited
{
  color: white;
  text-decoration: none;
}
.hr01 a:hover, .hr01 a:active
{
  color: white;
  text-decoration: underline;
}
.hr0101
{
  padding-left: 52px;
}
.hr0102
{
  padding-left: 30px;
}
.hr02
{
  text-align: right;
  padding-top: 22px;
  padding-right: 22px;
}

/* content */
.content
{
  background-color: White;
  overflow: hidden;
}
.cmainimg
{
  margin-left: 10px;
  margin-bottom: 8px;
}
.submenu
{
  height: 28px;
  margin-left: 10px;
  width: 930px;
  background-image: url(obsess-image/img_97.jpg);
  background-repeat: repeat-x;
  overflow: hidden;
  position: relative;
  margin-bottom: 11px;
}
.subtext
{
  color: #aba6a6;
  font-size: 11px;
  margin-left: 11px;
  margin-top: 6px;
  float: left;
  width: 100px;
}
.subimag
{
  float: right;
  margin-top: 6px;
  margin-right: 30px;
}
.subimag ul, .subimag li
{
  padding: 0px;
  margin: 0px;
}
.subimag li
{
  list-style: none;
  float: left;
  padding-left: 4px;
}
.subimag a
{
  text-decoration: none;
}
.snimgl
{
  position: absolute;
  left: 0px;
  top: 0px;
}
.snimgr
{
  position: absolute;
  right: 0px;
  top: 0px;
}
.mcontent
{
  overflow: hidden;
  background-color: White;
/*  height: 760px; */
}
.mcleft
{
  float: left;
  width: 207px;
  margin-left: 15px;
/*  margin-left: 7px; */
  background-color: White;
}
.mcbox01
{
  overflow: hidden;
  margin-bottom: 15px;
}
.mc01t
{
  height: 37px;
  background-image: url(obsess-image/img_147.jpg);
  background-repeat: no-repeat;
}
.mc01t2
{
  height: 24px;
  background-image: url(obsess-image/img_240.jpg);
  background-repeat: no-repeat;
  color: #f3f8fe;
  padding-left: 23px;
  padding-top: 13px;
}
.mc01c
{
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  width: 205px;
  overflow: hidden;
  background-color: #f0f0f0;
}
.mc01c ul
{
  margin: 0px 15px 0px 15px;
  padding: 0px;
}
.mc01c li
{
  padding-left: 18px;
  margin: 0px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}
.mc01cc
{
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  width: 205px;
  overflow: hidden;
  background-color: #f0f0f0;
}
.mc01cc li
{
  list-style-type: square;
  font-family: Arial;
  font-size: 12px;
  padding-top: 15px;
}
.mc01cc a
{
  text-decoration: none;
  color: #494949;
}
.mc01cc a:hover, .mc01cc a:active
{
  text-decoration: underline;
}
.mc01b
{
  height: 5px;
  overflow: hidden;
  font-size: 0px;
}
.mcright
{
  width: 715px;
  overflow: hidden;
  float: right;
  background-color: White;
}
.mc01
{
  overflow: hidden;
  margin: 0px auto;
}
.mc0101
{
  width: 345px;
  height: 82px;
  background-color: Black;
  position: relative;
  float: left;
}
.mcr
{
  margin-left: 11px;
  text-align: left;
  color: #ffffff;
}
.mcr01
{
  font-size: 19px;
  font-family: Arial;
  padding-top: 10px;
}
.mcr02
{
  padding-top: 13px;
  font-size: 11px;
  font-family: Arial;
  line-height: 16px;
}
.mcl
{
  margin-left: 11px;
  text-align: left;
  color: #ffffff;
}
.mcl01
{
  padding-top: 10px;
  font-family: Arial;
  font-size: 19px;
}
.mcl02
{
  padding-top: 13px;
  font-size: 11px;
  font-family: Arial;
  line-height: 16px;
}
.r0101
{
  position: absolute;
  left: 0px;
  top: 0px;
}
.r0102
{
  position: absolute;
  right: 0px;
  top: 0px;
}
.r0103
{
  position: absolute;
  left: 0px;
  bottom: 0px;
}
.r0104
{
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.mc0102
{
  margin-left: 14px;
  width: 345px;
  height: 82px;
  background-color: #227ab4;
  float: left;
  position: relative;
}
.mc01t
{
  font-size: 14px;
  padding-left: 23px;
  padding-top: 11px;
  height: 24px;
}
.mc01c li
{
  list-style: none;
  border-bottom: solid 1px #d7d7d7;
}

.mc01c a
{
  text-decoration: none;
  color: #3e6680;
}

.mc01c a:hover, .mc01c a:active
{
  text-decoration: underline;
}
.mc02
{
  padding-top: 24px;
  overflow: hidden;
}
.mc0201
{
  font-family: Arial;
  font-size: 23px;
  color: #033759;
  float: left;
}
.mc0202
{
  padding-right: 18px;
  float: right;
}
.mc0203
{
  margin-top: 68px;
}
.mc020301
{
  font-size: 12px;
  color: #494949;
  line-height: 18px;
  letter-spacing: -0.1px;
  width: 700px;
}
.mc020302
{
  margin-top: 25px;
  margin-bottom: 40px;
  margin-left: 65px;
  line-height: 25px;
}
.mc020302 a
{
  text-decoration: none;
  color: #033759;
  font-size: 12px;
  font-family: Arial;
}
.mc020302 a:hover, .mc020302 a:active
{
  text-decoration: underline;
}
.mc020302 li
{
  list-style-type: square;
}

.mc020303
{
  color: #494949;
  font-size: 12px;
  margin-bottom: 151px;
  line-height: 18px;
  letter-spacing: -0.1px;
}
/* footer */
.footer
{
  height: 142px;
  overflow: hidden;
  background-image: url(obsess-image/img_276.jpg);
  background-repeat: repeat-x;
  position: relative;
  line-height: 60px;
  font-size: 11px;
  color: White;
  text-align: center;
  clear: both;
  width: 100%;
}
.footer a:link, .footer a:visited
{
  color: white;
  text-decoration: none;
}
.footer a:hover, .footer a:active
{
  color: white;
  text-decoration: underline;
}

</style>


</head>
<body>
<div class="size">
  <div class="header">
    <div class="header01">
      <div class="logo"> <img src="obsess-image/img_15.jpg" alt="" /> </div>
      <div class="hright">
        <div class="hr01">
          <div class="hr0101"> <a href="http://www.free-css.com/">My Account</a></div>
          <div class="hr0102"> <a href="http://www.free-css.com/">RSS</a></div>
          <div class="hr0102"> <a href="http://www.free-css.com/">Contact Us</a></div>
          <div class="hr0102"> <a href="http://www.free-css.com/">Recommend Us</a></div>
        </div>
        <div class="hr02">
          <input id="Text1" type="text" value="Search..." />
        </div>
      </div>
    </div>
    <div class="mnav"> <img class="mnimgl" src="obsess-image/img_37.jpg" alt="" /> <img class="mnimgr" src="obsess-image/img_50.jpg" alt="" />
      <div class="mnm">
        <ul>
          <li><a href="http://www.free-css.com/">HOME</a></li>
          <li><a href="http://www.free-css.com/">ABOUT US</a></li>
          <li><a href="http://www.free-css.com/">GALLERY</a></li>
          <li><a href="http://www.free-css.com/">FAQ</a></li>
          <li><a href="http://www.free-css.com/">SERVICES</a></li>
          <li><a href="http://www.free-css.com/">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="cmainimg"> <img alt="" src="obsess-image/img_73.jpg" /> </div>
    <div class="submenu" style="left: 0px; top: 0px"> <img class="snimgl" src="obsess-image/img_96.jpg" alt="" /> <img class="snimgr" src="obsess-image/img_107.jpg" alt="" />
      <div class="subtext"> You are here:Home </div>
      <div class="subimag" style="width: 41px; height: 51px">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
    <div class="mcontent">
      <div class="mcleft">
        <div class="mcbox01">
          <div class="mc01t"> MAIN MENU </div>
          <div class="mc01c">
            <ul>
              <li><a href="http://www.free-css.com/">Home</a></li>
              <li><a href="http://www.free-css.com/">About Us</a></li>
              <li><a href="http://www.free-css.com/">Gallery</a></li>
              <li><a href="http://www.free-css.com/">Faq</a></li>
              <li><a href="http://www.free-css.com/">Servies</a></li>
              <li><a href="http://www.free-css.com/">Contact</a></li>
            </ul>
          </div>
          <div class="mc01b"> <img src="obsess-image/img_272.jpg" alt="" /> </div>
        </div>
        <div class="mcbox01">
          <div class="mc01t2"> LATEST NEWS </div>
          <div class="mc01cc">
            <ul>
              <li><a href="http://www.free-css.com/">Link 1</a></li>
              <li><a href="http://www.free-css.com/">Link 2</a></li>
              <li><a href="http://www.free-css.com/">Link 3</a></li>
              <li><a href="http://www.free-css.com/">Link 4</a></li>
              <li><a href="http://www.free-css.com/">Link 5</a></li>
              <li><a href="http://www.free-css.com/">Link 6</a></li>
            </ul>
          </div>
          <div class="mc01b"> <img src="obsess-image/img_272.jpg" alt="" /> </div>
        </div>
        <div class="mcbox01">
          <div class="mc01t2"> LINKS </div>
          <div class="mc01cc">
            <ul>
              <li><a href="http://www.free-css.com/">Link 1</a></li>
              <li><a href="http://www.free-css.com/">Link 2</a></li>
              <li><a href="http://www.free-css.com/">Link 3</a></li>
              <li><a href="http://www.free-css.com/">Link 4</a></li>
              <li><a href="http://www.free-css.com/">Link 5</a></li>
              <li><a href="http://www.free-css.com/">Link 6</a></li>
            </ul>
          </div>
          <div class="mc01b"> <img src="obsess-image/img_272.jpg" alt="" /> </div>
        </div>
      </div>
      <div class="mcright">
        <div class="mc01">
          <div class="mc0101" style="left: 0px; top: 0px"> <img class="r0101" src="obsess-image/img_150.jpg" alt="" /> <img class="r0102" src="obsess-image/img_153.jpg" alt="" /> <img class="r0103" src="obsess-image/img_202.jpg" alt="" /> <img class="r0104" src="obsess-image/img_205.jpg" alt="" />
            <div class="mcr">
              <div class="mcr01"> Title 1 </div>
              <div class="mcr02"> This is a sectional area that is available to you for highlighting text or important things about your site. </div>
            </div>
          </div>
          <div class="mc0102"> <img class="r0101" src="obsess-image/img_155.jpg" alt="" /> <img class="r0102" src="obsess-image/img_157.jpg" alt="" /> <img class="r0103" src="obsess-image/img_207.jpg" alt="" /> <img class="r0104" src="obsess-image/img_209.jpg" alt="" />
            <div class="mcl">
              <div class="mcl01"> Title 1 </div>
              <div class="mcl02"> This is a sectional area that is available to you for highlighting text or important things about your site. </div>
            </div>
          </div>
        </div>
        <div class="mc02">
          <div class="mc0201"> Welcome to our site </div>
          <div class="mc0202" style="width: 18px; height: 15px"> &nbsp; </div>
          <div class="mc0203">
            <div class="mc020301">
              <p>This template design is brought to you curtsey of webjestic.NET. This is an example of body content that you can customize for your pages. The only thing I kindly ask is that you do not remove the author credits at the bottom of this template, near the Copyright.</p>
              <p>Morbiac elis semper justo congue curabitur at nulla pellus nibh diam. Dissenasceleifendimentesque convallis sed donec odio ut orci diam dolorem nam sed. Namnulla et convallis sed netus nibh justo dolor lacus intesque ames. Semmassa hendimentesque venean integet pede ris orci ris odio nec augue. Laoreetvestibulum non est tur temper vel hac tincidunt volutpat ligula sed. Enimtincidunt quis vitante sed nunc lor congue orci nisl mauris cum. Ipsumnunc massa justo ametus scetur id pretium vel laoreet sceleifendrerit lorem.</p>
              <p>Ligulaelit feugiat pede ristibulum id vestibulus intesque tellus ante hendimentumst hendrerit. Conguenibh ipsum orci enim augue nissim leo laoreet sed tellente nequat. Acrhoncus vitae ac trices eget ut rhoncus nam tincidunt ipsum fermentum. Duiquisque ut pretium gravida eget mauris estibulum egestique libero quis praesenean. Aliquevestasse lacingilla sodalesuada fring vel nulla vestie pede arcu pellentes ac. Wisiat doloreet leo a curabiturpis consectetuer interdum curabitur egest ac fringillam. Ultrisquelacinia pellus consequat condimenterdum tempus anterdum ut dui pellus dui metus.</p>
            </div>
            <div class="mc020302">
              <ul>
                <li><a href="http://www.free-css.com/">This is a bullet item</a></li>
                <li><a href="http://www.free-css.com/">This is a bullet item</a></li>
                <li><a href="http://www.free-css.com/">This is a bullet item</a></li>
                <li><a href="http://www.free-css.com/">This is a bullet item</a></li>
                <li><a href="http://www.free-css.com/">This is a bullet item</a></li>
                <li><a href="http://www.free-css.com/">This is a bullet item</a></li>
              </ul>
            </div>
            <div class="mc020303">
              <p>Aliquatsed libero habitur dui nulla vel curabitur eget adipis trices velit. Sithendreristique ornar morbi justo fametuer aenean orna intesque et convallis eleifend. Necconseque dolor dapien velit augue sed mauristibus a id ut pellus. Aliquamdignisl augue faucibulus eu tincidunt et nulla curabitanterdum urnare pede morbi. Namsit nec ridictus odio et monterdum ris auctor laoreet lobortor a. Idsempor in leo sus vel in portorttis semper lacus eu partur. Quisquecondiment tincidunt velit lacilis phare faucibulum quis id laoreet portis urna.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer"> <img class="mnimgl" src="obsess-image/img_275.jpg" alt="" /> <img class="mnimgr" src="obsess-image/img_291.jpg" alt="" /> <a href="http://www.free-css.com/">HOME</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.free-css.com/">ABOUT US</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.free-css.com/">GALLERY</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.free-css.com/">FAQ</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.free-css.com/">SERVICES</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.free-css.com/">CONTACT</a> <br/>
    <font color="#333333">Copyright 2009 Your Website | <a style="color: #333333" href="http://webjestic.net/templates/">CSS Template</a> by <a style="color: #333333" href="http://webjestic.net/">webjestic</a></font></div>
</div>
</body>
</html>








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsession
32.obtanium
33.office-plants
34.offlimits
35.offrecord
36.oheon_com_110100021
37.ohgreenworld
38.Okeanos
39.old-wall
40.oldarchitecture
41.Olive
42.one-penny
43.one_two_three
44.online-edu
45.onlinemoviestore
46.oodles
47.openyourwindows
48.opposed
49.optimal-touch
50.orchidaceae
51.ordinaire
52.ormeggiare
53.ornamental
54.ornate
55.OrngBlu
56.oswd_blozilla
57.our-work
58.ourhouse
59.outdoorv1.0
60.outliers
61.outoftheblue
62.outtabox
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination