modelagency : Design 4 « Templates « HTML / CSS

modelagency

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Model Agency</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
* {
  margin : 0px;
  padding : 0px;
}

body {
  background-color : #2F2F2E;
  color : #CECEC2;
  text-align : center;
  font-family : tahoma, sans-serif;
  font-size : 9px;
}


/* PAGE HEADER & MENU */

#page_header {
  margin : 40px auto 0px;
  width : 689px;
  height : 24px;
}

#page_header #logo {
  width : 200px;
  height : 24px;
  background : url('modelagency-images/companylogo.gif') no-repeat 20px 0px;
  float : left;
}

#page_menu {
  padding-top : 10px;
  width : 489px;
  height : 7px;
  float : left;
}

#page_menu ul {
  margin-left : 50px;
  height : 7px;
  list-style-position: inside;
  list-style-image: none;
}

#page_menu li {
  padding-left : 20px;
  height : 7px;
  float : left;
  list-style-position: inside;
  list-style-image: none;
}


/* PAGE BODY */

#page_bodybox {
  margin : 0px auto;
  width : 689px;
  height : 430px;
  background-color : #A15B2E;
}

#leftborder {
  width : 14px;
  height : 430px;
  background : url('modelagency-images/box_left.gif') repeat-y 0px 0px;
  float : left;
}

#leftborder #top {
  width : 14px;
  height : 15px;
  background : url('modelagency-images/box_topleft.gif') no-repeat left top;
  overflow : hidden;
}

#leftborder #bot {
  width : 14px;
  height : 415px;
  background : url('modelagency-images/box_botleft.gif') no-repeat left bottom;
  overflow : hidden;
}

#bodyborder {
  padding : 14px 11px 14px 0px;
  border-top : #7F624E 1px solid;
  border-bottom : #7F624E 1px solid;
  border-right : #7F624E 1px solid;
  float : left;
}

#page_content {
  width : 663px;
  height : 400px;
  overflow : hidden;
}


/* CONTENT LEFT COLUMN */

#leftcol {
  width : 300px;
  height : 400px;
  background : url('modelagency-images/main_img.gif') no-repeat 0px 0px;
  float : left;
  text-align : right;
  font-weight : bold;
}

#leftcol a {
  color : #E2E0E0;
  text-decoration : none;
  line-height : 13px;
}

#leftcol #nav {
  margin-top : 379px;
  margin-right : 7px;
  float : right;
}

#leftcol #nav span {
  display : block;
  margin : 0px 1px 0px 2px;
}

#leftcol #nav b {
  margin-left : 1px;
  border : #CCCCCC 1px solid;
  display : block;
  float : left;
}


/* CONTENT CENTER COLUMN */

#maincol {
  margin : 0px 12px 0px 10px;
  width : 190px;
  height : 400px;
  float: left;
  overflow : hidden;
  text-align : justify;
}

#maincol h2, #maincol h3 {
  font-size : 12px;
  margin-bottom : 15px;
}

#maincol p {
  padding-top : 0px;
  padding-bottom : 19px;
}


#maincol ul {
  padding-top : 2px;
  padding-bottom : 10px;
  display : block;
}

#maincol li {
  padding-left : 8px;
  padding-bottom : 6px;
  background : url('modelagency-images/bullet_arrow.gif') no-repeat 0px 2px;
  font-weight : bold;
  display : block;
}

#maincol_nav {
  margin-top : 8px;
  color : #2F2F2E;
  text-align : center;
}

#maincol_nav a {
  color : #2F2F2E;
  text-decoration : none;
  font-weight : bold;
}

#maincol_nav a:hover {
  color : #3D3D3D;
}


/* CONTENT RIGHT COLUMN */

#rightcol {
  width : 148px;
  height : 400px;
  background-color : #333331;
  float: left;
}

#rightcol_top {
  width : 148px;
  height : 7px;
  display : block;
  background : url('modelagency-images/rightcol_top.gif') #333331 no-repeat 0px 0px;
  overflow : hidden;
}

#rightcol_bot {
  width : 148px;
  height : 7px;
  display : block;
  background : url('modelagency-images/rightcol_bot.gif') #333331 no-repeat 0px 0px;
}

#rightcol_main {
  margin : 0px 9px;
  width : 130px;
  height : 386px;
  overflow : hidden;
}

#rightcol .arrow a {
  margin-top : 2px;
  display : block;
  font-size : 3px;
  line-height : 1px;
  height : 3px;
}

.model_thumbnail {
  margin-bottom : 1px;
  width : 130px;
  height : 107px;
  display : block;
  overflow : hidden;
}

.model_nametag {
  margin-bottom : 5px;
  border : #60605D 1px solid;
  color : #90908E;
}

.model_nametag a {
  display : block;
  padding-top : 2px;
  padding-bottom : 2px;
  width : 128px;
  color : #90908E;
  font-weight : bold;
  text-decoration : none;
}

.model_nametag_bot {
  width : 130px;
  height : 17px;
  background : url('modelagency-images/rightcol_tagbg.gif') no-repeat 0px 0px;
  color : #90908E;
}

.model_nametag_bot a {
  display : block;
  padding-top : 3px;
  padding-bottom : 2px;
  width : 128px;
  color : #90908E;
  font-weight : bold;
  text-decoration : none;
}


/* PAGE FOOTER */

#page_footer {
  margin : 2px auto 0px;
  width : 689px;
  height : 20px;
  color : #6C6C69;
  font-weight : bold;
}

#page_footer a {
  color : #6C6C69;
  text-decoration : none;
}

#page_footer a:hover {
  text-decoration : none;
  color : #797977;
}



a {
  color : #D0D0C9;
}

a:hover {
  color : #E9E9E5;
}

span {
  display : none;
}

img {
  border: 0px;
}

p {
  text-align : justify;
  line-height : 13px;
}

ul {
  list-style-type: none;
  display : block;
}

li {
  text-indent: 0px;
  list-style-type: none;
  display : block;
}

.clearthis {
  margin : 0px;
  display : none;
  clear : both;  
  float : none;  
  font-size : 1px;
  line-height : 0px;
}

</style>


</head>
<body>
<div id="page_header">
  <div id="logo">
    <h1><span>Model Agency</span></h1>
  </div>
  <div id="page_menu">
    <ul>
      <li><a href="http://www.free-css.com/"><img src="modelagency-images/menu_home.gif" width="37" height="7" alt="HOME" /></a></li>
      <li><a href="http://www.free-css.com/"><img src="modelagency-images/menu_aboutus.gif" width="69" height="7" alt="ABOUT US" /></a></li>
      <li><a href="http://www.free-css.com/"><img src="modelagency-images/menu_portfolio.gif" width="74" height="7" alt="PORTFOLIO" /></a></li>
      <li><a href="http://www.free-css.com/"><img src="modelagency-images/menu_gallery.gif" width="62" height="7" alt="GALLERY" /></a></li>
      <li><a href="http://www.free-css.com/"><img src="modelagency-images/menu_contacts.gif" width="72" height="7" alt="CONTACTS" /></a></li>
    </ul>
  </div>
  <div class="clearthis">.</div>
</div>
<div id="page_bodybox">
  <div id="leftborder">
    <div id="top">&nbsp;</div>
    <div id="bot">&nbsp;</div>
  </div>
  <div id="bodyborder">
    <div id="page_content">
      <!-- BEGIN LEFT COLUMN -->
      <div id="leftcol">
        <h2><span>Optional Header</span></h2>
        <span> <img src="modelagency-images/main_img.gif" width="300" height="399" alt="Model Name" /> </span>
        <div id="nav"> <strong><span><a href="http://www.free-css.com/">1</a></span></strong> <strong><span><a href="http://www.free-css.com/">2</a></span></strong> <strong><span><a href="http://www.free-css.com/">3</a></span></strong> <strong><span><a href="http://www.free-css.com/">4</a></span></strong> <strong><span><a href="http://www.free-css.com/">5</a></span></strong> <strong><span><a href="http://www.free-css.com/">6</a></span></strong>
          <div class="clearthis">.</div>
        </div>
      </div>
      <!--// END LEFT COLUMN -->
      <!-- BEGIN MAIN COLUMN -->
      <div id="maincol">
        <h3>About the gallery</h3>
        <p> This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. </p>
        <p> This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. </p>
        <h3>Special features</h3>
        <ul>
          <li><a href="http://www.free-css.com/">This is a demo text.</a></li>
          <li><a href="http://www.free-css.com/">You can replace it by your own text.</a></li>
          <li><a href="http://www.free-css.com/">Some links can go here.</a></li>
          <li><a href="http://www.free-css.com/">This text can be replaced.</a></li>
          <li><a href="http://www.free-css.com/">Put your content here by replacing.</a></li>
        </ul>
        <div id="maincol_nav">
          <h3><span>Navigate</span></h3>
          <a href="http://www.free-css.com/">Prev</a> <a href="http://www.free-css.com/"><img src="modelagency-images/arrow_left.gif" width="3" height="5" alt="Previous" /></a> &nbsp; <a href="http://www.free-css.com/">3</a> | <a href="http://www.free-css.com/">4</a> &nbsp; <a href="http://www.free-css.com/"><img src="modelagency-images/arrow_right.gif" width="3" height="5" alt="Next" /></a> <a href="http://www.free-css.com/">Next</a> </div>
        <div class="clearthis">.</div>
      </div>
      <!--// END MAIN COLUMN -->
      <!-- BEGIN RIGHT COLUMN -->
      <div id="rightcol">
        <h2><span>Optional Header</span></h2>
        <div id="rightcol_top">
          <div class="arrow"> <a href="http://www.freewebsitetemplates.com/"><img src="modelagency-images/arrow_up.gif" width="5" height="3" alt="Up" /></a> </div>
        </div>
        <div id="rightcol_main">
          <div class="model_thumbnail"> <a href="http://www.free-css.com/"><img src="modelagency-images/model01.gif" width="130" height="107" alt="Model Name" /></a> </div>
          <div class="model_nametag"> <a href="http://www.free-css.com/">Sophia Jones</a> </div>
          <div class="model_thumbnail"> <a href="http://www.free-css.com/"><img src="modelagency-images/model02.gif" width="130" height="107" alt="Model Name" /></a> </div>
          <div class="model_nametag"> <a href="http://www.free-css.com/">Anna Stone</a> </div>
          <div class="model_thumbnail"> <a href="http://www.free-css.com/"><img src="modelagency-images/model03.gif" width="130" height="107" alt="Model Name" /></a> </div>
          <div class="model_nametag_bot"> <a href="http://www.free-css.com/">Rick Stuart</a> </div>
        </div>
        <div id="rightcol_bot">
          <div class="arrow"> <a href="http://www.free-css.com/"><img src="modelagency-images/arrow_down.gif" width="5" height="3" alt="Down" /></a> </div>
        </div>
      </div>
      <!--// END RIGHT COLUMN -->
      <div class="clearthis">.</div>
    </div>
  </div>
  <div class="clearthis">.</div>
</div>
<div id="page_footer"> <br />
  Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a> </div>
</body>
</html>

Related examples in the same category

1.	arrangement
2.	arthemia
3.	artica
4.	aspherical
5.	assiduous
6.	asterisk
7.	astounded
8.	astroturfd
9.	atomohost
10.	atrandafir582
11.	AttainDigital
12.	audi-template
13.	aurelius
14.	authenticity
15.	autoportal
16.	axian
17.	azulmedia2-1
18.	azure
19.	bagatelle
20.	balanced
21.	bananaleaf
22.	barricade
23.	begrimed
24.	belowthehorizon
25.	bennevis
26.	bermuda01
27.	besmart
28.	bestwebdesign
29.	beta
30.	beyond
31.	bigdeal
32.	BigSpaceLove
33.	bioessence
34.	Biru_Manteb
35.	bittersweet
36.	Black
37.	chamberlandsrestaurant
38.	chara
39.	characterized
40.	charcoal
41.	charitable-organization
42.	chary
43.	chasmogamous
44.	chesspiece
45.	chic
46.	chicanery
47.	chromz
48.	churchsitev.2
49.	citrus-island1-1
50.	clementine
51.	clicker
52.	modernclassic
53.	modernmagic
54.	modernworld
55.	A_Simple_Theme
56.	minimalistica
57.	miniseries
58.	mint-idea
59.	minty
60.	mirax
61.	miscellaneous
62.	mistybud
63.	mlpdesign02
64.	mlpdesign03
65.	mlpdesign04
66.	mlpdesign08
67.	model-4-me
68.	model-portfolio
69.	modelportfolio
70.	model_2
71.	moderna
72.	Modified
73.	modulation
74.	module-mag
75.	mokofactory
76.	monster
77.	mork-horisont
78.	mountainbreeze
79.	mouse
80.	mrtechie
81.	multiflex2
82.	multiple
83.	multiplex
84.	music
85.	muzzle
86.	MyCode
87.	mydiary
88.	myfamily
89.	myhedspacefree08
90.	mykindathing
91.	myportfolio
92.	mystic-garden
93.	Mythology
94.	myvalentine
95.	naeve
96.	natheless
97.	nationalpark
98.	neapolitan
99.	neatness
100.	nebuladog
101.	nedweb
102.	NelVoize
103.	neoneon
104.	neonix
105.	neoplanet-01
106.	neotech
107.	netindustries
108.	neuphoric
109.	neutral
110.	neutraldesk
111.	neutralgreen
112.	new kitchen design
113.	new-fast-host
114.	new-home
115.	new-rise
116.	new-year