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:

01
<!DOCTYPE html>

02
<html lang="en"><head>

03
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

04
    <title>'Fashion' single page layout | Script tutorials demo</title>

05
    <meta charset="utf-8">

06
    <!-- Link styles -->

07
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

08
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

09
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">

10
    <!-- Link scripts -->

11
    <script src="js/jquery.js" type="text/javascript"></script>

12
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

13
    <script>

14
        $(window).load(function() {

15
            $('#slider').nivoSlider({

16
                effect:'random',

17
                slices:15,

18
                boxCols:8,

19
                boxRows:8,

20
                animSpeed:500,

21
                pauseTime:4000,

22
                directionNav:false,

23
                directionNavHide:false,

24
                controlNav:true,

25
                captionOpacity:0.9

26
            });

27
        });

28
    </script>

29
    <!--[if lt IE 9]>

30
    <script type="text/javascript" src="js/html5.js"></script>

31
    <![endif]-->

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

01
<body>

02
<div class="container">

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

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

05
            ........

06
        </div>

07
        <section id="search"><!-- Search form -->

08
            ........

09
        </section>

10
    </header>

11
    <nav><!-- Define the navigation menu -->

12
        ........

13
    </nav>

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

15
        ........

16
    </section>

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

18
        <section id="promo"><!-- Define the promo section -->

19
            ........

20
        </section>

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

22
            ........

23
        </section>

24
    </div>

25
    <div id="submain"><!-- Define submain content section -->

26
        <section id="subcontent"><!-- Define the content section #2 -->

27
            <div id="left">

28
                ........

29
            </div>

30
            <div id="right">

31
                <div class="block"><!-- Archives block -->

32
                    ........

33
                </div>

34
                <div class="block"><!-- Recent posts block -->

35
                    ........

36
                </div>

37
            </div>

38
        </section>

39
    </div>

40
    <footer><!-- Define the footer section of the page -->

41
        <ul id="social"><!-- Social network links -->

42
            ........

43
        </ul>

44
        <div id="privacy">

45
            Fashion template © 2012 <a class="link" href="#">Privacy Policy</a><br />

46
            <a class="link" href="https://www.script-tutorials.com/">Template by Script Tutorials</a>

47
        </div>

48
    </footer>

49
</div>

50
</body>

Base CSS styles

001
/* base styles */

002
body {

003
    background:#efefef;

004
    color:#828282;

005
    font:100%/1.125em Arial, Helvetica, sans-serif;

006
    margin:0;

007
    position:relative;

008
}

009
a {

010
    color:#c24050;

011
    outline:none;

012
    text-decoration:underline;

013
}

014
a:hover,a:active {

015
    outline:0;

016
    text-decoration:none;

017
}

018
img {

019
    border:0 none;

020
    margin:0;

021
    vertical-align:top;

022
    -webkit-transition: all 0.3s ease;

023
    -moz-transition: all 0.3s ease;

024
    -o-transition: all 0.3s ease;

025
}

026
a:hover img {

027
    opacity:.8;

028
}

029
h1,h2,h3,h4 {

030
    color:#262626;

031
    font-family:cursive;

032
    font-weight:400;

033
    padding:0;

034
}

035
h1 {

036
    font-size:3.2em;

037
    line-height:1.2em;

038
    margin:0 0 0.75em;

039
}

040
h2 {

041
    font-size:3em;

042
    line-height:1.2em;

043
    margin:0 0 .7em;

044
}

045
h3 {

046
    font-size:2.4em;

047
    line-height:1.2em;

048
    margin:0 0 1em;

049
}

050
h4 {

051
    font-size:1em;

052
    margin:0 0 1.5em;

053
}

054
p {

055
    margin:0 0 1.5em;

056
    padding:0;

057
}

058
input,select,textarea {

059
    border:1px solid #dbdbdb;

060
    font-family:Arial, Helvetica, sans-serif;

061
    font-size:1em;

062
    font-weight:400;

063
    outline:none;

064
    vertical-align:middle;

065
    border-radius:5px;

066
    -moz-border-radius:5px;

067
    -ms-border-radius:5px;

068
    -o-border-radius:5px;

069
    -webkit-border-radius:5px;

070
}

071
ul {

072
    list-style-type:none;

073
    margin:0;

074
    padding:0;

075
}

076
ul li {

077
    padding:0;

078
    vertical-align:top;

079
}

080
ul li time {

081
    color:#C24050;

082
    display:block;

083
    margin:0 0 0.5em;

084
}

085
.block {

086
    margin:0 0 3em;

087
}

088
.container {

089
    background:#fff;

090
    border-left:1px solid #e1e1e1;

091
    border-right:1px solid #e1e1e1;

092
    font-size:.75em;

093
    margin:0 auto;

094
    width:949px;

095
}

096
.more {

097
    background:#efefef;

098
    color:#262626;

099
    display:inline-block;

100
    line-height:28px;

101
    padding:0 10px;

102
    text-decoration:none;

103
    text-transform:uppercase;

104
    border-radius:5px;

105
    -moz-border-radius:5px;

106
    -ms-border-radius:5px;

107
    -o-border-radius:5px;

108
    -webkit-border-radius:5px;

109
}

110
.more:hover {

111
    background:#c24050;

112
    color:#fff;

113
}

Header section (with logo and search) and navigation menu

header area

First two elements – header area and navigation menu. Html markup:

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

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

03
        <a href="https://www.script-tutorials.com/">

04
            <img src="images/logo.png" title="Fashion template" alt="Fashion template" />

05
        </a>

06
    </div>

07
    <section id="search"><!-- Search form -->

08
        <form action="#" onsubmit="return false;" method="get">

09
            <input type="text" onfocus="if (this.value =='Search..' ) this.value=''" onblur="if (this.value=='') this.value='Search..'" value="Search.." name="q">

10
            <input type="submit" value="">

11
        </form>

12
    </section>

13
</header>

14
<nav><!-- Define the navigation menu -->

15
    <ul>

16
        <li class="active"><a href="#">Home</a></li>

17
        <li><a href="#">Tutorials</a></li>

18
        <li><a href="#">About</a></li>

19
        <li><a href="https://www.script-tutorials.com/new-html5css3-single-page-layout-fashion/">To Tutorial</a></li>

20
    </ul>

21
</nav>

CSS styles:

01
/* header section */

02
header {

03
    height:113px;

04
    position:relative;

05
    z-index:99;

06
}

07
.logo {

08
    left:44px;

09
    position:absolute;

10
    top:41px;

11
}

12
.logo img {

13
    margin:0 auto 3px;

14
}

15
#search {

16
    position:absolute;

17
    right:40px;

18
    top:40px;

19
}

20
#search form input[type="text"] {

21
    border:1px solid #e3e3e3;

22
    color:#343434;

23
    padding:7px 30px 6px 10px;

24
    width:222px;

25
}

26
#search form input[type="submit"] {

27
    background:url(../images/search_btn.png) no-repeat 0 0;

28
    border:none;

29
    cursor:pointer;

30
    height:13px;

31
    margin:0;

32
    padding-left:0;

33
    padding-right:0;

34
    position:absolute;

35
    right:10px;

36
    top:8px;

37
    width:13px;

38
}

39
/*navigation menu*/

40
nav {

41
    background:#fcfcfc;

42
    border-bottom:1px solid #e7e7e7;

43
    border-top:1px solid #e7e7e7;

44
    display:block;

45
    margin-bottom:34px;

46
    overflow:hidden;

47
    padding:13px 0 14px;

48
    position:relative;

49
    z-index:99;

50
}

51
nav ul {

52
    float:left;

53
    line-height:1;

54
    max-width:710px;

55
    padding:0 28px;

56
}

57
nav ul li {

58
    float:left;

59
    list-style-type:none;

60
    margin-left:12px;

61
    padding:0;

62
    position:relative;

63
    vertical-align:top;

64
}

65
nav ul li:first-child {

66
    margin-left:0;

67
}

68
nav ul li a {

69
    color:#343434;

70
    display:block;

71
    padding:8px 12px;

72
    position:relative;

73
    text-decoration:none;

74
    text-transform:uppercase;

75
    border-radius:5px;

76
    -moz-border-radius:5px;

77
    -ms-border-radius:5px;

78
    -o-border-radius:5px;

79
    -webkit-border-radius:5px;

80
}

81
nav ul li a:hover,nav ul li.active a {

82
    background-color:#C24050;

83
    color:#FFF;

84
}

Slider section

I have selected nivoSlider to use in our template:

Slider area

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

02
    <div id="slider" class="nivoSlider">

03
        <img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1">

04
        <img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">

05
        <img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">

06
    </div>

07
    <div id="htmlcaption-1" class="nivo-html-caption">

08
        <h5 class="p2">Your promo text 1</h5>

09
        <p>Promo text description here</p>

10
    </div>

11
    <div id="htmlcaption-1" class="nivo-html-caption">

12
        <h5 class="p2">Your promo text 1</h5>

13
        <p>Promo text description here</p>

14
    </div>

15
    <div id="htmlcaption-2" class="nivo-html-caption">

16
        <h5 class="p2">Your promo text 2</h5>

17
        <p>Promo text description here</p>

18
    </div>

19
    <div id="htmlcaption-3" class="nivo-html-caption">

20
        <h5 class="p2">Your promo text 3</h5>

21
        <p>Promo text description here</p>

22
    </div>

23
</section>

Main content section

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

Main content area

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

02
    <section id="promo"><!-- Define the promo section -->

03
        <img alt="" src="images/prm.png" /> <h2>Welcome to test our 'Fashion' templates. We are making best templates for you.</h2>

04
    </section>

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

06
        <ul>

07
            <li>

08
                <h1>Clean</h1>

09
                <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>

10
                <a class="more" href="#">Read more</a>

11
            </li>

12
            <li>

13
                <h1>Light</h1>

14
                <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>

15
                <a class="more" href="#">Read more</a>

16
            </li>

17
            <li>

18
                <h1>Friendly</h1>

19
                <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>

20
                <a class="more" href="#">Read more</a>

21
            </li>

22
        </ul>

23
    </section>

24
</div>

25
<div id="submain"><!-- Define submain content section -->

26
    <section id="subcontent"><!-- Define the content section #2 -->

27
        <div id="left">

28
            <ul>

29
                <li>

30
                    <h3>'Mono' HTML5 CSS3 Single Page Layout</h3>

31
                    <a href="#"><img alt="" src="images/post.png" /></a>

32
                    <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>

33
                    <a class="more" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-mono/">Read more</a>

34
                </li>

35
                <li>

36
                    <h3>Art theme - HTML5/CSS3 single page layout</h3>

37
                    <a href="#"><img alt="" src="images/post.png" /></a>

38
                    <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>

39
                    <a class="more" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-art-theme/">Read more</a>

40
                </li>

41
                <li>

42
                    <h3>Attractive HTML CSS Anime Theme Website Layout</h3>

43
                    <a href="#"><img alt="" src="images/post.png" /></a>

44
                    <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>

45
                    <a class="more" href="https://www.script-tutorials.com/creating-new-html-css-website-layout-5-anime-theme/">Read more</a>

46
                </li>

47
            </ul>

48
        </div>

49
        <div id="right">

50
            <div class="block"><!-- Archives block -->

51
                <h3>Archives</h3>

52
                <ul class="archives">

53
                    <li><a title="February 2012" href="#">February 2012</a></li>

54
                    <li><a title="January 2012" href="#">January 2012</a></li>

55
                    <li><a title="December 2011" href="#">December 2011</a></li>

56
                    <li><a title="November 2011" href="#">November 2011</a></li>

57
                    <li><a title="October 2011" href="#">October 2011</a></li>

58
                    <li><a title="September 2011" href="#">September 2011</a></li>

59
                </ul>

60
            </div>

61
            <div class="block"><!-- Recent posts block -->

62
                <h3>Recent posts</h3>

63
                <ul class="recent">

64
                    <li>

65
                        <time datetime="2012-02-08T20:20">08-02-2012</time>

66
                        <p>Recnt post #1 - short description</p>

67
                        <a class="more" href="#">Read more</a>

68
                    </li>

69
                    <li>

70
                        <time datetime="2012-02-08T20:30">08-02-2012</time>

71
                        <p>Recnt post #2 - short description</p>

72
                        <a class="more" href="#">Read more</a>

73
                    </li>

74
                    <li>

75
                        <time datetime="2012-02-08T20:40">08-02-2012</time>

76
                        <p>Recnt post #3 - short description</p>

77
                        <a class="more" href="#">Read more</a>

78
                    </li>

79
                    <li>

80
                        <time datetime="2012-02-08T20:50">08-02-2012</time>

81
                        <p>Recnt post #4 - short description</p>

82
                        <a class="more" href="#">Read more</a>

83
                    </li>

84
                </ul>

85
            </div>

86
        </div>

87
    </section>

88
</div>

CSS styles

01
/* main section */

02
#main {

03
    padding:0 20px;

04
}

05
#promo {

06
    border-bottom:1px solid #E7E7E7;

07
    overflow:hidden;

08
    padding:20px 0;

09
    position:relative;

10
}

11
#promo img {

12
    float:left;

13
    margin-right:20px;

14
}

15
#content {

16
    border-bottom:1px solid #E7E7E7;

17
    overflow:hidden;

18
    padding:20px 0;

19
}

20
#content ul li {

21
    float:left;

22
    margin:0 0 0 22px;

23
    width:288px;

24
}

25
#content ul li:first-child {

26
    margin:0;

27
}

28
/* submain section */

29
#submain {

30
    padding:0 20px;

31
}

32
#subcontent {

33
    overflow:hidden;

34
    padding:20px 0;

35
}

36
#subcontent #left {

37
    float:left;

38
    width:69%;

39
}

40
#subcontent #right {

41
    float:left;

42
    margin-left:2%;

43
    width:29%;

44
}

45
#subcontent ul li {

46
    margin-bottom:15px;

47
    overflow:hidden;

48
}

49
#subcontent ul li img {

50
    float:left;

51
    height:128px;

52
    margin:5px 20px 5px 0;

53
    width:128px;

54
}

55
#subcontent .archives li {

56
    border-bottom:1px solid #E7E7E7;

57
    margin:0;

58
    padding:0;

59
}

60
#subcontent .archives li a {

61
    display:block;

62
    padding:7px 0;

63
    text-decoration:none;

64
}

65
#subcontent .archives li a:hover {

66
    background-color:#fafafa;

67
}

Footer section

Finally – our footer area

footer area

01
<footer><!-- Define the footer section of the page -->

02
    <ul id="social"><!-- Social network links -->

03
        <li><a href="#" title="facebook"><img alt="" src="images/facebook.png" /></a></li>

04
        <li><a href="#" title="twitter"><img alt="" src="images/twitter.png" /></a></li>

05
        <li><a href="#" title="linkedin"><img alt="" src="images/linkedin.png" /></a></li>

06
        <li><a href="#" title="rss"><img alt="" src="images/rss.png" /></a></li>

07
    </ul>

08
    <div id="privacy">

09
        Fashion template © 2012 <a class="link" href="#">Privacy Policy</a><br />

10
        <a class="link" href="https://www.script-tutorials.com/">Template by Script Tutorials</a>

11
    </div>

12
</footer>

CSS styles

01
/* footer section */

02
footer {

03
    background-color:#fafafa;

04
    border-top:1px solid #E7E7E7;

05
    font-size:12px;

06
    margin:0 auto;

07
    overflow:hidden;

08
    padding:40px;

09
    position:relative;

10
    z-index:3;

11
}

12
footer a{

13
    color:#5E5956;

14
    text-decoration:none;

15
}

16
#social {

17
    float:left;

18
    list-style:none outside none;

19
    margin:0;

20
    padding:0;

21
}

22
#social li {

23
    float:left;

24
    padding:0 0 0 3px;

25
}

26
#social li a:hover img {

27
    margin-top:1px;

28
}

29
footer #privacy {

30
    float:right;

31
}

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!