<div class="index_page">
<div class="container ">
<div class="row from_the_news cnt">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 news_head"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box_outer">
<article class="box">
<span class="pic corners5"><img class="img-responsive" src="images/news_pics/news-pic.jpg" width="305" height="134" alt=""></span>
<p>We have recently completed beatiful website for a luxury hair beauty y completed for a luxury hair beauty boutique Salon Studio. The website is ...</p>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box_outer">
<article class="box">
<span class="pic corners5"><img class="img-responsive" src="images/news_pics/news-pic.jpg" width="305" height="134" alt=""></span>
<p>We have recently completed beatiful website for a luxury hair beauty boutique Smpleted beatiful website for a luxury hair beauty boutique Salon Studio. The website is ...</p>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 box_outer">
<article class="box">
<span class="pic corners5"><img class="img-responsive" src="images/news_pics/news-pic.jpg" width="305" height="134" alt=""></span>
<p>We have recently completed beatiful website for a luxury hair beauty boutique Salon Studio. The website is ...</p>
</article>
</div>
</div>
</div>
</div>
/************************************************************************************************************** 1.global reset and common settings */
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img, input{
border: none;
margin: 0;
outline: none;
padding: 0;
}
html{
height:100%;
}
body{
height:100%;
font: normal 100% tahoma, arial, sans-serif;
}
ul, li{
list-style-type: none !important;
list-style-image: none !important;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }
textarea{
resize: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}
.clear{
clear: both;
}
.hide{
display: none;
}
.visible_wrap{
width: 934px;
overflow: hidden;
margin: 0 auto;
}
.visible_wrap1000{
width: 1000px;
overflow: hidden;
margin: 0 auto;
}
.corners{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
.corners5{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.btn{
/*height: 67px;*/
display: inline-block;
padding: 0 12px;
text-decoration: none;
color: #FFF;
text-align: center;
text-transform: uppercase;
font: 33px/67px 'Greyscale', arial, sans-serif;
}
.btn_red{
background-color: #e73204;
background-image: -webkit-linear-gradient(bottom, #e73204, #eb4a09);
background-image: -moz-linear-gradient(bottom, #e73204, #eb4a09);
background-image: -ms-linear-gradient(bottom, #e73204, #eb4a09);
background-image: -o-linear-gradient(bottom, #e73204, #eb4a09);
background-image: linear-gradient(bottom, #e73204, #eb4a09);
}
.btn_blue{
background-color: #2d84dd;
background-image: -webkit-linear-gradient(bottom, #2d84dd, #68b3ec);
background-image: -moz-linear-gradient(bottom, #2d84dd, #68b3ec);
background-image: -ms-linear-gradient(bottom, #2d84dd, #68b3ec);
background-image: -o-linear-gradient(bottom, #2d84dd, #68b3ec);
background-image: linear-gradient(bottom, #2d84dd, #68b3ec);
}
.contact_button{
display: inline-block;
background: #3893e4;
padding: 0 11px;
-moz-box-shadow: 0 0 4px #cdddeb;
-webkit-box-shadow: 0 0 4px #cdddeb;
box-shadow: 0 0 4px #cdddeb;
padding-top: 4px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
font: 16px/25px 'Taile', arial, sans-serif;
}
.bg_main1{
background: url("../images/bg_top_block_index.png") repeat-x scroll left bottom #F8F8F8;
}
/****************************************************************************************************************************************** 4.1 from_the_news */
.from_the_news {
overflow: hidden;
background: red;
padding: 0 15px;
}
.from_the_news .news_head{
height: 19px;
display: block;
margin: 42px 0 62px;
background: url('../images/bg_from_the_news_head.png') center top no-repeat;
}
.from_the_news .box_outer {
float: left;
}
.from_the_news .box_outer:nth-child(2){
}
.from_the_news .box {
text-align: center;
}
.from_the_news .box .pic {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: -1px 1px 2px #000000;
margin: 0 0px 25px;
overflow: hidden;
padding: 22px;
display: block;
}
.from_the_news p {
font: 22px/25px 'Greyscale', arial, sans-serif;
color:#3f3b43;
text-align: center;
padding:0;
margin:0 10px 45px 10px
}
.from_the_news .title{
color: #3F3B43;
font-size: 19px;
line-height: 30px;
margin: 0 0 26px;
padding: 0;
text-transform: uppercase;
text-align: center;
font: 700 24px arial,sans-serif;
display: block;
}
.from_the_news .read_more_outer{
margin-bottom: 46px;
}
.from_the_news .read_more_outer a {
text-decoration: none;
color:#e8410b;
font: 20px 'Greyscale', arial, sans-serif;
text-align:center;
display:block;
width: 140px;
padding:12px 10px 11px;
margin:0 auto
}
.from_the_news a:hover {
background: #3f3b43;
}
/***************************************************************************************************************************************** 3.layout responsive */
/* Landscape - телефоны */
@media (max-width: 480px) {
body{
/*background: maroon;*/
}
/* index_page*/
.services ul{
text-align: center;
}
.carousel-control,
.slider_index .carousel-caption{
display: none;
}
.header .nav_top {
text-align: center;
}
.header .nav_top .inner {
display: inline-block;
}
.header .nav_top ul {
float: none;
}
.header .nav_top ul li{
width: 100%;
background: none;
}
.header .nav_top ul li:hover{
border: none;
}
.header .nav_top ul li:last-child a:hover,
.header .nav_top ul li a:hover{
border: none;
top: 0px;
}
.header .nav_top ul li:last-child{
border-top: none;
}
.header .nav_top ul li a{
width: 100%;
background: #fff;
}
.header .nav_top ul li:last-child a{
width: 100%;
background: #3893E4;
}
}
/* От ландшафтного экрана телефона до потретного планшета */
@media (max-width: 767px) {
body{
/*background: lime;*/
}
/* index_page */
.footer_bottom{
text-align: center;
}
.footer_bottom .footer_bottom1 img{
margin: 10px 0;
}
.footer_bottom .footer_bottom3 .contact_button {
float: none;
width: 140px;
margin: 0 auto;
margin-top: 25px;
}
.footer_top .footer_top4 ul{
float: none;
}
.header .logo{
padding: 10px 0;
margin: 0 auto;
}
.from_the_news .box .pic {
display: inline-block;
}
.our_product .buttons{
text-align: center;
}
.our_product .buttons .btnblue{
}
.our_product .picture{
}
.our_product .picture img{
margin: 0 auto;
padding-bottom: 40px;
}
.slider_index .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
left: 21%;
}
.services ul{
text-align: center;
}
.services ul li{
margin: 20px 30px;
}
.slider_index .carousel-caption .text{
width: 250px;
}
.slider_index .carousel-caption .text p{
font: 14px/21px 'Greyscale',arial,sans-serif;
}
.slider_index .carousel-caption .more_button{
font: 23px/47px 'Greyscale',arial,sans-serif;
}
.services_page .services_list .ul > article .picture{
text-align: center;
}
.services_page .services_list .ul > article .picture img{
display: inline-block;
}
.services_page .services_list .ul > article .picture,
.services_page .services_list .ul > article .body {
width: 100%;
padding-bottom: 40px;
}
.header .nav_top {
text-align: center;
}
.header .nav_top .inner {
display: inline-block;
}
.header .nav_top ul {
float: none;
}
}
/* От портретного планшета до ландшафтного экрана и настольных дисплеев */
@media (min-width: 768px) and (max-width: 979px) {
body{
/*background: red;*/
}
/* index_page */
.footer_bottom{
text-align: center;
}
.footer_bottom .footer_bottom1 img{
margin: 10px 0;
}
.footer_bottom .footer_bottom3 .contact_button {
float: none;
width: 140px;
margin: 0 auto;
margin-top: 25px;
}
.footer_top .footer_top4 ul{
float: left;
}
.header .logo{
padding: 10px 0;
margin: 0 auto;
}
.our_product .buttons{
text-align: left;
}
.our_product .buttons .btnblue{
margin-right: 20px;
}
.our_product .picture{
}
.our_product .picture img{
margin: 0 auto;
padding-bottom: 40px;
}
.slider_index .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
left: 26%;
}
.work_index .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
left: 50px;
}
.slider_index .carousel-caption .text{
width: 250px;
}
.slider_index .carousel-caption .text p{
font: 18px/27px 'Greyscale',arial,sans-serif;
}
.slider_index .carousel-caption .more_button{
font: 23px/47px 'Greyscale',arial,sans-serif;
}
.header .nav_top {
text-align: center;
}
.header .nav_top .inner {
display: inline-block;
}
.header .nav_top ul {
float: none;
}
/* */
@media (min-width: 979px) and (max-width: 1200px) {
body{
/*background: cyan;*/
}
/* index_page */
.our_product .buttons{
text-align: left;
}
.our_product .buttons .btnblue{
margin-right: 20px;
}
.our_product .picture{
position: relative;
top: 112px;
}
.our_product .picture img{
margin: 0 auto;
padding-bottom: 40px;
}
.slider_index .carousel-caption .text{
width: 270px;
}
}
/* Большой дисплей */
@media (min-width: 1200px) {
body{
/*background: yellow;*/
}
}
External resources loaded into this fiddle: