Coding a CSS3 & HTML5 One-Page Website Template

.html file

<!DOCTYPE html> <!-- The new doctype -->
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Coding A CSS3 &amp; HTML5 One Page Template | Tutorialzine demo</title>
      <link rel="stylesheet" type="text/css" href="styles.css" />
      <!-- Internet Explorer HTML5 enabling script: -->
      <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <style type="text/css">
         .clear {
         zoom: 1;
         display: block;
         }
      </style>
      <![endif]-->
   </head>
   <body>
      <section id="page">
      <!-- Defining the #page section with the section tag -->
      <header>
         <!-- Defining the header section of the page with the appropriate tag -->
         <h1>Your Logo</h1>
         <h3>and a fancy slogan</h3>
         <nav>
            <!-- The nav link semantically marks your main site navigation -->
            <ul>
               <li><a href="#article1">Photoshoot</a></li>
               <li><a href="#article2">Sweet Tabs</a></li>
               <li><a href="#article3">Navigation Menu</a></li>
            </ul>
         </nav>
      </header>
      <section id="articles">
         <!-- Article 1 start -->
         <div></div>
         <!-- Dividing line -->
         <article id="article1">
            <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
            <h2>Photoshoot Effect</h2>
            <div></div>
            <div>
               <figure>
                  <!-- The figure tag marks data (usually an image) that is part of the article -->
                  <a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
                  <img src="http://cdn.tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
               </figure>
               <p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>
            </div>
         </article>
         <div></div>
         <!-- Dividing line -->
         <article id="article2">
            <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
            <h2>Photoshoot 2Effect</h2>
            <div></div>
            <div>
               <figure>
                  <!-- The figure tag marks data (usually an image) that is part of the article -->
                  <a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
                  <img src="http://cdn.tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
               </figure>
               <p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>
            </div>
         </article>
         <div></div>
         <!-- Dividing line -->
         <article id="article3">
            <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
            <h2>Photoshoot Ef3fect</h2>
            <div></div>
            <div>
               <figure>
                  <!-- The figure tag marks data (usually an image) that is part of the article -->
                  <a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
                  <img src="http://cdn.tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
               </figure>
               <p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>
            </div>
         </article>
         </section>
         <!-- Article 1 end -->
         <footer>
            <!-- Marking the footer section -->
            <div></div>
            <p>Copyright 2010 - YourSite.com</p>
            <!-- Change the copyright notice -->
            <a href="#">Go UP</a>
            <a href="http://tutorialzine.com/">Template by Tutorialzine</a>
         </footer>
      </section>
      <!-- Closing the #page section -->
      <!-- JavaScript Includes -->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script src="scrollto.js"></script>
      <script src="script.js"></script>
   </body>
</html>

css file:

header,footer,
article,section,
hgroup,nav,
figure{
    /* Giving a display value to the HTML5 rendered elements: */
    display:block;
}


article .line{
    /* The dividing line inside of the article is darker: */
    background-color:#15242a;
    border-bottom-color:#204656;
    margin:1.3em 0;
}

footer .line{
    margin:2em 0;
}

nav{
    background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
    padding:0 5px;
    position:absolute;
    right:0;
    top:4em;

    border:1px solid #FCFCFC;

    -moz-box-shadow:0 1px 1px #333333;
    -webkit-box-shadow:0 1px 1px #333333;
    box-shadow:0 1px 1px #333333;
}

nav ul li{
    display:inline;
}

nav ul li a,
nav ul li a:visited{
    color:#565656;
    display:block;
    float:left;
    font-size:1.25em;
    font-weight:bold;
    margin:5px 2px;
    padding:7px 10px 4px;
    text-shadow:0 1px 1px white;
    text-transform:uppercase;
}

nav ul li a:hover{
    text-decoration:none;
    background-color:#f0f0f0;
}

nav, article, nav ul li a,figure{
    /* Applying CSS3 rounded corners: */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
/* Article styles: */

#page{
    width:960px;
    margin:0 auto;
    position:relative;
}

article{
    background-color:#213E4A;
    margin:3em 0;
    padding:20px;

    text-shadow:0 2px 0 black;
}

figure{
    border:3px solid #142830;
    float:right;
    height:300px;
    margin-left:15px;
    overflow:hidden;
    width:500px;
}

figure:hover{
    -moz-box-shadow:0 0 2px #4D7788;
    -webkit-box-shadow:0 0 2px #4D7788;
    box-shadow:0 0 2px #4D7788;
}

figure img{
    margin-left:-60px;
}

/* Footer styling: */

footer{
    margin-bottom:30px;
    text-align:center;
    font-size:0.825em;
}

footer p{
    margin-bottom:-2.5em;
    position:relative;
}

footer a,footer a:visited{
    color:#cccccc;
    background-color:#213e4a;
    display:block;
    padding:2px 4px;
    z-index:100;
    position:relative;
}

footer a:hover{
    text-decoration:none;
    background-color:#142830;
}

footer a.by{
    float:left;

}

footer a.up{
    float:right;
}
article{
text-shadow:none;
}

 

 

 

 

REf:

http://www.freshdesignweb.com/useful-html5-lessons-tutorial-for-learning-html5.html

http://tutorialzine.com/2010/02/html5-css3-website-template/

 

Advertisements

About rahul23134654

Hi, I am Rahul Meha , B.E. in (I.T.)
This entry was posted in CSS, HTML. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s