<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-patison navbar-fixed-top animate">
<div class="container navbar-more visible-xs">
<ul class="nav navbar-nav">
<li><a href="tel:+380442332521" style="color: #484848;"> (044) <span style="color: #888">233-25-21</span></li>
<li><a href="tel:+380974857627" style="color: #484848;"> (097) <span style="color: #888">485-76-27</span></a></li>
<li><a href="tel:+380632332521" style="color: #484848;">(063) <span style="color: #888">233-25-21</span></a></li>
<li><a href="tel:+380506136211" style="color: #484848;">(050) <span style="color: #888">613-62-11</span></a></li>
</ul>
</div>
<div class="container">
<!--div class="navbar-header hidden-xs">
<a class="navbar-brand" href="#">Brand</a>
</div-->
<ul class="nav navbar-nav navbar-left hidden-xs">
<li class="hidden-xs">
<a style="color: #999;">
<i class="menu-icon fa fa-clock-o"></i>
БЕЗ ВЫХОДНЫХ C 10:00 ДО 20:00
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right mobile-bar">
<li>
<a href="#">
<span class="menu-icon fa fa-home"></span>
Home
</a>
</li>
<li>
<a href="#">
<span class="menu-icon fa fa-info"></span>
<span class="hidden-xs" style="color: #41ace4;">ДОСТАВКА И ОПЛАТА</span>
<span class="visible-xs">ДОСТАВКА И ОПЛАТА</span>
</a>
</li>
<li class="hidden-xs">
<a href="#" style="color: #41ace4;">
<span class="menu-icon fa fa-ship"></span>
ГАРАНТИИ
</a>
</li>
<li class="hidden-xs">
<a href="#" style="color: #999;">
<span class="menu-icon fa fa-bell-o"></span>
СТАТЬИ
</a>
</li>
<li class="hidden-xs">
<a href="#" style="color: #999;">
<span class="menu-icon fa fa-bell-o"></span>
НОВОСТИ
</a>
</li>
<li class="hidden-xs">
<a href="#">
<span class="menu-icon fa fa-phone"></span>
<span class="hidden-xs" style="color: #41ace4;">КОНТАКТЫ</span>
<!--span class="visible-xs">КОНТАКТЫ</span-->
</a>
</li>
<li class="visible-xs">
<a href="">
<span class="menu-icon fa fa-phone"></span>
КОНТАКТЫ
</a>
</li>
</ul>
</div>
</nav>
<div class="header-patison-with-menu">
<section class="header-patison">
<div class="container-fluid">
<div id="logo" class="col-sm-6 col-md-2 col-xs-5">
<a href="/"><img style="margin-top: -10px;" src="http://patison.ua/data/default/logo-patison.png.pagespeed.ce.6c2ryH3l5w.png" alt="Купить матрас в Интернет магазине ПАТИСОН"></a>
</div>
<div id="phone" class="col-sm-6 col-md-3 col-xs-6 hidden-xs">
<div class="content pull-left">
<span><a href="tel:+380442332521" style="color: #484848;"> (044) <span style="color: #888">233-25-21</span></a></span>
<span><a href="tel:+380974857627" style="color: #484848;"> (097) <span style="color: #888">485-76-27</span></a></span><br>
<span><a href="tel:+380632332521" style="color: #484848;">(063) <span style="color: #888">233-25-21</span></a></span>
<span><a href="tel:+380506136211" style="color: #484848;">(050) <span style="color: #888">613-62-11</span></a></span>
</div>
<div class="pull-left head-users-buttons">
<div class="head-users-button button-callback"><a href="../icon/shopping-cart"><img src="http://patison.ua/data/default/callback-n.png"> <span class="dotted">Заказать звонок</span></a></div>
</div>
</div>
<div id="search" class="col-sm-12 col-md-5 hidden-xs">
<form action="index.php" method="get" name="formpoisk" id="formpoisk">
<div class="input-group input-group-sm">
<input type="text" name="searchstring" class="pform form-control search ac_input" id="targetDiv" value="" placeholder="найдется все : введите название товара" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-lg btn-pat-blue" type="button"><i class="fa fa-search"></i></button>
</span>
</div><!-- /input-group --> </form>
<span style="font-size: 75%;margin: 0px;" class="visible-md-block visible-lg-block">Ортопедические матрасы, подушки, кровати, аксессуары для сна, доставка по Киеву и Украине </span>
</div>
<!-- cart -->
<div class="clearfix col-md-2 col-xs-7 pull-right head-users-buttons">
<div class="col-md-4 col-xs-4 head-users-button button-cart"><a href="../icon/shopping-cart"><img src="http://patison.ua/data/default/cart-n.png"> <span class="dotted">Корзина</span></a></div>
<div class="col-md-4 col-xs-4 head-users-button button-compare"><a href="../icon/refresh"><img src="http://patison.ua/data/default/libra-n.png"> <span class="">Сравнение</span></a></div>
<div class="col-md-4 col-xs-4 head-users-button button-wish"><a href="../icon/heart-o"><img src="http://patison.ua/data/default/wishlist-n.png"> <span class="">Желания</span></a></div>
</div>
<!-- cart -->
</div>
</section>
<section>
<nav class="header-menu-patison">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed header-menu-patison-btn" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span>КАТАЛОГ</span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Матрасы<span class="caret"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Тонкие матрасы<span class="caret"></span></a>
</li>
<li><a href="#">Недорогие матрасы</a></li>
<li><a href="#">Детские матрасы</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Аксессуары<span class="caret"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Кровати<span class="caret"></span></a>
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</section>
</div>
<section>
<div id="index">
<div class="divider divider-line divider-sm"> </div>
<div>
<div class="col-sm-12">
<h1>Купить матрас в интернет магазине Патисон</h1>
<p>Пришло время нового матраса? Добро пожаловать в ПатиСон, ваш онлайн магазин матрасов! Выбор из более чем 1000 различных моделей и вариантов матрасов. Линейки из самых популярных брендов ЕММ, Slee&Fly, DonSon, Matrolux, Evolution, Spice, Latona, Brickle, Come-For, СонЛайн и многие другие, собраны лучшие пружинные матрасы, ортопедические матрасы, латексные, тонкие матрасы и топперы, футоны по самым выгодным ценам. <strong>Купить матрас и интернет магазине</strong> выбрав из широчайшего ассортимента, который соответствует высоким требованиям стандартов качества, изготовленных из высококачественных гипоалергенных материалов, на современном оборудование, созданного профессионалами своего дела. Мы всегда рады нашим клиентам и посетителям, стараемся помочь с выбором матраса, всегда лояльны и идем на встречу покупателю. Стараемя удивить вас низкой ценой на качественные ортопедические матрасы, собрав только лучших и недорогих производителей что-б магазин мог удовлетворить даже самого требовательного клиента.</p>
<p>Мы предлагаем отличный выбор ортопедических матрасов. Мы обещаем Вам лучшие цены , и наивысшую гарантию вашего комфорта.</p>
</div>
<div class="col-sm-4 col-xs-12">
<div style="border: 1px solid #f5f5f5;margin-top: 5px; box-shadow: 0 0 20px -2px rgba(43,50,57,0.18);"><img alt="Бесплатная доставка покупок" class="img-responsive" src="data/banners/baner-free-delivery.jpg.pagespeed.ce.jUK0IMVTYk.jpg" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);"></div>
</div>
<div class="col-sm-4 col-xs-12">
<div style="border: 1px solid #f5f5f5;margin-top: 5px; box-shadow: 0 0 20px -2px rgba(43,50,57,0.18);"><img alt="Наматрасник в подарок" class="img-responsive" src="data/banners/kupi-matras-namatrasnik-v-podarok.jpg.pagespeed.ce.0_6njzyP-a.jpg" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);"></div>
</div>
<div class="col-sm-4 col-xs-12">
<div style="border: 1px solid #f5f5f5;margin-top: 5px; box-shadow: 0 0 20px -2px rgba(43,50,57,0.18);"><img alt="Скидка на ламелевый каркас 40%" class="img-responsive" src="data/banners/kupi-matras-skidka-na-karkas.jpg.pagespeed.ce.qCSHk0tQJp.jpg" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);"></div>
</div>
</div>
<div class="divider divider-line divider-sm"> </div>
<div>
<div class="col-sm-5">
<h2>Выбор размера матраса</h2>
<p>Выбор правильного размера матраса стал проще. Путем усреднения матрас размеры со всей наших брендов, мы приводим все размеры матраса, чтобы помочь вам выбрать тот, который работает для вас . Найти новый матрас , выберите нужный размер.Вы в поисках ортопедического матраса, это прекрасно. Можете, без всяких трудностей, воспользоватся фильтром по размерам, вам всего лишь нужно поставить галочку напротив необходимого вам размера, автоматически срабатывает поисковая система фильтрации и отображаются только модели с необходимым вам размером. Выбор правильного размера матраса стал проще. Также в нашем фильтре присутствуют дополнительный функции дающие возможность отобрать матрас с определенным наполнителем, выбрать высоту, рейтинг комфорта, ткань матраса и даже максимальную допустимую нагрузку.
</p>
</div>
<div class="col-sm-7">
<div class="mattSize">
<h3>Используйте фильт для поиска</h3>
<a href="/matrasy/" class="filter"></a>
<br class="clearZero">
</div>
</div>
</div>
<div class="divider divider-line divider-sm"> </div>
<div>
<div class="col-sm-5">
<h2>Аксессуары к ортопедическим матрасам</h2>
<p>Вы можете также приобрести аксессуары для вашего матраса и спального места, под матрас используют ортопедическое основание с деревянными ламелями, он усиливает ортопедические эффект вашего качественного матраса распределяя нагрузку. Также приобретайте защиту от внешнего повреждения или потертостей матраса - качественный наматрасник возьмет все на себя, его с легкостью можно снять постирать или заменить при необходимости а ваш ортопедический матрас будет всегда чистым. В разделе аксессуары вы также найдете кровати, подушки и одеяла на любой вкус с необходимыми размерами.</p>
</div>
<div class="col-sm-7">
<div class="mattAccessories">
<h3>Сопутствующие товары</h3>
<a href="/karkasy/" class="frames"></a>
<a href="/namatrasniki/" class="protectors"></a>
<a href="/krovati/" class="bedding"></a>
<a href="/podushki/" class="pillows"></a>
<br class="clearZero">
</div>
<br class="clearZero">
<div class="warrantyGuarantee"><span class="warranty">*Реккомендованно для матрасов</span> <span class="guarantee">+Дополнительный комфорт</span></div>
</div>
</div>
<div>
<div class="divider divider-line divider-sm"> </div>
<div class="col-sm-12">
<h2>Покупая матрас в Киеве <small>Днепропетровске, Сумах, Белой Церкви, Николаеве, Черкассах, Житомире.</small></h2>
<p>Вы заботитесь о здоровом и качественном сне для себя и своих близких, подготавливаете прочный фундамент в укреплении здоровья и иммунитета. Ведь люди, которые страдают от хронической усталости, более остро реагируют на стресс, а при продолжительных атаках стрессовых ситуаций, моментально заболевают. Люди, которые постоянно недосыпают, чаще подвержены простудным и вирусным заболеваниям. Потому качественный отдых и сон так же важны, как здоровое питание и занятия спортом.</p>
</div>
<div class="col-sm-12">
<img alt="Матрас купить в Киеве" class="img-responsive" src="data/banners/kupit-matras-kiev.jpg.pagespeed.ce.QI1792n-Qn.jpg" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">
</div>
<div class="divider divider-line divider-sm"> </div>
</div>
</div>
</section>
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
@media (min-width:768px) {
.header-patison-with-menu {
border-bottom: 1px solid #c3c3c3;
/* box-shadow: 0 0 0 2px #e1e1e1, 0 2px 5px 0 #f5f5f6; */
position: relative;
background: -webkit-linear-gradient(top, #fff, #fff 65%, #f3f3f3);
background: -ms-linear-gradient(top, #fff, #fff 65%, #f3f3f3);
background: -moz-linear-gradient(top, #fff, #fff 65%, #f3f3f3);
background: linear-gradient('to bottom', #fff, #fff 65%, #f3f3f3);
z-index: 69;
}
.header-menu-patison {
/* background-color: #0099cc;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); */
}
.header-menu-patison .navbar-nav>li>a {
/* text-shadow: 1px 1px 1px #0060b3;
color: #fff; */
text-transform: uppercase;
font-weight: 500;
font-size: 13px;
padding-top: 10px;
padding-bottom: 10px;
}
.header-menu-patison .navbar-nav>li>a:hover, .header-menu-patison .navbar-nav>li>a:focus {
text-decoration: none;
background-color: transparent;
font-weight: 500;
}
}
.header-menu-patison-btn {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
float: left;
font-size: 22px;
font-weight: 400;
letter-spacing: 4px;
line-height: 28px;
margin: 13px 13px 12px 40px;
opacity: 1;
padding: 8px 40px;
position: relative;
text-transform: uppercase;
-webkit-transition: box-shadow .2s;
transition: box-shadow .2s;
z-index: 60;
background: #0099cc;
color: #fff;
}
.header-menu-patison-btn:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}
.header-menu-patison-btn:focus {
/* background: rgba(63, 81, 181, 0.1); */
outline: 0;
}
@media (min-width:768px) {
.navbar-patison {
background: #fff;
}
.navbar-patison .navbar-nav>li>a {
padding-top: 3px;
padding-bottom: 3px;
}
.navbar-patison .navbar-nav>li>a {
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
}
.navbar-patison .navbar-nav>li>a:hover {
color: #fff;
}
body {
padding-top: 40px;
font: 14px/24px Roboto, sans-serif;
}
}
@media (max-width:768px) {
.navbar-patison {
background: #fff;
border-bottom: 1px solid #0099cc;
}
body {
padding-top: 80px;
}
}
.navbar-patison {
/* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07); */
box-sizing: border-box;
}
html, body {
height: 100%;
}
body.navbar-more-show {
overflow: hidden;
}
.animate {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar {
height: calc(100%);
max-height: 300px;
-webkit-transform: translate(0px, calc(-100% + 69px));
transform: translate(0px, calc(-100% + 69px));
min-height: 25px;
}
.navbar .container:not(.navbar-more) {
padding: 0px;
}
.navbar-more-overlay {
background-color: rgba(102, 102, 102, 0.55);
display: none;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1029;
}
.navbar-more-show > .navbar-more-overlay {
display: block;
}
.navbar-more-show > .navbar {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.navbar-nav.mobile-bar {
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
margin: 0px 0px;
}
.navbar-nav.mobile-bar > li {
-webkit-flex-grow: 1;
flex-grow: 1;
text-align: center;
}
.navbar-nav.mobile-bar > li > a > span.menu-icon {
display: block;
font-size: 1.8em;
}
.navbar-more {
background-color: rgb(255, 255, 255);
height: calc(100% - 69px);
overflow: auto;
}
.navbar-more .navbar-form {
border-width: 0px;
}
.navbar-more .navbar-nav > li > a {
color: rgb(64, 64, 64);
}
.navbar-more > .navbar-nav > li > a > span.menu-icon {
margin-left: 10px;
margin-right: 10px;
}
.head-users-button {
text-align: center;
font-size: 10px;
line-height: 14px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: right;
min-height: 4.61538em;
position: relative;
border: 1px solid transparent;
padding: 0 10px;
}
.head-users-button:hover {
border-color: #f89a99;
border-radius: 3px;
text-decoration: none;
}
.head-users-button a{
color: #41ace4;
}
.head-users-button span {
display: block;
}
.button-compare, .button-cart, .button-wish, .button-callback {
border-left: 1px solid #eaeaea;
}
.button-callback {
margin-left: 25px;
}
.head-users-button i {
font-size: 32px;
}
.dotted {
text-decoration: none;
border-bottom: 1px dotted;
}
.head-users-button a:hover {
text-decoration: none;
}
@media (min-width: 768px) {
.navbar {
height: auto;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.navbar-nav.mobile-bar {
display: block;
max-height: 64px;
margin: 0px -15px;
}
.navbar-nav.mobile-bar > li > a > span.menu-icon {
display: none;
}
}
$(document).ready(function() {
$('a[href="#navbar-more-show"], .navbar-more-overlay').on('click', function(event) {
event.preventDefault();
$('body').toggleClass('navbar-more-show');
if ($('body').hasClass('navbar-more-show')) {
$('a[href="#navbar-more-show"]').closest('li').addClass('active');
}else{
$('a[href="#navbar-more-show"]').closest('li').removeClass('active');
}
return false;
});
});
