<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
jQuery(function(){
var s = jQuery('.offers_title.popupsts'), b = jQuery('.offers_title').not('.popupsts');
s.each(function(indx, element){
jQuery(this).click(function() {
b.eq(indx).click()
})
});
});
</script>
<script src="script.js"></script>
</head>
<body>
<div id="wrapper">
<dl class="tab_offers">
<dt class="offers_title popupsts" popup_info="popup_offers" attr="1">
<span class="picture"></span>
<strong>Удобная доставка</strong>
</dt>
<dt class="offers_title popupsts" popup_info="popup_offers" attr="2">
<span class="picture"></span>
<strong>Удобные способы оплаты</strong>
</dt>
<dt class="offers_title popupsts" popup_info="popup_offers" attr="3">
<span class="picture"></span>
<strong>Гарантия до 18 месяцев</strong>
</dt>
<dt class="offers_title popupsts" popup_info="popup_offers" attr="4">
<span class="picture"></span>
</dt>
</dl>
</div>
<div class="popup" id="popup_offers">
<span class="close">×</span>
<div class="wrap">
<dl class="tab_offers">
<dt class="offers_title" attr="1">
<span class="picture"></span>
<strong>Удобная доставка</strong>
<ul>
<li>Самовывоз — бесплатно</li>
<li>Курьером</li>
<li>Транспортной компанией</li>
</ul>
</dt>
<dd class="offers_content">
<div class="delivery_block">
<b>Удобная доставка</b>
<div class="text_holder">
<h3>Доставка курьером в Минске</h3>
</div>
</div>
</dd>
<dt class="offers_title" attr="2">
<span class="picture"></span>
<strong>Удобные способы оплаты</strong>
<ul>
<li>Оплата наличными</li>
<li>Наложенный платеж</li>
<li>Безналичный платеж</li>
</ul>
</dt>
<dd class="offers_content">
<div class="payment_block">
<b>Удобные способы оплаты</b>
<div class="text_holder">
<h3>Оплата наличными</h3>
<p>Осуществляется наличными курьеру при получении заказа либо при самовывозе.</p>
<h3>Безналичный расчёт (только для юридических лиц)</h3>
<p>Товар будет отгружен в течение 1-2 дней после поступления денег на наш счет. Вы ускорите обработку заказа, подтвердив платеж по телефону или по электронной почте. Постоянным клиентам заказ может быть отправлен до зачисления денег на наш счет.</p>
<h3>Оплата при отправке наложенным платежом</h3>
<p>Осуществляется при получении товара в ближайшем отделении "БелПочты".</p>
</div>
</div>
</dd>
<dt class="offers_title" attr="3">
<span class="picture"></span>
<strong>Гарантия до 18 месяцев</strong>
<ul>
<li>От 12 месяцев официальной гарантии производителя</li>
<li>Обмен/возврат товара в течение 14 дней</li>
</ul>
</dt>
<dd class="offers_content">
<div class="garantia_block">
<b>Гарантия</b>
</div>
</dd>
<dt class="offers_title" attr="4">
<span class="picture"></span>
</dt>
<dd class="offers_content">
<div class="service_block">
<b>Бесплатная установка СНПЧ и ПЗК</b>
<div class="text_holder">
<p>Сразу после установки наши специалисты проводят все необходимые тестирования. С первого дня использования Вы будете уверены: наши изделия работают корректно и надежно!</p>
</div>
</div>
</dd>
</dl>
</div>
</div>
</body>
</html>
// Code goes here
$(document).ready(function(){
$('#popup_offers .offers_content:not(:first)').hide();
$('#popup_offers .offers_title').on('click', function() {
$('#popup_offers .offers_content').hide();
$(this).next().show().prev().addClass('active').siblings().removeClass('active');
});
});
/* Styles go here */
#popup_offers .wrap{
margin: 0;
width: 1170px;
height: 700px;
}
.delivery_block,
.payment_block,
.garantia_block,
.service_block{
padding: 40px 85px 0 85px;
width: 1170px;
height: 410px;
overflow: hidden;
background: url(../images/car-bg.png) 40px 40px no-repeat;
}
.garantia_block,
.service_block{
padding: 90px 85px 0 85px;
}
.payment_block{
background: url(../images/card-bg.png) 40px 40px no-repeat;
}
.garantia_block{
background: url(../images/garant-bg.png) 40px 40px no-repeat;
}
.service_block{
background: url(../images/service-bg.png) 40px 40px no-repeat;
}
.offers_content b{
font-size: 1.15em;
font-family: 'HelveticaNeueCyr-Bold';
color: #ea5f50;
line-height: 2em;
}
.offers_content .payment_block b{
color: #00b3ce;
}
.offers_content .garantia_block b{
color: #0d508f;
line-height: 3em;
}
.offers_content .service_block b{
color: #ffc521;
line-height: 3em;
}
.text_holder h3{
color: #444b4e;
font-size: 1em;
line-height: 1.5em;
font-family: 'HelveticaNeueCyr-Medium';
}
.popup .text_holder p{
color: #444b4e;
width: 100%;
margin-bottom: 5px;
}
.text_holder ul{
margin: 0 0 10px 20px;
}
.text_holder li{
list-style-type: disc;
font-family: 'HelveticaNeueCyr-Light';
color: #444b4e;
margin-bottom: 5px;
}
.tab_offers{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0 0 50px;
}
#popup_offers .tab_offers{
padding-top: 410px;
margin: 0;
}
.offers_title{
float: left;
cursor: pointer;
height: 290px;
width: 20%;
border-top: 7px solid #ea5f50;
text-align: center;
position: relative;
}
.offers_title:nth-of-type(odd){
background: #fafafa;
}
.offers_title:nth-of-type(even){
background: #f7f7f7;
}
.offers_title:nth-of-type(2){
border-color: #00b3ce;
}
.offers_title:nth-of-type(3){
border-color: #0a3b6a;
}
.offers_title:nth-of-type(4){
border-color: #ffc521;
}
.offers_title:hover{
border-color: #ff6857;
}
.offers_title:nth-of-type(2):hover{
border-color: #00cceb;
}
.offers_title:nth-of-type(3):hover{
border-color: #0d508f;
}
.offers_title:nth-of-type(4):hover{
border-color: #ffd21c;
}
.offers_title.active:after,
.offers_title:nth-of-type(2).active:after,
.offers_title:nth-of-type(3).active:after,
.offers_title:nth-of-type(4).active:after{
display: block;
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 5px solid #ea5f50;
top: -12px;
left: 50%;
margin-left: -7px;
}
.offers_title:nth-of-type(2).active:after{
border-bottom: 5px solid #00b3ce;
}
.offers_title:nth-of-type(3).active:after{
border-bottom: 5px solid #0a3b6a;
}
.offers_title:nth-of-type(4).active:after{
border-bottom: 5px solid #ffc521;
}
.offers_title .picture{
width: 80px;
height: 80px;
margin: 28px auto;
background: #ea5f50 url(../images/sprite_product.png) 16px -645px no-repeat;
}
.offers_title:nth-of-type(2) .picture{
background: #00b3ce url(../images/sprite_product.png) 12px -715px no-repeat;
}
.offers_title:nth-of-type(3) .picture{
background: #0a3b6a url(../images/sprite_product.png) 22px -794px no-repeat;
}
.offers_title:nth-of-type(4) .picture{
background: #ffc521 url(../images/sprite_product.png) 22px -873px no-repeat;
}
.offers_title:hover .picture{
background: #ff6857 url(../images/sprite_product.png) 16px -645px no-repeat;
}
.offers_title:nth-of-type(2):hover .picture{
background: #00cceb url(../images/sprite_product.png) 12px -715px no-repeat;
}
.offers_title:nth-of-type(3):hover .picture{
background: #0d508f url(../images/sprite_product.png) 22px -794px no-repeat;
}
.offers_title:nth-of-type(4):hover .picture{
background: #ffd21c url(../images/sprite_product.png) 22px -873px no-repeat;
}
.offers_title strong{
width: 100%;
display: block;
font-size: 1.15em;
height: 36px;
line-height: 36px;
max-height: 36px;
color: #ea5f50;
text-transform: uppercase;
margin-bottom: 15px;
}
.offers_title:nth-of-type(2) strong{
color: #00b3ce;
}
.offers_title:nth-of-type(3) strong{
color: #0a3b6a;
}
.offers_title:nth-of-type(4) strong{
color: #ffc521;
width: 80%;
line-height: 1.2em;
margin: 0 auto 15px;
}
.offers_title ul{
width: 100%;
list-style-type: disc;
width: 100%;
max-height: 82px;
overflow: hidden;
}
.offers_title ul li{
margin: 0 0 0 23%;
width: 70%;
text-align: left;
color: #444b4e;
position: relative;
}
.offers_title span{
color: #444b4e;
display: inline-block;
width: 70%;
margin: 0 auto;
max-height: 82px;
overflow: hidden;
line-height: inherit;
}
.offers_content{
float: right;
width: 100%;
margin: -410px 0 0 -100%;
}