Skip to content

Commit

Permalink
Делает футер
Browse files Browse the repository at this point in the history
  • Loading branch information
baranovdmitriy87 committed Oct 21, 2024
1 parent 08573b5 commit 4f7261f
Show file tree
Hide file tree
Showing 122 changed files with 2,400 additions and 375 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
489 changes: 489 additions & 0 deletions backstop_data/bitmaps_test/20241021-210755/report.json

Large diffs are not rendered by default.

489 changes: 489 additions & 0 deletions backstop_data/bitmaps_test/20241021-211221/report.json

Large diffs are not rendered by default.

489 changes: 489 additions & 0 deletions backstop_data/bitmaps_test/20241021-213156/report.json

Large diffs are not rendered by default.

207 changes: 93 additions & 114 deletions backstop_data/html_report/config.js

Large diffs are not rendered by default.

243 changes: 111 additions & 132 deletions backstop_data/json_report/jsonReport.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions source/icons/social/ok.svg
1 change: 1 addition & 0 deletions source/icons/social/pinterest.svg
1 change: 1 addition & 0 deletions source/icons/social/vk.svg
118 changes: 104 additions & 14 deletions source/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
alt="Логотип интернет-магазина drink2go">
</picture>
</a>
<span class="header__text-title-desktop header__text-title-desktop--hidden">Интернет-магазин
<span class="header__slogan-desktop header__slogan-desktop--hidden">Интернет-магазин
кофейных напитков
</span>
</div>
Expand Down Expand Up @@ -69,12 +69,11 @@
</ul>
</div>
</div>
</div>
</header>

<main class="main-container">
<!--slider-->
<section class="slider" data-test="slider">
<!-- <section class="slider" data-test="slider">
<h1 class="visually-hidden">Интернет-магазин кофейных напитков drink2go</h1>
<div class="slider__wrapper">
Expand Down Expand Up @@ -112,7 +111,7 @@ <h2 class="slider__title">Декаф Флэт Уайт</h2>
Заказать
</a>
</div>
</section>
</section> -->

<!--features-->
<section class="features" data-test="features">
Expand All @@ -122,39 +121,31 @@ <h2 class="features__title">Главные причины выбрать Drink2G
<ul class="features__list">
<li class="features__item">
<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">
<span class="features__icon features__icon--comfort"></span>
<!-- <div class="features__grid-tablet"> -->
<h3 class="features__caption">Удобство</h3>
<p class="features__description">
Легко помещается и в карман,</br> и в маленькую сумочку
Легко помещается и в карман,<br> и в маленькую сумочку
</p>
<!-- </div> -->
</li>
<li class="features__item">
<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">
<span class="features__icon features__icon--eco"></span>
<!-- <div class="features__grid-tablet"> -->
<h3 class="features__caption">Экологичность</h3>
<p class="features__description">
Вся упаковка сделана </br> из перерабатываемых материалов
Вся упаковка сделана <br> из перерабатываемых материалов
</p>
<!-- </div> -->
</li>
</ul>
</div>
Expand All @@ -172,7 +163,106 @@ <h2 class="catalog__title">Каталог кофейных напитков</h2>

</main>
<footer class="footer">
<div class="footer__inner container">
<div class="footer__wrapper">
<a class="footer__logo" href="#">
<picture>
<source media="(min-width: 1440px)" width="170" height="36" srcset="images/logo-desktop.svg">
<source media="(min-width: 768px)" width="82" height="36" srcset="images/logo-tablet.svg">
<img src="images/logo-mobile.svg" width="32" height="36" loading="lazy"
alt="Логотип интернет-магазина drink2go">
</picture>
</a>
<p class="footer__slogan">Интернет-магазин кофейных напитков</p>
<ul class="social-list">
<li class="social-list__item">
<a class="social-list__link" href="#">
<span class="visually-hidden">Вконтакте</span>
<svg class="social-list__link-icon" width="20" height="20">
<use xlink:href="#social_vk"></use>
</svg>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="#">
<span class="visually-hidden">Pinterest</span>
<svg class="social-list__link-icon" width="22" height="22">
<use xlink:href="#social_pinterest"></use>
</svg>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="#">
<span class="visually-hidden">Одноклассники</span>
<svg class="social-list__link-icon" width="20" height="20">
<use xlink:href="#social_ok"></use>
</svg>
</a>
</li>
</ul>
</div>

<div class="footer-nav">
<div class="footer-nav__item footer-nav__item--store">
<h3 class="footer-nav__title">Интернет-магазин</h3>
<ul class="footer-nav__list">
<li class="footer-nav__list-item">
<a href="#">Каталог</a>
</li>
<li class="footer-nav__list-item">
<a href="#">Доставка</a>
</li>
<li class="footer-nav__list-item">
<a href="#">Способы оплаты</a>
</li>
<li class="footer-nav__list-item">
<a href="#">О нас</a>
</li>
</ul>
</div>
<div class="footer-nav__item footer-nav__item--media">
<h3 class="footer-nav__title">Медиа</h3>
<ul class="footer-nav__list">
<li class="footer-nav__list-item">
<a href="#">Блог</a>
</li>
<li class="footer-nav__list-item">
<a href="#">Информация для сми</a>
</li>
<li class="footer-nav__list-item">
<a href="#">Правовая информация</a>
</li>
</ul>
</div>
<div class="footer-nav__item footer-nav__item--contacts">
<h3 class="footer-nav__title">Контакты</h3>
<ul class="footer-nav__list contacts-list">
<li class="contacts-list__item contacts-list__item--address">
<svg class="contacts-list__pin-icon" width="20" height="20">
<use xlink:href="#pin"></use>
</svg>
<span class="contacts-list__list-text">Санкт-Петербург, набережная реки Карповки, дом 5</span>
</li>
<li class="contacts-list__item">
<svg class="contacts-list__phone-icon" width="13" height="16">
<use xlink:href="#phone"></use>
</svg>
+7 (999) 999-99-99
</li>
</ul>
</div>
</div>

<div class="footer__copyright copyright">
Разработано в
<a class="copyright__link" href="https://htmlacademy.org/" target="_blank">
HTML Academy
<svg class="copyright__link-icon" width="12" height="16">
<use xlink:href="#logo-academy"></use>
</svg>
</a>
</div>
</div>
</footer>
</body>

Expand Down
2 changes: 1 addition & 1 deletion source/scripts/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* в этот файл добавляет скрипты*/
/* Menu*/
const header = document.querySelector('.header');
const headerToggle = document.querySelector('.js-toggle-button');

Expand Down
22 changes: 22 additions & 0 deletions source/styles/blocks/contacts-list.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.contacts-list {
padding-bottom: 12px;

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

.contacts-list__item {
font-family: $montserrat-medium;
font-size: 14px;
line-height: 20px;
padding-bottom: 3px;
text-transform: none;
display: flex;
gap: 6px;
list-style: none;
}

.contacts-list__list-text {
padding-bottom: 13px;
}
38 changes: 9 additions & 29 deletions source/styles/blocks/features.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
// .features {
// // @media (min-width: $desktop-width) {
// // width: 1140px;
// // padding: 50px 40px;
// // }
// }

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

Expand All @@ -24,9 +17,8 @@

.features__title {
min-width: 280px;
// min-height: 72px;
display: flex;
margin: 4px auto 0;
margin: 5px auto 0;
color: $base-black;
font-family: $montserrat-bold;
font-size: 24px;
Expand All @@ -46,7 +38,6 @@
margin-bottom: 50px;
font-size: 40px;
letter-spacing: 0.09vw;

}
}

Expand All @@ -58,7 +49,7 @@
line-height: 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.51px;
letter-spacing: 0.06vw;
}

.features__list {
Expand All @@ -70,19 +61,15 @@
@media (min-width: $tablet-width) {
display: grid;
grid-template-columns: 368px 363px;
margin-top: 62px;
margin-top: 63px;
}

@media (min-width: $desktop-width) {
align-items: normal;
display: grid;
align-items: stretch;
// justify-content: center;
grid-template-columns: repeat(4, 317px);
// grid-template-columns: 318px 300px 305px 300px;
column-gap: 31px;
margin-top: 108px;

}
}

Expand All @@ -100,7 +87,7 @@
display: flex;
flex-direction: column;
padding: 0 25px 0 83px;
margin: 0 0 56px;
margin: 0 0 57px;
}

@media (min-width: $desktop-width) {
Expand All @@ -117,7 +104,6 @@

@media (max-width: $mobile-width-only) {
min-width: 75px;
// padding: 0 20px;
margin: 10px 0 1px;
text-align: center;
}
Expand All @@ -134,16 +120,6 @@
}
}

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

// }

.features__icon {
@media (max-width: $mobile-width-only) {
margin: 35px 0 0;
Expand All @@ -164,6 +140,8 @@

&--speed::before {
@include features-icon-base-styles;
// top: -10px;
// left: 10;
background-image: url("../../icons/features/clock.svg");
}

Expand All @@ -174,6 +152,8 @@

&--energy::before {
@include features-icon-base-styles;
// top: -15px;
// left: 10;
background-image: url("../../icons/features/lightning.svg");
}

Expand Down
Loading

0 comments on commit 4f7261f

Please sign in to comment.