sunnysky : Sun « Templates « HTML / CSS






sunnysky

   

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type='text/css'>
body {
  text-align:center;
  color:#FFFFFF
}
a {
  text-decoration:none;
}
a:hover {
  text-decoration: underline;
}
#wrap {
  width:800px;
  text-align:left;
  margin:0 auto;
  background:url(sunnysky-images/bg.gif) no-repeat top;
  height:800px
}
.float-l {
  float:left
}
.folat-r {
  float:right
}
.clearfix {
  clear:both
}
.left {
  width:320px
}
.right {
  width:380px;
  background:url(sunnysky-images/right.gif) no-repeat;
  height:658px;
  margin-top:70px;
  padding:0 50px;
  color:#fff
}
.right img {
  padding:30px 0
}
.right a {
  color:#CCCCCC
}
/* header */
#logo {
  background:url(sunnysky-images/top.gif) no-repeat;
  margin-top:70px;
  height:120px;
  color:#000000
}
#header h1 {
  font-size:32px;
  text-align: center;
  padding-top: 30px;
}
#logo div {
  text-align:right;
  padding-right: 50px;
}
ul#nav {
  padding-left: 110px;
  padding-top: 28px;
}
ul#nav li {
  line-height:30px
}
ul#nav a {
  color:#FFFFFF;
  font-weight:700
}
/* content */
#content {
}
#top {
  width: 355px;
}
#top h2 {
  font-size:30px;
  font-weight:700;
  padding:25px 0
}
#top p {
  padding-bottom:5px
}
#right-content {
  height:650px
}
#xhtml {
  text-align:center
}
.section {
  float:left;
  width:190px
}
div.section h2 { font-size:20px ; padding:10px 0}
div.section ul { padding:0px 20px}

/* footer */
#footer {
  background:url(sunnysky-images/bm.gif) no-repeat;
  margin-top: 233px;
  height:123px;
  padding-left: 30px;
  padding-top: 20px;
}
#footer a {
  color:#346599
}
#ftlink, #copyright {
  width:260px
}

</style>


<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
  <div id="content">
    <div class="left float-l">
      <div id="header">
        <div id="logo">
          <h1> sunny Sky</h1>
          <div>short slogan here</div>
        </div>
        <ul id="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Production</a></li>
          <li><a href="#">Submission</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <div id="footer">
          <div id="ftlink"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Production</a> | <br/>
            <a href="#">Submission</a> | <a href="#">Contact</a> </div>
          <p id="copyright"> 2008. All Rights Reserved. <br/>
            <a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
        </div>
      </div>
    </div>
    <div class="right folat-r">
      <div id="right-content">
        <div id="top">
          <h2>Free CSS Templates</h2>
          <p>This is sunny Sky, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.</p>
          <p> This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
          <p>This is sunny Sky, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.</p>
        </div>
        <img src="sunnysky-images/img.gif" alt="" />
        <div class="section">
          <h2>Sections</h2>
          <ul>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
          </ul>
        </div>
        <div class="section">
          <h2>Sections</h2>
          <ul>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
            <li><a href="#">LINKS LINKS</a></li>
          </ul>
        </div>
      </div>
      <div id="xhtml"><img src="sunnysky-images/xhtml.gif" alt=" xhtml vaild" /> <img src="sunnysky-images/css.gif" alt="css vaild" /></div>
    </div>
  </div>
  <!-- /content -->
  <!-- /footer -->
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.metamorph_aliensun
2.metamorph_sunandflower
3.metamorph_sunnybeach
4.metamorph_sunny_lt
5.metamorph_sunparlor
6.metamorph_sunrise
7.metamorph_sunrising_lt
8.metamorph_sunroad
9.metamorph_sunset
10.metamorph_sunshine
11.metamorph_sunshore
12.metamorph_beam
13.beachsunset
14.ftdsunset
15.eclipse
16.Oxford_Sunset
17.Rising_Sun
18.rainbow
19.sunrise2
20.sunset-heaven
21.sunset
22.sunset2
23.sunshine