Skip to content

Commit

Permalink
Правит верстку и стили слайдера
Browse files Browse the repository at this point in the history
  • Loading branch information
@rychagoff
rychagoff committed Jun 17, 2024
1 parent 2f7d7f8 commit 288092a
Show file tree
Hide file tree
Showing 6 changed files with 347 additions and 65 deletions.
1 change: 1 addition & 0 deletions source/icons/arrow-next.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions source/icons/arrow-prev.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
152 changes: 94 additions & 58 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,81 +80,117 @@
<h1 class="visually-hidden">Интернет-магазин по продаже кофейных напитков Drink2Go.</h1>
<div class="hero__wrapper">
<div class="hero__slider slider">

<ul class="slider__list">

<li class="slider__item slider__item--active">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x" width="280" height="280">

<source type="image/jpg" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/jpg" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="280" alt="Напиток Декаф Флэт Уайт." loading="lazy">
</picture>
<h2 class="slider__title title title--lg">Декаф Флэт Уайт</h2>
<p class="slider__description">Свежесваренный кофе без кофеина из Эфиопии с натуральным фермерским молоком — то, что нужно для расслабления после тяжёлого рабочего дня</p>
<div class="slider__action">
<div class="slider__price">
<s class="slider__price-old">295₽</s>
<span class="slider__price-now">225₽</span>
<div class="container">
<div class="slider__item-inner">

<div class="slider__image-wrapper">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x" width="280" height="280">

<source type="image/png" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/png" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="280" alt="Напиток Декаф Флэт Уайт." loading="lazy">
</picture>
</div>

<div class="slider__text-wrapper">
<h2 class="slider__title title title--lg">Декаф Флэт Уайт</h2>
<p class="slider__description">Свежесваренный кофе без кофеина из Эфиопии с натуральным фермерским молоком — то, что нужно для расслабления после тяжёлого рабочего дня</p>
<div class="slider__action">
<div class="slider__price">
<s class="slider__price-old">295₽</s>
<span class="slider__price-now">225₽</span>
</div>
<button class="slider__button button button--accent" type="button">Заказать</button>
</div>
</div>

</div>
<button class="slider__button button button--accent">Заказать</button>
</div>
</li>

<li class="slider__item">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x" width="280" height="280">

<source type="image/jpg" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/jpg" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="280" alt="Напиток Лавандовый Латте." loading="lazy">
</picture>
<h2 class="slider__title title title--lg">Лавандовый Латте</h2>
<p class="slider__description">Невероятное сочетание перуанской высокогорной арабики с молоком ламы и лавандовым сиропом унесёт вас прямо на вершину Радужных гор</p>
<div class="slider__action">
<div class="slider__price">
<s class="slider__price-old">285₽</s>
<span class="slider__price-now">265₽</span>
<div class="container">
<div class="slider__item-inner">

<div class="slider__image-wrapper">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x" width="280" height="280">

<source type="image/jpg" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/jpg" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="280" alt="Напиток Лавандовый Латте." loading="lazy">
</picture>
</div>

<div class="slider__text-wrapper">
<h2 class="slider__title title title--lg">Лавандовый Латте</h2>
<p class="slider__description">Невероятное сочетание перуанской высокогорной арабики с молоком ламы и лавандовым сиропом унесёт вас прямо на вершину Радужных гор</p>
<div class="slider__action">
<div class="slider__price">
<s class="slider__price-old">285₽</s>
<span class="slider__price-now">265₽</span>
</div>
<button class="slider__button button button--accent" type="button">Заказать</button>
</div>
</div>

</div>
<button class="slider__button button button--accent">Заказать</button>
</div>
</li>

<li class="slider__item">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x" width="280" height="280">

<source type="image/jpg" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/jpg" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="280" alt="Напиток Лавандовый Латте." loading="lazy">
</picture>
<h2 class="slider__title title title--lg">Тройной Эспрессо</h2>
<p class="slider__description">Мощнее укола адреналина, чернее самой тёмной ночи, этот тройной эспрессо из Колумбии покажет вам, что такое настоящая бодрость</p>
<div class="slider__action">
<div class="slider__price">
<s class="slider__price-old">395₽</s>
<span class="slider__price-now">375₽</span>
<div class="container">
<div class="slider__item-inner">

<div class="slider__image-wrapper">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="images/[email protected] 1x, images/[email protected] 2x" width="280" height="280">

<source type="image/jpg" media="(min-width: 1440px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="600" height="600">
<source type="image/jpg" media="(min-width: 768px)" srcset="images/[email protected] 1x, images/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="images/[email protected]" srcset="images/[email protected] 2x" width="280" height="280" alt="Напиток Лавандовый Латте." loading="lazy">
</picture>
</div>

<div class="slider__text-wrapper">
<h2 class="slider__title title title--lg">Тройной Эспрессо</h2>
<p class="slider__description">Мощнее укола адреналина, чернее самой тёмной ночи, этот тройной эспрессо из Колумбии покажет вам, что такое настоящая бодрость</p>
<div class="slider__action">
<div class="slider__price">
<s class="slider__price-old">395₽</s>
<span class="slider__price-now">375₽</span>
</div>
<button class="slider__button button button--accent" type="button">Заказать</button>
</div>
</div>

</div>
<button class="slider__button button button--accent">Заказать</button>
</div>
</li>
</ul>

<div class="slider__navigation">
<button class="slider__prev">1</button>
<button class="slider__next">2</button>
</div>
<!-- <div class="slider__navigation">
<span class="slider__nav-button slider__nav-button--prev"></span>
<span class="slider__nav-button slider__nav-button--next"></span>
</div> -->

<button class="slider__nav-button slider__nav-button--prev" type="button"></button>
<button class="slider__nav-button slider__nav-button--next" type="button"></button>

<div class="slider__pagination">
<ul class="pagination-list">
<li class="pagination-list__item pagination-list__item--active"></li>
<li class="pagination-list__item"></li>
<li class="pagination-list__item"></li>
</ul>
<div class="slider__pagination-item slider__pagination-item--active"></div>
<div class="slider__pagination-item"></div>
<div class="slider__pagination-item"></div>
</div>

</div>
Expand Down
1 change: 1 addition & 0 deletions source/styles/blocks/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
color: $base-white;
border: 0;
border-radius: 4px;
cursor: pointer;

&--accent {
background-color: $base-primary;
Expand Down
Loading

0 comments on commit 288092a

Please sign in to comment.