diff --git a/README.md b/README.md index 26c6369..8cc02e1 100644 --- a/README.md +++ b/README.md @@ -2,35 +2,7 @@ ### **С точки зрения веб-разработки:** * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) -* соблюдаем Scope-ориентированный подход: - - каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта. - - - пример:
- - HTML: - ``` -
-

Новый заголовок

- -
- ``` - - CSS: - - ``` - .my-namespace h1 { - font-size: 24px; - color: #333; - } - - .my-namespace .my-button { - background-color: #007BFF; - color: #fff; - } - ``` - - -* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: +* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: `block-name__elem-name--mod-name--mod-val` + имена записываются латиницей в нижнем регистре + для разделения слов в именах БЭМ-сущностей используется дефис (-) @@ -40,9 +12,8 @@ * из конечного HTML-файла убрать все комментарии, если такие имеются * все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) * **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. -* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы -* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил. -* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*) +* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы + ### **С точки зрения SEO:** * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 5f160ef..db6b040 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -1,16 +1,120 @@ -/* Переменные, шрифты, UI kit */ +@font-face { + font-family: "Craftwork Grotest"; + src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf'); + font-weight: 400; +} +@font-face { + font-family: "Craftwork Grotest"; + src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf'); + font-weight: 500; +} +@font-face { + font-family: "Craftwork Grotest"; + src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf'); + font-weight: 600; +} +@font-face { + font-family: "Craftwork Grotest"; + src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf'); + font-weight: 700; +} -/* - -ШАБЛОН использования глобальных переменных: +@font-face { + font-family: "Abel"; + src: url('../fonts/Abel/Abel-Regular.ttf'); + font-weight: 400; +} :root { - --main-text: #e1667c; - --main-color: #8da6cb; - --font-family: "Craftwork Grotesk", sans-serif; -} + /* Colors */ + --radial: radial-gradient(261.43% 263.03% at 124% -28.000000000000004%,rgb(15, 88, 129),rgb(30, 164, 156) 36.979%,rgb(118, 206, 117) 66.667%,rgb(236, 243, 159) 91.146%); + --accent-1: radial-gradient(142.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%); + --accent-2: radial-gradient(2700.48% 141.42% at 100% 0%,rgb(122, 217, 231),rgb(126, 231, 225) 25%,rgb(181, 228, 180) 80%,rgb(215, 238, 170) 100%); + --accent-3: linear-gradient(6deg, rgb(244, 66, 66) 7.584%,rgb(86, 158, 240) 72.371%); + --linear: linear-gradient(-7.39deg, rgb(244, 241, 240) 23.643%,rgba(244, 241, 240, 0.3) 59.827%); + --btn-bg: radial-gradient(100% 174.56% at 100% 0%, #7AD9E7 0%, #7EE7E1 25%, #B5E4B4 80%, #D7EEAA 100%); + + + --main_white: #FFFFFF; + --creme-white: #F4F1F0; + --grey-f5: #F5F5F5; + --main_black: #121212; + --grey-black: #121212; + --bg-light-grey: #F5F5F5; + --interface_title: #333333; + --interface_hover: #666666; + --orange_80: #FFDF99; + --green_90: #D9FFCC; + --green-dark: #76CE75; + --violet_90: #E7CAFF; + --blue_90: #CCE2FF; + --background: #F4F1F0; + --placeholder: #999999; + /* Fonts */ + --font-craftwork: 'Craftwork Grotest', serif; + --font-abel: 'Abel', serif; +} + +body { + background: var(--radial); + font-family: var(--font-craftwork); + font-weight: 500; +} + +.container { + max-width: 1232px; + margin: 0 auto; + + @media (max-width: 1264px) { + max-width: calc(100% - 32px); + } +} + +.form-inp { + height: 48px; + width: 100%; + border: 1px solid var(--placeholder); + border-radius: 20px; + background: var(--main_white); + padding: 0 16px; + color: var(--main_black); + font-size: 20px; + font-weight: 400; + line-height: 24px; + font-family: var(--font-craftwork); +} + +.form-inp::placeholder { + color: var(--placeholder); +} + +.form-inp:hover, +.form-inp:focus { + border-color: var(--main_black); +} + +.form-textarea { + height: 96px; + width: 100%; + resize: none; + background: var(--main_white); + border: 1px solid var(--placeholder); + padding: 12px 16px; + border-radius: 20px; + color: var(--main_black); + font-size: 20px; + line-height: 24px; + font-family: var(--font-craftwork); +} + +.form-textarea::placeholder { + color: var(--placeholder); +} -*/ +.form-textarea:hover, +.form-textarea:focus { + border-color: var(--main_black); +} diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 631a1a2..91f1a44 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -1,18 +1,379 @@ /* Основные стили для компьютера */ +/* Header */ +.header { + background: var(--main_white); + border-bottom: 1px solid var(--interface_title); + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 4; +} +.header-container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 0; +} -/* писать сюда... */ +.header-bars { + display: none; +} +.header-logo { + display: flex; + align-items: center; + gap: 8px; +} +.header-logo span { + color: var(---main_black); + font-size: 20px; + text-transform: uppercase; +} +.header-navs { + display: flex; + align-items: center; + gap: 24px; +} +.header-navs__link { + padding: 8px 12px; + font-size: 16px; + font-weight: bold; + text-transform: uppercase; + line-height: 20px; +} +.header-accordion {} +.header-accordion__btn { + display: flex; + align-items: center; + gap: 4px; + padding: 8px 12px; + border-radius: 24px; + background: var(--accent-2); + cursor: pointer; + user-select: none; + font-size: 16px; + font-weight: bold; + line-height: 20px; + color: var(---main_black); +} +.header-right { + display: flex; + align-items: center; + gap: 8px; +} +.header-lang__btn { + display: flex; + align-items: center; + cursor: pointer; + user-select: none; + gap: 4px; + padding: 12px 15px; + color: var(---main_black); + font-size: 16px; + font-weight: bold; + line-height: 20px; +} -/* Стили для лептопов */ -/* @media only screen and (min-width: 992px) and (max-width: 1400px) { +/* Header end */ -} */ \ No newline at end of file +/* Footer */ +.footer { + background: var(--main_black); + padding: 40px 0 38px; + color: var(--main_white); +} + +.footer-top { + display: flex; + align-items: stretch; + justify-content: space-between; + gap: 48px; +} + +.footer-top .logo { + display: flex; + align-items: center; + gap: 10px; + font-size: 20px; + font-weight: 500; + text-transform: uppercase; + background: var(--accent-1); + color: transparent; + -webkit-background-clip: text; + background-clip: text; + margin-bottom: 24px; +} + +.footer-content__address { + font-size: 24px; + font-weight: 500; + line-height: 32px; + margin-bottom: 32px; +} + +.footer-content { + width: 100%; +} + +.footer-content ul { + display: flex; + flex-direction: column; + gap: 24px; +} + +.footer-content ul li { + display: flex; + flex-direction: column; + gap: 4px; +} + +.footer-content ul p { + font-size: 16px; + font-weight: bold; + line-height: 20px; +} + +.footer-content ul a { + font-size: 24px; + font-weight: 500; + line-height: 32px; +} + +.footer-content__wrap { + display: flex; + align-items: flex-end; + justify-content: space-between; + width: 100%; +} + +.footer-top__link { + display: flex; + flex-direction: column; + gap: 24px; +} + +.footer-top__link .link-black { + padding: 7px 15px; + color: var(--main_white); + font-size: 24px; + line-height: 32px; + font-weight: 500; + white-space: nowrap; + border: 1px solid var(--main_white); + border-radius: 24px; +} + +.footer-top__link .link-white { + width: 100%; + text-align: center; + background: var(--main_white); + color: var(--main_black); + font-size: 20px; + font-weight: 600; + line-height: 24px; + padding: 12px; + border-radius: 20px; +} + +.footer-contact { + width: 364px; + flex-shrink: 0; + background: var(--accent-1); + border-radius: 24px; + padding: 24px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.footer-contact__title { + color: var(--main_black); + font-size: 24px; + font-weight: 500; + line-height: 32px; +} + +.footer-contact__submit { + width: 100%; + text-align: center; + height: 48px; + border-radius: 16px; + background: var(--main_black); + font-size: 20px; + font-weight: 600; + line-height: 24px; + color: var(--main_white); +} + +.footer-bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 17px; + margin-top: 19px; + border-top: 1px solid var(--main_white); +} + +.footer-network { + display: flex; + align-items: center; + gap: 32px; +} + +.footer-bottom a { + font-size: 16px; + line-height: 20px; + font-weight: 500; + color: var(--main_white); + opacity: 0.6; + text-decoration: underline; +} +/* Footer end */ + + +/* Where home */ +.where-home { + padding: 162px 0 37px; + color: var(--background); +} + +.where-home h1 { + font-size: 82px; + font-weight: bold; + line-height: 96px; + margin-bottom: 41px; + text-transform: uppercase; +} + +.where-home p { + max-width: 928px; + color: #FFF; + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; +} +/* Where home end */ + +/* Find us */ +.find-us { + color: var(--background); + padding-bottom: 24px; +} + +.find-us h2 { + padding: 10px 0; + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; + margin-bottom: 24px; +} + +.find-us ul { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 36px; +} + +.find-us h3 { + font-size: 24px; + font-weight: bold; + line-height: 28px; + margin-bottom: 8px; + text-transform: uppercase; +} + +.find-us p { + font-size: 24px; + font-weight: 500; + line-height: 32px; +} +/* Find us end */ + +/* Location */ +.location { + padding-bottom: 35px; +} + +.location h2 { + padding: 10px 0; + margin-bottom: 37px; + text-align: right; + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; + color: var(--main_white); +} + +.location iframe { + height: 783px; + width: 100%; + border-radius: 64px; +} +/* Location end */ + +/* Sell form */ +.sell-form { + padding-bottom: 31px; +} + +.sell-form__container { + background: var(--main_white); + border-radius: 64px; + padding: 64px 105px 38px; + color: var(--grey-black); + display: flex; + flex-direction: column; + gap: 48px; +} + +.sell-form h2 { + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; +} + +.sell-form p { + text-transform: uppercase; + font-size: 24px; + font-weight: bold; + line-height: 28px; +} + +.sell-form form { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; +} + +.sell-form form button { + background: var(--main_black); + padding: 11px 70px; + color: var(--main_white); + text-transform: uppercase; + border-radius: 16px; + font-size: 20px; + font-weight: 600; + line-height: 24px; + border: 1px solid var(--main_black); +} + +.sell-form form button:hover { + background: var(--main_white); + color: var(--main_black); +} +/* Sell form end */ \ No newline at end of file diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css index 0cf51d3..cd97fb4 100644 --- a/assets/css/gp-style-mobile.css +++ b/assets/css/gp-style-mobile.css @@ -1,5 +1,133 @@ /* Стили для мобильных устройств */ @media only screen and (max-width: 576px) { + .anons-best__title { + font-size: 26px; + line-height: 32px; + margin-bottom: 12px; + } + .anons-best__card { + padding-top: 205px; + } + .anons-best__card .main-img { + height: 300px; + } + + .anons-best__card-body { + padding: 20px 17px; + } + + .anons-best__card-body__title { + font-size: 20px; + line-height: 24px; + margin-bottom: 16px; + } + + .anons-best__card.light .main-img { + height: 197px; + } + + .anons-best__card.light .anons-best__card-body__title { + font-size: 20px; + line-height: 24px; + } + + .editorial-card { + flex-direction: column; + border-radius: 30px; + position: relative; + } + + .editorial-card .main-img { + width: 100%; + height: 203px; + } + + .editorial-card__content { + padding: 17px 13px 24px; + } + + .editorial-card__content-alerts { + position: absolute; + top: 13px; + left: 8px; + width: calc(100% - 16px); + } + + .editorial-card__content-title { + font-size: 20px; + line-height: 24px; + margin-bottom: 17px; + } + + .editorial-card__content-data { + gap: 5px 16px; + } + + .footer { + padding: 24px 0 58px; + } + + .footer-top { + align-items: flex-start; + text-align: left; + gap: 24px; + } + + .footer-content__wrap { + align-items: flex-start; + gap: 24px; + } + + .footer-content { + align-items: flex-start; + } + + .footer-content .logo { + font-size: 20px; + margin-bottom: 24px; + } + + .footer-content__address { + font-size: 18px; + line-height: 24px; + margin-bottom: 32px; + } + + .footer-content ul { + gap: 24px; + } + + .footer-content ul p { + font-size: 16px; + line-height: 20px; + } + + .footer-content ul a { + font-size: 24px; + line-height: 32px; + } + + .footer-top__link .link-white { + display: none; + } + + .footer-contact { + width: 100%; + padding: 16px; + border-radius: 24px; + } + + .footer-contact__title { + color: var(--main_white); + } + + .footer-bottom { + margin-top: 0; + padding-top: 24px; + border: 0; + align-items: flex-start; + gap: 17px; + } } \ No newline at end of file diff --git a/assets/css/gp-style-normalize.css b/assets/css/gp-style-normalize.css new file mode 100644 index 0000000..ce8476b --- /dev/null +++ b/assets/css/gp-style-normalize.css @@ -0,0 +1,78 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent !important; +} + +a { + text-decoration: none; + color: inherit; + display: inline-block; + cursor: pointer; +} + +img { + max-width: 100%; +} + +span, +label { + display: inline-block; +} + +html { + scroll-behavior: smooth; +} + +input, +textarea { + outline: none; + border: 0; + background: transparent; +} + +button, +select { + border: none; + cursor: pointer; + background: transparent; + outline: 0; +} + +address { + font-style: normal; +} + +.wrapper { + width: 100%; + overflow: hidden; + min-height: 100svh; +} + +ul, +ol, +dl { + list-style: none; + padding: 0; + margin: 0; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + padding: 0; + margin: 0; + font-weight: 500; +} + +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + margin: 0; +} \ No newline at end of file diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 32a3ef6..49e0f1f 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -1,5 +1,125 @@ /* Стили для планшетов */ @media only screen and (max-width: 992px) { + .header-navs { + display: none; + } - -} \ No newline at end of file + .header-container { + height: 56px; + padding: 0; + } + + .header-bars { + display: flex; + align-items: center; + justify-content: center; + } + + .header-logo { + font-size: 16px; + line-height: 20px; + gap: 8px; + } + + .header-logo img { + width: 31px; + flex-shrink: 0; + } + + .header-lang { + display: none; + } + + /* Where home */ + .where-home { + padding: 92px 0 36px; + } + + .where-home h1 { + font-size: 32px; + line-height: 38px; + margin-bottom: 15px; + } + + .where-home p { + font-size: 20px; + line-height: 24px; + } + /* Where home end */ + + /* Find us */ + .find-us { + padding-bottom: 36px; + } + + .find-us h2 { + font-size: 26px; + line-height: 32px; + margin-bottom: 36px; + padding: 0; + } + + .find-us ul { + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 20px; + } + + .find-us h3 { + font-size: 20px; + line-height: 24px; + margin-bottom: 8px; + } + + .find-us p { + font-size: 18px; + line-height: 24px; + } + /* Find us end */ + + /* Location */ + .location { + padding-bottom: 36px; + } + + .location h2 { + font-size: 26px; + line-height: 32px; + margin-bottom: 36px; + padding: 0; + } + + .location iframe { + height: 560px; + width: calc(100% + 32px); + margin-left: -16px; + border-radius: 24px; + } + /* Location end */ + + /* Sell form */ + .sell-form { + padding-bottom: 36px; + } + + .sell-form__container { + max-width: 100%; + border-radius: 24px; + padding: 36px 16px; + gap: 18px; + } + + .sell-form h2 { + font-size: 26px; + line-height: 32px; + } + + .sell-form p { + font-size: 20px; + line-height: 24px; + } + + .sell-form textarea { + height: 120px; + } + /* Sell form end */ +} diff --git a/assets/css/gp-style-xl.css b/assets/css/gp-style-xl.css new file mode 100644 index 0000000..4c0f0ea --- /dev/null +++ b/assets/css/gp-style-xl.css @@ -0,0 +1,44 @@ +@media (max-width: 1200px) { + .header-navs { + gap: 12px; + } + + .header-navs__link { + font-size: 14px; + } + + .header-right { + gap: 4px; + } + + .anons-article__card-wrap { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .editorial-card__wrap { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .footer-top { + flex-direction: column; + align-items: center; + text-align: center; + } + + .footer-content { + display: flex; + flex-direction: column; + align-items: center; + } + + .footer-content__wrap { + flex-direction: column; + align-items: center; + gap: 48px; + } + + .footer-bottom { + flex-direction: column; + gap: 24px; + } +} \ No newline at end of file diff --git a/assets/css/normalize.min.css b/assets/css/normalize.min.css deleted file mode 100644 index 87aa24d..0000000 --- a/assets/css/normalize.min.css +++ /dev/null @@ -1,2 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} -/*# sourceMappingURL=normalize.min.css.map */ \ No newline at end of file diff --git a/assets/css/reset.min.css b/assets/css/reset.min.css deleted file mode 100644 index af3f06c..0000000 --- a/assets/css/reset.min.css +++ /dev/null @@ -1 +0,0 @@ -*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} \ No newline at end of file diff --git a/assets/fonts/Abel/Abel-Regular.ttf b/assets/fonts/Abel/Abel-Regular.ttf new file mode 100644 index 0000000..5245501 Binary files /dev/null and b/assets/fonts/Abel/Abel-Regular.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf new file mode 100644 index 0000000..9c62ebc Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Heavy.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Heavy.ttf new file mode 100644 index 0000000..c515d38 Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Heavy.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf new file mode 100644 index 0000000..b8629fc Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf new file mode 100644 index 0000000..7298891 Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf differ diff --git a/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf new file mode 100644 index 0000000..926c24f Binary files /dev/null and b/assets/fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf differ diff --git a/assets/img/arrow-down.svg b/assets/img/arrow-down.svg new file mode 100644 index 0000000..be8f47a --- /dev/null +++ b/assets/img/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/bars.svg b/assets/img/bars.svg new file mode 100644 index 0000000..0ff9b2e --- /dev/null +++ b/assets/img/bars.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/basket-icon.svg b/assets/img/basket-icon.svg new file mode 100644 index 0000000..6ee2bce --- /dev/null +++ b/assets/img/basket-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/footer-network-1.svg b/assets/img/footer-network-1.svg new file mode 100644 index 0000000..8a88433 --- /dev/null +++ b/assets/img/footer-network-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/footer-network-2.svg b/assets/img/footer-network-2.svg new file mode 100644 index 0000000..b7f36f4 --- /dev/null +++ b/assets/img/footer-network-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/footer-network-3.svg b/assets/img/footer-network-3.svg new file mode 100644 index 0000000..19e914a --- /dev/null +++ b/assets/img/footer-network-3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/header-red.svg b/assets/img/header-red.svg new file mode 100644 index 0000000..95c7ae6 --- /dev/null +++ b/assets/img/header-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/heart-grey.svg b/assets/img/heart-grey.svg new file mode 100644 index 0000000..81573c3 --- /dev/null +++ b/assets/img/heart-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/heart-white.svg b/assets/img/heart-white.svg new file mode 100644 index 0000000..7250c70 --- /dev/null +++ b/assets/img/heart-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/heart.svg b/assets/img/heart.svg new file mode 100644 index 0000000..95c2899 --- /dev/null +++ b/assets/img/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/indent-icon-1.svg b/assets/img/indent-icon-1.svg new file mode 100644 index 0000000..80d233c --- /dev/null +++ b/assets/img/indent-icon-1.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/img/logo-green.svg b/assets/img/logo-green.svg new file mode 100644 index 0000000..4b64e3b --- /dev/null +++ b/assets/img/logo-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/logo.svg b/assets/img/logo.svg new file mode 100644 index 0000000..d3929b8 --- /dev/null +++ b/assets/img/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/long-arrow.svg b/assets/img/long-arrow.svg new file mode 100644 index 0000000..6a3baa3 --- /dev/null +++ b/assets/img/long-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/minus-icon.svg b/assets/img/minus-icon.svg new file mode 100644 index 0000000..b4d504c --- /dev/null +++ b/assets/img/minus-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/msg-green.svg b/assets/img/msg-green.svg new file mode 100644 index 0000000..9e521bc --- /dev/null +++ b/assets/img/msg-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/msg-grey.svg b/assets/img/msg-grey.svg new file mode 100644 index 0000000..b126087 --- /dev/null +++ b/assets/img/msg-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/msg-white.svg b/assets/img/msg-white.svg new file mode 100644 index 0000000..b920033 --- /dev/null +++ b/assets/img/msg-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/msg.svg b/assets/img/msg.svg new file mode 100644 index 0000000..7471b49 --- /dev/null +++ b/assets/img/msg.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/plus-icon.svg b/assets/img/plus-icon.svg new file mode 100644 index 0000000..6066429 --- /dev/null +++ b/assets/img/plus-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/img/swp-next.svg b/assets/img/swp-next.svg new file mode 100644 index 0000000..6393610 --- /dev/null +++ b/assets/img/swp-next.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/swp-prev.svg b/assets/img/swp-prev.svg new file mode 100644 index 0000000..b886a4f --- /dev/null +++ b/assets/img/swp-prev.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/user-icon.svg b/assets/img/user-icon.svg new file mode 100644 index 0000000..4b9a9a9 --- /dev/null +++ b/assets/img/user-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..cd90bce 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -0,0 +1,48 @@ +const homeSwp = new Swiper('.home-swp .swiper', { + slidesPerView: 1, + spaceBetween: 0, + effect: 'fade', + loop: true, + navigation: { + nextEl: '.home-swp__btn-next', + prevEl: '.home-swp__btn-prev', + } +}) + +const textsSwp = new Swiper('.texts-swp .swiper', { + slidesPerView: 1, + spaceBetween: 0, + loop: true, + effect: 'fade', + navigation: { + nextEl: '.texts-swp__next', + prevEl: '.texts-swp__prev' + }, + pagination: { + el: ".texts-swp__pagination", + clickable: true, + } +}) + +// comment +let answerbtns = document.querySelectorAll('.answer-btn'); +let answerbtnicons = document.querySelectorAll('.answer-btn svg'); +let answerblocks = document.querySelectorAll('.answer-block'); + +answerbtns.forEach((answerbtn, index) => { + answerbtn.addEventListener('click', () => { + let answerbtnicon = answerbtnicons[index]; + let answerblock = answerblocks[index]; + + answerblock.classList.toggle('active'); + answerbtnicon.classList.toggle('active'); + + let buttonText = answerbtn.querySelector('span'); + if (buttonText.textContent === 'Ответ') { + buttonText.textContent = 'Свернуть'; + } else { + buttonText.textContent = 'ответ'; + } + }); +}); +// comment diff --git a/index.html b/index.html index deb9630..4e347ac 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,16 @@ - - - + + + + + @@ -52,21 +54,193 @@ - - -
-
- - -
-
- - -
- -
+
+ + +
+
+ + + +
+
+
+ RU + +
+
+ + + + + + +
+
+
+ + +
+ + +
+
+

Where to Buy

+

Looking for Cosmopet products in stores? You can find our premium pet treats in select pet shops and retail stores across the UAE.

+
+
+ + +
+
+

📍 Find us at:

+
    +
  • +

    Roots Supermarket

    +

    Waves Grande, Retail unit 1-2 Shobha Hartland, Dubai DU United Arab Emirates

    +
    • +
  • +

    Pawdy Neighbors

    +

    Souk Al Manzil - Old Town Downtown, Dubai, United Arab Emirates

    +
    • +
  • +

    The Pet Co

    +

    Tower A, Shop 01, Prime Business Centre, JVC, Dubai, UAE

    +
    • +
  • +

    Ivy Secret Garden

    +

    Al Wasl Warehouse Complex, Unit 14 - 26th St
    - Al Quoz Industrial Area 4 - Dubai

    +
    • +
+
+
+ + + +
+
+

✨ More locations coming soon!

+ +
+
+ + + +
+
+

Want to sell Cosmopet in your store?

+

Join our growing network of retailers! Fill out the contact form below, and we’ll get in touch to discuss the details.

+
+ + + + + +
+
+
+ + +
+ + + + + +
- + + + \ No newline at end of file