Showing posts with label Bootstrap Design. Show all posts
Showing posts with label Bootstrap Design. Show all posts

Friday, 22 May 2015

New HTML5&CSS3 single page layout – Fashion

Posted by  on 

New HTML5&CSS3 single page layout – Fashion


Get started

As usual – lets create a new project folder and several folders inside (to keep anything well structured):
  • css – for all CSS stylesheets (nivo-slider.css, reset.css and style.css)
  • images – for all used images
  • js – for all JS files (html5.js, jquery.js and jquery.nivo.slider.pack.js)

Head section markup

Now I am going to give you the HTML markup of our header:
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>'Fashion' single page layout | Script tutorials demo</title>
    <meta charset="utf-8">

    <!-- Link styles -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">

    <!-- Link scripts -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>   
    <script>
        $(window).load(function() {
            $('#slider').nivoSlider({
                effect:'random',
                slices:15,
                boxCols:8,
                boxRows:8,
                animSpeed:500,
                pauseTime:4000,
                directionNav:false,
                directionNavHide:false,
                controlNav:true,
                captionOpacity:0.9
            });
        });
    </script>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
</head>

Moving forward – Main layout (body)



Whole layout consists of 6 main sections: header (with the logo and search form), navigation menu, promo slider (nivo jquery plugin), main section (3 feature elements), second content section (two column layout for all your rest content – list of posts with thumbs at left side, archives and recent posts at right side) and footer (social icons and copyrights). It looks like:


<body>

<div class="container">

    <header><!-- Define the header section of the page -->

        <div class="logo"><!-- Define the logo element -->
            ........
        </div>

        <section id="search"><!-- Search form -->
            ........
        </section>

    </header>

    <nav><!-- Define the navigation menu -->
        ........
    </nav>

    <section id="slider-wrapper"><!-- Nivo promo slider -->
        ........
    </section>

    <div id="main"><!-- Define the main content section -->

        <section id="promo"><!-- Define the promo section -->
            ........
        </section>

        <section id="content"><!-- Define the featured content section -->
            ........
        </section>

    </div>

    <div id="submain"><!-- Define submain content section -->
        <section id="subcontent"><!-- Define the content section #2 -->
            <div id="left">
                ........
            </div>
            <div id="right">

                <div class="block"><!-- Archives block -->
                    ........
                </div>

                <div class="block"><!-- Recent posts block -->
                    ........
                </div>

            </div>
        </section>
    </div>

    <footer><!-- Define the footer section of the page -->
        <ul id="social"><!-- Social network links -->
            ........
        </ul>
        <div id="privacy">
            Fashion template © 2012 <a class="link" href="#">Privacy Policy</a><br />
            <a class="link" href="http://www.script-tutorials.com/">Template by Script Tutorials</a>
        </div>
    </footer>

</div>

</body>
Base CSS styles



/* base styles */
body {
    background:#efefef;
    color:#828282;
    font:100%/1.125em Arial, Helvetica, sans-serif;
    margin:0;
    position:relative;
}
a {
    color:#c24050;
    outline:none;
    text-decoration:underline;
}
a:hover,a:active {
    outline:0;
    text-decoration:none;
}
img {
    border:0 none;
    margin:0;
    vertical-align:top;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
a:hover img {
    opacity:.8;
}
h1,h2,h3,h4 {
    color:#262626;
    font-family:cursive;
    font-weight:400;
    padding:0;
}
h1 {
    font-size:3.2em;
    line-height:1.2em;
    margin:0 0 0.75em;
}
h2 {
    font-size:3em;
    line-height:1.2em;
    margin:0 0 .7em;
}
h3 {
    font-size:2.4em;
    line-height:1.2em;
    margin:0 0 1em;
}
h4 {
    font-size:1em;
    margin:0 0 1.5em;
}
p {
    margin:0 0 1.5em;
    padding:0;
}
input,select,textarea {
    border:1px solid #dbdbdb;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    font-weight:400;
    outline:none;
    vertical-align:middle;

    border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
ul li {
    padding:0;
    vertical-align:top;
}
ul li time {
    color:#C24050;
    display:block;
    margin:0 0 0.5em;
}
.block {
    margin:0 0 3em;
}
.container {
    background:#fff;
    border-left:1px solid #e1e1e1;
    border-right:1px solid #e1e1e1;
    font-size:.75em;
    margin:0 auto;
    width:949px;
}
.more {
    background:#efefef;
    color:#262626;
    display:inline-block;
    line-height:28px;
    padding:0 10px;
    text-decoration:none;
    text-transform:uppercase;

    border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}
.more:hover {
    background:#c24050;
    color:#fff;
}


Header section (with logo and search) and navigation menuFirst two elements – header area and navigation menu. Html markup: - 


<header><!-- Define the header section of the page -->

    <div class="logo"><!-- Define the logo element -->
        <a href="http://www.script-tutorials.com/">
            <img src="images/logo.png" title="Fashion template" alt="Fashion template" />
        </a>
    </div>

    <section id="search"><!-- Search form -->
        <form action="#" onsubmit="return false;" method="get">
            <input type="text" onfocus="if (this.value =='Search..' ) this.value=''" onblur="if (this.value=='') this.value='Search..'" value="Search.." name="q">
            <input type="submit" value="">
        </form>
    </section>

</header>

<nav><!-- Define the navigation menu -->
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">About</a></li>
        <li><a href="http://www.script-tutorials.com/new-html5css3-single-page-layout-fashion/">To Tutorial</a></li>
    </ul>
</nav>


CSS styles:


/* header section */
header {
    height:113px;
    position:relative;
    z-index:99;
}
.logo {
    left:44px;
    position:absolute;
    top:41px;
}
.logo img {
    margin:0 auto 3px;
}
#search {
    position:absolute;
    right:40px;
    top:40px;
}
#search form input[type="text"] {
    border:1px solid #e3e3e3;
    color:#343434;
    padding:7px 30px 6px 10px;
    width:222px;
}
#search form input[type="submit"] {
    background:url(../images/search_btn.png) no-repeat 0 0;
    border:none;
    cursor:pointer;
    height:13px;
    margin:0;
    padding-left:0;
    padding-right:0;
    position:absolute;
    right:10px;
    top:8px;
    width:13px;
}


/*navigation menu*/
nav {
    background:#fcfcfc;
    border-bottom:1px solid #e7e7e7;
    border-top:1px solid #e7e7e7;
    display:block;
    margin-bottom:34px;
    overflow:hidden;
    padding:13px 0 14px;
    position:relative;
    z-index:99;
}
nav ul {
    float:left;
    line-height:1;
    max-width:710px;
    padding:0 28px;
}
nav ul li {
    float:left;
    list-style-type:none;
    margin-left:12px;
    padding:0;
    position:relative;
    vertical-align:top;
}
nav ul li:first-child {
    margin-left:0;
}
nav ul li a {
    color:#343434;
    display:block;
    padding:8px 12px;
    position:relative;
    text-decoration:none;
    text-transform:uppercase;

    border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}
nav ul li a:hover,nav ul li.active a {
    background-color:#C24050;
    color:#FFF;
}


Slider section


I have selected nivoSlider to use in our template:


<section id="slider-wrapper"><!-- Nivo promo slider -->
    <div id="slider" class="nivoSlider">
        <img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1">
        <img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
        <img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
    </div>
    <div id="htmlcaption-1" class="nivo-html-caption">
        <h5 class="p2">Your promo text 1</h5>
        <p>Promo text description here</p> 
    </div>
    <div id="htmlcaption-1" class="nivo-html-caption">
        <h5 class="p2">Your promo text 1</h5>
        <p>Promo text description here</p> 
    </div>
    <div id="htmlcaption-2" class="nivo-html-caption">
        <h5 class="p2">Your promo text 2</h5>
        <p>Promo text description here</p> 
    </div>
    <div id="htmlcaption-3" class="nivo-html-caption">
        <h5 class="p2">Your promo text 3</h5>
        <p>Promo text description here</p> 
    </div>
</section>



Main content section



After our slider – the big main content area (generally – it consists of two parts).


<div id="main"><!-- Define the main content section -->

    <section id="promo"><!-- Define the promo section -->
        <img alt="" src="images/prm.png" /> <h2>Welcome to test our 'Fashion' templates. We are making best templates for you.</h2>
    </section>

    <section id="content"><!-- Define the featured content section -->
        <ul>
            <li>
                <h1>Clean</h1>
                <p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
                <a class="more" href="#">Read more</a>
            </li>
            <li>
                <h1>Light</h1>
                <p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
                <a class="more" href="#">Read more</a>
            </li>
            <li>
                <h1>Friendly</h1>
                <p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
                <a class="more" href="#">Read more</a>
            </li>
        </ul>
    </section>

</div>

<div id="submain"><!-- Define submain content section -->
    <section id="subcontent"><!-- Define the content section #2 -->
        <div id="left">
            <ul>
                <li>
                    <h3>'Mono' HTML5 CSS3 Single Page Layout</h3>
                    <a href="#"><img alt="" src="images/post.png" /></a>
                    <p>Today I want to introduce new great masterpiece – new template with codename: 'Mono'. This will nice HTML5/CSS3 template with nice light brown colors. Hope that you will like new styles and you will learn some new design methods.</p>
                    <a class="more" href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-mono/">Read more</a>
                </li>
                <li>
                    <h3>Art theme - HTML5/CSS3 single page layout</h3>
                    <a href="#"><img alt="" src="images/post.png" /></a>
                    <p>Today I will like to product new great masterpiece – new template with codename: ‘Art theme’. This will nice HTML5 template with nice gray colors. Hope that you will like new styles and you will learn some new coding lessons.</p>
                    <a class="more" href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-art-theme/">Read more</a>
                </li>
                <li>
                    <h3>Attractive HTML CSS Anime Theme Website Layout</h3>
                    <a href="#"><img alt="" src="images/post.png" /></a>
                    <p>Today I will like to product new masterpiece – new template with codename: ‘Anime theme’. This will nice HTML5 template with good colors. Hope that you can learn some new coding lessons and download our result and use it at your own site (its free as usual).</p>
                    <a class="more" href="http://www.script-tutorials.com/creating-new-html-css-website-layout-5-anime-theme/">Read more</a>
                </li>
            </ul>
        </div>
        <div id="right">

            <div class="block"><!-- Archives block -->
                <h3>Archives</h3>
                <ul class="archives">
                    <li><a title="February 2012" href="#">February 2012</a></li>
                    <li><a title="January 2012" href="#">January 2012</a></li>
                    <li><a title="December 2011" href="#">December 2011</a></li>
                    <li><a title="November 2011" href="#">November 2011</a></li>
                    <li><a title="October 2011" href="#">October 2011</a></li>
                    <li><a title="September 2011" href="#">September 2011</a></li>
                </ul>
            </div>

            <div class="block"><!-- Recent posts block -->
                <h3>Recent posts</h3>
                <ul class="recent">
                    <li>
                        <time datetime="2012-02-08T20:20">08-02-2012</time>
                        <p>Recnt post #1 - short description</p>
                        <a class="more" href="#">Read more</a>
                    </li>
                    <li>
                        <time datetime="2012-02-08T20:30">08-02-2012</time>
                        <p>Recnt post #2 - short description</p>
                        <a class="more" href="#">Read more</a>
                    </li>
                    <li>
                        <time datetime="2012-02-08T20:40">08-02-2012</time>
                        <p>Recnt post #3 - short description</p>
                        <a class="more" href="#">Read more</a>
                    </li>
                    <li>
                        <time datetime="2012-02-08T20:50">08-02-2012</time>
                        <p>Recnt post #4 - short description</p>
                        <a class="more" href="#">Read more</a>
                    </li>
                </ul>
            </div>

        </div>
    </section>
</div>


CSS styles


/* main section */
#main {
    padding:0 20px;
}
#promo {
    border-bottom:1px solid #E7E7E7;
    overflow:hidden;
    padding:20px 0;
    position:relative;
}
#promo img {
    float:left;
    margin-right:20px;
}
#content {
    border-bottom:1px solid #E7E7E7;
    overflow:hidden;
    padding:20px 0;
}
#content ul li {
    float:left;
    margin:0 0 0 22px;
    width:288px;
}
#content ul li:first-child {
    margin:0;
}


/* submain section */
#submain {
    padding:0 20px;
}
#subcontent {
    overflow:hidden;
    padding:20px 0;
}
#subcontent #left {
    float:left;
    width:69%;
}
#subcontent #right {
    float:left;
    margin-left:2%;
    width:29%;
}
#subcontent ul li {
    margin-bottom:15px;
    overflow:hidden;
}
#subcontent ul li img {
    float:left;
    height:128px;
    margin:5px 20px 5px 0;
    width:128px;
}
#subcontent .archives li {
    border-bottom:1px solid #E7E7E7;
    margin:0;
    padding:0;
}
#subcontent .archives li a {
    display:block;
    padding:7px 0;
    text-decoration:none;
}
#subcontent .archives li a:hover {
    background-color:#fafafa;
}



Footer section



Finally – our footer area


<footer><!-- Define the footer section of the page -->
    <ul id="social"><!-- Social network links -->
        <li><a href="#" title="facebook"><img alt="" src="images/facebook.png" /></a></li>
        <li><a href="#" title="twitter"><img alt="" src="images/twitter.png" /></a></li>
        <li><a href="#" title="linkedin"><img alt="" src="images/linkedin.png" /></a></li>
        <li><a href="#" title="rss"><img alt="" src="images/rss.png" /></a></li>
    </ul>
    <div id="privacy">
        Fashion template © 2012 <a class="link" href="#">Privacy Policy</a><br />
        <a class="link" href="http://www.script-tutorials.com/">Template by Script Tutorials</a>
    </div>
</footer>


CSS styles


/* footer section */
footer {
    background-color:#fafafa;
    border-top:1px solid #E7E7E7;
    font-size:12px;
    margin:0 auto;
    overflow:hidden;
    padding:40px;
    position:relative;
    z-index:3;
}
footer a{
    color:#5E5956;
    text-decoration:none;
}
#social {
    float:left;
    list-style:none outside none;
    margin:0;
    padding:0;
}
#social li {
    float:left;
    padding:0 0 0 3px;
}
#social li a:hover img {
    margin-top:1px;
}
footer #privacy {
    float:right;
}



JS for our template



Here are all necessary javascripts:



js/html5.js, js/jquery.js and js/jquery.nivo.slider.pack.js



All these libraries are in our package

Creating ‘Mono’ HTML5 CSS3 Single Page Layout

Posted by  on 

Creating ‘Mono’ HTML5 CSS3 Single Page Layout


Get started

Ok, let`s start. Lets create new folder and several folders inside (to keep all well structured):
  • css – which will contain our CSS stylesheets (nivo-slider.css, reset.css and style.css)
  • images – which will contain all used images
  • js – will contain JS files (html5.js, jquery.js, jquery.nivo.slider.pack.js and main.js)

Head section code

Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.
<!DOCTYPE html><!-- The new doctype -->
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>'Mono' single page layout | Script tutorials demo</title>
    <meta charset="utf-8">

    <!-- Linking styles -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">

    <!-- Linking scripts -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>   
    <script src="js/main.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
</head>

Moving forward – Main layout (body)



Whole layout consist of 4 main section: header (with logo, navigation menu and search form), main section (slider, promo and first featured content area – 3 elements), second content section (two column layout for all your rest content) and footer (social icons and copyrights). It looks like:


<body>

<div class="container">
    <div class="subcontainer">

        <header><!-- Defining the header section of the page -->

            <div class="logo"><!-- Defining the logo element -->
                ........
            </div>

            <nav><!-- Defining the navigation menu -->
                ........
            </nav>

            <section id="search"><!-- Search form -->
                ........
            </section>

        </header>

        <div id="main"><!-- Defining the main content section -->

            <section id="slider-wrapper"><!-- Promo slider -->
                ........
            </section>

            <section id="promo"><!-- Defining the promo section -->
                .........
            </section>

            <section id="content"><!-- Defining the featured content section -->
                ........
            </section>

        </div>

        <div id="submain"><!-- Defining submain content section -->
            <section id="subcontent"><!-- Defining the content section #2 -->
                <div id="left">
                    ........
                </div>
                <div id="right">
                    ........
                </div>
                <div class="clear"></div>
            </section>
        </div>

    </div>

    <footer><!-- Defining the footer section of the page -->
        <ul id="social"><!-- Social profiles links -->
            ........
        </ul>
        <div id="privacy">
            ........
        </div>
    </footer>

</div>

</body>


here are you can see base CSS styles


/* base styles */
body {
    background:url(../images/bg.gif) repeat scroll center top #000;
    color: #666666;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 13px;
    height: 100%;
    line-height: 20px;
}
a {
    color:#1799cf;
    text-decoration:underline;
}
a:hover {
    text-decoration:none;
}
.clear {
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
}
.container {
    margin:0 auto;
    position:relative;
    width:988px;

    -moz-box-shadow:0 0 2px 2px #222222;
    -webkit-box-shadow:0 0 2px 2px #222222;
    box-shadow:0 0 2px 2px #222222;
    -o-box-shadow:0 0 2px 2px #222222;
}
.subcontainer {
    background-color: #FFFFFF;
    padding-left: 40px;
    padding-right: 40px;
}

.more {
    display:inline-block;
    color:#ca5d2c;
    line-height:13px;
    font-size:11px;
    text-transform:uppercase;
    border:solid 1px #edebea;
    border-left-color:#ddd6d2;
    border-bottom-color:#d3c9c3;
    text-decoration:none;
    padding:4px 9px 5px 9px;

    background: -moz-linear-gradient(#ffffff, #f0edeb); /* FF 3.6+ */  
    background: -ms-linear-gradient(#ffffff, #f0edeb); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f0edeb)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#ffffff, #f0edeb); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#ffffff, #f0edeb); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0edeb'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0edeb')"; /* IE8+ */  
    background: linear-gradient(#ffffff, #f0edeb); /* the standard */ 
}
.more:hover {
    color:#fff;
    background:#ca5d2c;
}


Header section with logo and navigation


Our header will contain menu, search bar (at top right) and logo at left side. Here are HTML for that section


<header><!-- Defining the header section of the page -->


    <div class="logo"><!-- Defining the logo element -->
        <a href="http://www.script-tutorials.com/">
            <img src="images/logo.png" title="Mono template" alt="Mono template" />
        </a>
    </div>

    <nav><!-- Defining the navigation menu -->
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><a href="#">About</a></li>
            <li><a href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-mono/">To Tutorial</a></li>
        </ul>
    </nav>

    <section id="search"><!-- Search form -->
        <form action="#" onsubmit="return false;" method="get">
            <input type="text" onfocus="if (this.value =='Search..' ) this.value=''" onblur="if (this.value=='') this.value='Search..'" value="Search.." name="q">
            <input type="submit" value="">
        </form>
    </section>

</header>


CSS for header section


/* header section */
header {
    background: url(../images/header_inner_bg.jpg) no-repeat scroll center 0 #CC5F2D;
    height: 125px;
    padding-top: 21px;
    position: relative;
    z-index: 10;
}
.logo {
    float: left;
    padding-left: 49px;
    position: relative;
}
.logo img {
    margin:0 auto 3px;
}
#search {
    overflow:hidden;
    position:absolute;
    right:10px;
    top:10px;
}
#search form {
    float:left;
    background:url(../images/search1.png) no-repeat scroll 0 0 transparent;
    height:28px;
    width:196px;
}
#search form input[type="text"] {
    background:none repeat scroll 0 0 transparent;
    border:medium none;
    float:left;
    height:18px;
    margin:0;
    overflow:hidden;
    padding:4px 4px 4px 11px;
    width:155px;
}
#search form input[type="submit"] {
    background:url(../images/search2.png) no-repeat scroll 0 0 transparent;
    border:medium none;
    cursor:pointer;
    float:left;
    height:28px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:26px;
}

/*navigation menu*/
nav {
    float: right;
    padding-top: 75px;
}
nav ul {
    padding:0px 0px 0 0;
}
nav ul > li {
    float:left;
    line-height:14px;
    border-left:1px solid #ff9d4e;
    background:url(../images/menu_bg.gif) 0 0 repeat-x #df6a35;
    border-top:1px solid #ee8346;

    background: -moz-linear-gradient(#eb753f, #df6a35); /* FF 3.6+ */  
    background: -ms-linear-gradient(#eb753f, #df6a35); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eb753f), color-stop(100%, #df6a35)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#eb753f, #df6a35); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#eb753f, #df6a35); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb753f', endColorstr='#df6a35'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb753f', endColorstr='#df6a35')"; /* IE8+ */  
    background: linear-gradient(#eb753f, #df6a35); /* the standard */ 
}
nav ul li {
    position:relative;
}
nav ul > li:first-child {
    border-left:solid 1px #e3773d;
}
nav ul > li:hover, nav ul > li.active, nav ul > li.sfHover {
    border-top:solid 1px #a2522a;
    background:url(../images/menu_bg.gif) 0 -148px repeat-x #652812;

    background: -moz-linear-gradient(#9e4926, #652712); /* FF 3.6+ */  
    background: -ms-linear-gradient(#9e4926, #652712); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9e4926), color-stop(100%, #652712)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#9e4926, #652712); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#9e4926, #652712); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e4926', endColorstr='#652712'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e4926', endColorstr='#652712')"; /* IE8+ */  
    background: linear-gradient(#9e4926, #652712); /* the standard */ 
}
nav ul > li:hover > a, nav ul > li.active , nav ul > li.sfHover > a {
    color:#f9dcb4;
}
nav ul > li > a {
    display:inline-block;
    color:#fff;
    width:123px;
    text-align:center;
    line-height:18px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:15px;
    text-transform:uppercase;
    padding:14px 0 16px;
    text-decoration:none;
}



Main content section



After our header area – we have main content area. This is pretty big section – in top we have slider (nivoSlider), after slider – promo section, and then – featured posts.


<div id="main"><!-- Defining the main content section -->

    <section id="slider-wrapper"><!-- Promo slider -->
        <div id="slider" class="nivoSlider">
            <img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1">
            <img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
            <img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Your promo text 1</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Your promo text 2</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-2" class="nivo-html-caption">
            <h5 class="p2">Your promo text 3</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-3" class="nivo-html-caption">
            <h5 class="p2">Your promo text 4</h5>
            <p>Promo text description here</p> 
        </div>
    </section>

    <section id="promo"><!-- Defining the promo section -->
        <img alt="" src="images/promo.jpg"> Welcome to test our 'Mono' templates. We making best templates for you.
    </section>

    <section id="content"><!-- Defining the featured content section -->
        <ul>
            <li>
                <h1>APC caching</h1>
                <p>Today I have another interesting article for PHP. We will talking about caching, and practice of using caching in php. I will make review of APC caching and will show you how you can use APC in PHP.</p>
                <a class="more" href="http://www.script-tutorials.com/how-to-use-apc-caching-with-php/">Continue +</a>
            </li>
            <li>
                <h1>3D WebGL</h1>
                <p>Today we continue HTML5 canvas examples. And today we will try to begin learning WebGL. In my demonstration I will show you how to initialize WebGL and draw simple 3D object. Also we will animate this object too.</p>
                <a class="more" href="http://www.script-tutorials.com/making-3d-webgl-demonstration/">Continue +</a>
            </li>
            <li>
                <h1>Watermark</h1>
                <p>Today is interesting tutorial for PHP. I will show you how to use GD library. And, main task today is adding watermark to image and generate result as PNG image into browser. We will using PHP and GD library.</p>
                <a class="more" href="http://www.script-tutorials.com/watermark-processing-on-images-using-php-and-gd/">Continue +</a>
            </li>
        </ul>
    </section>

</div>


CSS for Main content section


/* main section */
#promo {
    border-bottom: 1px solid;
    color: #704336;
    display: block;
    font-size: 40px;
    line-height: 50px;
    overflow:hidden;
    padding:20px 0;
    position: relative;
    width:908px;
}
#promo img {
    float:left;
    margin-right:20px;
}
#content {
    border-bottom: 1px solid;
    overflow:hidden;
    padding:20px 0;
    width:908px;
}
#content ul {
    list-style:none outside none;
    margin:0;
    padding:0;
}
#content ul li {
    float:left;
    margin:0 0 0 22px;
    width:288px;
}
#content ul li:first-child {
    margin:0;
}
#content ul li h1 {
    color: #CA5D2C;
    font-size: 30px;
    line-height: 1.2em;
    margin: 0 0 19px;
    padding-left: 20px;
}
#content ul li p {
    padding-bottom: 11px;
}



Customized styles of our slider (nivoSlider) will in external file



css/nivo-slider.css



This file always available in our package. After main section I decided to make another one section for content


<div id="submain"><!-- Defining submain content section -->
    <section id="subcontent"><!-- Defining the content section #2 -->
        <div id="left">
            <ul>
                <li>
                    <h3>HTML5&CSS3 single page layout – Art theme</h3>
                    <img alt="" src="images/post.jpg">
                    <p>Today I will like to product new great masterpiece – new template with codename: ‘Art theme’. This will nice HTML5 template with nice gray colors. Hope that you will like new styles and you will learn some new coding lessons.</p>
                    <a class="more" href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-art-theme/">Continue +</a>
                </li>
                <li>
                    <h3>HTML CSS Anime Theme Website Layout</h3>
                    <img alt="" src="images/post.jpg">
                    <p>Today I will like to product new masterpiece – new template with codename: ‘Anime theme’. This will nice HTML5 template with good colors. Hope that you can learn some new coding lessons and download our result and use it at your own site.</p>
                    <a class="more" href="http://www.script-tutorials.com/creating-new-html-css-website-layout-5-anime-theme/">Continue +</a>
                </li>
            </ul>
        </div>
        <div id="right">
            <dl id="acc">
                <dt class="active">
                    <a href="#">Short reviews</a>
                </dt>
                <dd class="active" style="display: block;">
                    <p>Here are text of short review of something ...</p>
                    <a class="more" href="#">Continue +</a>
                </dd>
                <dt class="">
                    <a href="#">Short reviews #1</a>
                </dt>
                <dd style="display: none;">
                    <p>Here are text of short review of something ...</p>
                    <a class="more" href="#">Continue +</a>
                </dd>
                <dt>
                    <a href="#">Short reviews #3</a>
                </dt>
                <dd>
                    <p>Here are text of short review of something ...</p>
                    <a class="more" href="#">Continue +</a>
                </dd>
            </dl>
        </div>
        <div class="clear"></div>
    </section>
</div>


Here you can keep all another your posts (or another necessary content) of your website, also I made nice sliding element at right side. Here are related CSS styles: 


/* submain section */
#submain {
    padding:20px 0;
}
#subcontent #left {
    float:left;
    width:69%;
}
#subcontent #right {
    float:left;
    margin-left:1%;
    width:30%;
}
#subcontent ul {
    list-style:none outside none;
    margin:0;
    padding:0;
}
#subcontent ul li {
    color:#737373;
    font-size:12px;
    line-height:18px;
    margin-bottom:10px;
    overflow:hidden;
    padding:7px;
}
#subcontent ul li h3 {
    color: #704336;
    font-size: 30px;
    line-height: 1.2em;
    margin-bottom: 3px;
}
#subcontent ul li img {
    float:left;
    height:128px;
    margin:5px 20px 5px 0;
    width:128px;
}
#subcontent ul li p {
    padding:0 0 13px;
}

/*acc*/
dl#acc{
    height:auto !important;
    list-style-type:none;
    padding:8px 0px 8px 0;
}
dl#acc dt{
    margin-bottom:0;
    margin-top:1px !important;
}
#acc dt {
    background:url(../images/acc_a_bg.gif) 0 0 repeat-x #efedeb;
    position:relative;
}
#acc dt.first {
    padding-bottom:1px;
}
#acc dt a {
    display:block;
    background:url(../images/acc_marker.png) 19px -34px no-repeat;
    position:relative;
    padding:9px 0px 9px 33px;
    overflow:hidden;
    color:#ca5d2c;
    font-size:13px;
    font-weight:bold;
    border:solid 1px #e3dedc;
    border-top-color:#eeeceb;
    border-bottom-color:#d7cfcb;
    text-transform:uppercase;
    text-decoration:none;
}
#acc dt a:hover, #acc dt.active a {
    background-position:13px 18px;
    color:#704336;
}
#acc dt strong {
    color:#000;
    float:left;
    font-size:19px;
    font-weight:normal;
    line-height:1.2em;
    padding-top:4px;
    text-decoration:none;
}
#acc dd {
    background:url(../images/acc_content_bg.gif) 0 0 repeat-x #fff;
    display:none;
    font-size:13px;
    line-height:20px;
    margin:0 !important;
    padding:15px 20px 27px 19px;
}
#acc dd p {
    padding-bottom:11px;
}

#acc dd.active {
    display:block;
}



Footer section



Finally, here are our footer area


<footer><!-- Defining the footer section of the page -->
    <ul id="social"><!-- Social profiles links -->
        <li><a href="#" title="facebook" rel="external nofollow"><img alt="" src="images/facebook.png"></a></li>
        <li><a href="#" title="twitter" rel="external nofollow"><img alt="" src="images/twitter.png"></a></li>
        <li><a href="#" title="linkedin" rel="external nofollow"><img alt="" src="images/linkedin.png"></a></li>
        <li><a href="#" title="rss" rel="external nofollow"><img alt="" src="images/rss.png"></a></li>
    </ul>
    <div id="privacy">
        Mono template © 2011 <a class="link" href="http://www.script-tutorials.com/">Privacy Policy</a><br />
        <a class="link" href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-mono/">Template by Script Tutorials</a>
    </div>
</footer>


CSS for footer section


/* footer section */
footer {
    padding:20px 40px;
    text-align:right;
    font-size:11px;
    background-color:#f6f4f2;
    overflow:hidden;
}
footer a{
    text-decoration:none;
    color:#5E5956;
}
#social {
    float:left;
    list-style:none outside none;
    margin:0;
    padding:0;
}
#social li {
    float:left;
    padding:0 0 0 3px;
}
#social li a:hover img {
    margin-top:1px;
}
footer #privacy {
    float:right;
}



JS for our template



Here are all necessary JS scripts:



js/html5.js, js/jquery.js and js/jquery.nivo.slider.pack.js



All these libraries already available in package



js/main.js


$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        boxCols:8,
        boxRows:8,
        animSpeed:500,
        pauseTime:4000,
        directionNav:false,
        directionNavHide:false,
        controlNav:false,
        captionOpacity:1
    });
});


$(document).ready(function() {
    $("#acc dt").click(function(){
        $(this).next("#acc dd")
            .slideToggle("slow")
            .siblings("#acc dd:visible")
            .slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("#acc dt").removeClass("active");
        return false
    })
});

















































Creating new HTML5/CSS3 single page layout – Art theme




Posted by 
on 

















Creating new HTML5/CSS3 single page layout – Art theme













Get started



Ok, let`s start. Lets create new folder and several folders inside (to keep all well structured):


    

  • css – which will contain our CSS stylesheets (nivo-slider.css, reset.css and style.css)
    • 

  • images – which will contain all used images
    • 

  • js – will contain JS files (html5.js, jquery.js, jquery.nivo.slider.pack.js and main.js)
    • 




Head section code



Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.


<!DOCTYPE html><!-- The new doctype -->
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Art HTML5&amp;CSS3 single page layout | Script tutorials demo</title>
    <meta charset="utf-8">

    <!-- Linking styles -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">

    <!-- Linking scripts -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>   
    <script src="js/main.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
</head>



Moving forward – Main layout (body)



Whole layout consist of 4 main section: header (with logo and navigation menu), main section (search form, social icons, slider area and first featured content area – 3 elements), second content section (two column layout for all your rest content) and footer. It looks like:


<body>

<div class="container">
    <header><!-- Defining the header section of the page -->

        <div class="logo"><!-- Defining the logo element -->
            .........
        </div>

        <nav><!-- Defining the navigation menu -->
            .........
        </nav>

    </header>

    <div id="main">
        <section id="social"><!-- Search form and social icons -->
            .........
        </section>

        <section id="slider-wrapper"><!-- Promo slider -->
            .........
        </section>

        <section id="content"><!-- Defining the content section -->
            .........
        </section>
    </div>

    <div id="submain">
        <section id="subcontent"><!-- Defining the content section #2 -->
            <div id="left">
                .........
            </div>
            <div id="right">
                .........
            </div>
            <div class="clear"></div>

        </section>

    </div>

    <footer><!-- Defining the footer section of the page -->
        .........
    </footer>
</div>

</body>


here are you can see base CSS styles


/* base styles */
body {
    background:url(../images/bg.jpg) repeat scroll center top #000;
    background-attachment:fixed;
    color:#737373;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:100%/1.125em;
}
a {
    color:#c46501;
    text-decoration:underline;
}
a:hover {
    text-decoration:none;
}
.clear {
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
}
.container{
    margin:0 auto;
    position:relative;
    width:960px
}


Header section with logo and navigation


Our header will contain search bar, social icons (at top) and logo at left side. Here are HTML for that section: - 


<header><!-- Defining the header section of the page -->

    <div class="logo"><!-- Defining the logo element -->
        <a href="http://www.script-tutorials.com/">
            <img src="images/logo.png" title="Art template" alt="Art template" />
        </a>
        <p>Art template</p>
    </div>

    <nav><!-- Defining the navigation menu -->
        <ul>
            <li><a href="http://www.script-tutorials.com/">Home</a></li>
            <li><a href="http://www.script-tutorials.com/category/html-css/">Tutorials</a></li>
            <li><a href="http://www.script-tutorials.com/about/">About</a></li>
            <li><a href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-art-theme/">Go Back To The Tutorial</a></li>
        </ul>
    </nav>

</header>


CSS for header section


/* header section */
header {
    height:105px;
    margin:0 0 6px;
    position:relative;
    width:100%;
    z-index:2
}
.logo {
    left:19px;
    position:absolute;
    text-align:center;
    top:20px;
}
.logo img {
    margin:0 auto 3px;
}
.logo p {
    color:#808D8D;
    font-size:13px;
    font-style:italic;
    line-height:16px;
}

/*navigation menu*/
nav {
    position:absolute;
    top:10px;
    right:0px;
    z-index:2;
}
nav ul, nav ul * {
    margin:0;
    padding:0;
    list-style:none;
}
nav ul li {
    float:left;
    position:relative;
    background:url(../images/menudiv.png) no-repeat scroll 0 0 transparent;
    padding:0 0 0 2px;
}
nav ul li a {
    color:#8A9CA0;
    display:block;
    font-size:18px;
    height:85px;
    line-height:120px;
    padding:0 0 0 8px;
    text-decoration:none;
    text-transform:uppercase;
    min-width:130px;
}



Main content section



After our header area – we have main content area. This is pretty big section – in top we having search form and social icons, then we have slider (nivoSlider), and after slider – featured posts.


<div id="main">
    <section id="social"><!-- Search form and social icons -->

        <form action="#" onsubmit="return false;" method="get">
            <input type="text" onfocus="if (this.value =='Search..' ) this.value=''" onblur="if (this.value=='') this.value='Search..'" value="Search.." name="q">
            <input type="submit" value="">
        </form>

        <ul>
            <li><a href="#" title="facebook" rel="external nofollow"><img alt="" src="images/facebook.png"></a></li>
            <li><a href="#" title="twitter" rel="external nofollow"><img alt="" src="images/twitter.png"></a></li>
            <li><a href="#" title="linkedin" rel="external nofollow"><img alt="" src="images/linkedin.png"></a></li>
            <li><a href="#" title="rss" rel="external nofollow"><img alt="" src="images/rss.png"></a></li>
        </ul>

    </section>

    <section id="slider-wrapper"><!-- Promo slider -->
        <div id="slider" class="nivoSlider">
            <img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1">
            <img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
            <img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Your promo text 1</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Your promo text 2</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-2" class="nivo-html-caption">
            <h5 class="p2">Your promo text 3</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-3" class="nivo-html-caption">
            <h5 class="p2">Your promo text 4</h5>
            <p>Promo text description here</p> 
        </div>
    </section>

    <section id="content"><!-- Defining the content section -->
        <ul>
            <li>
                <img src="images/post.jpg" alt="">
                <div class="desc"><p>Creating A CSS3 Animated Menu</p>
                    <a class="more" href="http://www.script-tutorials.com/creating-css3-animated-menu/">Continue</a>
                </div>
            </li>
            <li>
                <img src="images/post.jpg" alt="">
                <div class="desc"><p>Animated jQuery Progressbar Plugin</p>
                    <a class="more" href="http://www.script-tutorials.com/animated-jquery-progressbar/">Continue</a>
                </div>
            </li>
            <li>
                <img src="images/post.jpg" alt="">
                <div class="desc">
                    <p>Fresh collection of Original Captchas</p>
                    <a class="more" href="http://www.script-tutorials.com/fresh-collection-of-original-captchas/">Continue</a>
                </div>
            </li>
        </ul>

    </section>
</div>


CSS for Main content section


/* main section */
#main {
    background:url(../images/mainbg.png) repeat scroll left top transparent;
    border:1.5px dashed #CBC9C7;

    -moz-box-shadow:0 0 5px 7px #eeeeee;
    -webkit-box-shadow:0 0 5px 7px #eeeeee;
    box-shadow:0 0 5px 7px #eeeeee;
    -o-box-shadow:0 0 5px 7px #eeeeee;
}
#social {
    margin:10px auto;
    width:908px;
    overflow:hidden;
}
#social form {
    float:left;
    background:url(../images/search1.png) no-repeat scroll 0 0 transparent;
    height:28px;
    width:196px;
}
#social form input[type="text"] {
    background:none repeat scroll 0 0 transparent;
    border:medium none;
    color:#B5B2AA;
    float:left;
    font-size:12px;
    font-style:italic;
    height:18px;
    line-height:1.4em;
    margin:0;
    overflow:hidden;
    padding:4px 4px 4px 11px;
    width:155px;
}
#social form input[type="submit"] {
    background:url(../images/search2.png) no-repeat scroll 0 0 transparent;
    border:medium none;
    cursor:pointer;
    float:left;
    height:28px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:26px;
}
#social ul {
    float:right;
    list-style:none outside none;
    margin:0;
    padding:0;
}
#social ul li {
    float:left;
    padding:0 0 0 3px;
}
#social ul li a:hover img {
    margin-top:1px;
}
#content {
    margin:10px auto;
    width:908px;
    overflow:hidden;
}
#content ul {
    list-style:none outside none;
    margin:0;
    padding:0;
}
#content ul li {
    color:#FFFFFF;
    float:left;
    height:288px;
    margin:0 0 0 22px;
    overflow:hidden;
    padding:0;
    position:relative;
    width:288px;
}
#content ul li:first-child {
    margin:0;
}
#content ul li img {
    float:left;
}
#content ul li div {
    background:url(../images/s_caption.png) repeat scroll 0 0 transparent;
    bottom:-50px;
    left:0;
    padding:14px 18px 13px 15px;
    position:absolute;
    width:255px;

    -moz-transition:bottom 0.25s linear;
    -ms-transition:bottom 0.25s linear;
    -o-transition:bottom 0.25s linear;
    -webkit-transition:bottom 0.25s linear;
    transition:bottom 0.25s linear;
}
#content ul li:hover div {
    bottom:0;
}
#content ul li div p {
    color:#FFFFFF;
    font-size:13px;
    line-height:16px;
    padding:0 0 2px;
}
#content ul li div a.more {
    color:#FFFFFF;
    float:right;
    font-size:15px;
    font-style:italic;
    line-height:1.2em;
    text-decoration:underline;
}



Customized styles of our slider (nivoSlider) I decided to move to external file



css/nivo-slider.css



This file always available in our package. After main section I decided to make another one section for content


<div id="submain">
    <section id="subcontent"><!-- Defining the content section #2 -->
        <div id="left">
            <ul>
                <li>
                    <div>
                        <h3>Post #1</h3>
                        <p>Post 1 description</p>
                        <a class="more" href="#">Continue</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h3>Post #2</h3>
                        <p>Post 1 description</p>
                        <a class="more" href="#">Continue</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h3>Post #3</h3>
                        <p>Post 1 description</p>
                        <a class="more" href="#">Continue</a>
                    </div>
                </li>
            </ul>
        </div>
        <div id="right">
            <ul>
                <li>
                    <div>
                        <h3>Attractive Presentation with HTML5</h3>
                        <p>Today we will prepare something new – presentation. And we will using all interesting what can give us HTML5. Presentation itself will contain 5 easy slides. We will able to use navigation arrow keys for sliding, spacebar, display notes, sidebar with some custom content. Here are new html5 tags which we going to use: nav, menu, section, aside, header and hgroup. Sure, that now is time to check our demo.</p>
                        <a class="more" href="http://www.script-tutorials.com/creating-an-attractive-presentation-with-html5/">Continue</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h3>Creating Advance Level Login system with Logic captcha</h3>
                        <p>Long ago, I talked about a simple easy login system. And today, I decided to improve the system. The new version will use the methods SHA1 + MD5 (with salt) to encode passwords. We also do not use cookies to store information, and will use the sessions. And, in this version I will implement an interesting logic captcha (where we will need to choose the correct answer in order to prove that we are human, not machine).</p>
                        <a class="more" href="http://www.script-tutorials.com/creating-advance-level-login-system-with-logic-captcha/">Continue</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clear"></div>

    </section>

</div>


Here you can keep all another your posts (or another necessary content) of your website. Here are related CSS styles: 


/* submain section */
#submain {
    background-color:#dbddda;
    margin-top:20px;
    padding:10px;

    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
#subcontent #left {
    float:left;
    width:30%;
}
#subcontent #right {
    float:left;
    margin-left:1%;
    width:69%;
}
#subcontent ul {
    list-style:none outside none;
    margin:0;
    padding:0;
}
#subcontent ul li {
    background-color:#FFFFFF;
    color:#737373;
    font-size:12px;
    line-height:18px;
    padding:7px;
    margin-bottom:10px;
    overflow:hidden;
}
#subcontent ul li:hover {
    color:#434343;
}
#subcontent ul li div {
    border:1px dashed #CBC9C7;
    padding:7px;
    overflow:hidden;
}
#subcontent ul li:hover div {
    border-color:#434343;
}
#subcontent ul li h3 {
    font-size:24px;
    font-weight:normal;
    line-height:1.2em;
    margin:0;
    padding:0 0 3px;
    text-transform:uppercase;
}
#subcontent ul li p {
    padding:0 0 13px;
}
#subcontent ul li a.more {
    color:#829597;
    float:right;
    font-size:12px;
    line-height:16px;
    padding:0 18px 0 0;
    text-decoration:none;
    text-transform:uppercase;
}
#subcontent ul li:hover a.more {
    color:#434343;

    -moz-transition:color 0.5s linear;
    -ms-transition:color 0.5s linear;
    -o-transition:color 0.5s linear;
    -webkit-transition:color 0.5s linear;
    transition:color 0.5s linear;
}



Footer section



Finally, here are our footer area


<footer><!-- Defining the footer section of the page -->
        Art template © 2011 <a class="link" href="http://www.script-tutorials.com/">Privacy Policy</a><br />
        <a class="link" href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-art-theme/">Template by Script Tutorials</a>
</footer>


CSS for footer section


/* footer section */
footer{
    padding:25px 0;text-align:center;
    color:#979590;
    font-size:12px;
}
footer a{
    text-decoration:none;
    color:#979590;
}



JS for our template



Here are all necessary JS scripts:



js/html5.js, js/jquery.js and js/jquery.nivo.slider.pack.js



All these libraries already available in package



js/main.js


$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        boxCols:8,
        boxRows:8,
        animSpeed:500,
        pauseTime:4000,
        directionNav:false,
        directionNavHide:false,
        controlNav:false,
        captionOpacity:1
    });
});















































Creating an Attractive HTML CSS Anime Theme Website Layout 




Posted by 
on 

















Creating an Attractive HTML CSS Anime Theme Website Layout













Get started



Ok, let`s start. Lets create new folder and few more folders inside (to keep all well structured):


    

  • css – which will contain CSS stylesheets (menu.css and style.css)
    • 

  • images – which will contain all used images
    • 

  • js – will contain JS files (html5.js)
    • 




Head section code



Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.


<!DOCTYPE html><!-- The new doctype -->
<html lang="en">
<head>
    <title>Creating a HTML5 &amp; CSS3 Single Page Web Layout #5 Anime theme | Script tutorials</title>
    <meta charset="utf-8">

    <!-- Linking styles -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen"> 

    <!-- Linking scripts -->
    <!--[if lt IE 9]>
        <script src="js/html5.js"></script>
    <![endif]-->
</head>



Moving forward – Main layout (body)



Whole layout consist of 4 main section: header (with social icons and search), logo, main section (nav menu, main content in 2 columns) and footer. It looks like:


<body>
    <header><!-- Defining the header section of the page -->
        ........
    </header>

    <!-- Defining main logo -->
    <div class="logo">
        ........
    </div>

    <section class="content"><!-- Defining the main content section of the page -->
        ........
    </section>

    <footer><!-- Defining the footer section of the page -->
        ........
    </footer>
</body>


here are you can see base CSS styles


/* base common styles */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}

* {
    margin:0;
    padding:0;
}
img {
    border-width:0;
}
body {
    background:url(../images/bg.jpg) repeat-x scroll center top #000;
    color:#c7b8a3;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:0.75em;
}
a {
    color:#c46501;
    text-decoration:underline;
}
a:hover {
    text-decoration:none;
}
.clear {
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
}


Header section and logo


Our header will contain search bar, social icons (at top) and logo at left side. Here are HTML for that section: 


<header><!-- Defining the header section of the page -->
    <div class="header">
        <div class="social_icons">
            <a href="#" title="Facebook"><img alt="" src="images/facebook.png"></a>
            <a href="#" title="Twitter"><img alt="" src="images/twitter.png"></a>
            <a href="#" title="RSS"><img alt="" src="images/rss.png"></a>
        </div>
        <div class="search">
            <form action="" method="get">
                <input type="text" name="q" value="" />
                <input type="submit" value="search" />
            </form>
        </div>
        <div class="clear"></div>
    </div>
</header>

<!-- Defining main logo -->
<div class="logo">
    <a href="" title="Anime theme"><img src="images/logo.png" /></a>
</div>


CSS for Header section


/*header*/
header {
    background-color:#1f1f1f;
}
header .header {
    overflow:hidden;
    position:relative;
    width:960px;
    height:42px;
    margin:0 auto;
}
header .search {
    float:right;
    margin-top:10px;
    width:300px;
}
header .search input[type=text] {
    background-color:#443e30;
    border:1px solid #2F2C29;
    color:#FFF;
    font-size:1em;
    height:20px;
    margin-right:5px;
    width:203px;
    padding:1px 0 0 3px;
}
header .search input[type=submit] {
    background-image:url(../images/search.gif);
    height:21px;
    width:60px;
    font-size:0.9em;
    border-width:0;
}
header .social_icons {
    float:right;
    margin-right:5px;
    margin-top:5px;
}
.logo {
    position:relative;
    width:960px;
    height:225px;
    margin:0 auto;
}
.logo img {
    margin:20px 10px;
}


Main content section


After our header area – we have main content area. In top we will have navigation menu, then – rest content (2 columns). First column can contain full length posts, second – for categories (or archive links). Of course – you can customize here anything. 


<section class="content"><!-- Defining the main content section of the page -->

    <!-- navigation menu -->
    <nav>
        <ul>
        <li><a href="http://www.script-tutorials.com/">Home</a></li>
        <li><a href="#">Anime News</a></li>
        <li><a href="#">Anime Archive</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Feedback</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="http://www.script-tutorials.com/creating-new-html-css-website-layout-5-anime-theme">Tutorial</a></li>
        </ul>
    </nav>
    <div class="clear"></div>

    <div class="column">

        <div class="post">
            <div class="title">
                <div class="date"><span>31</span>July</div>
                <h2><a href="#" title="post 1">The Ghost with the Most</a></h2>
            </div>
            <div class="text-box">
                <p><img alt="" src="images/post.png"><br>Back in March I wrote a Brain Diving column on Otsuichi's Summer, Fireworks, and My Corpse, bragging about how nice the weather was in Austin and that I was getting in the mood for summer. Ugh, what was I thinking? Now that we've broken the record for the most number of consecutive days over 100 F, I feel that by writing that I was like Homer Simpson running around shouting "No comeuppance!" You can have summer - I'm thoroughly done with it.</p>
            </div>
            <div class="comments">
                <a href="#" title="comments on post 1">10 Comments</a>
            </div>
        </div>
        <div class="post">
            <div class="title">
                <div class="date"><span>17</span>July</div>
                <h2><a href="#" title="post 1">Disney To Adapt Tuxedo Gin</a></h2>
            </div>
            <div class="text-box">
                <p><img alt="" src="images/post.png"><br>Walt Disney Pictures has hired Reno 911 co-creator Robert Ben Garant to write "Tux," a screenplay based on Tokihiko Matsuura`s romantic comedy manga Tuxedo Gin. The 1997-2000 manga series stars "a young street fighter who falls into a coma and learns that he has lived his life so selfishly that he only has enough karma points to be reincarnated as an animal 15 pounds or less. Trapped in the body of a chin-strap penguin, he tries to overcome the humiliation and rack up enough good deeds to get his old body back and save the girl he loves." Garant wrote the screenplays for Disney`s 2005 films Herbie Fully Loaded and The Pacifier. The film will be produced by Paul Young and Peter Principato of Principato-Young Entertainment, VIZ Media`s Jason Hoffs, and Shogakukan`s Ichiro Takase.</p>
            </div>
            <div class="comments">
                <a href="#" title="comments on post 1">20 Comments</a>
            </div>
        </div>

    </div>

    <div class="sidebar">
        <div class="block">
            <h2>Categories</h2>
            <ul>
                <li><a title="" href="#">Black &amp; white</a> (4)</li>
                <li><a title="" href="#">Fantasies</a> (3)</li>
                <li><a title="" href="#">Music</a> (3)</li>
                <li><a title="" href="#">Nature</a> (3)</li>
                <li><a title="" href="#">Portraits</a> (2)</li>
                <li><a title="" href="#">Urban</a> (2)</li>
            </ul>
        </div>

        <div class="block">
            <h2>Archives</h2>
            <ul>
                <li><a title="" href="#">July 2011</a> (5)</li>
                <li><a title="" href="#">June 2011</a> (5)</li>
                <li><a title="" href="#">May 2011</a> (5)</li>
                <li><a title="" href="#">April 2011</a> (5)</li>
                <li><a title="" href="#">March 2011</a> (5)</li>
                <li><a title="" href="#">February 2011</a> (5)</li>
                <li><a title="" href="#">January 2011</a> (5)</li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
</section>



CSS for navigation menu



css/menu.css




nav {
    overflow:hidden;
    position:relative;
    width:910px;
    background:url("../images/menu-bg.png") no-repeat scroll left top transparent;
    margin:10px auto;
    padding:10px;
}
nav ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    overflow:hidden;
    margin:0;
    padding:0;
}
nav ul li {
    background:url("../images/menu-devider.gif") no-repeat scroll left top transparent;
    float:left;
    font-size:1.5em;
    line-height:normal;
    margin-left:-2px;
    overflow:hidden;
    padding:0;
}
nav ul li a {
    color:#000;
    display:block;
    font-family:Tahoma,Arial,Helvetica,serif;
    font-weight:400;
    text-decoration:none;
    text-transform:none;
    padding:3px 24px 5px 26px;
}
nav ul li a:hover {
    text-decoration:none;
    color:#fc0;
}


CSS for Main content section


/*center content*/
section.content {
    overflow:hidden;
    position:relative;
    width:960px;
    background:transparent url(../images/cbg.png) repeat-x scroll center top;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    margin:0 auto;
}
.content .column {
    float:left;
    width:605px;
    padding:0 23px 7px 28px;
}
.content .sidebar {
    float:left;
    width:235px;
    border-left:1px solid #444;
    padding:0 39px 7px 25px;
}

.post {
    overflow:hidden;
    padding-bottom:13px;
}
.post .title {
    overflow:hidden;
    padding-top:5px;
    width:100%;
}
.post .title .date {
    background:url("../images/date-bg.png") no-repeat scroll left top transparent;
    color:#444;
    float:left;
    font-size:1.167em;
    font-weight:400;
    line-height:1em;
    margin-right:16px;
    text-align:center;
    width:69px;
    padding:5px 0 8px;
}
.title .date span {
    display:block;
    font-size:2.357em;
    line-height:1em;
}
.post .title h2 {
    color:#C7B8A3;
    font-size:2.5em;
    font-weight:400;
    line-height:1.01em;
    text-transform:none;
    padding:15px 0 0;
}
.post .title h2 a {
    color:#C7B8A3;
    text-decoration:none;
}
.post .title h2 a:hover {
    text-decoration:underline;
}
.post .text-box {
    font-size:1.09em;
    line-height:1.35em;
    overflow:hidden;
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
}
.post .text-box img {
    margin:10px 0;
}
.post .comments {
    color:#E29111;
    font-size:1.083em;
    line-height:1em;
    overflow:hidden;
    text-transform:none;
    padding:0 0 16px;
}

.sidebar .block {
    padding:7px 30px 50px 7px;
}
.sidebar .block h2 {
    font-size:2.5em;
    margin:10px 0;
}
.sidebar ul {
    width:100%;
}
.sidebar li {
    color:#EF6A1B;
    font-size:1.083em;
    font-weight:700;
    line-height:1.146em;
    padding:4px 0 5px;
}
.sidebar li a {
    color:#C7B8A3;
    text-decoration:none;
}



Footer section



Here are our footer area


<footer><!-- Defining the footer section of the page -->
    <div>Anime theme &copy; 2011 &nbsp;:&nbsp; <a class="link" href="#">Privacy</a></div>
</footer>


CSS for footer section


/*footer*/
footer {
    width:100%;
    background-color:#111;
}
footer div {
    font-size:1.4em;
    position:relative;
    width:960px;
    margin:0 auto;
    padding:30px 0 40px 40px;
}



JS for our template



Here are all necessary custom JS scripts



js/html5.js



This file already available in package















































Creating new HTML CSS website layout 




Posted by 
on 

















Creating new HTML CSS website layout 





Get started



Ok, let`s start. Lets create new folder and few more folders inside (to keep proper structure):


    

  • css – which will contain style files (menu.css and style.css)
    • 

  • images – which will contain all our images
    • 

  • js – we will keep here all javascripts (jquery.js, jquery.nivo.slider.js, script.js, superfish.js and supersubs.js)
    • 












Head section code



Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Gray Theme #4 | Script tutorials</title>

    <!-- Linking styles -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">

    <!-- Linking scripts -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/superfish.js" type="text/javascript"></script>
    <script src="js/supersubs.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
</head>
<body>



Moving forward – Main layout (body)



Whole layout consist of 4 main section: header, section (promo area), primary_content (just center content) and footer. It looks like:


<body>

    <!-- Defining the header section of the page -->
    <header id="header">
        .........
    </header>


    <!-- Defining the promo(slider) section of the page -->
    <section id="slider-wrapper">
        .........
    </section>


    <!-- Defining the main content section of the page -->
    <div class="primary_content container">
        .........
    </div>

    <footer><!-- Defining the footer section of the page -->
    .........
    </footer>
</body>


CSS for main layout (plus all base styles)


/* base styles */
* {
margin:0;
padding:0;
}

img {
border:0;
}

a {
color:#d00000;
outline:none;
text-decoration:underline;
}

a:hover,a:active {
outline:0;
text-decoration:none;
}

html,body {
min-width:960px;
}

body {
background-color:#ededed;
background-image:url(../images/tail-top.jpg);
background-position:center top;
background-repeat:repeat-x;
color:#828387;
font:100%/1.125em Arial, Helvetica, sans-serif;
font-size:13px;
font-style:normal;
position:relative;
}

ul li a {
color:#828387;
text-decoration:none;
}

ul li a:hover {
color:#E90000;
}

.container {
display:block;
margin-left:auto;
margin-right:auto;
position:relative;
width:960px;
}


These CSS styles defines the basic element styling, backgrounds to different sections, positions, fonts etc. 


Our header will contain logo at left, and navigation menu at right side. Here are HTML for that section: 


<!-- Defining the header section of the page -->
<header id="header">
    <div class="container">
        <div class="logo">
            <a href="#" title="Gray Theme #4">Theme #4</a>
        </div>
        <nav>
            <!-- Defining the navigation menu -->
            <ul class="topnav">
                <li class="current"><a href="http://www.script-tutorials.com/">Home</a></li>
                <li><a href="http://www.script-tutorials.com/">Tutorials</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
                        <li><a href="http://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li>
                        <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
                        <li><a href="http://www.script-tutorials.com/category/ajax/">Other</a>
                            <ul class="sub-menu">
                                <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
                                <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li>
                                <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
                            </ul>
                        </li>

                    </ul>
                </li>
                <li><a href="http://www.script-tutorials.com/tag/html5/">Tags</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.script-tutorials.com/tag/animation/">animation</a></li>
                        <li><a href="http://www.script-tutorials.com/tag/html5/">html5</a></li>
                        <li><a href="http://www.script-tutorials.com/tag/captcha/">captcha</a></li>
                        <li><a href="http://www.script-tutorials.com/tag/gallery/">gallery</a></li>
                        <li><a href="http://www.script-tutorials.com/tag/animation/">animation</a></li>
                    </ul>
                </li>
                <li><a href="http://www.script-tutorials.com/creating-new-layout-4-gray-theme/">Back</a></li>
            </ul>
        </nav>
    </div>
</header>




CSS for Header section


/* header area */
#header {
background:none repeat scroll 0 0 transparent;
display:block;
height:62px;
position:relative;
z-index:99;
}

.logo {
left:0;
position:absolute;
top:0;
}

.logo a,.logo a {
background-color:#D00000;
color:#FFF;
display:block;
font-size:3em;
height:62px;
line-height:62px;
padding:0 22px;
text-decoration:none;
}

.logo a:hover {
background:#28261d;
}

nav {
position:relative;
z-index:2;
}



CSS for navigation menu



css/menu.css




.topnav,.topnav * {
list-style:none;
margin:0;
padding:0;
}

.topnav {
float:right;
line-height:1.0;
margin-top:5px;
max-width:860px;
}

.topnav ul {
position:absolute;
top:-999em;
width:10em;
}

.topnav ul li {
width:100%;
}

.topnav li:hover {
visibility:inherit;
}

.topnav li {
background:none;
float:left;
margin:0;
padding:0;
position:relative;
}

.topnav a {
color:#9c9b93;
display:block;
position:relative;
text-decoration:none;
text-transform:capitalize;
}

.topnav li:hover ul,.topnav li.sfHover ul {
left:0;
top:57px;
z-index:99;
}

ul.topnav li:hover li ul,ul.topnav li.sfHover li ul,ul.topnav li li:hover li ul,ul.topnav li li.sfHover li ul {
top:-999em;
}

ul.topnav li li:hover ul,ul.topnav li li.sfHover ul {
left:10em;
margin-left:1px;
top:-9px;
}

ul.topnav li li li:hover ul,ul.topnav li li li.sfHover ul {
left:10em;
top:0;
}

.topnav > li > a {
font-size:16px;
height:57px;
line-height:57px;
padding:0 33px;
}

.topnav > li > a:hover,.topnav > li.sfHover > a {
background:#8f8d86;
color:#FFF;
}

.topnav > li.current-menu-item > a {
background:#605e57;
color:#FFF;
}

.topnav li ul {
background:url(../images/sub-menu-tail.png);
border-top:1px solid #605e57;
padding:8px 0;
}

.topnav li li a {
color:#7d7a71;
font-size:15px;
line-height:30px;
padding-left:20px;
}

.topnav li li a:hover,.topnav li li.sfHover > a {
color:#28261d;
}

.topnav li:hover,.topnav li.sfHover,.topnav a:focus,.topnav a:hover,.topnav a:active,.topnav > li.current-menu-item > a {
outline:0;
}

.topnav a.sf-with-ul {
min-width:1px;
}


Promo section


In this area we will put few rotating images (slider promo) with numbered navigation buttons. I selected Nivo Slider for our template (this is jQuery plugin). Here are its HTML code:


<!-- Defining the promo(slider) section of the page -->
<section id="slider-wrapper">
    <div class="container">

        <div id="slider" class="nivoSlider">
            <img src="images/promo/p1.png" alt="" title="#sliderCaption1" />
            <img src="images/promo/p2.png" alt="" title="#sliderCaption2" />
            <img src="images/promo/p3.png" alt="" title="#sliderCaption3" />
        </div>
        <div id="sliderCaption1" class="nivo-html-caption"></div>
        <div id="sliderCaption2" class="nivo-html-caption"></div>
        <div id="sliderCaption3" class="nivo-html-caption"></div>

    </div>
</section>


CSS for Promo section


/* promo area */
#slider-wrapper {
height:496px;
overflow:hidden;
position:relative;
}

#slider {
background:url(../images/ajax-loader.gif) no-repeat 50% 50%;
height:496px;
position:relative;
width:100%;
}

#slider img {
display:none;
left:0;
position:absolute;
top:0;
}

#slider a {
border:0;
display:block;
}

.nivoSlider {
position:relative;
}

.nivoSlider img {
left:0;
position:absolute;
top:0;
}

.nivoSlider a.nivo-imageLink {
border:0;
display:none;
height:100%;
left:0;
margin:0;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:60;
}

.nivo-slice {
display:block;
height:100%;
position:absolute;
z-index:50;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

.nivo-caption {
bottom:0;
color:#fff;
left:0;
position:absolute;
width:100%;
z-index:89;
}

.nivo-caption .nivo-caption-inner {
margin:0;
padding:0;
}

.nivo-caption a {
display:inline !important;
}

.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
background:url(images/direction_nav.png) no-repeat 0 0;
border:0;
cursor:pointer;
display:block;
height:35px;
position:absolute;
text-indent:-9999px;
top:50%;
width:36px;
z-index:99;
}

.nivo-prevNav {
left:0;
}

.nivo-nextNav {
right:0;
}

.nivo-controlNav {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:url(../images/controlNavBg.gif) repeat-x left top;
border-radius:7px;
bottom:-7px;
height:32px;
padding:0 4px;
position:absolute;
right:40px;
text-align:center;
z-index:99;
}

.nivo-controlNav a {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color:#FFF;
cursor:pointer;
display:inline-block !important;
font-size:14px;
height:27px;
line-height:22px;
margin-top:4px;
padding:0 5px;
position:relative;
text-decoration:none;
z-index:99;
}

.nivo-controlNav a.active,.nivo-controlNav a.active:hover {
background-color:#f3f3f1;
color:#636053;
}

.nivo-controlNav a:hover {
background-color:#5b5849;
}

a.nivo-nextNav {
background-position:-36px 0;
right:0;
}

a.nivo-nextNav:hover {
background-position:-36px -35px;
}

a.nivo-prevNav {
background-position:0 0;
left:0;
}

a.nivo-prevNav:hover {
background-position:0 -35px;
}

#slider .nivo-controlNav img {
display:inline;
height:auto;
margin-right:10px;
position:relative;
width:120px;
}



Main content section



After our promo – we have main content area. I separated this section into 2 columns. First column can contain full length news, second – some featured posts (with short titles). Of course – you can customize here anything. I will provide you with HTML code of single element per each column.


<!-- Defining the main content section of the page -->
<div class="primary_content container">

    <!-- column #1 -->
    <div id="column1" class="column">

        <div class="block">
            <h3>This is new CSS3 template #4</h3>
            <div class="bcon">
                <p>Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here.</p>
                <p>Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here.</p>
            </div>
            <a href="#" class="button"><span><span>continue</span></span></a>
        </div>

        <div class="block">
            <h3>Categories</h3>
            <div class="bcon">
                <ul>
                    <li><a href="#">Category 1</a></li>
                    <li><a href="#">Category 2</a></li>
                    <li><a href="#">Category 3</a></li>
                    <li><a href="#">Category 4</a></li>
                    <li><a href="#">Category 5</a></li>
                    <li><a href="#">Category 6</a></li>
                    <li><a href="#">Category 7</a></li>
                    <li><a href="#">Category 8</a></li>
                </ul>
            </div>
        </div>

    </div>

    <!-- column #2 -->
    <div id="column2" class="column">

        <div class="block2">
            <div class="top"></div>
            <div class="bg">
                <h3>Featured Posts</h3>
                <div class="bcon">
                    <ul>
                    <li>
                        <a href="" class="thumb"><img src="images/tutorial.png" alt="post 1" title="post 1"><span class="wrap"></span></a>
                        <a href="" class="date"><span><span>01.08.2011</span></span></a>
                        <p>Short description text #1 ... </p>
                    </li>
                    <li>
                        <a href="" class="thumb"><img src="images/tutorial.png" alt="post 2" title="post 2"><span class="wrap"></span></a>
                        <a href="" class="date"><span><span>02.08.2011</span></span></a>
                        <p>Short description text #2 ... </p>
                    </li>
                    <li>
                        <a href="" class="thumb"><img src="images/tutorial.png" alt="post 3" title="post 3"><span class="wrap"></span></a>
                        <a href="" class="date"><span><span>03.08.2011</span></span></a>
                        <p>Short description text #3 ... </p>
                    </li>
                    </ul>
                </div>
                <div>
                <a href="#" class="button"><span><span>continue</span></span></a>
                </div>
            </div>
            <div class="bot"></div>
        </div>

    </div>

</div>


CSS for Main content section


/* main area */
.primary_content {
background:url(../images/contentBoxBg.png) no-repeat scroll center top transparent;
overflow:hidden;
padding-bottom:45px;
}

.primary_content .column {
display:inline;
float:left;
margin-left:5px;
margin-right:5px;
padding-top:40px;
position:relative;
}

#column1 {
padding-left:40px;
padding-top:64px;
width:550px;
}

#column2 {
padding-right:40px;
width:310px;
}

.button {
background:url(../images/button-left.png) no-repeat left top;
color:#696969;
display:inline-block;
font-size:16px;
padding-left:6px;
text-decoration:none;
}

.button:hover {
background-position:left -29px;
color:#FFF;
}

.button span {
background:url(../images/button-right.png) no-repeat right top;
display:block;
padding-right:6px;
}

.button:hover span {
background-position:right -29px;
}

.button span span {
background:url(../images/button-tail.gif) repeat-x left top;
height:29px;
line-height:29px;
padding:0 4px;
}

.button:hover span span {
background-position:left -29px;
}

/* blocks */
.block,.block2 {
margin-bottom:30px;
}

.block .bcon,.block2 .bcon {
margin-bottom:10px;
}

.block h3,.block2 h3 {
color:#696969;
font-size:2em;
font-weight:400;
line-height:1.2em;
margin:0 0 30px;
}

.block .bcon p {
font-size:1.077em;
line-height:1.429em;
}

.block .bcon ul {
margin:0;
padding:0;
}

.block .bcon ul li {
background:url(../images/marker.png) no-repeat scroll left top transparent;
float:left;
height:auto !important;
list-style-type:none;
margin-top:6px;
min-height:18px;
padding:2px 0 1px 30px;
width:175px;
}

.block2 .top {
background:url(../images/box-top.png) no-repeat scroll left top transparent;
font-size:0;
height:10px;
line-height:0;
overflow:hidden;
}

.block2 .bg {
background:url(../images/sidebar-tail.png) repeat scroll 0 0 transparent;
overflow:hidden;
width:100%;
}

.block2 .bg > h3,.block2 .bg > div,.block2 .bg > .button {
padding:14px 23px 0;
}

.thumb {
float:left;
height:88px;
margin:0 15px 10px 0;
position:relative;
}

.thumb img {
float:left;
height:80px;
margin:4px 0 0 4px;
width:85px;
}

a.thumb {
cursor:pointer;
}

a.thumb:hover .wrap {
background-position:left -88px;
border-color:#d00000;
}

.thumb .wrap {
background:url(../images/img-wrap-small.png) no-repeat left top;
float:left;
height:88px;
left:0;
position:absolute;
top:0;
width:93px;
}

.block2 ul li {
background:none;
list-style-type:none;
margin:45px 0 0;
overflow:hidden;
padding:0;
position:relative;
vertical-align:top;
width:100%;
}

.block2 ul li:first-child {
margin-top:0;
}

.block2 ul li .thumb {
margin-bottom:0;
}

.block2 ul li .date {
background:url(../images/postDate-left.png) no-repeat left top;
color:#FFF;
cursor:pointer;
display:inline-block;
font-size:12px;
margin:3px 0 8px;
padding-left:5px;
}

.block2 ul li .date:hover {
background-position:left -23px;
}

.block2 ul li .date span {
background:url(../images/postDate-right.png) no-repeat right top;
display:block;
padding-right:5px;
}

.block2 ul li .date:hover span {
background-position:right -23px;
}

.block2 ul li .date span span {
background:#d00000;
height:23px;
line-height:23px;
padding:0 6px;
}

.block2 ul li .date:hover span span {
background:#696969;
}

.block2 ul li p {
margin:0;
}

.block2 .bot {
background:url(../images/box-bot.png) no-repeat scroll left top transparent;
font-size:0;
height:10px;
line-height:0;
overflow:hidden;
}



Footer section



Here are our footer area


<footer><!-- Defining the footer section of the page -->
<div class="footer">
    <div class="footer_wrap container">
        <div class="wcont">
            <h3 class="title">LinkBlock#1</h3>
            <ul>
                <li><a href="#" title="link 1">Link #1</a></li>
                <li><a href="#" title="link 2">Link #2</a></li>
                <li><a href="#" title="link 3">Link #3</a></li>
                <li><a href="#" title="link 4">Link #4</a></li>
            </ul>
        </div>
        <div class="wcont">
            <h3 class="title">LinkBlock#2</h3>
            <ul>
                <li><a href="#" title="link 1">Link #1</a></li>
                <li><a href="#" title="link 2">Link #2</a></li>
                <li><a href="#" title="link 3">Link #3</a></li>
                <li><a href="#" title="link 4">Link #4</a></li>
            </ul>
        </div>
        <div class="wcont">
            <h3 class="title">Networks</h3>
            <ul class="social">
                <li><a href="http://www.script-tutorials.com/feed/rss/" title="RSS"><img alt="" src="images/rss.png" />RSS</a></li>
                <li><a href="http://www.facebook.com/pages/Script-Tutorials/226050794090255" title="Facebook"><img alt="" src="images/facebook.png" />Facebook</a></li>
                <li><a href="http://twitter.com/AramisGC" title="Twitter"><img alt="" src="images/twitter.png" />Twitter</a></li>
            </ul>
        </div>
        <div class="wcont recent">
            <h3 class="title">Recent tutorials</h3>
            <ul>
                <li><a href="http://www.script-tutorials.com/how-to-resize-images-on-server-side/" title="How to Resize images on Server Side">How to Resize images on Server Side</a></li>
                <li><a href="http://www.script-tutorials.com/creating-css3-slideout-menu-5/" title="Creating CSS3 Slideout Menu #5">Creating CSS3 Slideout Menu #5</a></li>
                <li><a href="http://www.script-tutorials.com/creating-photo-gallery-using-3d-sphere-gallery-fx/" title="Creating A Globe Shaped Photo Gallery using 3D Sphere Gallery FX">Creating A Globe Shaped Photo Gallery</a></li>
                <li><a href="http://www.script-tutorials.com/creating-a-photo-carousel-using-flashmo-230-carousel/" title="Creating A Photo Carousel using Flashmo 230 carousel">Creating A Photo Carousel Flashmo 230</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="copyright">
    <div class="container">Gray Theme #4 &copy; 2011 | <a href="#">Privacy</a></div>
</div>
</footer>


CSS for footer section


/* footer section */
.footer {
background:url(../images/footer-widget-tail.gif) repeat-x center top #605e57;
overflow:hidden;
padding:57px 0 37px;
}

.footer_wrap .wcont {
display:inline;
float:left;
margin-left:5px;
margin-right:5px;
padding-right:40px;
position:relative;
width:160px;
}

.footer_wrap .recent {
width:260px;
}

.footer_wrap .wcont h3 {
color:#E4E3E3;
font-size:18px;
font-weight:400;
margin-bottom:35px;
}

.footer_wrap .wcont ul {
margin:0;
padding:0;
}

.footer_wrap .wcont ul li {
background:none;
list-style-type:none;
margin:0;
padding:0;
}

.footer_wrap .wcont ul.social li {
margin-bottom:11px !important;
}

.footer_wrap .wcont ul li a {
color:#b7b7b7;
display:inline-block;
height:28px;
line-height:28px;
text-decoration:none;
}

.footer_wrap .wcont ul li:first-child {
margin-top:0;
}

.footer_wrap .wcont ul li a:hover {
color:#e4e3e3;
}

.footer_wrap .wcont ul li img {
float:left;
margin-right:12px;
}

footer .copyright {
background:none repeat scroll 0 0 #28261D;
font-style:italic;
padding:30px 0;
}

footer .copyright,footer .copyright a {
color:#BCBCBC;
}



JS for our template



Here are all necessary custom JS scripts



js/script.js


jQuery(window).load(function() {

    // apply supersubs and superfish for navigation menu
    jQuery('ul.topnav').supersubs({minWidth: 12, maxWidth: 27, extraWidth: 1}).superfish();
    jQuery('ul.topnav').superfish({
        delay: 1000,
        animation: {opacity:'false',height:'show'},
        speed: 'normal',
        autoArrows: false,
        dropShadows: false
    });

    // nivo slider
    jQuery('#slider').nivoSlider({
        effect: 'fade',
        slices:15,
        boxCols:8,
        boxRows:8,
        animSpeed:500,
        pauseTime:5000,
        directionNav:false,
        directionNavHide:false,
        controlNav:true});
});



All other JS files (jquery.js, jquery.nivo.slider.js, superfish.js and supersubs.js) available in package