Today I want to share with you a small tutorial that depicts basic steps of converting simple portfolio layout into working HTML5/CSS3 landing page.
You can grab free
What we need:
- Responsive CSS Grid System, in our case I will be using Skeleton Boilerplate;
- Adaptive image slider FlexSlider kindly provided by Woothemes;
- Images for slider section and testimonial as well as quote icon;
- Special font – I have used Book Antique that is free of charge.
Of course, you can prepare whatever images, icons and font you like.
1. A few words about Skeleton Boilerplate.
I have choosen this framework first of all, because it’s responsive and easy to use. You can easily divide layout on columns only using right classes. Nevertheless, you can choose whatever boilerplate you like. There are so many of them for every taste.
After you download base framework and unzipped it. You will find folder with necessery directories such as images and stylesheets. Now you will need 2 more folders: fonts (there you can keep you seleted font) and js for slider javascript files.
After creating necessary folders and adding all images in /image folder, Book Antique font – BKANT.TTF in /fonts folder, you will have 4 folders: images, stylesheets, fonts, and js.
Then open stylesheet folder and create new file styles.css, there you will describe your own styles.
Open index.html and delete everything between body tags.
Now remember in order to make your structure organized you should put everything into div with container class.
2. Let’s analyze our page. As you can see on the picture below, it can be easily divided into 4 regular sections:
- Header which consists of navigation links and Contact Info;
- Slider showcases your recent works;
- Testimonial section includes author image, quote icon, text and signature;
- Standard Footer with copyright data and social media links.
3. Header Section.
On the left side I have placed navigation system that will be implemented by ordinary list displayed inline.
On the right side Contact Info is simple paragraph with 2 lines.
Also, as you can see, I have border that consists of 2 lines: grey and white. In order to realize it I create block with id lines where I describe those 2 lines by means of border style.
Open index.html and firstly, delete all in head tag and add these lines
<title>Mini portfolio HTML layout based on Skeleton and made alive by land-of-web.com</title> <meta charset="utf-8"> <meta name="description" content="Mini portfolio HTML layout based on Skeleton CSS Grid and made alive by land-of-web.com"> <meta name="author" content="land-of-web.com"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- Mobile Specific Metas --> <link rel="stylesheet" href="stylesheets/base.css"> <link rel="stylesheet" href="stylesheets/skeleton.css"> <link rel="stylesheet" href="stylesheets/layout.css"> <link rel="stylesheet" href="stylesheets/styles.css"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Favicons --> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
Then start to work with body section.
<div class="container lines"></div> <!-- 2 lines : grey and white on the top--><div class="container header"> <!-- Navigation -->< <nav> <ul> <li><a class="active" href="#">Home</a> /</li> <li><a href="#">About</a> /</li> <li><a href="#">Work</a> /</li> <li><a href="#">Blog</a> /</li> <li><a href="#">Contact</a></li> </ul> </nav> <!-- Contact Data--> <div class="contact_block"> <p>Call Me: 0123456789 <br />skypeID</p> </div> </div><div class="container lines"></div> <!-- 2 lines : grey and white on the bottom-->
Then open styles.css file and add basic styles (including defualt font-face, body, link and paragraph description) and, of course, description of simple unordered list
/* #Basic Styles ================================================== */@font-face{font-family: 'Book Antique';src: url('../fonts/BKANT.ttf') format('truetype');}* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box; }body{font-family: Helvetica, Arial, Sans-serif;background: #f6f5f5; /* url(../images/body-bg.jpg)*/}a, a:visited {color: #111111;text-decoration: none;outline: 0;}a:hover, a:focus {color:#494747;}p{<font-size: 14px;color: #625f5f;}/* HEADER ================================================== */.header{height:55px;}/* LINES ================================================== */.lines{border-top: 1px solid #cdc9c9;border-bottom: 1px solid #fff;margin-top:20px;}.lines2{display:block;height:1px;border-top: 1px solid #cdc9c9;border-bottom: 1px solid #fff;padding-bottom:0px;}/* NAVIGATION ================================================== */nav{float: left;padding-top:20px;}nav ul{float: left;margin-top: 1px;}nav ul li{float: left;margin-left: 20px;color: #67b256;}nav ul li a{display: inline-block;padding-right: 20px;text-decoration: none;font-family: 'Book Antique', serif;font-size: 16px;color: #625f5f;}nav ul li:last-child a{padding: 0;}nav ul li a.active{color:#353434;}nav ul li a:hover{color:#353434;}/* CONTACT BLOCK ================================================== */.contact_block{display: block;padding-top:5px;width: 180px;height: 32px;float: right;text-shadow: none;}.contact_block p {text-align:right;font-weight:bold;} Header section itself has gained only height size.
I have created 2 individual line blocks. First one for header that has got 20px margin in order not to stick to the top of the browser window. And the second block for other decorations.
Contact block has its own width and height with text align to right.
Navigation is a simple unordered horisontal list.
4. Slider section.
Put your earlier prepared images in /image folder. Then put these lines in a head section of index.html.
<!-- FlexSlider - Slideshow --> <link rel="stylesheet" href="stylesheets/flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="js/jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: true, directionNav: true, prevText: "Previous", nextText: "Next" }); }); </script> Then let’s add media content (images) into slides creating index.html
<<!-- Slideshow --> <div class="container slider"> <div class="flexslider"> <ul class="slides"> <li><a href="http://www.land-of-web.com/freebies/psd/freebie-clean-minimalistic-portfolio-layout-psd-template.html"><img src="images/slide1.jpg" /></a></li> <li><a href="http://www.land-of-web.com/freebies/psd/freebie-iphone5-app-landing-page-psd-template.html"><img src="images/slide2.jpg" /></a></li> <li><a href="http://www.land-of-web.com/freebies/icons/freebie-graduation-hats-social-icons.html"><img src="images/slide3.jpg" /></a></li> </ul> </div> </div>
We won’t change anything in slider style, we just simply add flexslider.css file in stylesheet folder and add only few lines to give slider a bit of air.
/* SLIDER ================================================== */.slider{margin-top:10px;margin-bottom:10px;} 5. Testimonial section.
As you can see there we will need only 2 images: author image with special border style and simple quote icon.
Icon with text that is enclosed in paragraph tag and signature in cite tag will be in blockquote tag.
index.html markup
<!-- Testimonial --> <div class="container testimonial"> <img src="images/cat.jpg" alt=""/> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan sem ac massa interdum lobortis. Nulla fermentum consequat arcu, quis scelerisque nibh feugiat vitae</p> <cite><strong>Lorem Ipsum, 2012</strong></cite> </blockquote> </div>
styles.css
/* TESTIMONIAL ================================================== */.testimonial{margin: 20px auto;padding: 0 40px;}.testimonial img{float: left;margin-right: 35px;border: 5px solid #fff;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}blockquote{background: url(../images/quote.png) no-repeat;overflow: hidden;border: none;}blockquote p{font-size: 14px;padding-left: 40px;font-style: normal;}blockquote a{display: block;text-align: right;<font-size: 12px;font-style: italic;}cite{text-align: right;font-style: normal;color: #23353e;} 6. Finish with Footer Section.
We will divide our section into 2 separate parts. First one is simple paragraph with copyright info. And second one is another ordinary list whose elements are displayed inline.
In order to set necessery width and position, I use predefined classes of Skeleton Boilerplate.
For copyrights I will use class called “six columns left” giving it 268 px width
and for social media “ten columns left” giving the rest space.
index.html
<div class="container lines2"></div><!-- Copyrights and social icons --> <footer class="container footer"> <div class="six columns left"> <p>Copyright 2012 <a href="http://www.land-of-web.com">land-of-web</a> | Design by <a href="www.twitter.com/nataly_birch">Nataly Birch</a></p> </div> <div class="ten columns left"> <ul class="social"> <li><a href="http://www.facebook.com//pages/Landofweb/203453913014366?sk=wall" title="Facebook">facebook</a> /</li> <li><a href="https://twitter.com/nataly_birch" title="Twitter">twitter</a> /</li> <li><a href="#" title="Google+">google+</a> /</li> <li><a href="#" title="Pinterest">pinterest</a> /</li> <li><a href="#" title="Dribbble">dribbble</a> /</li> <li><a href="#" title="Behnace">behance</a> /</li> <li><a href="http://feeds.feedburner.com/land-of-web/YPDH" title="Rss">rss</a> /</li> </ul> </div></footer>
styles.css
/* FOOTER ================================================== */.footer p{font-family: 'Book Antique';font-size: 12px;color: #625f5f;} ul.social {float: left;}ul.social li{float: left;margin-left: 10px;color: #67b256;}ul.social li a{display: inline-block;padding-right: 5px;text-decoration: none;font-family: 'Book Antique', serif;font-size: 14px;color: #625f5f;} 7. Working on Media Queries Section
/* Media Queries ================================================== */@media only screen and (max-width: 767px) {nav{float: left;margin-top: 15px;}nav ul li:first-child{margin-left: 0;}ul.social {float: left;margin-top: 15px;}ul.social li:first-child{margin-left: 0;}.testimonial img{display: none;}@media only screen and (max-width: 479px) {nav ul li:last-child{margin-left: 0;}} That’s all. If you have any suggestions please share it with us via comments.
Source : land-of-web[dot]com
0 comments:
Post a Comment