New HTML5&CSS3 single page layout – Fashion

Date: 08th Feb 2012 Author: admin 4 Comments
Posted in: HTML/CSS |Tags: , ,

Fashion HTML5&CSS3 single page layout

New HTML5&CSS3 single page layout – Fashion

Our today’s template is very light, clean and friendly. Maybe someone will think that this is something very light and easy, but possible that someone have been looking for such styles for a long time. Anyway I sure that you will like it. I would like to introduce a new great masterpiece – ‘Fashion’ template. This is the nice HTML5/CSS3 template with nice light (with a little of red) colors.

Final Result

final template result

Live Demo
download result

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://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 menu

header area

First 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://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://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:

Slider area

    <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).

Main content area

    <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://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://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://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 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://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


Live Demo
download result

Conclusion

Congrats, our new template ‘Fashion’ is complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks :) Good luck!

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.
    Tweet
   
   

Stay connected with us:

4 Comments

    • Rocky's Gravatar
    • Prodyot's Gravatar
    • Alessandro's Gravatar
    • hi, sorry for my english, i’m italian..
      i have a problem: if i see this lovely template in Safari, i see the correct font same the example.
      If i open the site with firefox i see another font :S

      Can you help me ?

      ty

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>