Hello, everybody! Today I'm going to take you through my entire process of getting from Photoshop to completed HTML.
Are you ready? Let’s get started!
This is the final result
After that using select pixel copy image layer using ctrl + shift + c and open new document file using ctrl + n and paste image using ctrl + v and save as ctrl + alt +shift + s.
This is the better way to slice image from PSD.
Are you ready? Let’s get started!
This is the final result
Step 1: Preparation for the PSD to HTML Tutorial
We all know that in converting PSD to HTML/CSS we will need to go back and forth in Photoshop (or other image editing tool) to measure the sizes, distance, and colours. So make sure you open up the PSD file in Adobe Photoshop.
Of course you’ll need your favorite code editor and debugging tools. I used Adobe Dreamweaver as my text editor and for debugging tools I recommend Firebug.
It is important to test our code using different browsers every step of the way so that we can keep on track of our code. I used CSS3 styles in this tutorial, which should work in Chrome and Firefox.
You will need to create a directory folder and inside of it you should have /images directory for images and /css directory for CSS.
Step 2: Checkout Your PSD Design
To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.
1. Background
2. Header
3. Slider
4. Main Section
5. Footer
Firstly cut the background image
Open PSD in Adobe Photoshop and cut the background image
Select Slice tool in photoshop
Step 2: Checkout Your PSD Design
To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.
1. Background
2. Header
3. Slider
4. Main Section
5. Footer
Firstly cut the background image
Open PSD in Adobe Photoshop and cut the background image
Select Slice tool in photoshop
And select the background image
For cut image layer use ctrl + shift + c
And save background image using ctrl + shift + alt + s file save as (.png).
*If you want to correct slice image size then you find image layer and right click on that layer and click on select pixel after that use ctrl + shift + c for copying image layer and open new blank page on using ctrl + n and paste that layer and save as ctrl + alt +shift +s (.png) extension. Below screenshot for guide..
I am select social icon image layer for correct image size using select pixe style cause slice tool is not working on correct cut image size…
After that using select pixel copy image layer using ctrl + shift + c and open new document file using ctrl + n and paste image using ctrl + v and save as ctrl + alt +shift + s.
This is the better way to slice image from PSD.
Step 3: Create HTML Code
Open Adobe Dreamweaver and create new document using ctrl + n and select blank page as HTML and click on create button.
Now, Based on these notes we create the following HTML layout.
Index.html
Now let's add a little CSS as follows:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Untitled Document</title> | |
| <link rel="stylesheet" type="text/css" href="css/reset.css"> | |
| <link rel="stylesheet" type="text/css" href="css/style.css"> | |
| </head> | |
| <body> | |
| <div id="wrapper"><!-- wrapper div strat --> | |
| <div class="header"><!-- header div start --> | |
| </div><!-- header div end --> | |
| </div><!-- wrapperdiv end --> | |
| </body> | |
| </html> |
Create css file using ctrl + n and select css document and click on create button and make css class or id and include in HTML document.
Style.css
Css code:
Style.css
Css code:
@charset "utf-8";
/* CSS Document */
body{
background:url(../images/bg.png) repeat-x;
}
/*wrapper css start */
#wrapper{
width:100%;
}
/* wrapper css end */
/* header css start */
.header{
width:100%;
}
Note: Download Reset CSS and include above style.css.
Step 4: Working on Header Section
Now lets focus more on the header section we will mark up the HTML elements that can be found in this section.
HTML Code:
Step 5: Working on Slider Section and sidebar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="wrapper"><!-- wrapper div strat --> | |
| <div class="header"><!-- header div start --> | |
| <div><!-- top div start --> | |
| <div class="socialicon"><!-- socialicon div start --> | |
| <ul> | |
| <li><img src="images/facebook.png" /></li> | |
| <li><img src="images/in.png" /></li> | |
| <li><img src="images/twitter.png" /></li> | |
| <li><img src="images/flickr.png" /></li> | |
| </ul> | |
| </div><!-- socialicon div end --> | |
| </div><!-- top div end --> | |
| <div class="bottom"><!-- bottom div start --> | |
| <div class="logo"><!-- logo div start --> | |
| <div class="titlebox"><!-- titlebox div start --> | |
| <span class="company-title"> | |
| Company Name | |
| </span> | |
| <br /> | |
| <span class="tagline">Tag line goes here..</span> | |
| </div><!-- titlebox div end --> | |
| </div><!-- logo div end --> | |
| <nav class="navigation"><!-- navigation div start --> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">News</a></li> | |
| <li><a href="#">Quick Contact</a></li> | |
| </ul> | |
| </nav><!-- navigation div end --> | |
| </div><!-- bottom div end --> | |
| </div><!-- header div end --> | |
| CSS Code: | |
| /* header css start */ | |
| .header{ | |
| width:100%; | |
| } | |
| /*******************social icon css start*********************/ | |
| .top{ | |
| width:100%; | |
| padding:20px 0px; | |
| } | |
| .socialicon{ | |
| float:right; | |
| margin-right:200px; | |
| } | |
| .socialicon ul{ | |
| list-style:none; | |
| } | |
| .socialicon ul li{ | |
| display:inline-block; | |
| position:relative; | |
| } | |
| /*************social icon css end******************/ | |
| /* logo css start */ | |
| .bottom{ | |
| width:100%; | |
| padding:30px 0px; | |
| height:50px; | |
| margin-top:20px; | |
| } | |
| .logo{ | |
| width:25%; | |
| float:left; | |
| background-color:#0381c7; | |
| padding:10px 10px; | |
| } | |
| .titlebox{ | |
| float:right; | |
| text-align:center | |
| } | |
| .company-title{ | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:1.313em; | |
| color:#FFFFFF; | |
| text-decoration:underline; | |
| } | |
| .tagline{ | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.750em; | |
| color:#FFFFFF; | |
| } | |
| /* logo css end */ | |
| /* ---------------- Navigation Css Start ---------------- */ | |
| nav{ | |
| height:40px; | |
| width:60%; | |
| background:#0380c6; | |
| color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.938em; | |
| position: relative; | |
| float:left; | |
| border-radius:5px; | |
| margin-top:6px; | |
| } | |
| nav ul{ | |
| list-style:none; | |
| padding:0px; | |
| margin:0 auto; | |
| height:40px; | |
| width:100%; | |
| } | |
| nav li{ | |
| display:inline; | |
| float:left; | |
| line-height: 40px; | |
| text-shadow: 1px 1px 0px #283744; | |
| text-align: center; | |
| width:20%; | |
| border-right: 1px solid #015597; | |
| box-sizing:border-box; | |
| -moz-box-sizing:border-box; | |
| -webkit-box-sizing:border-box; | |
| cursor:pointer; | |
| } | |
| nav li a{ | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| nav li.last{ | |
| border:none; | |
| } | |
| nav li:hover, nav a:active { | |
| background-color: #015597; | |
| } | |
| .navigation { | |
| *zoom: 1; | |
| margin-left:10px; | |
| } | |
| /* ---------------- Navigation Css End ---------------- */ | |
| /* header css end */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"><!-- container div start --> | |
| <div class="containertop"><!-- containertop div start --> | |
| <div class="slider"><!-- slider div start --> | |
| <img src="images/slider.png" alt="slider" /> | |
| </div><!-- slider div end --> | |
| <div class="sidebar"><!-- sidebar div start --> | |
| <div class="widgettitle"> Service</div> | |
| <ul> | |
| <li><a href="#">No job is too small Mac or PC:</a></li> | |
| <li><a href="#">Home ADSL.</a></li> | |
| <li><a href="#">Wireless.</a></li> | |
| <li><a href="#">Virus removal.</a></li> | |
| <li><a href="#">Windows configuration </a></li> | |
| <li><a href="#">and installation.</a></li> | |
| <li><a href="#">Mac configuration and installation.</a></li> | |
| <li><a href="#">Hardware.</a></li> | |
| </ul> | |
| </div><!-- sidebar div end --> | |
| </div><!-- containertop div end --> |
let’s add the content inside the slides element, here’s the HTML.
Complete HTML and CSS Code:
CSS Code:
We’re done, Finally!
Wew! This took me so long to write. How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below. Also, for the next tutorial I’m going teach you how to make this layout responsive. Yeah! You heard it right, let’s make it responsive!
If you liked this tutorial kindly share it with your friends. Thanks! :)
Now let’s style all the element, here’s the CSS.
Step 6: Working on Main Section
Now let’s add the content inside the Main element, here’s the HTML
Css Code Here:
Step 7: Working on the Footer Section
Now let’s add the content inside the footer element, here’s the HTML.
Now let’s style all the element, here’s the CSS.
Now our layout should look like this.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */ | |
| .container{ | |
| width:75%; | |
| margin:0 auto; | |
| } | |
| .containertop{ | |
| width:100%; | |
| height:360px; | |
| } | |
| .slider{ | |
| height:340px; | |
| width:70.6%; | |
| float:left; | |
| background:#FFF; | |
| border-radius:5px; | |
| box-shadow: 0px 20px 20px -10px #000; | |
| } | |
| .sidebar{ | |
| width:27%; | |
| float:right; | |
| background:#FFFFFF; | |
| border-radius:5px; | |
| height:340px; | |
| box-shadow: 0px 20px 20px -10px #000; | |
| } | |
| .widgettitle{ | |
| width:100%; | |
| height:auto; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.938em; | |
| color:#FFFFFF; | |
| background-color:#0175b9; | |
| line-height:40px; | |
| box-shadow: inset #005595 0px 0px 15px 10px; | |
| border-top-left-radius:5px; | |
| border-top-right-radius:5px; | |
| } | |
| .sidebar ul{ | |
| list-style:none; | |
| width:95%; | |
| padding-left:10px; | |
| } | |
| .sidebar li{ | |
| width:100%; | |
| display:block; | |
| border-bottom:#999999 dotted 1px; | |
| line-height:150%; | |
| } | |
| .sidebar li a{ | |
| text-decoration:none; | |
| color:#525252; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.750em; | |
| } |
Now let’s add the content inside the Main element, here’s the HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="LatestNews"><!-- latestnews div start --> | |
| Latest news goes here, latest news goes here, latest news goes here, latest news goes here latest news goes here, latest news goes here... | |
| </div><!-- latestnews div end --> | |
| <div class="content"><!-- content div strat --> | |
| <div class="welcome"><!-- welcome div start --> | |
| <div id="title"> | |
| <h2>Welcome</h2> | |
| </div> | |
| <div id="post"> | |
| Welcome to company, company detail goes | |
| here, welcome to company, company detail | |
| goes here, welcome to company, company | |
| detail goes here, welcome to company, | |
| company detail goes here, welcome to company, | |
| company detail goes here, | |
| </div> | |
| </div><!-- welcome div end --> | |
| <div class="schedule"><!-- schedule div start --> | |
| <div id="title"> | |
| <h2>Schedule</h2> | |
| </div> | |
| <div id="post"> | |
| Welcome to company, company detail goes | |
| here, welcome to company, company detail | |
| goes here, welcome to company, company | |
| detail goes here, welcome to company, | |
| company detail goes here, welcome to company, | |
| company detail goes here, | |
| </div> | |
| </div><!-- schedule div end --> | |
| <div class="contact"><!-- contact div start --> | |
| <div id="title"> | |
| <h2>Contact</h2> | |
| </div> | |
| <div id="post"> | |
| Welcome to company, company detail goes | |
| here, welcome to company, company detail | |
| goes here, welcome to company, company | |
| detail goes here, welcome to company, | |
| company detail goes here, welcome to company, | |
| company detail goes here, | |
| </div> | |
| </div><!-- contact div end --> | |
| </div><!-- content div end --> | |
| </div><!-- container div end --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .LatestNews{ | |
| width:100%; | |
| padding:10px 0px; | |
| text-align:center; | |
| background-color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.938em; | |
| color:#515151; | |
| } | |
| .content{ | |
| width:100%; | |
| height:auto; | |
| padding-top:10px; | |
| } | |
| #content{ | |
| background:#FFF; | |
| width:99.9%; | |
| height:auto; | |
| border-radius:10px; | |
| } | |
| #title{ | |
| text-align:justify; | |
| width:99.9%; | |
| height:auto; | |
| padding-top:10px; | |
| } | |
| #title h2{ | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:18px; | |
| color:#FFF; | |
| text-shadow:#999 2px 2px 2px; | |
| border-bottom:#4e4e4e 3px solid; | |
| padding-bottom:5px; | |
| } | |
| #post{ | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:14px; | |
| color:#000; | |
| line-height:25px; | |
| text-shadow:#999 2px 2px 2px; | |
| padding-top:10px; | |
| padding-bottom:10px; | |
| text-align:left; | |
| } | |
| .welcome{ | |
| float:left; | |
| width:30%; | |
| height:230px; | |
| padding-bottom:9px; | |
| } | |
| .schedule{ | |
| float:left; | |
| width:32%; | |
| height:230px; | |
| border-left:#FFFFFF 2px solid; | |
| margin-left:15px; | |
| padding-left:12px; | |
| padding-bottom:9px; | |
| } | |
| .contact{ | |
| float:right; | |
| width:30%; | |
| height:230px; | |
| border-left:#FFFFFF 2px solid; | |
| margin-left:15px; | |
| padding-left:12px; | |
| padding-bottom:9px; | |
| } | |
| /* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */ |
Now let’s add the content inside the footer element, here’s the HTML.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="footer"> | |
| <div class="footerTop"> | |
| <div class="footerNav"> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| <li><a href="#">Privacy Policy</a></li> | |
| <li><a href="#" class="last">Term & Conditions</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footerBottom"> | |
| <div class="copyright">copyright 2011 @company.com | All rights are reserved</div> | |
| <div class="designDeveloped">Design & Developed By: ......................</div> | |
| </div> | |
| </div> | |
| </div><!-- wrapperdiv end --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ================ footer start ====================== */ | |
| .footer{ | |
| width:100%; | |
| clear:both; | |
| height:72px; | |
| background:#000000; | |
| } | |
| .footerTop{ | |
| width:75%; | |
| height:auto; | |
| margin:0 auto; | |
| padding-top:10px; | |
| } | |
| .footerNav{ | |
| width:68%; | |
| margin:0 auto; | |
| padding-top:5px; | |
| } | |
| .footerNav ul{ | |
| width:70%; | |
| list-style:none; | |
| padding:0px; | |
| margin:0 auto; | |
| } | |
| .footerNav li{ | |
| display:inline-block; | |
| margin:0px; | |
| } | |
| .footerNav li a{ | |
| color:#FFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:12px; | |
| border-right:#FFFFFF thin solid; | |
| padding-right:5px; | |
| text-align:center; | |
| } | |
| .footerNav li a.last{ | |
| border:none; | |
| } | |
| .footerBottom{ | |
| width:75%; | |
| margin:0 auto; | |
| clear:both; | |
| padding-top:8px; | |
| } | |
| .copyright{ | |
| width:42%; | |
| float:left; | |
| color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:12px; | |
| } | |
| .designDeveloped{ | |
| width:30%; | |
| float:right; | |
| color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:12px; | |
| text-align:right; | |
| } | |
| /* ================ footer end ======================== */ |
Complete HTML and CSS Code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Untitled Document</title> | |
| <link rel="stylesheet" type="text/css" href="css/reset.css"> | |
| <link rel="stylesheet" type="text/css" href="css/style.css"> | |
| </head> | |
| <body> | |
| <div id="wrapper"><!-- wrapper div strat --> | |
| <div class="header"><!-- header div start --> | |
| <div><!-- top div start --> | |
| <div class="socialicon"><!-- socialicon div start --> | |
| <ul> | |
| <li><img src="images/facebook.png" /></li> | |
| <li><img src="images/in.png" /></li> | |
| <li><img src="images/twitter.png" /></li> | |
| <li><img src="images/flickr.png" /></li> | |
| </ul> | |
| </div><!-- socialicon div end --> | |
| </div><!-- top div end --> | |
| <div class="bottom"><!-- bottom div start --> | |
| <div class="logo"><!-- logo div start --> | |
| <div class="titlebox"><!-- titlebox div start --> | |
| <span class="company-title"> | |
| Company Name | |
| </span> | |
| <br /> | |
| <span class="tagline">Tag line goes here..</span> | |
| </div><!-- titlebox div end --> | |
| </div><!-- logo div end --> | |
| <nav class="navigation"><!-- navigation div start --> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">News</a></li> | |
| <li><a href="#">Quick Contact</a></li> | |
| </ul> | |
| </nav><!-- navigation div end --> | |
| </div><!-- bottom div end --> | |
| </div><!-- header div end --> | |
| <div class="container"><!-- container div start --> | |
| <div class="containertop"><!-- containertop div start --> | |
| <div class="slider"><!-- slider div start --> | |
| <img src="images/slider.png" alt="slider" /> | |
| </div><!-- slider div end --> | |
| <div class="sidebar"><!-- sidebar div start --> | |
| <div class="widgettitle"> Service</div> | |
| <ul> | |
| <li><a href="#">No job is too small Mac or PC:</a></li> | |
| <li><a href="#">Home ADSL.</a></li> | |
| <li><a href="#">Wireless.</a></li> | |
| <li><a href="#">Virus removal.</a></li> | |
| <li><a href="#">Windows configuration </a></li> | |
| <li><a href="#">and installation.</a></li> | |
| <li><a href="#">Mac configuration and installation.</a></li> | |
| <li><a href="#">Hardware.</a></li> | |
| </ul> | |
| </div><!-- sidebar div end --> | |
| </div><!-- containertop div end --> | |
| <div class="LatestNews"><!-- latestnews div start --> | |
| Latest news goes here, latest news goes here, latest news goes here, latest news goes here latest news goes here, latest news goes here... | |
| </div><!-- latestnews div end --> | |
| <div class="content"><!-- content div strat --> | |
| <div class="welcome"><!-- welcome div start --> | |
| <div id="title"> | |
| <h2>Welcome</h2> | |
| </div> | |
| <div id="post"> | |
| Welcome to company, company detail goes | |
| here, welcome to company, company detail | |
| goes here, welcome to company, company | |
| detail goes here, welcome to company, | |
| company detail goes here, welcome to company, | |
| company detail goes here, | |
| </div> | |
| </div><!-- welcome div end --> | |
| <div class="schedule"><!-- schedule div start --> | |
| <div id="title"> | |
| <h2>Schedule</h2> | |
| </div> | |
| <div id="post"> | |
| Welcome to company, company detail goes | |
| here, welcome to company, company detail | |
| goes here, welcome to company, company | |
| detail goes here, welcome to company, | |
| company detail goes here, welcome to company, | |
| company detail goes here, | |
| </div> | |
| </div><!-- schedule div end --> | |
| <div class="contact"><!-- contact div start --> | |
| <div id="title"> | |
| <h2>Contact</h2> | |
| </div> | |
| <div id="post"> | |
| Welcome to company, company detail goes | |
| here, welcome to company, company detail | |
| goes here, welcome to company, company | |
| detail goes here, welcome to company, | |
| company detail goes here, welcome to company, | |
| company detail goes here, | |
| </div> | |
| </div><!-- contact div end --> | |
| </div><!-- content div end --> | |
| </div><!-- container div end --> | |
| <div class="footer"> | |
| <div class="footerTop"> | |
| <div class="footerNav"> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| <li><a href="#">Privacy Policy</a></li> | |
| <li><a href="#" class="last">Term & Conditions</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footerBottom"> | |
| <div class="copyright">copyright 2011 @company.com | All rights are reserved</div> | |
| <div class="designDeveloped">Design & Developed By: ......................</div> | |
| </div> | |
| </div> | |
| </div><!-- wrapperdiv end --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "utf-8"; | |
| /* CSS Document */ | |
| body{ | |
| background:url(../images/bg.png) repeat-x; | |
| } | |
| /*wrapper css start */ | |
| #wrapper{ | |
| width:100%; | |
| } | |
| /* wrapper css end */ | |
| /* header css start */ | |
| .header{ | |
| width:100%; | |
| } | |
| /*******************social icon css start*********************/ | |
| .top{ | |
| width:100%; | |
| padding:20px 0px; | |
| } | |
| .socialicon{ | |
| float:right; | |
| margin-right:200px; | |
| } | |
| .socialicon ul{ | |
| list-style:none; | |
| } | |
| .socialicon ul li{ | |
| display:inline-block; | |
| position:relative; | |
| } | |
| /*************social icon css end******************/ | |
| /* logo css start */ | |
| .bottom{ | |
| width:100%; | |
| padding:30px 0px; | |
| height:50px; | |
| margin-top:20px; | |
| } | |
| .logo{ | |
| width:25%; | |
| float:left; | |
| background-color:#0381c7; | |
| padding:10px 10px; | |
| } | |
| .titlebox{ | |
| float:right; | |
| text-align:center | |
| } | |
| .company-title{ | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:1.313em; | |
| color:#FFFFFF; | |
| text-decoration:underline; | |
| } | |
| .tagline{ | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.750em; | |
| color:#FFFFFF; | |
| } | |
| /* logo css end */ | |
| /* ---------------- Navigation Css Start ---------------- */ | |
| nav{ | |
| height:40px; | |
| width:60%; | |
| background:#0380c6; | |
| color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.938em; | |
| position: relative; | |
| float:left; | |
| border-radius:5px; | |
| margin-top:6px; | |
| } | |
| nav ul{ | |
| list-style:none; | |
| padding:0px; | |
| margin:0 auto; | |
| height:40px; | |
| width:100%; | |
| } | |
| nav li{ | |
| display:inline; | |
| float:left; | |
| line-height: 40px; | |
| text-shadow: 1px 1px 0px #283744; | |
| text-align: center; | |
| width:20%; | |
| border-right: 1px solid #015597; | |
| box-sizing:border-box; | |
| -moz-box-sizing:border-box; | |
| -webkit-box-sizing:border-box; | |
| cursor:pointer; | |
| } | |
| nav li a{ | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| nav li.last{ | |
| border:none; | |
| } | |
| nav li:hover, nav a:active { | |
| background-color: #015597; | |
| } | |
| .navigation { | |
| *zoom: 1; | |
| margin-left:10px; | |
| } | |
| /* ---------------- Navigation Css End ---------------- */ | |
| /* header css end */ | |
| /* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */ | |
| .container{ | |
| width:75%; | |
| margin:0 auto; | |
| } | |
| .containertop{ | |
| width:100%; | |
| height:360px; | |
| } | |
| .slider{ | |
| height:340px; | |
| width:70.6%; | |
| float:left; | |
| background:#FFF; | |
| border-radius:5px; | |
| box-shadow: 0px 20px 20px -10px #000; | |
| } | |
| .sidebar{ | |
| width:27%; | |
| float:right; | |
| background:#FFFFFF; | |
| border-radius:5px; | |
| height:340px; | |
| box-shadow: 0px 20px 20px -10px #000; | |
| } | |
| .widgettitle{ | |
| width:100%; | |
| height:auto; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.938em; | |
| color:#FFFFFF; | |
| background-color:#0175b9; | |
| line-height:40px; | |
| box-shadow: inset #005595 0px 0px 15px 10px; | |
| border-top-left-radius:5px; | |
| border-top-right-radius:5px; | |
| } | |
| .sidebar ul{ | |
| list-style:none; | |
| width:95%; | |
| padding-left:10px; | |
| } | |
| .sidebar li{ | |
| width:100%; | |
| display:block; | |
| border-bottom:#999999 dotted 1px; | |
| line-height:150%; | |
| } | |
| .sidebar li a{ | |
| text-decoration:none; | |
| color:#525252; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.750em; | |
| } | |
| .LatestNews{ | |
| width:100%; | |
| padding:10px 0px; | |
| text-align:center; | |
| background-color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.938em; | |
| color:#515151; | |
| } | |
| .content{ | |
| width:100%; | |
| height:auto; | |
| padding-top:10px; | |
| } | |
| #content{ | |
| background:#FFF; | |
| width:99.9%; | |
| height:auto; | |
| border-radius:10px; | |
| } | |
| #title{ | |
| text-align:justify; | |
| width:99.9%; | |
| height:auto; | |
| padding-top:10px; | |
| } | |
| #title h2{ | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:18px; | |
| color:#FFF; | |
| text-shadow:#999 2px 2px 2px; | |
| border-bottom:#4e4e4e 3px solid; | |
| padding-bottom:5px; | |
| } | |
| #post{ | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:14px; | |
| color:#000; | |
| line-height:25px; | |
| text-shadow:#999 2px 2px 2px; | |
| padding-top:10px; | |
| padding-bottom:10px; | |
| text-align:left; | |
| } | |
| .welcome{ | |
| float:left; | |
| width:30%; | |
| height:230px; | |
| padding-bottom:9px; | |
| } | |
| .schedule{ | |
| float:left; | |
| width:32%; | |
| height:230px; | |
| border-left:#FFFFFF 2px solid; | |
| margin-left:15px; | |
| padding-left:12px; | |
| padding-bottom:9px; | |
| } | |
| .contact{ | |
| float:right; | |
| width:30%; | |
| height:230px; | |
| border-left:#FFFFFF 2px solid; | |
| margin-left:15px; | |
| padding-left:12px; | |
| padding-bottom:9px; | |
| } | |
| /* ^^^^^^^^^^^^^^^^^^ container css start ^^^^^^^^^^^^^^^^^^^ */ | |
| /* ================ footer start ====================== */ | |
| .footer{ | |
| width:100%; | |
| clear:both; | |
| height:72px; | |
| background:#000000; | |
| } | |
| .footerTop{ | |
| width:75%; | |
| height:auto; | |
| margin:0 auto; | |
| padding-top:10px; | |
| } | |
| .footerNav{ | |
| width:68%; | |
| margin:0 auto; | |
| padding-top:5px; | |
| } | |
| .footerNav ul{ | |
| width:70%; | |
| list-style:none; | |
| padding:0px; | |
| margin:0 auto; | |
| } | |
| .footerNav li{ | |
| display:inline-block; | |
| margin:0px; | |
| } | |
| .footerNav li a{ | |
| color:#FFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:12px; | |
| border-right:#FFFFFF thin solid; | |
| padding-right:5px; | |
| text-align:center; | |
| } | |
| .footerNav li a.last{ | |
| border:none; | |
| } | |
| .footerBottom{ | |
| width:75%; | |
| margin:0 auto; | |
| clear:both; | |
| padding-top:8px; | |
| } | |
| .copyright{ | |
| width:42%; | |
| float:left; | |
| color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:12px; | |
| } | |
| .designDeveloped{ | |
| width:30%; | |
| float:right; | |
| color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:12px; | |
| text-align:right; | |
| } | |
| /* ================ footer end ======================== */ |
Wew! This took me so long to write. How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below. Also, for the next tutorial I’m going teach you how to make this layout responsive. Yeah! You heard it right, let’s make it responsive!
If you liked this tutorial kindly share it with your friends. Thanks! :)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.