Example for media queries and liquid template

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Responsive web Page</title>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=0″>
<!– <script src=”js/jquery.js” type=”text/javascript”></script>–>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
<script src=”js/jquery-1.9.1.js” type=”text/javascript”></script>
<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css” />
<!–<link href=”css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />–>
</head>
<body>
<!–========================================================
HEADER
=========================================================–>
<header id=”header”>
<div id=”stuck_container” style=”background: #2a2a2a;”>
<div class=”container”>
<div class=”row”>
<div>
<img src=”images/logo.png” alt=”logo” class=”logo-image”>
<div class=”logo-box”>
<h1 style=”color:White”>moblo</h1>
<div class=”slogan”>Cellular Repair Center</div>
</div>
</div>
<div class=”pmenu”>
<nav>
<ul class=”menu”>
<li class=”current”><a href=”index.html”>About Us</a></li>
<li><a href=”index.html”>Services</a></li>
<li><a href=”index.html”>Iphone Repair</a></li>
<li><a href=”index.html”>Blog</a></li>
<li><a href=”index.html”>Contacts</a></li>
</ul>
<select class=”select-menu sf-menu sf-js-enabled sf-arrows”>
<option value=”index.html” selected=”selected”>&nbsp;About Us</option>
<option value=”index.html”>&nbsp;Services</option>
<option value=”index.html”>&nbsp;Iphone Repair</option>
<option value=”index.html”>&nbsp;Blog</option>
<option value=”index.html”>&nbsp;Contacts</option>
</select>
</nav>
</div>
</div>
</div>
</div>
</header>
<!–========================================================
CONTENT
=========================================================–>
<section id=”content”>

<div class=”bg-color-2″>
<div class=”container”>
<div class=”row” style=””>
<!–<div class=”grid_12 wow fadeInRight animated” style=”visibility: visible; -webkit-animation: fadeInRight;”>–>
<h2 class=”font-color-1 center-object offset-1″>We fix broken, damaged<br><span class=”font-weight-light”>cellular phones.</span></h2>
<div class=”custom-text-1″>Lorem ipsum dolor sit amet, consectetur adipisc ing elit. Sed mauris erat, accumsan fermentum sit amet.</div>
<div class=”center-object”>
<a href=”#” class=”btn-big”>how it works</a>
</div>
</div>
<!–</div>–>
</div>

<div class=”container”>
<div class=”row”>
<div class=”grid_12″ style=”visibility: visible; -webkit-animation: fadeInLeft;”>
<div class=”page-head-box”>
<img src=”images/page1_img1.png” alt=”” class=”custom-img-1″>
<img src=”images/page1_img2.png” alt=”” class=”custom-img-2″>
<img src=”images/page1_img3.png” alt=”” class=”custom-img-3″>
</div>
</div>
</div>
</div>
</div>

<div style=”padding-bottom:110px”>
<div class=”container”>
<div class=”row fblock”>
<div class=”grid_4″ style=””>
<div class=”block-1 offset-7″>
<img src=”images/page1_img4.png” alt=””>
<h2 class=”offset-5″>e-mail</h2>
<h4 class=”offset-6″>repairs</h4>
<p class=”p-inset-1 p__lh”>Dolor nunc vule putateulr ips dol consem donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam.</p>
<a href=”#” class=”btn-default” style=”background: #f25f43;”>read more</a>
</div>
</div>

<div class=”grid_4″ style=””>
<div class=”block-1 offset-7″>
<img src=”images/page1_img5.png” alt=””>
<h2 class=”offset-5″>walk-in</h2>
<h4 class=”offset-6″>repairs</h4>
<p class=”p-inset-1 p__lh”>Dolor nunc vule putateulr ips dol consem donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam.</p>
<a href=”#” class=”btn-default” style=”background: #f25f43;”>read more</a>
</div>
</div>

<div class=”grid_4″ style=””>
<div class=”block-1 offset-7″>
<img src=”images/page1_img6.png” alt=””>
<h2 class=”offset-5″>10 minutes</h2>
<h4 class=”offset-6″>repairs</h4>
<p class=”p-inset-1 p__lh”>Dolor nunc vule putateulr ips dol consem donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam.</p>
<a href=”#” class=”btn-default” style=”background: #f25f43;”>read more</a>
</div>
</div>

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

<div class=”bg-inset-3″>
<div class=”container”>
<div class=”row”>
<div class=”grid_4″>
<h3>what We<span class=”font-color-2 font-weight-light”><br>Repair</span></h3>

<ul class=”list”>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>all makes of cell phones and PDA’s</a></li>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>iPod and mp3 players</a></li>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>video game devices*</a></li>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>laptops*</a></li>
<li><a href=”#”><i class=”fa fa-chevron-right”></i>GPS units</a></li>
</ul>

<p class=”p__lh”><span class=”custom-text-2″>*</span>Lorem ipsum dolor sit amet, consectetur adipisc elit. Proin ultricies vestibulum velit, bibendum et condimentum metusi dolore ipsum commete sit amet ing elit.</p>
<a href=”#” class=”btn-default” style=”background: #f25f43;”>read more</a>
</div>

<div class=”grid_4″>
<h3>WELCOME TO<span class=”font-color-2 font-weight-light”><br>our site</span></h3>
<h5>Mes cuml dia sed inenias ingertlo aliiqtes dolore ipsum sitet ame.</h5>

<p class=”p-inset-2″>Nemo enim ipsam voluptatem voluptas sit. Aspernatur aut odit aut fugit sed quia consequuntur magni dolor eseos qui rationevolupta tem nesciunt lacusueni ascet dolingerto otis aliiqt sit amet eism com odictor ligulate cotameti dapibu emo enim ipsam voluptatem voluptas sit.</p>
<p class=”p-inset-3″>Nemo enim ipsam voluptatem voluptas sit. Aspernatur aut odit aut fugit sed quia consequuntur magni dolor eseos qui rationevolupta tem nesciunt lacusueni ascet dolingerto otis aliiqt sit amet eism com odictor ligulate cotameti dapibu emo enim ipsam voluptatem voluptas sit. Aspernatur aut odit aut fugit sed quia. Consequuntur magni dolores eos qui rationevoluptatem nesciunt.</p>
</div>

<div class=”grid_4″>
<h3>Success<span class=”font-color-2 font-weight-light”><br>Stories</span></h3>
<p class=”p-inset-4″>“ Nemo enim ipsam voluptatem volupt asperna tur aut odit aut fugit sed quia conse quuntur magni dolor eseos qui. ”</p>
<h5 class=”font-color-3 offset-8″><i class=”fa fa-user icon-fa”></i>Mark snow</h5>
<div class=”h-line”></div>
<p class=”p-inset-5″>“ Nemo enim ipsam voluptatem volupt asperna tur aut odit aut fugit sed quia conse quuntur magni dolor eseos qui. ”</p>
<h5 class=”font-color-3 offset-8″><i class=”fa fa-user icon-fa”></i>Diana willow</h5>
<div class=”h-line”></div>
<p class=”p-inset-5″>“ Nemo enim ipsam voluptatem volupt asperna tur aut odit aut fugit sed quia conse quuntur magni dolor eseos qui. ”</p>
<h5 class=”font-color-3 offset-8″><i class=”fa fa-user icon-fa”></i>Mike smith</h5>
</div>

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

<footer id=”footer” style=”padding: 35px 0 28px 0;font: 300 14px ‘Open Sans’, sans-serif;color: #adadad;background: #2a2a2a;”>
<div class=”container”>
<div class=”row”>
<div class=”grid_6″>
<span id=”copyright-title”>moblo</span>
<span>© 2014 |
<a href=”index.html”>Privacy Policy</a> <!–{%FOOTER_LINK} –>
</span>
</div>
<div class=”grid_6″>
<div class=”social-links”>
<a href=”#”><i class=”fa fa-facebook”></i></a>
<a href=”#”><i class=”fa fa-rss”></i></a>
<a href=”#”><i class=”fa fa-twitter”></i></a>
<a href=”#”><i class=”fa fa-google-plus”></i></a>
</div>
</div>
</div>
</div>
</footer>

</body>
</html>

 

style.css:

/*========================================================
Main layout styles
=========================================================*/
body {
background: #2a2a2a;
font: 14px/24px “Arial”;
color: #bbbaba;
}
.grid_4
{
width: 360px;float: left;min-height: 1px;margin-left: 30px;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #ffffff;
}
.link-inverse-color a:hover {
color: #2a2a2a;
}
.link-light-color a:hover {
color: #f25f43;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: ‘Open Sans’, sans-serif;
font-weight: 600;
color: #2a2a2a;
text-transform: uppercase;
}
h1 {
font-size: 60px;
color: #ffffff;
}
h2 {
font-size: 50px;
line-height: 50px;
}
h3 {
margin-top: 118px;
font-size: 40px;
line-height: 40px;
}
h4 {
font-size: 30px;
font-weight: 300;
}
h5 {
margin-top: 42px;
font-size: 20px;
font-weight: 400;
color: #f25f43;
line-height: 25px;
}
h6 {
margin-top: 12px;
font-size: 15px;
font-weight: 300;
color: #2a2a2a;
line-height: 25px;
}
p {
padding-top: 24px;
}
p.p-inset-1 {
padding-top: 37px;
}
p.p-inset-2 {
padding-top: 12px;
}
p.p-inset-3 {
padding-top: 20px;
}
p.p-inset-4 {
padding-top: 41px;
}
p.p-inset-5 {
padding-top: 26px;
}
p.p-inset-6 {
padding-top: 17px;
}
p.p-inset-7 {
padding-top: 42px;
}
p.p-inset-8 {
padding-top: 13px;
}
p.p__lh {
line-height: 23px;
}
.font__ls {
letter-spacing: -3px;
}
.font-color-1 {
color: #ffffff;
}
.font-color-2 {
color: #f25f43;
}
.font-color-3 {
color: #2a2a2a;
}
.font-weight-light {
font-weight: 300;
}
.center-object {
text-align: center;
}
.stick-to-right {
float: right;
}
.offset-1 {
margin-top: 90px;
}
.offset-2 {
margin-top: 82px;
}
.offset-3 {
margin-top: 72px;
}
.offset-4 {
margin-top: 93px;
}
.offset-5 {
margin-top: 32px;
}
.offset-6 {
margin-top: 6px;
}
.offset-7 {
margin-top: 109px;
}
.offset-8 {
margin-top: 12px;
}
.offset-9 {
margin-top: 114px;
}
.offset-10 {
margin-top: 37px;
}
.offset-11 {
margin-top: 88px;
}
.offset-12 {
margin-top: 118px;
}
.offset-13 {
margin-top: 24px;
}
.offset-14 {
margin-top: 117px;
}
.clear {
clear: both;
}
/*========================================================
HEADER styles
=========================================================*/

/* Main menu styles
========================================================*/
header nav {
float: right;
font: 600 14px ‘Open Sans’, sans-serif;
text-transform: uppercase;
display: inline-block;
}
.menu {
margin-top: 28px;
float: right;
display: block;
}
.menu > li {
float: left;
position: relative;
list-style:none;
}
.menu > li > a {
display: block;
margin-left: 29px;
color: #d7dadb;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.menu > li > a:hover {
color: #f25f43;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.menu > li.current > a {
color: #f25f43;
}
.menu > li.sfHover > a {
color: #f25f43;
}
.menu a {
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.menu a:hover {
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.select-menu {
font: 14px/24px “Arial”;
color: #2a2a2a;
border: 2px solid #9e9e9e;
}
/*========================================================
RESPONSIVE LAYOUTS STYLES
=========================================================*/
@media only screen and (max-width: 979px) {
.menu > li > a {
margin-left: 10px;
}
}
@media only screen and (max-width: 767px) {
nav {
float: none;
}
.menu {
float: none;
width: 100%;
margin-top: 50px;
}
}
/* Stuck menu styles
========================================================*/

.logo-image {
float: left;
margin-right: 22px;
}
.logo-box {
display: block;
position: relative;
margin-top: 8px;
}
.slogan {
font: 300 14px ‘Open Sans’, sans-serif;
color: #838383;
text-transform: uppercase;
margin-left: 70px;
margin-top: 20px;
}
/*========================================================
CONTENT styles
=========================================================*/
#content {
padding: 0 0 0 0;
background: #ffffff;
overflow: hidden;
}
.custom-text-1 {
margin-top: 27px;
font: 300 21px/30px ‘Open Sans’, sans-serif;
color: #933928;
text-align: center;
padding: 0 200px;
text-transform: uppercase;
}
.custom-text-2 {
display: inline-block;
margin-top: 13px;
padding-right: 8px;
font: 600 30px/10px ‘Open Sans’, sans-serif;
color: #f25f43;
text-transform: uppercase;
}
.custom-text-3 {
margin-top: 27px;
font: 300 21px/30px ‘Open Sans’, sans-serif;
color: #ffffff;
text-align: center;
padding: 0 20px;
text-transform: uppercase;
}
.block-1 {
text-align: center;
}
.block-2 {
background: #f25f43;
padding: 14px 0 43px 0;
}
.icon-fa {
float: left;
padding-right: 12px;
color: #f25f43;
font-size: 20px;
}
.h-line {
border: none;
background-color: #fbfbfb;
height: 1px;
margin-top: 27px;
}
.page-head-box {
position: relative;
height: 366px;
}
.custom-img-1,
.custom-img-2,
.custom-img-3 {
position: absolute;
}
.custom-img-1 {
bottom: 0;
}
.custom-img-2 {
width: 304px;
left: 50%;
margin-left: -152px;
bottom: 0;
}
.custom-img-3 {
right: 0;
bottom: 0;
}
.info-blok {
margin-top: 50px;
}
.info-blok-2 {
margin-top: 66px;
}
.info-img {
float: left;
margin-top: 8px;
margin-right: 29px;
}
.info-data {
display: block;
font: 300 15px/25px ‘Open Sans’, sans-serif;
color: #5d6166;
text-transform: uppercase;
}
.info-data tr th {
text-align: left;
}
.info-data tr .th-1 {
padding-right: 40px;
}
.info-data tr .th-2 {
padding-right: 47px;
}
.info-data tr .th-3 {
color: #bab9b9;
}
.post {
margin-top: 75px;
}
.post-1 {
margin-top: 45px;
}
.post_block {
position: relative;
display: block;
padding-left: 101px;
padding-right: 143px;
}
.post > .calendar-date {
margin-top: 4px;
font: 600 65px/48px ‘Open Sans’, sans-serif;
color: #f25f43;
text-transform: uppercase;
float: left;
}
.post > .calendar-date > span {
display: block;
font-size: 30px;
color: #2a2a2a;
font-weight: 300;
text-align: center;
margin-right: 39px;
}
.post_image {
margin-top: 4px;
margin-right: 30px;
float: left;
}
.post-icon-fa {
float: left;
padding-right: 12px;
color: #f25f43;
font-size: 20px;
}
.post-user {
margin-top: 9px;
float: left;
padding-right: 34px;
}
.post-user-2 {
margin-top: 9px;
}
.post-pad {
padding-right: 8px;
}
.contact_adrress {
margin-top: 12px;
}
.contact_adrress span {
float: left;
text-align: left;
}
dl dd {
display: block;
text-align: right;
width: 206px;
}
.map {
margin-top: 36px;
}
.map_c {
position: relative;
overflow: hidden;
width: 428px;
height: 300px;
margin-top: 12px;
}
/*========================================================
BACKGROUND BLOK styles
=========================================================*/
.bg-color-2 {
background: #f25f43;
}
.bg-color-3 {
background: #f8f8f8;
}
.bg-inset-1 {
padding-bottom: 80px;
}
.bg-inset-2 {
padding-bottom: 111px;
}
.bg-inset-3 {
margin-bottom: 124px;
}
.bg-inset-4 {
padding-bottom: 12px;
}
.bg-inset-5 {
padding-bottom: 72px;
}
.bg-inset-6 {
padding-bottom: 121px;
}
.bg-inset-6 {
padding-bottom: 134px;
}
.bg-offset-1 {
margin-top: 1px;
}
/*========================================================
BUTTON styles
=========================================================*/
.btn-default {
background: #f25f43;
display: inline-block;
font: 600 15px/50px ‘Open Sans’, sans-serif;
color: #ffffff;
text-align: center;
text-transform: uppercase;
padding: 0 18px;
margin-top: 39px;
}
.btn-default:hover {
background: #2a2a2a;
color: #ffffff;
}
.btn__inverse {
background: #2a2a2a;
}
.btn__inverse:hover {
background: #f25f43;
color: #ffffff;
}
.default__mt {
margin-top: 0px;
}
.default__pd {
padding: 0;
}
.btn-big {
background: #2a2a2a;
display: inline-block;
font: 600 17px/14px ‘Open Sans’, sans-serif;
color: #ffffff;
text-align: center;
text-transform: uppercase;
padding: 28px 22px;
margin-top: 34px;
}
.btn-big:hover {
background: #ffffff;
color: #f25f43;
}
.btn-big-pad {
padding: 28px 37px;
}
/*========================================================
LISTS styles
=========================================================*/
.list {
margin-top: 44px;
}
.list.list__mt-1 {
margin-top: 32px;
}
.list.list__mt-2 {
margin-top: 45px;
}
.list li {
padding-left: 24px;
padding-bottom: 11px;
}
.list li a {
font: 300 15px ‘Open Sans’, sans-serif;
color: #2a2a2a;
text-transform: uppercase;
}
.list li a:hover {
color: #f25f43;
}
.list li i {
color: #f25f43;
font-size: 12px;
left: -24px;
margin-top: 5px;
position: relative;
}
/*========================================================
FOOTER styles
=========================================================*/

#copyright-title {
font-weight: 400;
color: #ffffff;
text-transform: uppercase;
}
.social-links {
overflow: hidden;
float: right;
margin-top: -7px;
}
.social-links a + a {
margin-left: 4px;
}
.social-links a {
width: 34px;
height: 34px;
position: relative;
display: inline-block;
font-size: 16px;
text-align: center;
color: #fff;
background: #4a4a4a;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
.social-links i {
line-height: 34px;
}
.social-links a:hover {
background: #f25f43;
color: #fff;
}
/*========================================================
Widget styles
=========================================================*/
/* UItoTop styles
========================================================*/
#toTop {
display: none;
text-decoration: none;
position: fixed;
bottom: 40px;
left: 51%;
margin-left: 640px;
overflow: hidden;
border: none;
color: #c5c5c5;
width: 73px;
height: 73px;
font-size: 30px;
line-height: 65px;
z-index: 20;
background: #eeeeee;
text-align: center;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#toTop:hover {
outline: none;
color: #f25f43;
}
/* Stellar(parallaxBG) styles
========================================================*/
.stellar-block {
background-attachment: fixed;
background-position: 50% 0%;
position: relative;
background-repeat: no-repeat;
padding-bottom: 100px;
z-index: 8;
}
.first {
background-image: url(../images/bg_pic2.jpg);
background-color: #fff;
background-position: 50% 100%;
}
.second {
background-image: url(../images/slide.jpg);
background-color: #fff;
}
@media only screen and (max-width: 979px) {
.stellar-block {
background-attachment: scroll;
background-position: 50% 50%;
position: relative;
background-repeat: no-repeat;
background-size: auto 100%;
padding-bottom: 100px;
z-index: 8;
}
}
/*========================================================
RESPONSIVE LAYOUTS STYLES
=========================================================*/
@media only screen and (max-width: 1199px) {
.page-head-box {
height: 326px;
}
.custom-img-1,
.custom-img-2,
.custom-img-3 {
width: 30%;
}
.custom-img-2 {
margin-left: -141px;
}

}
@media only screen and (max-width: 979px) {
h2 {
font-size: 40px;
}
.custom-text-1 {
padding: 0 0;
}
.page-head-box {
height: 266px;
}
.custom-img-2 {
margin-left: -110px;

}
.post_image {
margin-right: 30px;
width: 40%;
}
.info-data {
font: 300 12px/25px ‘Open Sans’, sans-serif;
}
.info-data tr th:nth-child(1) {
padding-right: 5px;
}
.info-data tr th:nth-child(2) {
padding-right: 7px;
}

.container {
width: 420px;
padding: 0 0px;
margin:auto;
}

}
@media only screen and (max-width: 767px) {
#header {
text-align: center;
}

[class*=”grid_”] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid_4
{
margin-bottom: 25px;
}

.logo-image {
float: none;
margin-right: 0;
}
.logo-box {
margin-top: 40px;
}
.slogan {
margin-left: 0px;
}
.page-head-box {
height: 166px;
}
.custom-img-2 {
margin-left: -63px;
}
.post_image {
margin-top: 20px;
margin-right: 0;
width: 100%;
float: none;
}

#footer {
text-align: center;
}

}
@media only screen and (max-width: 480px) {
.page-head-box {
height: 120px;
}
.custom-img-2 {
margin-left: -40px;
}

}
@media only screen and (max-width:767px)
{
.container {
width: 420px;
padding: 0 0px;
}
.menu
{
display:none;
margin-top:50px;
}

.sf-menu {
float: none;
width: 100%;
margin-top: 50px;
margin-bottom:20px;
}
}

@media (max-width: 979px) and (min-width: 768px){
.container {
width:748px;
}

.grid_4
{
width: 360px;float: left;min-height: 1px;margin-left: 30px;
}
}

@media (max-width: 479px){
body {
padding: 0;
}
.container {
width: 300px;
padding: 0 15px;
}
.row {
margin-left: 0;
}
[class*=”grid_”] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}

/*Core variables and mixins*/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s