Live Preview
Live Preview
Head Area Code
Notice the code carefully in this tutorial because we are using a little jQuery. Rest of the stuff is pretty obvious.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio | Designzzz</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script> <script language="javascript" type="text/javascript" src="js/script.js"></script> <script type="text/javascript"> $(document).ready( function(){ var buttons = { previous:$('#jslidernews2 .button-previous') , next:$('#jslidernews2 .button-next') }; $('#jslidernews2').lofJSidernews( { interval:5000, easing:'easeInOutQuad', duration:1200, auto:true, mainWidth:684, mainHeight:300, navigatorHeight : 100, navigatorWidth : 310, maxItemDisplay:3, buttons:buttons } ); }); </script> </head>
Body and Main Container
We are covering “Main Container” in the next steps.
<html>
<body>
<div id="main-container"> <!--all the codes carrying body content -->
</div>
</body>
</html>
CSS of this Area
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body
{
background:#efeeee;
font-family:Arial, Helvetica, sans-serif;
}
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
#main-container
{
width:1000px;
margin:0 auto;
}
<Header> Area HTML
Check the CSS code carefully in this step.
<header> <div id="logo"> <p>LOGO</p> <p class="sub-logo">PORTFOLIO LAYOUT</p> </div> <div id="icons"> <div class="sub-icons"> <img src="images/rss.png" alt="" /> </div> <div class="sub-icons"> <img src="images/twitter.png" alt="" /> </div> <div class="sub-icons"> <img src="images/fb.png" alt="" /> </div> </div> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </header>
CSS of this Area
header
{
width:960px;
height:175px;
margin:0 auto;
}
#logo
{
width:222px;
float:left;
overflow:hidden;
font-size:60px;
color:#797777;
margin:7px 2px;
float:left;
}
.sub-logo
{
font-size:20px;
color:#797777;
}
#icons
{
height:70px;
width:195px;
float:right;
}
.sub-icons
{
width:60px;
overflow:hidden;
float:left;
}
nav
{
background:url(images/feature-bg.png) repeat-x;
height:55px;
width:952px;
float:left;
}
nav ul
{
margin:0;
padding:0;
}
nav ul li
{
width:122px;
height:24px;
color:#ffffff;
list-style:none;
float:left;
margin:0px 18px;
padding:14px 15px;
font-size:21px;
}
nav ul li a
{
color:#fff;
text-decoration:none;
}
a
{
color:#fff;
}
nav ul li a:hover
{
background:#fff;
color:#000;
}
<Feature> Area HTML
Now comes the jQuery part. If you are a newbie, you are destined to fumble here… don’t care about it, keep trying and you will overcome the obstacle.
<div id="feature"> <div id="jslidernews2" class="lof-slidecontent" style="width:945px; height:300px;"> <div class="preload"><div></div></div> <!-- MAIN CONTENT --> <div class="main-slider-content" style="width:684px; height:313px; background:#000;"> <ul class="sliders-wrap-inner"> <li> <img src="images/feature-1.jpg" alt="" > <div class="slider-description"> <h4>Some Dummy Text</h4> <p>Some text</p> </p> </div> </li> <li> <img src="images/feature-2.jpg" alt="" > <div class="slider-description"> <h4>Some Dummy Text</h4> <p>Some text</p> </div> </li> <li> <img src="images/feature-3.jpg" alt="" > <div class="slider-description"> <h4>Some Dummy Text</h4> <p>Some text</p> </div> </li> <li> <img src="images/feature-4.jpg" alt="" > <div class="slider-description"> <h4>Some Dummy Text</h4> <p>Some text</p> </div> </li> </ul> </div> <!-- END MAIN CONTENT --> <!-- NAVIGATOR --> <div class="navigator-content"> <div> <ul class="navigator-wrap-inner"> <li> <div> <h3> Some Text Here</h3> <span>Some text Here</span> </div> </li> <li> <div> <h3> Some Text Here</h3> <span>Some text Here</span> </div> </li> <li> <div> <h3> Some Text Here</h3> <span>Some text Here</span> </div> </li> <li> <div> <h3> Some Text Here</h3> <span>Some text Here</span> </div> </li> </ul> </div> </div> <!----------------- END OF NAVIGATOR ---------------------> </div> </div>
CSS of this Area
#feature
{
width:945px;
height:320px;
margin:0 auto;
}
.lof-slidecontent
{
position:relative;
overflow:hidden;
border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload
{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:100000;
text-align:center;
background:#FFF
}
.lof-slidecontent .sliders-wrapper
{
position:relative;
height:100%;
width:900px;
z-index:3px;
overflow:hidden;
}
.lof-slidecontent ul.sliders-wrap-inner
{
overflow:hidden;
background:transparent;
padding:0px;
margin:0;
position:absolute;
overflow:hidden;
}
.lof-slidecontent ul.sliders-wrap-inner li
{
overflow:hidden;
padding:0px;
margin:0px;
float:left;
position:relative;
}
.lof-slidecontent .lof-opacity li
{
position:absolute;
top:0;
left:0;
float:inherit;
}
.lof-slidecontent .navigator-content
{
position:absolute;
right:0;
top:00px;
z-index:9;
height:300px;
width:310px;
overflow:hidden;
color:#FFF
}
.lof-slidecontent .navigator-wrapper
{
position:relative;
z-index:10;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
}
.lof-slidecontent ul.navigator-wrap-inner
{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
}
.lof-slidecontent ul.navigator-wrap-inner li
{
cursor:hand;
cursor:pointer;
list-style:none;
padding:0;
margin-left:0px;
overflow:hidden;
float:left;
display:block;
text-align:center;
}
.lof-slidecontent .slider-description
{
z-index:100px;
position:absolute;
bottom:18px;
left:0px;
width:630px;
background:url(images/slider.png);
height:43px;
padding:10px;
color:#FFF;
}
.lof-slidecontent .slider-description h4
{
font-size: 14px;
margin: 2px 0;
padding: 0;
}
/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner li.active
{
background:url(images/feature-bg.png);
color:#FFF
}
.lof-slidecontent ul.navigator-wrap-inner li > div
{
background:url(images/feature-bg.png);
color:#FFF;
height:100%;
position:relative;
margin-left:3px;
Padding:10px 15px;
text-align:left
}
.dummy1
{
color: #FFFFFF;
font-size: 18px;
height: 23px;
line-height: 32px;
padding: 12px 0;
text-align: center;
width: 200px;
}
.dummy
{
color: #FFFFFF;
font-size: 13px;
height: 13px;
line-height: 10px;
text-align: center;
width: 167px;
margin-bottom:5px;
}
“Hire Me” Area HTML
This is just a banner. You can place an offer or some latest news or anything.
<div id="hire"> <div class="data"> <input id="search" type="text" name="s" value="GOT SOMETHING? HIRE ME!" /> </div> <div class="text"> <p>Hire me Dummy Text! Hire me Dummy Text! Hire me Dummy Hire me Dummy Text! Hire me Dummy Text! Hire me DummyHire me Dummy Text! Hire me Dummy Text! Hire me Dummy </p> </div> </div>
CSS of this Area
#hire
{
background:url(images/hire-bg.png) repeat-x;
width:928px;
height:74px;
margin:0 auto 22px;
border-radius:10px;
padding-left:13px;
}
.data
{
width:225px;
height:74px;
float:left;
}
#search
{
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px 5px 5px 5px;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
height: 44px;
margin-top: 15px;
padding-left: 5px;
width: 202px;
border:none;
text-shadow: 0 1px 2px #000000;
font-size:15px;
float:left;
}
.text
{
width:690px;
height:44px;
padding:15px 6px;
float:left;
}
.text p
{
font-size:16px;
color:#c4c4c4;
}
Gallery Area HTML
We could have placed a jQuery here as well, but I decided to keep simple.
<div id="gallery"> <div class="project"> <p> TOP PROJECTS </p> </div> <div class="images"> <div class="thumb"> <div class="pic"> <img src="images/img-1.png" alt="" /> </div> <div class="pic"> <img src="images/img-2.png" alt="" /> </div> <div class="pic"> <img src="images/img-3.png" alt="" /> </div> <div class="pic"> <img src="images/img-4.png" alt="" /> </div> </div> <div class="thumb"> <div class="pic"> <img src="images/img-4.png" alt="" /> </div> <div class="pic"> <img src="images/img-3.png" alt="" /> </div> <div class="pic"> <img src="images/img-2.png" alt="" /> </div> <div class="pic"> <img src="images/img-1.png" alt="" /> </div> </div> </div> <div class="testimonial"> <p> TESTIMONIALS </p> <div class="comma"> </div> <div class="tes-text"> <p>Hire me Dummy Text! Hire me Dummy Text! Hire me Dummy Hire me Dummy Text! Hire me Dummy Text! Hire me DummyHire me Dummy Text! Hire me Dummy Text! Hire me Dummy </p> </div> <div class="name"> <p>By: Dummy Name</p> </div> <div class="comma1"> </div> </div> </div>
CSS of this Area
#gallery
{
background:#FFF;
width:945px;
height:685px;
border:2px solid #c4c4c4;
border-radius:13px;
margin:0 auto;
margin-bottom:20px;
}
.project
{
width:945px;
height:70px;
}
.project p
{
font-size:27px;
color:#000;
margin:25px 45px;
}
.images
{
height: 400px;
padding: 20px 24px;
width: 897px;
}
.thumb
{
height: 200px;
margin-left: 6px;
padding: 4px 15px;
width: 880px;
}
.pic
{
float: left;
height: 160px;
margin: 0 22px;
width: 168px;
}
.testimonial
{
width:945px;
height:100px;
}
.testimonial p
{
color: #000000;
font-size: 23px;
height: 25px;
margin: 4px 45px;
width: 173px;
}
.comma
{
background:url(images/comma-1.png) no-repeat;
height: 25px;
margin-left: 120px;
width: 25px;
}
.comma1
{
background:url(images/comma-2.png) no-repeat;
float: right;
height: 25px;
margin-right: 80px;
margin-top: 11px;
width: 25px;
}
.tes-text
{
float:left;
margin-left: 105px;
height:47px;
width: 740px;
}
.tes-text p
{
color: #a2a1a1;
font-size: 17px;
height: 52px;
width: 742px;
}
.name
{
float: left;
height: 30px;
width: 840px;
}
.name p
{
color: #666666;
float: right;
font-size: 19px;
height: 21px;
margin-right: 5px;
width: 156px;
}
<Footer> Area HTML
Nothing too fancy here.
<footer> <div id="cprt"> <p> Copyright © 2011 - Designzzz.com </p> </div> <div id="nav"> <ul> <li><a href="#">Home </a>-</li> <li><a href="#">About</a>-</li> <li><a href="#">Contact</a></li> </ul> </div> </footer>
CSS of this Area
footer
{
background:url(images/hire-bg.png) repeat-x;
width:960px;
margin:0 auto;
height:70px;
border-radius:8px 8px 0px 0px;
}
#cprt
{
height: 25px;
padding: 22px 10px;
width: 400px;
float:left;
}
#cprt p
{
color:#666;
font-size:17px;
}
#nav
{
float: right;
height: 25px;
padding: 22px 10px;
width: 212px;
}
#nav ul
{
margin:0px;
}
#nav ul li
{
color: #666666;
float: left;
font-size: 18px;
list-style: none outside none;
padding: 0 6px;
}
#nav ul li a
{
color: #666666;
text-decoration:none;
}
#nav ul li a:hover
{
color:#fff;
}
DONE
Không có nhận xét nào:
Đăng nhận xét