Shaheer .KM
|
==================================================================
style
=============================================================
@charset "utf-8";
/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#666;
font-weight:normal;
line-height:18px;
}
body a {
color:#666;
text-decoration:none;
}
body a:hover {
color:#000;
text-decoration:none;
}
* { padding:0;
margin:0;
}
P {
padding:0;
margin:0;
}
.clear {
clear:both;
}
#header-container{
width:1172px;
margin:auto;
}
.header-wraper {
background:url(../images/header-bg.jpg) repeat-x ;
width:100%;
border-bottom:1px solid #eeeeee;
}
.phone-call {
width:150px;
height:auto;
float:left;
margin:8px 0 5px 0;
padding:3px 0 5px 30px;
background:url(../images/call.jpg) no-repeat ;
color:#999;
}
.social-container {
width:210px;
float:right;
padding:5px 0 0 0;
}
.social-container ul {
display:block;
}
.social-container li {
float:left;
list-style:none;
}
.facebook{
width:29px;
height:25px;
float:left;
margin-right:5px;
background:url(../images/social-icons.jpg) no-repeat ;
background-position:6px 0;
cursor:pointer;
}
.facebook:hover{
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-207px 0;
}
.twitter{
width:29px;
height:25px;
float:left;
margin-right:5px;
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-28px 0;
cursor:pointer;
}
.twitter:hover{
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-241px 0;
}
.googleplus{
width:29px;
height:25px;
float:left;
margin-right:5px;
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-65px 0;
cursor:pointer;
}
.googleplus:hover{
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-278px 0;
}
.linkdin{
width:29px;
height:25px;
float:left;
margin-right:5px;
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-104px 0;
cursor:pointer;
}
.linkdin:hover{
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-317px 0;
}
.ball{
width:29px;
height:25px;
float:left;
margin-right:5px;
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-142px 0;
cursor:pointer;
}
.ball:hover{
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-355px 0;
}
.vimeo{
width:29px;
height:25px;
float:left;
margin-right:5px;
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-181px 0;
cursor:pointer;
}
.vimeo:hover{
background:url(../images/social-icons.jpg) no-repeat ;
background-position:-394px 0;
}
.callus-social-container {
width:100%;
float:left;
}
.logo {
width:136px;
height:32px;
float:left;
margin:25px 0 10px 0;
background:url(../images/logo.jpg) no-repeat ;
cursor:pointer;
}
.menu-container{
width:732px;
float:right;
padding:0 0 0 0;
}
#nav
{
width: 780px; /* 1000 */
float:left;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin-top:30px;
margin-left:30px;
border-radius:5px;
/* 30 480 */
}
#nav > a
{
display: none;
}
#nav li
{
position: relative;
list-style:none;
}
#nav li a
{
color: #000;
display: block;
text-decoration:none;
}
#nav li a:active
{
background-color: #c00 !important;
}
#nav span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */ #nav > ul
{
height: 3.75em; /* 60 */
}
#nav > ul > li
{
width: 15%;
height: 100%;
float: left;
}
#nav > ul > li > a
{
height: 100%;
font-size:14px; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-align: center;
text-transform:uppercase;
}
#nav > ul > li:not( :last-child ) > a
{
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
background-color: #cc470d;
}
/* second level */ #nav li ul
{
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul
{
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul
{
left: -1px;
}
#nav li ul a
{
font-size: 1.25em; /* 20 */
border-top: 1px solid #e15a1f;
padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
background-color: #e15a1f;
}
.banner-wraper {
background:#deedf2;
}
#banner-container {
margin: auto;
width:1172px;
}
#body-container {
margin: auto;
width:1172px;
}
.coloomn-fullblock {
float:left;
padding-top:40px;
}
.article-colomn {
width:256px;
float:left;
padding:0 0 0 0;
margin-right:47px;
}
.colomn-marginnone {
margin-right:0 !important;
}
.article-colomn h2 {
font-size:20px;
color:#000;
font-weight:normal;
padding:15px 0 0 70px;
margin-bottom:20px;
}
.mobile-icon{
background:url(../images/mobile.jpg) no-repeat ;
}
.colors-icon{
background:url(../images/colors.jpg) no-repeat ;
}
.incredibly-icon{
background:url(../images/incredibily.jpg) no-repeat ;
}
.customer-sprt-icon{
background:url(../images/customer-support.jpg) no-repeat ;
}
.article-colomn p {
padding-top:10px;
}
.left-block{
float:left;
width:872px;
paddin:0 0 0 0;
}
.recent-work-block {
width:100%;
float:left;
padding:40px 0 0 0;
}
.recent-work-block ul{
display:block;
}
.recent-work-block li {
width:272px;
float:left;
list-style:none;
padding-right:26px;
}
.recent-work-block li span {
padding-top:10px;
float:left;
font-size:14px;
font-weight:bold;
}
.recent-work-block li p {
padding-top:6px;
float:left;
color:#999;
}
.recent-work-block h2 {
font-size:20px;
color:#000;
font-weight:normal;
padding:0 0 25px 0;
}
.recent-work-img img {
width:272px;
float:left;
}
.recent-work-img-padnone {
padding-right:0 !important;
}
.fromtheblog-aboutus-container {
width:100%;
float:left;
padding-top:40px;
}
.fromtheblog-box {
width:570px;
float:left;
padding:0 0 0 0;
}
.fromtheblog-box h2 {
width:153px;
font-size:14px;
color:#000;
font-weight:normal;
text-transform:uppercase;
padding:10px;
border:1px solid #e6e6e6;
border-bottom:none;
}
.fromtheblog-container {
float:left;
padding:20px;
border:1px solid #e6e6e6;
}
.blog-box{
width:100%;
float:left;
border-bottom:1px dashed #ccc;
padding-bottom:15px;
margin-bottom:15px;
}
.blog-box-nopad-mrg {
border-bottom:none !important;
padding-bottom:0 !important;
margin-bottom:0 !important;
}
.blog-box-img {
width:131px;
float:left;
padding:0 15px 0 0;
}
.blog-box p{
padding-top:10px;
}
.blog-box h3{
font-size:14px;
color:#000;
font-weight:bold;
}
.blog-box h3 span{
color:#999;
font-size:12px;
font-weight:normal;
padding-top:10px;
} .index-aboutus-container {
width:272px;
float:left;
padding:0 0 0 25px;
}
.index-aboutus-container h2 {
font-size:20px;
color:#000;
font-weight:normal;
text-transform:uppercase;
padding-bottom:10px;
padding-top: 9px;
}
.index-whoweare {
float:left;
padding:15px;
border:1px solid #e6e6e6;
box-shadow: 0 1px 1px #ccc;
margin-bottom:15px;
padding-bottom:22px;
}
.index-whoweare h3 {
font-size:14px;
color:#f95355;
font-weight:bold;
padding:0 0 10px 0;
}
.index-aboutus-container h4 {
font-size:14px;
color:#000;
font-weight:normal;
text-transform:uppercase;
padding:15px;
border:1px solid #e6e6e6;
margin-bottom:15px;
float:left;
width:241px;
}
.right-side {
width:275px;
float:left;
padding:0 0 0 22px;
}
.right-side h3 {
font-size:20px;
color:#000;
font-weight:normal;
padding:42px 0 22px 0;
}
.index-testimonial {
width:241px;
float:left;
padding:15px;
padding-bottom:35px;
margin-bottom:15px;
color:#fff;
font-size:14px;
line-height:22px;
font-style:italic;
background: #acacac url(../images/bg-tesmnl.jpg) no-repeat left bottom ;
}
.retina-ready-container {
width:272px;
float:left;
padding:0 0 0 0;
}
.retina-ready-container h2 {
font-size:20px;
color:#000;
font-weight:normal;
text-transform:uppercase;
padding-bottom:10px;
padding-top: 41px;
}
.right-side h5 {
font-size:14px;
color:#000;
font-weight:bold;
padding-bottom:24px;
padding-top: 10px;
padding-left:60px;
float:left;
background:url(../images/johnsnow.jpg) no-repeat;
}
.right-side h5 p {
font-size:12px;
color:#999;
font-weight:normal;
}
.footer-wraper {
background: #343434 url(../images/footer-bg.jpg) repeat-x;
}
.footer-container{
width:1172px;
margin:auto;
}
.our-partners {
float:left;
padding:40px 0 75px 0;
}
.our-partners h2 {
width:140px;
float:left;
font-size:20px;
color:#000;
font-weight:normal;
padding:10px 0 10px 0;
margin-right:30px;
border-right:2px solid #ff5357;
}
.recentpost-container {
width:260px;
float:left;
padding:0;
margin-right:30px;
}
.recentpost-img {
width:48px;
float:left;
padding:0 15px 0 0;
}
.recentpost-container h3{
font-size:14px;
color:#ccc;
font-weight:normal;
}
.recentpost-box{
width:100%;
float:left;
padding-bottom:6px;
margin-bottom:15px;
}
.recentpost-container h3 span{
color:#999;
font-size:12px;
font-weight:normal;
padding-top:10px;
} .recentpost-container h2{
font-size:14px;
color:#fff;
font-weight:bold;
padding-bottom:30px;
text-transform:uppercase;
float:left;
}
.field1 {
width:100%;
height:30px;
float:left;
background:#3f3f3f;
border:1px solid #4b4b4b;
margin-bottom:10px;
color:#ccc;
padding-left:3px;
}
.field2 {
width:100%;
height:60px;
background:#3f3f3f;
border:1px solid #4b4b4b;
margin-bottom:10px;
color:#ccc;
padding-left:3px;
}
.recentpost-container ul{
display:block;
}
.recentpost-container li {
float:left;
list-style:none;
width:271px;
}
.recentpost-container {
width:260px;
height:244px;
float:left;
padding:0;
margin-right:35px;
}
.twitter-post-box{
width:100%;
float:left;
padding-bottom:6px;
margin-bottom:15px;
}
.twitter-post-box h4{
font-size:13px;
color:#848484;
font-weight:normal;
}
.twitter-post-box h4 span {
color:#717070;
font-size:11px;
}
.tiwittwer-icon {
width:30px;
float:left;
padding:0 0 0 0;
height:60px;
}
.flickerwdjt-container {
width:280px;
float:left;
padding:0;
}
.flickerwdjt-container h2{
font-size:14px;
color:#fff;
font-weight:bold;
padding-bottom:30px;
text-transform:uppercase;
float:left;
width:100%;
}
.flickerwdjt-container ul {
display:block;
}
.flickerwdjt-container li{
float:left;
list-style:none;
padding:0 5px 5px 0;
}
.send-button{
float:right;
background:#ff5456;
color:#fff;
border:none;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.copy-right{
width:100%;
text-align:center;
color:#ccc;
padding:51px 0 16px 0;
}
==================================
index
===================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NORMA</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media-query.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
</head>
<body>
<header class="header-wraper" >
<div id="header-container">
<div class="callus-social-container ">
<div class="phone-call">Call Us : +251 2541 212</div>
<div class="social-container">
<ul>
<li class="facebook"></li>
<li class="twitter"></li>
<li class="googleplus"></li>
<li class="linkdin"></li>
<li class="ball"></li>
<li class="vimeo"></li>
</ul>
</div>
</div>
<div class="logo"></div>
<!--menu start here-->
<div class="menu-container">
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
<li><a href="/">Home</a></li>
<li>
<a href="/" aria-haspopup="true">Blog</a>
<ul>
<li><a href="/">Design</a></li>
<li><a href="/">HTML</a></li>
<li><a href="/">CSS</a></li>
<li><a href="/">JavaScript</a></li>
</ul>
</li>
<li>
<a href="/" aria-haspopup="true">Work</a>
<ul>
<li><a href="/">Web Design</a></li>
<li><a href="/">Typography</a></li>
<li><a href="/">Front-End</a></li>
</ul>
</li>
<li><a href="/">About</a></li>
<li><a href="/">serices</a></li>
<li><a href="/">contact Us</a></li>
</ul>
</nav>
</div>
<!--menu end here-->
<div class="clear"></div>
</div>
</header>
<section class="banner-wraper ">
<div id="banner-container">
<img src="images/banner.jpg">
</div>
<div class="clear"></div>
</section>
<div id="body-container">
<section class="coloomn-fullblock ">
<article class="article-colomn mobile-icon">
<h2>100% Responsive</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </p>
</article>
<article class="article-colomn colors-icon">
<h2>Unlimited Colors</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </p>
</article>
<article class="article-colomn incredibly-icon">
<h2>Incredibly Flexible</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </p>
</article>
<article class="article-colomn customer-sprt-icon colomn-marginnone">
<h2>Customer Support</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </p>
</article>
</section>
<div class="clear"></div>
<section class="left-block">
<div class="recent-work-block ">
<h2>Recent Works</h2>
<ul>
<li><img src="images/work1.jpg"><span>Lorem Ipsum is simply dummy</span><p>May 17, 2015</P></li>
<li><img src="images/work2.jpg"><span>Lorem Ipsum is simply dummy</span><p>May 17, 2015</P></li>
<li class="recent-work-img-padnone"><img src="images/work3.jpg"><span>Lorem Ipsum is simply dummy</span><p>May 17, 2015</P></li>
</ul>
</div>
<article class="fromtheblog-aboutus-container">
<div class="fromtheblog-box">
<h2>From the blog</h2>
<div class="fromtheblog-container ">
<div class="blog-box">
<div class="blog-box-img "><img src="images/blog1.jpg"></div>
<h3>Lorem Ipsum is simply dummy<br><span>June 23, 2015</span></h3><p> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
</div>
<div class="blog-box blog-box-nopad-mrg">
<div class="blog-box-img "><img src="images/blog2.jpg"></div>
<h3>Lorem Ipsum is simply dummy<br><span>June 23, 2015</span></h3><p> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
</div>
</div>
</div>
<div class="index-aboutus-container">
<h2>About US</h2>
<div class="index-whoweare">
<h3>Who we are</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
</div>
<h4>What we do</h4>
<h4>Why choose us</h4>
</div>
</article>
</section>
<aside class="right-side">
<h3>Testimonials</h3>
<div class="index-testimonial">
<p><img src="images/quote.jpg">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
</div>
<h5>john snow<p> developer</p></h5>
<div class="retina-ready-container">
<h2>Retina Ready</h2>
<img src="images/retina-redy.jpg">
</div>
</aside>
<div class="clear"></div>
</div>
<footer class="footer-wraper ">
<div class="footer-container">
<div class="our-partners">
<h2>Our partners</h2>
<img src="images/clients.jpg">
</div>
<div class="clear"></div>
<div class="recentpost-container ">
<h2>Recent post widgets</h2>
<div class="recentpost-box">
<div class="recentpost-img "><img src="images/recent1.jpg"></div>
<h3>Lorem Ipsum is simply dummy text of the printing<br><span>June 23, 2015</span></h3>
</div>
<div class="recentpost-box">
<div class="recentpost-img "><img src="images/recent2.jpg"></div>
<h3>Lorem Ipsum is simply dummy text of the printing<br><span>June 23, 2015</span></h3>
</div>
</div>
<div class="recentpost-container ">
<h2>Contact form</h2>
<ul>
<li><input type="text" name="firstname" title="First Name" value="Your Name" class="field1" onfocus="inputFocus(this)" onblur="inputBlur(this)" style="color:#888;"/></li>
<li><input type="text" name="firstname" title="First Name" value="Your Email" class="field1" onfocus="inputFocus(this)" onblur="inputBlur(this)" style="color:#888;"/></li>
<li><textarea class="field2" value="Your Message" ></textarea></li>
</ul>
<button class="send-button">Send</button>
</div>
<div class="recentpost-container ">
<h2>Recent post widgets</h2>
<div class="twitter-post-box">
<div class="tiwittwer-icon "><img src="images/twitter.jpg"></div>
<h4>Lorem Ipsum is simply dummy text of the printing Ipsum is simply <br><span>June 23, 2015</span></h4>
</div>
<div class="twitter-post-box">
<div class="tiwittwer-icon "><img src="images/twitter.jpg"></div>
<h4>Lorem Ipsum is simply dummy text of the printing Ipsum is simply<br><span>June 23, 2015</span></h4>
</div>
</div>
<div class="flickerwdjt-container ">
<h2>Flicker widjet</h2>
<ul>
<li><img src="images/flkr-images.jpg"></li>
<li><img src="images/flkr-images.jpg"></li>
<li><img src="images/flkr-images.jpg"></li>
<li><img src="images/flkr-images.jpg"></li>
<li><img src="images/flkr-images.jpg"></li>
<li><img src="images/flkr-images.jpg"></li>
<li><img src="images/flkr-images.jpg"></li>
<li><img src="images/flkr-images.jpg"></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="copy-right">Copy right 2015 NORMA All right reserved</div>
</footer>
<div class="clear"></div>
</body>
</html>
==================================================
media query
============================================================
@charset "utf-8";/* CSS Document */ @media screen and (max-width:1173px){ #header-container{ width:100%; } #banner-container { width:100%; } #body-container{ width:100%; padding:0 10px 0 10px; } .right-side { width:100%; padding-left:0; } #banner-container img { width:100%; } .our-partners img { width:98%; } .menu-container{ float:left !important; } .left-block{ width:100%; } .retina-ready-container h2{ padding-top:0; } .index-testimonial{ width:92%; background-image:none; background-color:#9c9c9c; } .footer-container{ width:100%; padding-left:10px; } } @media only screen and ( max-width: 910px ) /* 1000 */ { .menu-container{ float:left !important; } #banner-container img { width:100%; } .logo { width:100%; background-position:50%; } .article-colomn{ width:100%; margin:0 0 25px 10px; } .fromtheblog-box{ width:98%; padding-right:10px; } .index-aboutus-container{ width:100%; padding-left:0; float:left; } .index-whoweare{ width:94%; } .index-aboutus-container h4 { width:94%; } .index-testimonial{ width:95%; background-image:none; background-color:#9c9c9c; } #nav { width: 100%; position: static; margin: 0; } } @media only screen and ( max-width: 650px ) /* 640 */ { .article-colomn{ width:100%; margin:0 0 25px 10px; } .fromtheblog-box{ width:97%; } .article-colomn{ width:98%; float:left; } .index-whoweare{ width:92%; } .index-aboutus-container h4 { width:92%; } .recentpost-container { width:96%; } .recentpost-container li{ width:99%; } .flickerwdjt-container{ width:100%; } #nav { position: relative; top: auto; left: auto; } #nav > a { width: 3.125em; /* 50 */ height: 3.125em; /* 50 */ text-align: left; text-indent: -9999px; background-color: #e15a1f; position: relative; } #nav > a:before, #nav > a:after { position: absolute; border: 2px solid #fff; top: 35%; left: 25%; right: 25%; content: ''; } #nav > a:after { top: 60%; } #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: block; } /* first level */ #nav > ul { height: auto; display: none; position: absolute; left: 0; right: 0; background:#E15A1F; } #nav:target > ul { display: block; } #nav > ul > li { width: 100%; float: none; } #nav > ul > li > a { height: auto; text-align: left; padding: 0 0.833em; /* 20 (24) */ } #nav > ul > li:not( :last-child ) > a { border-right: none; border-bottom: 1px solid #cc470d; } /* second level */ #nav li ul { position: static; padding: 1.25em; /* 20 */ padding-top: 0; } } @media only screen and ( max-width: 430px ) /* 640 */ { } } |
