Skip to content

Commit

Permalink
hero- conteiner
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ayronhayd
Ayronhayd committed Aug 18, 2024
1 parent 85eb219 commit 123fd45
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 102 deletions.
185 changes: 92 additions & 93 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
aria-current="page" alt="Логотип Шаблоны.">

<div class="header__menu menu">
<!-- через input легче и больше плюсов чем через button и js не нужен -->
<input class="menu__burger-checkbox visually-hidden" type="checkbox" name="burger" id="burger-checkbox">
<label class="header__burger menu__burger" aria-label="меню" for="burger-checkbox"></label>

Expand Down Expand Up @@ -59,113 +60,111 @@ <h2 class="visually-hidden">Горячие путевки.</h2>

<li class="hero__slide swiper-slide">

<div class="hero__img-content">
<picture>
<source type="image/webp" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v1.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v1.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="320" height="568"
srcset="./img/hero/mobile-v1.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v1.jpg 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v1.jpg 1x, ./img/hero/[email protected] 2x">
<img class="hero__img" src="./img/hero/mobile-v1.jpg" srcset="./img/hero/[email protected]" width="320"
height="568" alt="Захватывающие вершины Кавказа.">
</picture>
<div class="hero__conteiner">
<div class="hero__img-content">
<picture>
<source type="image/webp" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v1.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v1.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="320" height="568"
srcset="./img/hero/mobile-v1.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v1.jpg 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v1.jpg 1x, ./img/hero/[email protected] 2x">
<img class="hero__img" src="./img/hero/mobile-v1.jpg" srcset="./img/hero/[email protected]" width="320"
height="568" alt="Захватывающие вершины Кавказа.">
</picture>
</div>
<h3>Захватывающие вершины Кавказа</h3>
<p>В&nbsp;сопровождении опытных гидов
вы&nbsp;пройдёте через потрясающие
ландшафты и&nbsp;совершите восход
на&nbsp;вершину горы Чегет.</p>
<a class="hero__button button" href="#">Смотреть тур</a>
<ul class="hero__info-list">
<li class="hero__info-item hero__duration">6 дней/5 ночей</li>
<li class="hero__info-item hero__problem">Высокая сложность</li>
</ul>
</div>

<h3>Захватывающие вершины Кавказа</h3>
<p>В&nbsp;сопровождении опытных гидов
вы&nbsp;пройдёте через потрясающие
ландшафты и&nbsp;совершите восход
на&nbsp;вершину горы Чегет.</p>
<a class="hero__button button" href="#">Смотреть тур</a>
<ul class="hero__info-list">
<li class="hero__info-item hero__duration">6 дней/5 ночей</li>
<li class="hero__info-item hero__problem">Высокая сложность</li>
</ul>
</li>

<li class="hero__slide swiper-slide hero__slide--card">

<div class="hero__img-content">
<picture>
<source type="image/webp" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v2.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v2.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="320" height="568"
srcset="./img/hero/mobile-v2.webp 1x, ./img/hero/[email protected] 2x">

<source type="image/jpeg" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v2.jpg 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v2.jpg 1x, ./img/hero/[email protected] 2x">
<img class="hero__img hero__img--absolute" src="./img/hero/mobile-v2.jpg"
srcset="./img/hero/[email protected]" width="320" height="568" alt="Захватывающие вершины Кавказа.">
</picture>
</div>

<h3>Невероятная природа Камчатки</h3>
<p>Незабываемое приключение, во время которого вы отправитесь в путешествие по одному из самых нетронутых
уголков дикой природы в мире.</p>
<a class="hero__button button" href="#">Смотреть тур</a>
<div class="hero__info-list">
<div class="hero__info-item hero__duration">9 дней/10 ночей</div>
<div class="hero__info-item hero__problem">Средняя сложность</div>
</div>

<div class="hero__img-card-wrapper">

<div class="hero__img-card-1">
<div class="hero__conteiner">
<div class="hero__img-content">
<picture>
<source type="image/png" width="266" height="351"
srcset="./img/hero/photo-1.webp 1x, ./img/hero/[email protected] 2x">
<img class="hero__img-1" src="./img/hero/photo-1.png" srcset="./img/hero/[email protected]" width="266"
height="351" alt="Озеро.">
<source type="image/webp" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v2.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v2.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="320" height="568"
srcset="./img/hero/mobile-v2.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v2.jpg 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v2.jpg 1x, ./img/hero/[email protected] 2x">
<img class="hero__img hero__img--absolute" src="./img/hero/mobile-v2.jpg"
srcset="./img/hero/[email protected]" width="320" height="568" alt="Захватывающие вершины Кавказа.">
</picture>
</div>

<div class="hero__img-card-2">
<picture>
<source type="image/png" width="236" height="312"
srcset="./img/hero/photo-2.webp 1x, ./img/hero/[email protected] 2x">
<img class="hero__img-2" src="./img/hero/photo-2.png" srcset="./img/hero/[email protected]" width="236"
height="312" alt="Фото человек на Кавказкой горе.">
</picture>
<h3>Невероятная природа Камчатки</h3>
<p>Незабываемое приключение, во время которого вы отправитесь в путешествие по одному из самых нетронутых
уголков дикой природы в мире.</p>
<a class="hero__button button" href="#">Смотреть тур</a>
<div class="hero__info-list">
<div class="hero__info-item hero__duration">9 дней/10 ночей</div>
<div class="hero__info-item hero__problem">Средняя сложность</div>
</div>
<div class="hero__img-card-wrapper">
<div class="hero__img-card-1">
<picture>
<source type="image/png" width="266" height="351"
srcset="./img/hero/photo-1.webp 1x, ./img/hero/[email protected] 2x">
<img class="hero__img-1" src="./img/hero/photo-1.png" srcset="./img/hero/[email protected]" width="266"
height="351" alt="Озеро.">
</picture>
</div>
<div class="hero__img-card-2">
<picture>
<source type="image/png" width="236" height="312"
srcset="./img/hero/photo-2.webp 1x, ./img/hero/[email protected] 2x">
<img class="hero__img-2" src="./img/hero/photo-2.png" srcset="./img/hero/[email protected]" width="236"
height="312" alt="Фото человек на Кавказкой горе.">
</picture>
</div>
</div>

</div>
</li>

<li class="hero__slide swiper-slide">

<div class="hero__img-content">
<picture>
<source type="image/webp" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v3.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v3.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="320" height="568"
srcset="./img/hero/mobile-v3.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v3.jpg 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v3.jpg 1x, ./img/hero/[email protected] 2x">
<img class="hero__img" src="./img/hero/mobile-v3.jpg" srcset="./img/hero/[email protected]" width="320"
height="568" alt="Захватывающие вершины Кавказа.">
</picture>
</div>

<h3>Магические пейзажи Алтайского Края</h3>
<p>Алтайский трекинг-тур — это захватывающее приключение с посещением магических и захватывающих
дух ландшафтов Алтайских гор.</p>
<a class="hero__button button" href="#">Смотреть тур</a>
<div class="hero__info-list">
<div class="hero__info-item hero__duration">8 дней/7 ночей</div>
<div class="hero__info-item hero__problem">Лёгкая сложность</div>
<div class="hero__conteiner">
<div class="hero__img-content">
<picture>
<source type="image/webp" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v3.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v3.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/webp" width="320" height="568"
srcset="./img/hero/mobile-v3.webp 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="1440" height="800" media="(min-width: 1440px)"
srcset="./img/hero/desktop-v3.jpg 1x, ./img/hero/[email protected] 2x">
<source type="image/jpeg" width="768" height="1034" media="(min-width: 768px)"
srcset="./img/hero/tablet-v3.jpg 1x, ./img/hero/[email protected] 2x">
<img class="hero__img" src="./img/hero/mobile-v3.jpg" srcset="./img/hero/[email protected]" width="320"
height="568" alt="Захватывающие вершины Кавказа.">
</picture>
</div>
<h3>Магические пейзажи Алтайского Края</h3>
<p>Алтайский трекинг-тур — это захватывающее приключение с посещением магических и захватывающих
дух ландшафтов Алтайских гор.</p>
<a class="hero__button button" href="#">Смотреть тур</a>
<div class="hero__info-list">
<div class="hero__info-item hero__duration">8 дней/7 ночей</div>
<div class="hero__info-item hero__problem">Лёгкая сложность</div>
</div>
</div>
</li>

Expand Down
27 changes: 18 additions & 9 deletions source/sass/blocks/hero.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
.hero__wrapper {
list-style: none;
margin: 0;
padding: 0;
}

.hero__swiper {
position: relative;
}

.hero__img {
width: 100%;
display: block;
Expand All @@ -11,14 +21,12 @@
width: 100%;
}

.hero__wrapper {
list-style: none;
margin: 0;
padding: 0;
position: relative;
.hero__conteiner {
width: 100%;
max-width: 1440px;
margin: 0 auto;
}


.hero__slide {
background-color: $bg-header;
text-align: center;
Expand All @@ -35,7 +43,6 @@

@media (min-width: $desktop-width) {
padding: 200px 120px 80px;
margin: 0 auto;
}

h3 {
Expand Down Expand Up @@ -105,7 +112,8 @@
}

@media (min-width: $desktop-width) {
left: calc(88% - 51px);
left: 50%;
transform: translateX(459%);
bottom: 92px;
}
}
Expand All @@ -122,7 +130,8 @@

@media (min-width: $desktop-width) {
bottom: calc(19% - 4px);
left: calc(63% + 3px);
left: 50%;
transform: translateX(calc(49% - 11px));
}
}

Expand Down

0 comments on commit 123fd45

Please sign in to comment.