Skip to content

Instantly share code, notes, and snippets.

@artemrogov

artemrogov/tabs.html

Created February 14, 2019 11:52
Show Gist options
  • Save artemrogov/a3067132826c2770ac6ae90078061bd5 to your computer and use it in GitHub Desktop.
Save artemrogov/a3067132826c2770ac6ae90078061bd5 to your computer and use it in GitHub Desktop.
Download ZIP
Табы для лендинга
Raw
tabs.html
<div class="container-fluid d-none d-md-block d-sm-none ">
<div class="row">
<div class="col-md-3 col-lg-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-tb1-tab" data-toggle="pill" href="#v-pills-tb1" role="tab" aria-controls="v-pills-tb1" aria-selected="true">Баня 1</a>
<a class="nav-link" id="v-pills-tb2-tab" data-toggle="pill" href="#v-pills-tb2" role="tab" aria-controls="v-pills-tb2" aria-selected="false">Баня 2</a>
<a class="nav-link" id="v-pills-tb3-tab" data-toggle="pill" href="#v-pills-tb3" role="tab" aria-controls="v-pills-tb3" aria-selected="false">Баня 3</a>
</div>
</div>
<div class="col-md-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-tb1" role="tabpanel" aria-labelledby="v-pills-tb1-tab">
<div class ="row">
<div class="col-md-6 col-sm-12 tv">
<h4>Комплектация</h4>
<ul>
<li>Крылечко</li>
<li>Комната отдыха</li>
<li>Парная совмещенная с помывочной</li>
<li>Печь</li>
<li>Электрика</li>
<li>Полная внутренняя отделка</li>
<li>Банная мебель и другое</li>
</ul>
<p>Обычная цена: <span class="old-price">1500 руб.</span></p>
<p>Цена со скидкой:<span class="new-price">1500 руб.</span></p>
<p>Ступеньки и камни в подарок!</p>
<button type="button" class="btn btn-primary button btn-small">Заказать Расчет</button>
</div>
<div class="col-md-6">
<img src="images/big-photo.jpg" alt="big photo" class="img-thumbnail">
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/scheme.jpg" alt="thumbnail" class="img-thumbnail">
</div>
<div class="col-6">
<img src="images/inside.jpg" alt="thumbnail" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-tb2" role="tabpanel" aria-labelledby="v-pills-tb2-tab">
<div class ="row">
<div class="col-md-6 col-sm-12 tv">
<h4>Комплектация</h4>
<ul>
<li>Крылечко</li>
<li>Комната отдыха</li>
<li>Парная совмещенная с помывочной</li>
<li>Печь</li>
<li>Электрика</li>
<li>Полная внутренняя отделка</li>
<li>Банная мебель и другое</li>
</ul>
<p>Обычная цена: <span class="old-price">1500 руб.</span></p>
<p>Цена со скидкой:<span class="new-price">1500 руб.</span></p>
<p>Ступеньки и камни в подарок!</p>
<button type="button" class="btn button btn-small">Заказать Расчет</button>
</div>
<div class="col-md-6">
<img src="images/big-photo.jpg" alt="..." class="img-thumbnail">
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/scheme.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-6">
<img src="images/inside.jpg" alt="..." class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-tb3" role="tabpanel" aria-labelledby="v-pills-tb3-tab">
<div class ="row">
<div class="col-md-6 col-sm-12 tv">
<h4>Комплектация</h4>
<ul>
<li>Крылечко</li>
<li>Комната отдыха</li>
<li>Парная совмещенная с помывочной</li>
<li>Печь</li>
<li>Электрика</li>
<li>Полная внутренняя отделка</li>
<li>Банная мебель и другое</li>
</ul>
<p>Обычная цена: <span class="old-price">1500 руб.</span></p>
<p>Цена со скидкой:<span class="new-price">1500 руб.</span></p>
<p>Ступеньки и камни в подарок!</p>
<button type="button" class="btn btn-primary button btn-small">Заказать Расчет</button>
</div>
<div class="col-md-6">
<img src="images/big-photo.jpg" alt="..." class="img-thumbnail">
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/scheme.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-6">
<img src="images/inside.jpg" alt="..." class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid d-md-none d-lg-none d-xl-none">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Баня размеры #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Баня размеры #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Баня размеры #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment