modelportfolio : Design 4 « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Design 4 




modelportfolio
   

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>Model Portfolio template</title>
<style type='text/css'>
html, body, ul, li, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1 img {
  display: block;
}
img {
  border: 0;
}
{
  color: #FEFF00;
  text-decoration: underline;
}
a:hover {
}
.left {
  float: left;
}
.right {
  float: right;
}
.more {
  text-align: right;
}
.clear {
  clear: both;
}
body {
  background: #581a01;
  font: 12px arial, sans-serif;
  color: #F09361;
}
#wrapper {
  margin:auto;
  position:relative;
  text-align:left;
  width:778px;
  background: #800000 0px 135px url(modelportfolio-images/grad.jpgrepeat-x;
}  
#header {
  background: 6px url(modelportfolio-images/header_bg.gifrepeat-x;
}
h1 {
  height: 95px;
  color: #fff;
  font-weight: normal;
  font: 22px "harrow""Lucida Grande", arial, sans-serif;
  line-height: 95px;
  text-indent: 23px;
  width: 400px;
}
h1 span {
  font-size: 30px;
}

#body {
  background: top right url(modelportfolio-images/body_bg.jpgno-repeat;
}

#nav {
  background: url(modelportfolio-images/nav_bg.gifrepeat-x;
  height: 40px;
  font-size: 17px;
}
#nav em {
  font-size: 22px;
  font-style: normal;
}
#nav ul {
  min-width: 780px;
  padding: 0;
  padding-top: 10px;
}
#nav li {
  float: left;
  background: 12px 6px url(modelportfolio-images/bullet_nav.gifno-repeat;
  padding-left: 50px;
  padding-right: 20px;
  margin: 0;
}
#nav li.first {
  background: none;
  padding-left: 20px;
}
#nav a {
  font-weight: normal;
  color: #9A0000;
  text-decoration: none;
}
#nav a:hover {
  color: #500000;
}

#content {
  background: #760202;
  border: 1px solid #6A0101;
  width: 426px;
  margin: 48px 28px 8px 28px;
}
#content .i {
  padding: 15px;
}

#content h2 {
  font: 16px "times new roman", serif;
  font-weight: normal;
  color: #fff;
  clear: both;
}
#content h2 strong {
  color: #FEFF00;
  font-weight: normal;
}

#content h2.h {
  font-size: 12px;
}

.htop {
  color: #FEFF00;
}
.hproject {
  position: relative;
  top: 0.5em;
  left: -0.4em;
}
.hof {
  position: relative;
  top: -0.5em;
  left: -1.5em;
  color: #FEFF00;
}
.h2006 {
  position: relative;
  top: 0.1em;
  left: -0.8em;
  font-size: 22px;
}

#picbox-left {
  margin: 1em 2em 1em 0;
  background: #9A0303;
  float: left;
  width: 130px;
  padding: 3px;
}
#picbox-left img {
  display: block;
}

#gallery {
  margin-top: 5px;
  border: 1px solid #890202;
  background: #6A0101;
  padding: 5px;
  margin-right: 15px;
}

#gallery img {
  display: block;
}
#bigpic, #gallery .smallpic {
  background: #9A0303;
  padding: 4px;
}

#bigpic {
  float: left;
}
#pica margin: 0px 15px 15px 15px; }
#picb margin: 0px 0px 15px 5px; }
#picc margin: 0px 5px 5px 15px; }
#picd margin: 0px 0px 5px 15px; }
.smallpic {
  float: left;
}

#copyright {
  text-indent: 270px;
  padding-bottom: 14px;
}

#footer {
  background: url(modelportfolio-images/footer.gifrepeat-x;
  height: 46px;
}

</style>


  
</head>

<body>

<div id="wrapper">
  <div id="header">
    <h1><span>M</span>ODEL PORTFOLIO</h1>
  </div>
  <div id="nav">
    <ul>
      <li class="first"><a href="http://www.freewebsitetemplates.com"><em>M</em>Y BIO</a></li>
      <li><a href="http://www.freewebsitetemplates.com"><em>R</em>ESUME</a></li>
      <li><a href="http://www.freewebsitetemplates.com"><em>P</em>ORTFOLIO</a></li>
      <li><a href="http://www.freewebsitetemplates.com"><em>P</em>HOTOS</a></li>
      <li><a href="http://www.freewebsitetemplates.com"><em>C</em>ONTACTS</a></li>
    </ul>
  </div>
  <div id="body">
    <div id="content"><div class="i">
      <h2><strong>Welcome</strong> to my website</h2>
      <p>This is a template designed by free website templates for you for free you can replace all the text by your own 
      text. This is just a place holder so you can see how the site would look like.</p> 
      
      <p>You can find some <a href="http://www.webhostingservices.us/">web hosting services</a> which are also a need for website building which are listed in web hosting search.</p>
  <h2 class="h"><span class="htop">TOP</span> <span class="hproject">PROJECT</span> <span class="hof">of</span> <span class="h2006">2006</span></h2>
      <div id="picbox-left">
        <img src="modelportfolio-images/pic_1.jpg" width="130" height="63" alt="Pic 1" />
      </div>
      <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
      <p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
      <h2><strong>My</strong> gallery</h2>
      <div id="gallery">
        <div id="bigpic">
          <a href="http://www.freewebsitetemplates.com"><img src="modelportfolio-images/pic_2.jpg" width="180" height="112" alt="Pic 2" /></a>
        </div>
        <div class="smallpic" id="pica">
          <a href="http://www.freewebsitetemplates.com"><img src="modelportfolio-images/pic_3.jpg" width="63" height="43" alt="Pic 3" /></a>
        </div>
        <div class="smallpic" id="picb">
          <a href="http://www.freewebsitetemplates.com"><img src="modelportfolio-images/pic_4.jpg" width="63" height="43" alt="Pic 4" /></a>
        </div>
        <div class="smallpic" id="picc">
          <a href="http://www.freewebsitetemplates.com"><img src="modelportfolio-images/pic_5.jpg" width="63" height="43" alt="Pic 5" /></a>
        </div>
        <div class="smallpic" id="picd">
          <a href="http://www.freewebsitetemplates.com"><img src="modelportfolio-images/pic_6.jpg" width="63" height="43" alt="Pic 6" /></a>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
    <div id="copyright">
      Hosting by <a href="http://www.webhostingservices.us/">Web Hosting Services</a>.
    </div>
  </div>
  <div id="footer">
    
  </div>
</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.modelagency
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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.