Question

Нужен информер из шаблона #1812.

Я перенесла html часть, но не знаю, что копировать из CSS. 

Буду признательна за помощь.

Answer 1

Шаблон:

<div class="land-block4">

<div class="wrapper">

<div class="control-button">

<a class="but-select" href="#iPhone-price">iPhone</a>

<a href="#iPad-price">iPad</a>

<a href="#Macbook-price">Macbook</a>

</div>

<div class="owl-three owl-carousel owl-theme">

<div class="item" data-hash="iPhone-price">

<ul class="price-list-device">

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

</ul>

 

</div>

<div class="item" data-hash="iPad-price">

<ul class="price-list-device">

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

</ul>

</div>

<div class="item" data-hash="Macbook-price">

<ul class="price-list-device">

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span

class="price-dv">100 usd</span></p></li>

</ul>

</div>

</div>

</div>

</div>

Comments

Стили:

.land-block4 .wrapper{padding:100px 20px 70px}
.control-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
.control-button>a{background-color:#fff;border:2px solid #067ab5;border-right:none;color:#444;border-radius:initial}
.control-button>a.but-select{background-color:#067ab5;color:#fff;pointer-events:none;cursor:default}
.control-button>a:first-child{border-top-left-radius:30px;border-bottom-left-radius:30px}
.control-button>a:last-child{border-top-right-radius:30px;border-bottom-right-radius:30px;border-right:2px solid #067ab5}
.control-button>a:active{background-color:#fff;color:#333}
.owl-two{background-color:#f3e7db;width:100%;overflow:hidden}
.owl-two.owl-carousel{height:543px}
.owl-two .item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:543px}
.owl-two .owl-item img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.owl-two .left-itm{width:41%;padding:0 140px 0 78px}
.owl-two .right-itm{width:59%}
.owl-three.owl-carousel{height:auto}
.owl-three .item{height:auto;padding:13px;-ms-flex-pack:center;justify-content:center}
.owl-carousel{height:753px;display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}
.owl-navi{transition:all .3s ease-in;position:absolute;top:94%;left:50%;transform:translateY(-80%) translateX(-50%)}
.item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:753px}
.owl-one .left-itm,.owl-one .right-itm{width:50%}
.owl-one .left-itm{padding:100px}
.left-itm h2{color:#333;font-family:Comfortaa;font-size:40px;font-weight:400;line-height:55px}
.left-itm p{font-size:18px}
.owl-carousel .owl-navi button.owl-next,.owl-carousel .owl-navi button.owl-prev,.owl-carousel button.owl-dot{position:absolute;top:50%;display:-ms-flexbox;display:flex;width:38px;height:38px;transform:translateY(-50%);color:#000;background-color:#ffffffe6;border-radius:50%;border:1px solid #000;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}
button.owl-prev{right:10px}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden;margin:0;padding:0}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translateZ(0)}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}
.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:none;color:inherit;border:none;padding:0!important;font:inherit}
.owl-carousel.owl-loaded{display:block}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.no-js .owl-carousel{display:block}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:a}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-one .owl-item img{display:block;width:100%;height:100%;-o-object-fit:scale-down;object-fit:scale-down;-o-object-position:bottom;object-position:bottom}
.owl-one .owl-item img.first-img{position:relative;right:0;-o-object-position:right;object-position:right}

.price-list-device li{padding:27px 20px 25px;border-bottom:2px solid #e6e6e6;color:#444;font-size:16px;line-height:29px}
.price-list-device li span{padding-left:101px;font-size:17px;line-height:32px}
.price-list-device li{padding:0}

---

Yuri_Geruk,

Спасибо!  Но, похоже, что-то конфликтует, потому что получилось так:  http://my-income.ru/  (под первой картинкой)