Creating an Under Water Themed HTML5 & CSS3 single page Layout ~ Tutorials point.

Creating an Under Water Themed HTML5 & CSS3 single page Layout

Step 1. Photoshop

As usual, quite each webmaster (designer) start thinking about initial idea which he like to build. And, I can suggest to use Photoshop to draw main layout – how all should looks

And only after – we can start thinking about main layout of that page – HTML

Step 2. HTML

I separated whole layout to few sections:

header section – place, where we will put our logo, menu, promo (carousel) slider
central section – place for main content with some custom content
footer section – where you will able to put any custom links, company name, social icons

In HTML code I will use next HTML5 tags: <header>, <nav>, <section>, <article>, <figure> and <footer>. Ok, lets check code of our sample

index.html

<!DOCTYPE html><!-- The new doctype -->
<html lang="en">
<head>
    <title>Creating a HTML5 &amp; CSS3 Single Page Web Layout #2 Under Water | Script tutorials</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/menu.css" type="text/css" media="screen"> 

    <!-- Linking scripts -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/superfish.js" type="text/javascript"></script> 
    <script src="js/script.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> 
    <script src="js/jcarousellite_1.0.1.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
</head>
<body id="page1">
    <header><!-- Defining the header section of the page -->
        <div class="main">
            <div class="container">
                <div class="wrapper p1">
                    <div class="grid_18">
                        <h1><a class="logo" href="#">Under Water</a></h1>
                    </div>
                    <div class="grid_6">
                        <form id="search-form" action="" method="post">
                            <fieldset>
                                <div class="wrapper">
                                    <input type="text" name="search" />
                                    <a href="#" onclick="">Search</a>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div class="grid_24">
                    <nav><!-- Defining the navigation menu -->
                        <ul class="menu">
                            <li class="first"><a class="item" href="http://www.script-tutorials.com/">Home</a></li>
                            <li><a class="item" href="http://www.script-tutorials.com/">Tutorials</a>
                                <ul style="display: none; visibility: hidden;">
                                    <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/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>
                            <li><a class="item" href="http://www.script-tutorials.com/category/resources/">Resources</a></li>
                            <li><a class="item" href="http://www.script-tutorials.com/tag/html5/">Tags</a>
                                <ul>
                                    <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 class="item" href="http://www.script-tutorials.com/about/">About</a></li>
                            <li><a class="item" href="http://www.script-tutorials.com/html5-css3-page-template-2-under-water/">Go Back To The Tutorial</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="clear"></div>
            </div>
            <div class="carousel gallery"><!-- Promo slider -->
                <a class="prev" href="#">prev</a>
                <div class="jCarouselLite">
                    <ul>
                        <li><img src="images/promo/p1.jpg" alt="" /></li>
                        <li><img src="images/promo/p2.jpg" alt="" /></li>
                        <li><img src="images/promo/p3.jpg" alt="" /></li>
                        <li><img src="images/promo/p4.jpg" alt="" /></li>
                        <li><img src="images/promo/p5.jpg" alt="" /></li>
                        <li><img src="images/promo/p6.jpg" alt="" /></li>
                    </ul>
                </div>
                <a class="next" href="#">next</a>

            </div>
        </div>        
    </header>

    <section id="content"><!-- Defining the main content section of the page -->
        <div class="main">
            <div class="container">
                <div class="bg">
                    <div class="wrapper">
                        <article class="grid_16 alpha">
                            <div class="pref">
                                <h2><strong>Welcome</strong> to The Under Water!</h2>
                                <div class="wrapper img-indent-bot">

                                    <figure class="img-indent frame"><img src="images/about.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        Welcome / Promo text. Welcome / Promo text. Welcome / Promo text. Welcome / Promo text.
                                    </div>
                                </div>

                                <h3 class="p3">Top Under Water News</h3>

                                <div class="wrapper margin-bot">
                                    <figure class="img-indent2"><img src="images/tn1.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <p class="p0">Contributor Kerri Hatt shares this photo of a massive 22.3 lb lobster her dad and brother caught while fishing on the Bay of Fundy in N.B. on #1</p>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div>

                                <div class="wrapper margin-bot">
                                    <figure class="img-indent2"><img src="images/tn2.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <p class="p0">Contributor Kerri Hatt shares this photo of a massive 22.3 lb lobster her dad and brother caught while fishing on the Bay of Fundy in N.B. on #2</p>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div>

                                <div class="wrapper margin-bot">
                                    <figure class="img-indent2"><img src="images/tn3.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <p class="p0">Contributor Kerri Hatt shares this photo of a massive 22.3 lb lobster her dad and brother caught while fishing on the Bay of Fundy in N.B. on #3</p>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div>

                                <div class="wrapper margin-bot">
                                    <figure class="img-indent2"><img src="images/tn4.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <p class="p0">Contributor Kerri Hatt shares this photo of a massive 22.3 lb lobster her dad and brother caught while fishing on the Bay of Fundy in N.B. on #4</p>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div>

                            </div>
                        </article>
                        <article class="grid_8 omega">

                            <div class="suf">

                                <div class="box"><div class="wrapper">
                                    <figure class="img-indent3 frame"><img src="images/imgp1.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <h4>Underwater Exploration</h4>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div></div>
                                <div class="box"><div class="wrapper">
                                    <figure class="img-indent3 frame"><img src="images/imgp2.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <h4>Milestones in Underwater Photography</h4>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div></div>
                                <div class="box"><div class="wrapper">
                                    <figure class="img-indent3 frame"><img src="images/imgp3.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <h4>Coral Reefs</h4>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div></div>
                                <div class="box"><div class="wrapper">
                                    <figure class="img-indent3 frame"><img src="images/imgp4.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <h4>Underwater Portraits</h4>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div></div>
                                <div class="box"><div class="wrapper">
                                    <figure class="img-indent3 frame"><img src="images/imgp5.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <h4>Marine Marvels</h4>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div></div>
                                <div class="box"><div class="wrapper">
                                    <figure class="img-indent3 frame"><img src="images/imgp6.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <h4>Coral</h4>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div></div>
                                <div class="box"><div class="wrapper">
                                    <figure class="img-indent3 frame"><img src="images/imgp7.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <h4>Underwater Landscapes</h4>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div></div>
                                <div class="box"><div class="wrapper">
                                    <figure class="img-indent3 frame"><img src="images/imgp8.jpg" alt="" /></figure>
                                    <div class="extra-wrap">
                                        <h4>Colorful Sea Creatures</h4>
                                        <a class="link" href="#">More</a>
                                    </div>
                                </div></div>

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

    <footer><!-- Defining the footer section of the page -->
        <div class="main">
            <div class="row-1">
                <ul class="list-services">
                    <li><a title="Facebook" href="#"><img src="images/facebook.png" alt="" /></a></li>
                    <li><a title="Flickr" href="#"><img src="images/flickr.png" alt="" /></a></li>
                    <li><a title="Twitter" href="#"><img src="images/twitter.png" alt="" /></a></li>
                    <li><a title="RSS" href="#"><img src="images/rss.png" alt="" /></a></li>
                </ul>
            </div>
            <div class="row-2">
                <div class="container">
                    <div class="bg">
                        <div class="wrapper">
                            <div class="grid_24">
                                <div class="indent">
                                    Under Water &copy; 2011 &nbsp;:&nbsp; <a class="link" href="#">Privacy</a> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

Step 3. JS


js/html5.js, js/jcarousellite_1.0.1.js, js/jquery.js, js/jquery.easing.1.3.js and js/superfish.js

This is all used libraries: jQuery, jCarouselLite and Superfish (available in package). Rest custom JS code located in another file:

js/script.js
$(document).ready(function() { 
    $('ul.menu').superfish({ 
        delay: 500,
        animation: {opacity:'show',height:'show'},
        speed: 'normal',
        autoArrows: false,
        dropShadows: false
    }); 

    $('.gallery .jCarouselLite').jCarouselLite({
        btnNext: '.gallery .next', btnPrev: '.gallery .prev',
        scroll: 1,
        mouseWheel: true,
        auto: 10000,
        speed: 1000,
        vertical: false,
        circular: true,
        visible: 3,
        start: 0
    });

    $('.box').hover(function(){
        $(this).addClass('alt');
    }, function(){
        $(this).removeClass('alt');
    });

    $('.list-services li a').hover(function(){
            $(this).stop(true,false).animate({marginTop:'-8px'}, {easing:'easeOutBounce', duration: 500});
            $(this).css('paddingBottom','8px');
        },function(){
            $(this).stop(true,false).animate({marginTop:'0'}, {easing:'easeOutBounce', duration: 500});
            $(this).css('paddingBottom','0');
    });
}); 

Step 4. CSS

css/reset.css

This is reset file to reset stylesheet, and, here are result minimized css file with all necessary styles for our demo:

css/style.css
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;}

html {
width:100%;
}

body {
background:url(../images/body.gif) repeat-x scroll center top #fff;
border-top:5px solid #162d50;
color:#3a3a3a;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
min-width:938px;
}

.bg {
background:#fcfcfc;
margin:0 auto;
padding:45px 0 28px;
width:930px;
}

.main {
font-size:0.8125em;
line-height:1.538em;
margin:0 auto;
padding:0;
width:938px;
}

a {
color:#274b83;
outline:none;
}

a:hover {
text-decoration:none;
}

.wrapper {
overflow:hidden;
width:100%;
}

.extra-wrap {
overflow:hidden;
}

p {
margin-bottom:18px;
}

.p0 {
margin-bottom:0;
}

.p1 {
margin-bottom:8px;
}

.p3 {
margin-bottom:30px;
}

.frame {
background:#00102d;
padding:1px;
}

/*other*/
.margin-bot {
margin-bottom:35px;
}
.spacing {
margin-right:35px;
}
.indent {
padding:0 0 0 14px;
}
.indent2 {
padding:0 9px 0 23px;
}
.pref {
padding:0 23px 0 18px;
}
.suf {
padding-right:18px;
}
.indent-bot {
margin-bottom:20px;
}
.indent-bot2 {
margin-bottom:30px;
}
.indent-bot3 {
margin-bottom:45px;
}
.img-indent-bot {
margin-bottom:25px;
}
.img-indent {
float:left;
margin:0 25px 0 0;
}
.img-indent2 {
float:left;
margin:0 18px 0 0;
}
.img-indent3 {
float:left;
margin:0 10px 0 0;
}
.prev-indent-bot {
margin-bottom:10px;
}

.menu li a,.link,.logo {
text-decoration:none;
}

/*header*/
header {
min-height:490px;
position:relative;
width:100%;
z-index:2;
}

h1 {
margin:0 0 0 -2px;
padding:6px 0 0;
position:relative;
}

.logo {
background:url(../images/logo.png) no-repeat scroll left top transparent;
color:transparent;
display:inline-block;
font-size:80px;
line-height:1.2em;
}
#search-form {
overflow:hidden;
padding-top:75px;
}

#search-form input {
background:#3C7ABD;
border-bottom:none;
border-left:1px solid #3C7ABD;
border-right:none;
border-top:1px solid #3C7ABD;
color:#fff;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.2em;
margin:0;
padding:5px 10px;
width:144px;
}

#search-form a {
background:#fcfcfc;
border:1px solid #00102d;
color:#363636;
display:inline-block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:700;
line-height:1.2em;
padding:6px 10px 5px 11px;
text-decoration:none;
}

#search-form a:hover {
background:#3C7ABD;
color:#fcfcfc;
}

/*carousel promo*/
.carousel {
background:url(../images/carousel-tail.gif) 0 0 repeat;
height:300px;
padding:10px;
position:relative;
width:918px;
}

.carousel .prev {
background:url(../images/carousel-prev.png) left top no-repeat;
display:block;
height:49px;
left:10px;
position:absolute;
text-indent:-5000px;
top:146px;
width:35px;
z-index:99;
}

.carousel .next {
background:url(../images/carousel-next.png) left top no-repeat;
display:block;
height:49px;
position:absolute;
right:10px;
text-indent:-5000px;
top:146px;
width:35px;
z-index:99;
}

.carousel .prev:hover,.carousel .next:hover {
background-position:left bottom;
}

.carousel li {
border:1px solid #00102d;
margin-right:7px;
}

.jCarouselLite {
height:100%;
overflow:hidden;
width:918px !important;
}

/*center content*/
#content {
padding:0;
position:relative;
width:100%;
z-index:1;
}

h2 {
color:#1f232c;
font-size:30px;
letter-spacing:-1px;
line-height:1.2em;
margin:0 0 28px;
}

h2 strong {
color:#162d50;
text-transform:uppercase;
}

h3 {
color:#1f232c;
font-size:22px;
line-height:1.2em;
margin:0 0 35px;
text-transform:uppercase;
}

h4 {
color:#1f232c;
font-size:15px;
line-height:1.2em;
margin:3px 0;
text-transform:uppercase;
}

.border-bot {
background:url(../images/pic-3.gif) 0 bottom repeat-x;
padding-bottom:45px;
width:100%;
}

.box {
background:#f9f9f9;
border:1px solid #e9e9e9;
color:#adadad;
cursor:pointer;
line-height:16px;
margin-bottom:1px;
padding:12px 5px 12px 12px;
}

.box.alt {
background:url(../images/carousel-tail.gif) 0 0 repeat;
color:#fcfcfc;
}

.box.alt h4 {
color:#fcfcfc;
}

.link {
color:#888;
cursor:pointer;
font-size:13px;
}

.link:hover {
color:#AAA;
}

/*footer*/
footer {
width:100%;
}

footer .main {
color:#3a3a3a;
font-size:12px;
line-height:18px;
}

footer .bg {
padding:10px 0;
text-align:center;
}

.row-1 {
background:url(../images/carousel-tail.gif) 0 0 repeat;
min-height:62px;
padding:15px 0 0;
position:relative;
width:100%;
}

.list-services {
float:right;
margin:0;
padding:0 20px;
}

.list-services li {
float:left;
padding:8px 5px 0 0;
}

.list-services li a {
display:inline-block;
}

/*for layout*/
.container {
margin-left:auto;
margin-right:auto;
width:935px;
}

.grid_6,.grid_8,.grid_16,.grid_18,.grid_24 {
display:inline;
float:left;
margin-left:5px;
margin-right:5px;
position:relative;
}

.alpha {
margin-left:0;
}

.omega {
margin-right:0;
}

.container .grid_6 {
width:230px;
}

.container .grid_8 {
width:310px;
}

.container .grid_16 {
width:605px;
}

.container .grid_18 {
width:670px;
}

.container .grid_24 {
width:915px;
}

.clear {
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
width:0;
}

Plus one more file – styles for navigation menu:

css/menu.css
.menu {
background:url(../images/menu-tail.gif) 0 0 repeat-x #b9c0c5;
min-height:64px;
padding:0;
width:100%;
}
.menu li {
float:left;
padding:0;
position:relative;
}
.menu li.first {
padding:0 0 0 12px;
}
.menu li a {
background:none;
color:#00102d;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:700;
line-height:44px;
padding:10px 18px;
position:relative;
}
.menu li a:hover,.menu li a.active,.menu li.sfHover > a {
background:#3c7abd;
color:#fcfcfc;
}
.menu ul {
background:#3c7abd;
padding:3px;
position:absolute;
top:-999em;
width:138px;
}
.menu ul li {
width:100%;
}
.menu li:hover {
visibility:inherit;
}
.menu li li {
padding:0;
}
.menu li li a {
color:#ced6db !important;
font-size:13px;
font-weight:400;
line-height:30px;
padding:0 0 0 15px;
text-align:left;
}
.menu li li a:hover {
background:#142a4b;
}
.menu li:hover ul,.menu li.sfHover ul {
left:0;
top:64px;
z-index:999;
}
ul.menu li:hover li ul,ul.menu li.sfHover li ul {
top:-999em;
}

Tutorials point.

Here You Can Learn Software Developing Tutoeials

Friday, 22 May 2015

Creating an Under Water Themed HTML5 & CSS3 single page Layout

Creating an Under Water Themed HTML5 & CSS3 single page Layout

Step 1. Photoshop

Step 2. HTML

index.html

js/html5.js, js/jcarousellite_1.0.1.js, js/jquery.js, js/jquery.easing.1.3.js and js/superfish.js

js/script.js

Step 4. CSS

css/reset.css

css/style.css

css/menu.css

0 comments:

Popular Posts

Recent Comments

Total Pageviews

Subscribe us

Contact Form

Blog Archive

Pages

About Me

Video Of Day

Friday, 22 May 2015

Creating an Under Water Themed HTML5 & CSS3 single page Layout

Step 1. Photoshop

Step 2. HTML

index.html

js/html5.js, js/jcarousellite_1.0.1.js, js/jquery.js, js/jquery.easing.1.3.js and js/superfish.js

js/script.js

Step 4. CSS

css/reset.css

css/style.css

css/menu.css

Related Posts:

0 comments:

Popular Posts

Recent Comments

Total Pageviews

Subscribe us

Contact Form

Blog Archive

Pages

About Me

Video Of Day