Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Вносит изменения
Browse files Browse the repository at this point in the history
baranovdmitriy87 committed Oct 17, 2024
1 parent 9065eab commit 8ae0ae9
Showing 39 changed files with 3,083 additions and 93 deletions.
2,375 changes: 2,305 additions & 70 deletions package-lock.json

Large diffs are not rendered by default.

Binary file added source/fonts/Montserrat-Bold.woff
Binary file not shown.
Binary file added source/fonts/Montserrat-Bold.woff2
Binary file not shown.
Binary file added source/fonts/Montserrat-Medium.woff
Binary file not shown.
Binary file added source/fonts/Montserrat-Medium.woff2
Binary file not shown.
Binary file added source/fonts/Montserrat-Regular.woff
Binary file not shown.
Binary file added source/fonts/Montserrat-Regular.woff2
Binary file not shown.
Binary file added source/fonts/Montserrat-SemiBold.woff
Binary file not shown.
Binary file added source/fonts/Montserrat-SemiBold.woff2
Binary file not shown.
1 change: 1 addition & 0 deletions source/icons/header/cart.svg
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/header/enter.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/cofee/flat-white-desktop@1x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/cofee/flat-white-desktop@1x.webp
Binary file not shown.
Binary file added source/images/cofee/flat-white-desktop@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/cofee/flat-white-desktop@2x.webp
Binary file not shown.
Binary file added source/images/cofee/flat-white-mobile@1x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/cofee/flat-white-mobile@1x.webp
Binary file not shown.
Binary file added source/images/cofee/flat-white-mobile@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/cofee/flat-white-mobile@2x.webp
Binary file not shown.
Binary file added source/images/cofee/flat-white-tablet@1x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/cofee/flat-white-tablet@1x.webp
Binary file not shown.
Binary file added source/images/cofee/flat-white-tablet@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/cofee/flat-white-tablet@2x.webp
Binary file not shown.
1 change: 1 addition & 0 deletions source/images/logo-desktop.svg
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/images/logo-mobile.svg
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/images/logo-tablet.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
181 changes: 164 additions & 17 deletions source/index.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,167 @@
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="UTF-8">
<title>Название проекта</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="preload" href="#" type="font/woff2" as="font">
<link rel="stylesheet" href="styles/styles.css">
<script src="scripts/index.js" defer></script>
</head>
<body class="page__body">
<header class="header">Шапка</header>
<main>
<h1>Страница для старта</h1>
</main>
<footer>

</footer>
</body>

<head>
<meta charset="UTF-8">
<title>Интернет-магазин кофейных напитков drink2go</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="preload" href="#" type="font/woff2" as="font">
<link rel="stylesheet" href="styles/styles.css">
<script src="scripts/index.js" defer></script>
</head>

<body class="page__body">

<!--header-->
<header class="header header--closed header--nojs" data-test="header">
<div class="header__wrapper">
<div class="header__logo-wrapper">
<a class="header__logo" href="index.html">
<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>
<span class="header__text-title-desktop header__text-title-desktop--hidden">Интернет-магазин
кофейных напитков
</span>
</div>
<button class="header__toggle-menu js-toggle-button" type="button">
<span class="visually-hidden"> Открыть меню
</span>
</button>
<nav class="main-nav">
<div class="main-nav__wrapper">
<ul class="main-nav__list site-list">
<li class="site-list__item site-list__item-current">
<a class="site-list__link" href="#">Главная
</a>
</li>
<li class="site-list__item">
<a class="site-list__link" href="#">Каталог
</a>
</li>
<li class="site-list__item">
<a class="site-list__link" href="#">Доставка
</a>
</li>
<li class="site-list__item">
<a class="site-list__link" href="#">О Нас
</a>
</li>
</ul>
</nav>
<div class="user-menu__wrapper">
<ul class="user-menu">
<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>
</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>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>

<main class="main-container">
<!--slider-->
<section class="slider" data-test="slider">
<h1 class="visually-hidden">Интернет-магазин кофейных напитков drink2go</h1>
<div class="slider__wrapper">

<div class="slider__image-wrapper">
<picture>
<source type="image/webp" media="(min-width: 1440px)"
srcset="images/cofee-flat-white/flat-white-desktop@1x.webp 1x, images/cofee-flat-white/flat-white-desktop@2x.webp 2x">
<source type="image/webp" media="(min-width: 768px)"
srcset="images/cofee-flat-white/flat-white-tablet@1x.webp 1x, images/cofee-flat-white/flat-white-tablet@2x.webp 2x">
<source type="image/webp"
srcset="images/cofee-flat-white/flat-white-mobile@1x.webp 1x, images/cofee-flat-white/flat-white-mobile@2x.webp 2x">

<source media="(min-width: 1440px)"
srcset="images/cofee-flat-white/flat-white-desktop@1x.png 1x, images/cofee-flat-white/flat-white-desktop@2x.png 2x"
width="600" height="600">
<source media="(min-width: 768px)"
srcset="images/cofee-flat-white/flat-white-tablet@1x.img 1x, images/cofee-flat-white/flat-white-tablet@2x.img 2x"
width="476" height="476">
<img class="slider__img" src="images/cofee-flat-white/flat-white-mobile@1x.png"
srcset="images/cofee-flat-white/flat-white-mobile@1x.png 1x, images/cofee-flat-white/flat-white-mobile@2x.png 2x"
width="240" height="280" loading="lazy" alt="Кофе в бежевой банке Декаф Флэт Уайт">
</picture>
</div>
<button class="slider-button-prev"></button>
<button class="slider-button-next"></button>
<span class="slider__subtitle">Новинка!</span>
<h2 class="slider__title">Декаф Флэт Уайт</h2>
<p class="slider__description">
Свежесваренный кофе без кофеина из Эфиопии с натуральным фермерским молоком — то, что нужно для расслабления
после тяжёлого рабочего дня
</p>
<span class="slider__price-older">295&#8381;</span>
<span class="slider__price">225&#8381;</span>
<a class="button slider__button" href="#">
Заказать
</a>
</div>
</section>

<!--features-->
<section class="features" data-test="features">
<div class="features__wrapper">
<span class="features__subtitle">Преимущества</span>
<h2 class="features__title">Главные причины выбрать Drink2Go</h2>
<ul class="features__list">
<li class="features__item">
<h3 class="features__caption">Скорость</h3>
<p class="features__description">
Готовый напиток всегда под рукой — просто открой банку
</p>
</li>
<li class="features__item">
<h3 class="features__caption">Удобство</h3>
<p class="features__description">
Легко помещается и в карман, и в маленькую сумочку
</p>
</li>
<li class="features__item">
<h3 class="features__caption">Бодрость</h3>
<p class="features__description">
Сбалансированная доза кофеина даст мощный заряд энергии
</p>
</li>
<li class="features__item">
<h3 class="features__caption">Экологичность</h3>
<p class="features__description">
Вся упаковка сделана из перерабатываемых материалов
</p>
</li>
</ul>
</div>
</section>

<!--catalog-->
<section class="catalog" data-test="catalog">
<div class="catalog__wrapper">
<span class="catalog__subtitle">Каталог</span>
<h2 class="catalog__title">Каталог кофейных напитков</h2>
<span class="catalog__price">Цена</span>

</div>
</section>

</main>
<footer class="footer">

</footer>
</body>


</html>
14 changes: 14 additions & 0 deletions source/scripts/index.js
Original file line number Diff line number Diff line change
@@ -1 +1,15 @@
/* в этот файл добавляет скрипты*/
const header = document.querySelector('.header');
const headerToggle = document.querySelector('.js-toggle-button');

header.classList.remove('header--nojs');

headerToggle.addEventListener('click', function () {
if (header.classList.contains('header--closed')) {
header.classList.remove('header--closed');
header.classList.add('header--opened');
} else {
header.classList.add('header--closed');
header.classList.remove('header--opened');
}
});
72 changes: 72 additions & 0 deletions source/styles/blocks/features.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.features {}

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

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

.features__subtitle {
color: $base-primary;
font-family: $montserrat-bold;
font-size: 12px;
font-weight: 700;
line-height: 16px;
text-align: center;
text-transform: uppercase;
}

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

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

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

.features__description {
color: $base-black;
font-family: $montserrat-regular;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
}
169 changes: 166 additions & 3 deletions source/styles/blocks/header.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,168 @@
.header {
background-color: #663399;
color: #ffffff;
padding: 10px 15px;
background-color: $white;


}

.header__wrapper {

@media (max-width: $mobile-width-only) {
position: relative;
width: 320px;
padding: 12px 20px;
min-height: 60px;
margin: 0 auto;
display: flex;
align-items: center;
}

@media (min-width: $tablet-width) {
margin: 0 auto;
width: 768px;
min-height: 80px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}

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

.header__logo-wrapper {
@media (min-width: $tablet-width) {
// width: 145px;
}

@media (min-width: $desktop-width) {
// min-width: 130px;
display: flex;
align-items: center;

}
}

@media (min-width: $desktop-width) {

.header__text-title-desktop {
margin-left: 20px;
width: 132px;
}
}

.header__text-title-desktop--hidden {
display: none;

@media (min-width: $desktop-width) {
display: inline;
font-family: $montserrat-regular;
min-width: 130px;
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: $base-black;
margin-left: 20px;
}
}

.js-toggle-button {
position: absolute;
content: "";
width: 24px;
height: 24px;
right: 33px;
z-index: 2;
background-color: $white;
display: block;
border: none;
cursor: pointer;

&:hover,
&:active {
opacity: 0.7;
}

@media (min-width: $tablet-width) {
display: none;
}
}

.header--closed .js-toggle-button::before {
content: "";
position: absolute;
top: 2px;
right: 0;
width: 24px;
height: 2px;
background-color: $base-black;
box-shadow: 0 8px 0 0 $base-black, 0 16px 0 0 $base-black;
}

.header--closed .js-toggle-button:active::before {
background-color: fade($base-black, 30%);
box-shadow:
0 8px 0 0 fade($base-black, 30%),
0 16px 0 0 fade($base-black, 30%);
}

@media (max-width: $mobile-width-only) {
.header--closed .main-nav__wrapper {
display: none;
}

.header--closed .site-list__link {
padding-right: 70px;
padding-left: 70px;
text-align: center;
}

.header--opened .main-nav__wrapper {
width: 100%;
position: absolute;
top: 66px;
right: 0;
z-index: 10;
text-align: center;
background-color: $white;
}

.header--nojs .js-toggle-button {
display: none;
}

.header--nojs .main-nav__wrapper {
position: static;
min-height: 0;
// display: block;
}
}

.header--opened .js-toggle-button {
@media (max-width: $mobile-width-only) {
background-color: $white;
display: block;

&::before,
&::after {
content: "";
position: absolute;
top: 12px;
right: 0;
width: 18px;
height: 2px;
background-color: $base-black;
}

&::before {
transform: rotate(50grad);
}

&::after {
transform: rotate(-50grad);
box-shadow: none;
}
}
}
25 changes: 25 additions & 0 deletions source/styles/blocks/main-nav.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.main-nav__wrapper {
@media (min-width: $tablet-width) {
// width: 400px;
}

@media (min-width: $desktop-width) {
// width: 478px;
}
}

.main-nav__list {
@include list-reset;

@media (min-width: $tablet-width) {
margin: 0 auto;
display: flex;
width: 400px;
align-items: center;
justify-content: space-between;
}

@media (min-width: $desktop-width) {
width: 458px;
}
}
123 changes: 123 additions & 0 deletions source/styles/blocks/site-list.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
.site-list a {
display: block;
font-family: $montserrat-medium;
font-size: 12px;
font-weight: 500;
line-height: 16px;
text-transform: uppercase;

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

@media (min-width: $tablet-width) {
border: none;
font-size: 12px;
line-height: 16px;
}

@media (min-width: $desktop-width) {

}
}

// .site-list {
// @media (min-width: $tablet-width) {
// width: 436px;
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
// }

// @media (min-width: $desktop-width) {
// margin: 0 auto;
// width: 475px;
// }
// }

.site-list__item {
// z-index: 10;
// position: relative;

@media (max-width: $mobile-width-only) {
border-top: 1px solid $base-secondary;
}

@media (min-width: $tablet-width) {
padding: 15px 0;
display: flex;
width: 100px;
height: 80px;
align-items: center;
justify-content: center;
}

&:last-child {

@media (max-width: $mobile-width-only) {
border-bottom: 1px solid $base-secondary;
}
}
}

.site-list__item-current {
position: relative;

@media (min-width: $tablet-width) {
color: $base-primary;
}

&::after {
@media (min-width: $tablet-width) {
content: "";
position: absolute;
bottom: 4px;
right: 0;
left: 0;
height: 2px;
background-color: $base-primary;
}
}

// &--bg-index::after {
// @media (min-width: $desktop-width) {
// background-color: $text-color;
// }
// }
}

// .site-list__link {
// min-width: 55px;
// outline-offset: 5px;
// }

// .site-list__link--bg-index {
// @media (min-width: $desktop-width) {
// color: $text-color;
// }
// }

// .site-list__item a[href] {
// @media (min-width: $tablet-width) {
// &:hover {
// transition: all 0.2s ease;
// opacity: 0.6;
// }

// &:active {
// opacity: 0.3;
// }
// }

// @media (max-width: $mobile-width-only) {
// &:hover {
// transition: all 0.2s ease;
// opacity: 0.6;
// }

// &:active {
// opacity: 0.3;
// }
// }
// }
4 changes: 4 additions & 0 deletions source/styles/blocks/slider.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.slider__wrapper {
margin: 0 auto;
width: 320px;
}
78 changes: 78 additions & 0 deletions source/styles/blocks/user-menu.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
.user-menu {
@include list-reset;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
font-family: $montserrat-medium;
font-size: 12px;
font-weight: 500;
line-height: 16px;
text-transform: uppercase;

@media (min-width: $desktop-width) {
min-width: 260px;
}
}


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

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

.user-menu__item {
display: flex;
justify-content: center;
width: 60px;
height: 60px;

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

@media (min-width: $desktop-width) {
min-width: 120px;
}
}

.user-menu__link {
width: 100%;
display: flex;
align-items: center;
// justify-content: center;
}

.user-menu__cart--hidden,
.user-menu__enter--hidden {
display: none;

@media (min-width: $desktop-width) {
display: block;
}
}

.user-menu__enter {
&::before {
@include user-menu-base-styles;
mask-image: url("../../icons/header/enter.svg");
}
}

.user-menu__cart {
&::before {
@include user-menu-base-styles;
mask-image: url("../../icons/header/cart.svg");
}
}

@media (min-width: $desktop-width) {

.user-menu__cart::before,
.user-menu__enter::before {
margin-right: 10px;
}
}
40 changes: 39 additions & 1 deletion source/styles/common/fonts.scss
Original file line number Diff line number Diff line change
@@ -1 +1,39 @@
/* здесь подключите шрифты */
@font-face {
font-family: "Montserrat Regular";
font-weight: 400;
font-style: normal;
font-display: swap;
src:
url("../../fonts/Montserrat-Regular.woff2") format("woff2"),
url("../../fonts/Montserrat-Regular.woff") format("woff");
}

@font-face {
font-family: "Montserrat Medium";
font-weight: 500;
font-style: normal;
font-display: swap;
src:
url("../../fonts/Montserrat-Medium.woff2") format("woff2"),
url("../../fonts/Montserrat-Medium.woff") format("woff");
}

@font-face {
font-family: "Montserrat Semi Bold";
font-weight: 600;
font-style: normal;
font-display: swap;
src:
url("../../fonts/Montserrat-SemiBold.woff2") format("woff2"),
url("../../fonts/Montserrat-SemiBold.woff") format("woff");
}

@font-face {
font-family: "Montserrat Bold";
font-weight: 700;
font-style: normal;
font-display: swap;
src:
url("../../fonts/Montserrat-Bold.woff2") format("woff2"),
url("../../fonts/Montserrat-Bold.woff") format("woff");
}
40 changes: 39 additions & 1 deletion source/styles/common/global.scss
Original file line number Diff line number Diff line change
@@ -1 +1,39 @@
/* здесь используйте глобальные селекторы img, body, html и так далее */
*,
*::before,
*::after {
box-sizing: border-box;
}

html,
body {
height: 100%;
}

body {
margin: 0 auto;
color: $base-black;
overflow-x: hidden;
}

img {
max-width: 100%;
height: auto;
object-fit: contain;
border-style: none;
}

a {
color: inherit;
text-decoration: none;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
14 changes: 14 additions & 0 deletions source/styles/common/mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/*reset default styles (ul)*/
@mixin list-reset {
margin: 0;
padding: 0;
list-style: none;
}

@mixin user-menu-base-styles {
content: "";
width: 16px;
height: 16px;
display: block;
background: #444444;
}
30 changes: 29 additions & 1 deletion source/styles/common/variables.scss
Original file line number Diff line number Diff line change
@@ -1 +1,29 @@
/* здесь используйте глобальные переменные */
/* Fonts*/
$montserrat-regular: "Montserrat Regular", "Arial", sans-serif;
$montserrat-medium: "Montserrat Medium", "Arial", sans-serif;
$montserrat-semi-bold: "Montserrat Semi Bold", "Arial", sans-serif;
$montserrat-bold: "Montserrat Bold", "Arial", sans-serif;

/*Base colors*/
$white: #ffffff;
$base-black: #333333;
$base-grey: #bdbdbd;
$base-primary: #7859cf;
$base-secondary: #f0ebff;

/*Background colors*/
$flat-white: #f3ebe1;
$lavender-latte: #eae6fc;
$espresso: #e5e6e8;
$background-lightest-grey: #f8f8f8;

/* Alt colors*/
$light-grey: #e2e2e2;
$primary-lighter: #9070ec;
$primary-darker: #593cac;

/* Width*/
$mobile-width: 320px;
$mobile-width-only: 767px;
$tablet-width: 768px;
$desktop-width: 1440px;
6 changes: 6 additions & 0 deletions source/styles/styles.scss
Original file line number Diff line number Diff line change
@@ -2,6 +2,12 @@
@import "./common/variables.scss";
@import "./common/global.scss";
@import "./common/fonts.scss";
@import "./common/mixins.scss";

/* BLOCKS */
@import "./blocks/header.scss";
@import "./blocks/main-nav.scss";
@import "./blocks/user-menu.scss";
@import "./blocks/site-list.scss";
@import "./blocks/slider.scss";
@import "./blocks/features.scss";

0 comments on commit 8ae0ae9

Please sign in to comment.