splash : Design 7 « Templates « HTML / CSS






splash

  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>Inside Web</title>

<meta name="keywords" content="Inside Web">
  
<meta name="description" content="Inside Web">

<meta name="author" content="J. Alejandro D?" >

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<style type='text/css'>
body {
  font-family: Arial,Helvetica,sans-serif;
  background-color: #000000;
  background-image: url(splash-images/header.jpg);
  background-position: left top;
  background-repeat: repeat-x;
}
#content {
  margin: 0 auto;
  width: 850px;
  padding-top: 10px;
}
#header {
  height: 200px;
  position: relative;
}
#titulo {
  position: absolute;
  left: 80px;
  top: 35px;
  color: #ffffff;
  }

#enlaces {
  position: absolute;
  top: 30px;  
  }
#enlaces li {
  display: inline;
}
#enlaces li a {
  border: 1px solid #000000;
  padding: 20px;
  text-decoration: none;
  float: left;
  background-color: #ffffff;
  margin-top: 105px;
  color: #000000
}
#enlaces li a:hover {
  background-color: #000000;
  color: #ffffff;
}
#site {
  padding: 40px;
  background-color: white;
  margin-top: 30px;
  min-height: 500px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  position:relative;
  border-radius: 8px;
  
  }
#panel {
  border-left: 1px solid #cccccc;
  width: 95px;
  float: right;
  text-align: right;
  padding-right: 0px;
  margin-left: 25px;
  }

#footer {
  min-height: 150px;
  padding-top: 5px;
  font-size: 80%;
  color: #ffffff;
  }
#footer1 {
  width: 265px;
  float: left;
  padding-left: 15px;
  }
#footer2 {
  width: 265px;
  float: left;
  padding-left: 15px;
  }
#footer3 {
  width: 265px;
  float: left;
  padding-left: 15px;
  margin-right: 0;
  }

#decoracion {
  left: 520px;
  top: 0px;
  position: absolute;  
  
}
#decoracion1 {
  left: -300px;
  top: 400px;
  position: absolute;  
  
}
#decoracion2 {
  left: 750px;
  top: 600px;
  position: absolute;  
  
}


</style>




</head>

<body>

<div id="content">
    <div id="header">
    <div id="titulo"><h1>Inside Web</h1></div>
    <div><img style="margin-right: 30px;" src="splash-images/logo.png" alt="logo"></div>
    
    
    <div id="decoracion"><img src="splash-images/01.png" alt="decoracion"></div>
    <div id="decoracion1"><img src="splash-images/02.png" alt="decoracion"></div>
    <div id="decoracion2"><img src="splash-images/03.png" alt="derecoracion"></div>
    
    <ul id="enlaces">
    <li><a style="border-top-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px;" href="index.html">Home</a></li>
    <li><a href="index.html">Galer?/a></li>
    <li><a href="index.html">Servicios</a></li>
    <li><a href="index.html">Blog</a></li>
    <li><a style="border-top-right-radius: 8px; border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px;" href="contact.html">Contact</a></li></ul>

    </div>
    
    
    <div style="position:relative;" id="site">
    <div id="panel">
    <p><a href="feed://http//www.insideweb.es/blog/?feed=rss2"><img src="splash-images/RSS.png" width="60" height="60" alt="rss"></a></p>
    <p><a href="http://www.facebook.com"><img src="splash-images/Facebook.png" width="60" height="60" alt="facebook"></a></p>
    <p><a href="http://www.twitter.com"><img src="splash-images/Twitter.png" width="60" height="60" alt="twiter"></a><br></p>
    <p><a href="http://www.flickr.com"><img src="splash-images/flickr.png" width="60" height="60" alt="flickr"></a><br></p>
    <p><a href="http://www.youtube.com"><img src="splash-images/youtube.png" width="60" height="60" alt="youtube"></a></p>
    <p><a href="http://www.friendfeed.com"><img src="splash-images/friendfeed.png" width="60" height="60" alt="frienfeed"></a></p>
    
    </div>
    <h1>Contact form</h1>
<br>
<form action="enviar.php" method="post" name="contact" id="contact">
  <p>
    <label for="name">Name:<br>
    </label>
    <input name="name" id="name" type="text">
  </p>
  <p>
    <label for="mail">E-mail:<br></label>
    <input name="mail" id="mail" type="text">
  </p>
  <p>
    <label for="phone">Phone:<br></label>
    <input name="phone" id="phone" type="text">
  </p>
  <p>
    <label for="subject">Subject:<br></label>
    <input name="subject" id="subject" type="text">
  </p>
  <p>
    <label for="message">Message:<br></label>
    <textarea name="message" id="message" cols="70" rows="6"></textarea>
  </p>
  <p>
    <input name="send" id="send" value="Send" type="submit">
  </p>
</form>

    
        
    
    
    </div>
    <div id="footer">
    <div id="footer1"><h3>Newsletter</h3><hr>
          Get occasional email updates
          <form action="" method="post">
          <p>
          <input type="text" name="news" id="newsletter" class="input" value="Enter email address"><br>
          <input type="submit" value="Subscribe">
          </p>
          </form>    
    </div>
    <div id="footer2"><h3>Latest News</h3><hr></div>
    <div id="footer3"><h3>Contact</h3><hr>
            <p>c/: web,76</p>
            <p>Santa Cruz de Tenerife</p>
            <p>Spain</p>
             <p>Phone: 739.457.1339</p>
              <p>Email: <a href="mailto:hfghgldskjgd@hhtoss.rgb">hfghgldskjgd@hhtoss.rgb</a></p>
    
    </div>
    </div>
    <div style="text-align: right; font-size: 80%; color:#ffffff;"> <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">Valid XHTML</abbr></a> | Design by <a href="http://www.insideweb.es">InsideWeb</a></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.seduction
83.selcouth
84.sensa
85.settings
86.shallowgrunge
87.shalom-typo
88.shape
89.she
90.showcase
91.sifiso
92.silenceandharmony
93.SILK
94.Simpatico
95.sindromk
96.singapore
97.sinorcaish
98.six-oh-six
99.sixpence
100.sixties_style
101.skipopia
102.skitemplate
103.sky
104.sliced
105.slight_amnesia
106.socialnet
107.softenedcells
108.solemnity
109.solitude
110.soloss
111.solutions
112.somewhere-peaceful
113.soniatemplate
114.space
115.spaced
116.spasaloon
117.spatter
118.speedracing
119.spheroids
120.spidercity
121.splatt
122.spontaneous