generated from htmlacademy/html2-basic-template
-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
9065eab
commit 8ae0ae9
Showing
39 changed files
with
3,083 additions
and
93 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
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.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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₽</span> | ||
<span class="slider__price">225₽</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
// } | ||
// } | ||
// } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.slider__wrapper { | ||
margin: 0 auto; | ||
width: 320px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters