seduction : Design 7 « Templates « HTML / CSS






seduction

  

<!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-AU">
<head>
<title>Seduction</title>
<style type='text/css'>
body
{
  background: #FCFBF7;
  font-family: helvetica,sans-serif;
  font-size: 12px;
}
a, a:hover, a:visited a:active
{
  color: black;
}
#container
{
  width: 900px;
  height: 500px;
  position:absolute;
  left: 50%;
  top: 50%;
  margin-top: -250px;
  margin-left: -450px;
  border: 1px solid black;
  background-repeat: no-repeat;
  background-position: right center;
  background-image:url(seduction-images/seduction_header.jpg);
}
#imgheader
{
  background-image:url(seduction-images/seduction_text_header.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 48px;
  width: 570px;
}
#navigation
{
  height: 20px;
  text-align: center;
  padding-top: 4px;
  width: 570px;
  top: 50px;

}
#navigation a, a:hover, a:visited a:active
{
  padding-right: 12px;
  padding-left: 12px;
}
#navigation a
{
  text-decoration: none;
}
#navigation a:hover, a:visited a:active
{
  text-decoration: underline;
}
#content
{
  width: 570px;
  top: 60px;
  height: 428px;
  overflow: auto;
}
h2
{
  margin:0px;
  background-color: #A52B11;
  color: white;
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}
p
{
  padding: 10px;
}

</style>



<style type="text/css" media="all">
        @import "./style-fix.css" screen,projection;
</style>

</head>
<body>
<div id="container">
<div id="imgheader">
</div>
<div id="navigation">
<a href="#">link1</a> | 
<a href="#">link2</a> | 
<a href="#">link3</a> | 
<a href="#">link4</a> | 
<a href="#">link5</a>
</div>
<div id="content">
<h2>heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu sem nec enim placerat fringilla. Curabitur vitae lorem. Suspendisse sagittis, augue in dapibus placerat, nunc massa posuere sapien, vel vehicula elit tortor in massa. Curabitur hendrerit pretium metus. Nam aliquet metus eu lacus. Proin odio turpis, consequat vitae, sollicitudin quis, ornare non, tellus. Nunc mattis, nulla in vestibulum convallis, metus enim rhoncus magna, nec gravida neque augue at ante. Praesent in nibh vel dolor iaculis tincidunt. Nullam commodo tincidunt nibh. Aenean viverra urna nec diam. Sed eget orci. Cras ullamcorper, lectus imperdiet porta scelerisque, metus dolor rhoncus elit, quis gravida est odio nec ipsum.</p>
<h2>heading 2</h2>
<p>Cras mauris massa, mollis nec, nonummy nonummy, laoreet quis, ipsum. Donec vel nisl vitae mi hendrerit condimentum. Nulla mauris leo, ultricies ut, fermentum porttitor, pharetra in, purus. Donec erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eros. Aliquam lectus mauris, tempus a, faucibus a, tempus quis, ligula. Nulla consequat elementum mauris. Nam leo magna, pulvinar eu, dignissim a, pellentesque nec, ante. Nullam eget lacus. Phasellus est ipsum, consectetuer ac, bibendum et, fringilla a, tellus. Phasellus in dolor. Fusce non neque id nunc fermentum suscipit. Phasellus pellentesque semper quam.</p>
<h2>heading 2</h2>
<p>Fusce augue. Ut varius vehicula wisi. In hac habitasse platea dictumst. Morbi sed tortor. Curabitur egestas. Maecenas dignissim, pede id facilisis venenatis, elit wisi iaculis augue, non elementum pede orci quis odio. Curabitur sem. Vestibulum euismod diam sed nunc. Quisque nec urna quis eros luctus hendrerit. Vivamus tellus dui, hendrerit vitae, aliquet eu, interdum at, lacus. Sed lectus lorem, vulputate molestie, congue vel, viverra in, urna. Etiam convallis. Donec mauris est, posuere vitae, volutpat vel, congue a, orci. Nunc lorem dolor, tincidunt sed, suscipit sed, imperdiet non, augue. Mauris pretium lacus eleifend arcu. Nulla tincidunt lorem ut metus. Designed by fiveseven.</p>
</div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.rogue
71.Rothko
72.route66
73.rust
74.safe-as-houses
75.sahara
76.sampling
77.Sapphire
78.schemermag
79.scotchmark
80.scribbled
81.secretlab
82.selcouth
83.sensa
84.settings
85.shallowgrunge
86.shalom-typo
87.shape
88.she
89.showcase
90.sifiso
91.silenceandharmony
92.SILK
93.Simpatico
94.sindromk
95.singapore
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous