Skip to content

Commit

Permalink
Проверяет и подгоняет по PP навигацию и блок преимуществ на мобилке
Browse files Browse the repository at this point in the history
  • Loading branch information
@baranovdmitriy87
baranovdmitriy87 committed Oct 18, 2024
1 parent 6632096 commit d4796d9
Show file tree
Hide file tree
Showing 11 changed files with 196 additions and 47 deletions.
1 change: 1 addition & 0 deletions source/icons/features/clock.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/features/leaf.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/features/lightning.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/features/pocket.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.
52 changes: 35 additions & 17 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,17 @@
<li class="user-menu__item">
<a class="user-menu__link user-menu__enter" href="#">
<span class="user-menu__enter-text user-menu__enter--hidden">Войти</span>
<!-- <svg class="user__icon" width="16" height="30px">
<use xlink:href="icons/header/stack.svg#header_enter"></use>
</svg> -->
</a>
</li>
<li class="user-menu__item">
<a class="user-menu__link user-menu__cart" href="#">
<span class="user-menu__cart-text user-menu__cart--hidden">Корзина</span>
<!-- <svg class="user__icon" width="24" height="19">
<use xlink:href="icons/header/stack.svg#header_cart"></use>
</svg> -->
</a>
</li>
</ul>
Expand Down Expand Up @@ -94,7 +100,7 @@ <h1 class="visually-hidden">Интернет-магазин кофейных н
width="476" height="476">
<img class="slider__img" src="images/cofee-flat-white/[email protected]"
srcset="images/cofee-flat-white/[email protected] 1x, images/cofee-flat-white/[email protected] 2x"
width="240" height="280" loading="lazy" alt="Кофе в бежевой банке Декаф Флэт Уайт">
width="280" height="270" loading="lazy" alt="Кофе в бежевой банке Декаф Флэт Уайт">
</picture>
</div>
<button class="slider-button-prev"></button>
Expand All @@ -120,28 +126,40 @@ <h2 class="slider__title">Декаф Флэт Уайт</h2>
<h2 class="features__title">Главные причины выбрать Drink2Go</h2>
<ul class="features__list">
<li class="features__item">
<h3 class="features__caption">Скорость</h3>
<p class="features__description">
Готовый напиток всегда под рукой — просто открой банку
</p>
<span class="features__icon features__icon--speed"></span>
<!-- <div class="features__grid-tablet"> -->
<h3 class="features__caption">Скорость</h3>
<p class="features__description">
Готовый напиток всегда под рукой — просто открой банку
</p>
<!-- </div> -->
</li>
<li class="features__item">
<h3 class="features__caption">Удобство</h3>
<p class="features__description">
Легко помещается и в карман, и в маленькую сумочку
</p>
<span class="features__icon features__icon--comfort"></span>
<!-- <div class="features__grid-tablet"> -->
<h3 class="features__caption">Удобство</h3>
<p class="features__description">
Легко помещается и в карман, и в маленькую сумочку
</p>
<!-- </div> -->
</li>
<li class="features__item">
<h3 class="features__caption">Бодрость</h3>
<p class="features__description">
Сбалансированная доза кофеина даст мощный заряд энергии
</p>
<span class="features__icon features__icon--energy"></span>
<!-- <div class="features__grid-tablet"> -->
<h3 class="features__caption">Бодрость</h3>
<p class="features__description">
Сбалансированная доза кофеина даст мощный заряд энергии
</p>
<!-- </div> -->
</li>
<li class="features__item">
<h3 class="features__caption">Экологичность</h3>
<p class="features__description">
Вся упаковка сделана из перерабатываемых материалов
</p>
<span class="features__icon features__icon--eco"></span>
<!-- <div class="features__grid-tablet"> -->
<h3 class="features__caption">Экологичность</h3>
<p class="features__description">
Вся упаковка сделана из перерабатываемых материалов
</p>
<!-- </div> -->
</li>
</ul>
</div>
Expand Down
151 changes: 130 additions & 21 deletions source/styles/blocks/features.scss
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,54 @@
.features {}
.features {
// @media (min-width: $desktop-width) {
// width: 1140px;
// padding: 50px 40px;
// }
}

.features__wrapper {
margin: 0 auto;
width: 320px;
padding: 50px 20px;
padding: 58px 20px;
display: flex;
flex-direction: column;

@media (min-width: $tablet-width) {
width: 768px;
}

@media (min-width: $desktop-width) {
width: 1140px;
padding: 50px 40px;
}
}

.features__title {
width: 280px;
height: 72px;
min-width: 280px;
// min-height: 72px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 10;
margin: 0 auto;
margin: 4px auto 0;
color: $base-black;
font-family: $montserrat-medium;
font-size: 24px;
font-weight: 700;
line-height: 36px;
text-align: center;
letter-spacing: 0.41px;

@media (min-width: $tablet-width) {
min-width: 560px;
// height: 120px;
font-size: 38px;
font-weight: 700;
line-height: 60px;
letter-spacing: 0%;
text-align: center;
}

@media (min-width: $desktop-width) {
margin-bottom: 50px;
}

}

.features__subtitle {
Expand All @@ -33,41 +59,108 @@
line-height: 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.51px;
}

.features__list {
@include list-reset;
display: flex;
flex-direction: column;
align-items: center;

@media (min-width: $tablet-width) {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 60px;
}

@media (min-width: $desktop-width) {
align-items: normal;
// display: flex;
// flex-direction: row;
display: grid;
column-gap: 10px;
grid-template-columns:250px 260px 250px 240px;
}

}

.features__item {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;

@media (max-width: $mobile-width-only) {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

@media (min-width: $tablet-width) {
display: flex;
flex-direction: column;
padding: 0 25px 0 73px;
}

@media (min-width: $desktop-width) {
padding: 0;
}
}

.features__caption {
min-width: 75px;
padding: 0 20px;
margin: 10px 0 0;
font-family: $montserrat-bold;
color: $base-black;
font-size: 18px;
font-weight: 700;
line-height: 32px;
text-align: center;
}

.features__span {
margin: 30px 0 0;
@media (max-width: $mobile-width-only) {
min-width: 75px;
// padding: 0 20px;
margin: 10px 0 1px;
text-align: center;
}

@media (min-width: $tablet-width) {
font-size: 24px;
font-weight: 700;
line-height: 36px;
margin: 0;
}

@media (min-width: $desktop-width) {
text-align: center;
}
}

// .features__grid-tablet {
// @media (min-width: $tablet-width) {
// display: flex;
// flex-direction: column;
// align-items: flex-start;
// padding: 0 25px;
// }

// }

.features__icon {
margin: 30px 0 0;


@media (max-width: $mobile-width-only) {
margin: 36px 0 0;
}

@media (min-width: $tablet-width) {
position: absolute;
top: -10px;
left: 0;
margin: 15px 0 0;
}

@media (min-width: $desktop-width) {
top: -70px;
left: 110px;
text-align: center;
}

&--speed::before {
@include features-icon-base-styles;
Expand All @@ -91,11 +184,27 @@
}

.features__description {
margin: 5px auto -5px;
color: $base-black;
font-family: $montserrat-regular;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0%;
text-align: center;

@media (min-width: $tablet-width) {
text-align: start;
}

@media (min-width: $tablet-width) {
font-size: 14px;
line-height: 22px;
}

@media (min-width: $desktop-width) {
text-align: center;
font-size: 12px;
line-height: 22px;
}
}
14 changes: 7 additions & 7 deletions source/styles/blocks/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@media (max-width: $mobile-width-only) {
position: relative;
width: 320px;
padding: 12px 20px;
padding: 0px 20px;
min-height: 60px;
margin: 0 auto;
display: flex;
Expand Down Expand Up @@ -73,7 +73,7 @@
content: "";
width: 24px;
height: 24px;
right: 33px;
right: 20px;
z-index: 2;
background-color: $white;
display: block;
Expand All @@ -93,12 +93,12 @@
.header--closed .js-toggle-button::before {
content: "";
position: absolute;
top: 2px;
right: 0;
width: 24px;
top: 6px;
right: 2px;
width: 16px;
height: 2px;
background-color: $base-black;
box-shadow: 0 8px 0 0 $base-black, 0 16px 0 0 $base-black;
box-shadow: 0 5px 0 0 $base-black, 0 10px 0 0 $base-black;
}

.header--closed .js-toggle-button:active::before {
Expand All @@ -122,7 +122,7 @@
.header--opened .main-nav__wrapper {
width: 100%;
position: absolute;
top: 66px;
top: 60px;
right: 0;
z-index: 10;
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion source/styles/blocks/site-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
text-transform: uppercase;

@media (max-width: $mobile-width-only) {
padding: 23px 0 22px;
padding: 20px 0 ;
outline-offset: unset;
}

Expand Down
9 changes: 9 additions & 0 deletions source/styles/blocks/slider.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
.slider__wrapper {
margin: 0 auto;
width: 320px;
padding: 20px 0 50px;
margin-bottom: 100px;
}

.slider__image-wrapper {
display: flex;
flex-direction: column;
align-items: center;

}
2 changes: 1 addition & 1 deletion source/styles/blocks/user-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

.user-menu__wrapper {
@media (max-width: $mobile-width-only) {
width: 210px;
width: 230px;
}

@media (min-width: $tablet-width) {
Expand Down
Loading

0 comments on commit d4796d9

Please sign in to comment.