commit 355ecc604179d04073037ad0377456f827a1674a Author: Mark Strancheuski Date: Sat Jan 28 02:33:24 2023 +0300 C-1: Initial repository diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/fonts/HelveticaNeueCyr-Bold.ttf b/fonts/HelveticaNeueCyr-Bold.ttf new file mode 100644 index 0000000..6979569 Binary files /dev/null and b/fonts/HelveticaNeueCyr-Bold.ttf differ diff --git a/fonts/HelveticaNeueCyr-Bold.woff b/fonts/HelveticaNeueCyr-Bold.woff new file mode 100644 index 0000000..7220eff Binary files /dev/null and b/fonts/HelveticaNeueCyr-Bold.woff differ diff --git a/fonts/HelveticaNeueCyr-Light.ttf b/fonts/HelveticaNeueCyr-Light.ttf new file mode 100644 index 0000000..ec0ecd2 Binary files /dev/null and b/fonts/HelveticaNeueCyr-Light.ttf differ diff --git a/fonts/HelveticaNeueCyr-Light.woff b/fonts/HelveticaNeueCyr-Light.woff new file mode 100644 index 0000000..b5a2dfc Binary files /dev/null and b/fonts/HelveticaNeueCyr-Light.woff differ diff --git a/fonts/HelveticaNeueCyr-Roman.ttf b/fonts/HelveticaNeueCyr-Roman.ttf new file mode 100644 index 0000000..af35f02 Binary files /dev/null and b/fonts/HelveticaNeueCyr-Roman.ttf differ diff --git a/fonts/HelveticaNeueCyr-Roman.woff b/fonts/HelveticaNeueCyr-Roman.woff new file mode 100644 index 0000000..b2d94ba Binary files /dev/null and b/fonts/HelveticaNeueCyr-Roman.woff differ diff --git a/images/1.png b/images/1.png new file mode 100644 index 0000000..2a1227a Binary files /dev/null and b/images/1.png differ diff --git a/images/2.png b/images/2.png new file mode 100644 index 0000000..9459459 Binary files /dev/null and b/images/2.png differ diff --git a/images/3.png b/images/3.png new file mode 100644 index 0000000..d2b6f80 Binary files /dev/null and b/images/3.png differ diff --git a/images/4.png b/images/4.png new file mode 100644 index 0000000..5b5eb97 Binary files /dev/null and b/images/4.png differ diff --git a/images/5.png b/images/5.png new file mode 100644 index 0000000..199b1b2 Binary files /dev/null and b/images/5.png differ diff --git a/images/6.png b/images/6.png new file mode 100644 index 0000000..2ae63d2 Binary files /dev/null and b/images/6.png differ diff --git a/images/DENCO.SELLER.png b/images/DENCO.SELLER.png new file mode 100644 index 0000000..8059541 Binary files /dev/null and b/images/DENCO.SELLER.png differ diff --git a/images/DENCO.STORE.svg b/images/DENCO.STORE.svg new file mode 100644 index 0000000..c36711b --- /dev/null +++ b/images/DENCO.STORE.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/Denco.svg b/images/Denco.svg new file mode 100644 index 0000000..5f034ad --- /dev/null +++ b/images/Denco.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/images/header_image.png b/images/header_image.png new file mode 100644 index 0000000..60da347 Binary files /dev/null and b/images/header_image.png differ diff --git a/images/image_coop_1.png b/images/image_coop_1.png new file mode 100644 index 0000000..b358a59 Binary files /dev/null and b/images/image_coop_1.png differ diff --git a/images/image_coop_2.png b/images/image_coop_2.png new file mode 100644 index 0000000..124f16b Binary files /dev/null and b/images/image_coop_2.png differ diff --git a/images/image_coop_3.png b/images/image_coop_3.png new file mode 100644 index 0000000..a61d638 Binary files /dev/null and b/images/image_coop_3.png differ diff --git a/images/image_coop_4.png b/images/image_coop_4.png new file mode 100644 index 0000000..a16830b Binary files /dev/null and b/images/image_coop_4.png differ diff --git a/images/image_coop_5.png b/images/image_coop_5.png new file mode 100644 index 0000000..eaafa2c Binary files /dev/null and b/images/image_coop_5.png differ diff --git a/images/image_coop_6.png b/images/image_coop_6.png new file mode 100644 index 0000000..35bbc55 Binary files /dev/null and b/images/image_coop_6.png differ diff --git a/images/image_coop_7.png b/images/image_coop_7.png new file mode 100644 index 0000000..868911c Binary files /dev/null and b/images/image_coop_7.png differ diff --git a/images/image_coop_8.png b/images/image_coop_8.png new file mode 100644 index 0000000..f34b42a Binary files /dev/null and b/images/image_coop_8.png differ diff --git a/images/play-button.svg b/images/play-button.svg new file mode 100644 index 0000000..7fbfd76 --- /dev/null +++ b/images/play-button.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/star_1.svg b/images/star_1.svg new file mode 100644 index 0000000..1aa1554 --- /dev/null +++ b/images/star_1.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/star_2.svg b/images/star_2.svg new file mode 100644 index 0000000..facb71a --- /dev/null +++ b/images/star_2.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/star_3.svg b/images/star_3.svg new file mode 100644 index 0000000..8286b01 --- /dev/null +++ b/images/star_3.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/star_4.svg b/images/star_4.svg new file mode 100644 index 0000000..5fda2ce --- /dev/null +++ b/images/star_4.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/store_1.png b/images/store_1.png new file mode 100644 index 0000000..8df04c1 Binary files /dev/null and b/images/store_1.png differ diff --git a/images/store_2.png b/images/store_2.png new file mode 100644 index 0000000..c905028 Binary files /dev/null and b/images/store_2.png differ diff --git a/images/store_3.png b/images/store_3.png new file mode 100644 index 0000000..67bdc24 Binary files /dev/null and b/images/store_3.png differ diff --git a/images/store_text_1_mobile.svg b/images/store_text_1_mobile.svg new file mode 100644 index 0000000..3018278 --- /dev/null +++ b/images/store_text_1_mobile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/store_text_2_mobile.svg b/images/store_text_2_mobile.svg new file mode 100644 index 0000000..f72c2bf --- /dev/null +++ b/images/store_text_2_mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/store_text_3_mobile.svg b/images/store_text_3_mobile.svg new file mode 100644 index 0000000..cd43ce1 --- /dev/null +++ b/images/store_text_3_mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/telegram.svg b/images/telegram.svg new file mode 100644 index 0000000..e7fed66 --- /dev/null +++ b/images/telegram.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/telegram_active.svg b/images/telegram_active.svg new file mode 100644 index 0000000..e20697c --- /dev/null +++ b/images/telegram_active.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/telegram_part.svg b/images/telegram_part.svg new file mode 100644 index 0000000..4ed4779 --- /dev/null +++ b/images/telegram_part.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/video.mp4 b/images/video.mp4 new file mode 100644 index 0000000..1f91606 Binary files /dev/null and b/images/video.mp4 differ diff --git a/images/video.svg b/images/video.svg new file mode 100644 index 0000000..3fb5105 --- /dev/null +++ b/images/video.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/ОПТОВЫЕ ПОСТАВКИ.svg b/images/ОПТОВЫЕ ПОСТАВКИ.svg new file mode 100644 index 0000000..a27347c --- /dev/null +++ b/images/ОПТОВЫЕ ПОСТАВКИ.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/Сервис DENCO.seller.svg b/images/Сервис DENCO.seller.svg new file mode 100644 index 0000000..9683d30 --- /dev/null +++ b/images/Сервис DENCO.seller.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/Услуга Фулфилмент.svg b/images/Услуга Фулфилмент.svg new file mode 100644 index 0000000..a51fb61 --- /dev/null +++ b/images/Услуга Фулфилмент.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..3eb2523 --- /dev/null +++ b/index.html @@ -0,0 +1,316 @@ + + + + + + + + + DENCO Seller + + + + + + + +
+
+
+
+ +7 ( 499 ) 899-25-45 + Звезды +
+ +
Стать партнером
+ + +
+
+
+ Лого +

ГОТОВЫЙ БИЗНЕС НА МАРКЕТПЛЕЙСЕ ИЗ ЛЮБОЙ ТОЧКИ МИРА ЗА 3 ШАГА

+ + Стать партнером + + + + Наш сервис сочетает в себе услуги:
дропшипинга, фулфилмента и сервис внутренней аналитики. + +
+
+ + + +
+
+
+ +

Больше не нужны:

+
    +
  • Поставщики
    • +
  • Склады
    • +
  • Сотрудники
    • +
  • Логистические компании
    • +
  • Сервисы по аналитике
    • +
+
+
+
+ +
+
+

Схема нашего с Вами взаимодействия

+
+
+ + Выбираете любые товары с нашего склада +
+
+ + Добавляете товары на МП по системе FBS +
+
+ + Получаете заказы в своем личном кабинете +
+
+ + Мы собираем и упаковываем ваши заказы +
+
+ + Доставляем заказы на сортировочные центры МП +
+
+ + Маркетплейс переводит вам деньги +
+
+
+ +
+
+

Тарифы для сотрудничества

+
+
+

БАЗОВЫЙ

+
    +
  • + Вы получаете в распоряжение более 5 000 товаров. +
    • +
  • + Максимальное число добавления карточек 500 шт. +
    • +
  • + Создадим первые 10 карточек. +
    • +
  • + Аналитика. +
    • +
  • + Автоматическая настройка ценообразования с учетом комиссий. +
    • +
+
+ 0 руб. + 990 руб. +
+ +
+
+

БРОНЗОВЫЙ

+
    +
  • + Вы получаете в распоряжение более 30 000 товаров. +
    • +
  • + Максимальное число добавления карточек не ограничено. +
    • +
  • + Создадим первые 100 карточек. +
    • +
  • + Аналитика. +
    • +
  • + Автоматическая настройка ценообразования с учетом комиссий. +
    • +
  • + Консультация по Маркетплейсам. +
    • +
  • + Настройка рекламы. +
    • +
  • + Доведем до первых 30 заказов. +
    • +
+
+ 24 990 руб. + 29 900 руб. +
+ +
+
+

ЗОЛОТОЙ

+
    +
  • + Вы получаете в распоряжение более 30 000 товаров. +
    • +
  • + Максимальное число добавления карточек не ограничено. +
    • +
  • + Создадим первые 250 карточек. +
    • +
  • + Аналитика. +
    • +
  • + Автоматическая настройка ценообразования с учетом комиссий. +
    • +
  • + Консультация по Маркетплейсам. +
    • +
  • + Настройка рекламы. +
    • +
  • + Доведем до первых 100 заказов. +
    • +
  • + Обучение. +
    • +
+
+ 44 990 руб. +
+ +
+
+
+
+ +
+
+

Сотрудничая с DENCO.SELLER Вы получаете:

+
+
+
+ + Помощь в создании первых 10 карточек. +
+
+ + Фотографии и всю необходимую информацию о товаре. +
+
+ + + Наш сервис автоматически рассчитает цены с учетом комиссии маркетплейсов, чтобы вы были в плюсе. + +
+
+
+

МИНИМАЛЬНЫЕ РИСКИ

+ + Вы покупаете у нас только тот товар, который заказали на ваших маркетплейсах.
+ А это значит, что Вы исключаете расходы на закупку большой партии товара.
+ За все проданные товары денежные средства вы получаете напрямую от маркетплейса. В наш сервис заложены + услуги фулфилмента, хранения товара, упаковки товара и ежедневная доставка до сортировочных центров МП + -
+ всю рутинную работу мы берем на себя.
+ Вы занимаетесь только продвижением карточек товара. + +
+ + +
+
+
+
+
+ +
+
+

+ DENCO.STORE занимается e-commers 6 лет, на маркетплейсах продаем 4 года, более 200000 проданных товаров. +

+
+
+
+
+

НАША КОМАНДА

+ + Мы собрали большую команду специалистов, маркетологов, программистов, логистов, которая создавала + этот проект. + +
+ +
+
+
+

АКТУАЛЬНЫЕ ТОВАРЫ

+ + На наших складах более 5000 популярных товаров, которые продаются из года в год. + +
+ +
+
+
+

ПОРА НАЧИНАТЬ

+ + + DENCO.seller - сервис где вы, наши партнеры зарабатываете
+ вместе с нами. + + + Стать партнером + +
+
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..ee263f1 --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,10 @@ +const headerLink = document.querySelector('.header-link'); +const headerLinkImageSecondary = document.querySelector('.header-link-image_secondary'); + +headerLink.addEventListener('mouseover', () => { + headerLinkImageSecondary.style.opacity = '1'; +}); + +headerLink.addEventListener('mouseout', () => { + headerLinkImageSecondary.style.opacity = '0'; +}); diff --git a/store.html b/store.html new file mode 100644 index 0000000..93cff55 --- /dev/null +++ b/store.html @@ -0,0 +1,178 @@ + + + + + + + + + DENCO Store + + + + + + + +
+
+
+ Denco +
+ + DENCO.seller + + + Фулфилмент + + + Опт + +
+ + +7 ( 499 ) 899-25-45 + +
+
+ + + Занимаемся e-commers в течение 6 лет, работаем с маркетплейсами 4 года и успешно продали более 200 000 + товаров. + +
+
+
+

НАША КОМАНДА

+ + Маркетологи, программисты логисты, и др. специалисты создавали этот проект. + + Команда +
+
+

АКТУАЛЬНЫЕ ТОВАРЫ

+ + На наших складах более 5 тыс. популярных товаров, которые продаются из года в год. + + Команда +
+
+

ПОРА НАЧИНАТЬ

+ + DENCO.seller - сервис где вы, наши партнеры, зарабатываете вместе с нами. + +
+ + Стать партнером + +
+ + + Связаться с нами: +
+ Telegram + Telegram + Telegram +
+ +
+
+
+
+ +
+
+
+
+ DENCO + DENCO + + Поможем сделать бизнес на маркетплейсе
из любой точки мира за несколько шагов. +

+ Включены услуги: дропшипинга, фулфилмента
и сервис внутренней аналитики. + + + + +
+
+ DENCO +
+
+
+
+
+
+ DENCO + DENCO + + Работаем по FBO и FBS. Упаковка товаров производится по всем правилам МП. +

+ Включены услуги: хранение, фото, доставка заказов до пунктов OZON, Wildberris, + ЯндексМаркет. + + + + +
+
+ DENCO +
+
+
+
+
+
+ DENCO + DENCO + + Товары оптом с собственного склада и доставкой + по всей России. Еженедельное обновление ассортимента. Поставки напрямую + от производителей с гарантией качества! + + + + + +
+
+ DENCO +
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/styles/base.css b/styles/base.css new file mode 100644 index 0000000..f9dcbce --- /dev/null +++ b/styles/base.css @@ -0,0 +1,72 @@ +* { + padding: 0; + margin: 0; + border: 0; +} +*,*:before,*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +:focus,:active{outline: none;} +a:focus,a:active{outline: none;} + +nav,footer,header,aside{display: block;} + +html,body { + height: 100%; + width: 100%; + line-height: 1; + font-size: 14px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +input,button,textarea{font-family: inherit;} + +input::-ms-clear{display: none;} +button{cursor: pointer;} +button::-moz-focus-inner {padding: 0;border: 0;} +a,a:visited{text-decoration: none;} +a:hover{text-decoration: none;} +ul li{list-style: none;} +img{ + max-width: 100%; + vertical-align: top; +} + +h1,h2,h3,h4,h5,h6{font-size: inherit; font-weight: 400;} + +body { + font-family: 'HelveticaNeueCyr', sans-serif; +} + +input::-webkit-calendar-picker-indicator { + opacity: 0; +} + +.app-wrapper { + display: flex; + flex-direction: row; +} + +*::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +*::-webkit-scrollbar-track { + background: transparent; +} + +*::-webkit-scrollbar-thumb { + background: #FFFFFF; + border-radius: 9px; +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + /* display: none; <- Crashes Chrome on hover */ + -webkit-appearance: none; + margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ +} diff --git a/styles/fonts.css b/styles/fonts.css new file mode 100644 index 0000000..44876d2 --- /dev/null +++ b/styles/fonts.css @@ -0,0 +1,32 @@ +@font-face { + font-family: "HelveticaNeueCyr"; + font-weight: 300; + font-style: normal; + src: local("HelveticaNeueCyr Light"), + local("HelveticaNeueCyr-Light"), + url("../fonts/HelveticaNeueCyr-Light.ttf") format('ttf'), + url("../fonts/HelveticaNeueCyr-Light.woff") format('woff'); + font-display: swap; +} + +@font-face { + font-family: "HelveticaNeueCyr"; + font-weight: 400; + font-style: normal; + src: local("HelveticaNeueCyr Roman"), + local("HelveticaNeueCyr-Roman"), + url("../fonts/HelveticaNeueCyr-Roman.ttf") format('ttf'), + url("../fonts/HelveticaNeueCyr-Roman.woff") format('woff'); + font-display: swap; +} + +@font-face { + font-family: "HelveticaNeueCyr"; + font-weight: 700; + font-style: normal; + src: local("HelveticaNeueCyr Bold"), + local("HelveticaNeueCyr-Bold"), + url("../fonts/HelveticaNeueCyr-Bold.ttf") format('ttf'), + url("../fonts/HelveticaNeueCyr-Bold.woff") format('woff'); + font-display: swap; +} diff --git a/styles/store.css b/styles/store.css new file mode 100644 index 0000000..435b9e4 --- /dev/null +++ b/styles/store.css @@ -0,0 +1,433 @@ +.header { + background: linear-gradient(282.88deg, rgba(2, 128, 196, 0.2) 3.94%, rgba(255, 255, 255, 0.2) 84.15%), #0090DE; +} + +.container { + display: flex; + flex-direction: column; + gap: 40px; + max-width: 1232px; + margin: 0 auto; +} + +.header-container { + display: flex; + flex-direction: column; + max-width: 1232px; + margin: 0 auto; + position: relative; + + padding: 24px 24px 56px; +} + +.header-tabs { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; +} + +.header-tabs-image { + cursor: pointer; +} + +.header-tab { + display: flex; + flex-direction: row; + gap: 40px; +} + +.header-tab-text { + cursor: pointer; + font-weight: 400; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + color: #FFFFFF; +} + +.header-middle { + display: flex; + flex-direction: column; + place-items: center; + justify-content: center; + gap: 28px; + margin: 180px 0 72px; +} + +.header-logo { + height: fit-content; + width: fit-content; +} + +.header-description { + max-width: 62%; + font-weight: 400; + font-size: 20px; + line-height: 28px; + text-align: center; + color: #FFFFFF; +} + +.header-cards { + display: flex; + flex-direction: row; + gap: 16px; +} + +.header-card { + display: flex; + flex-direction: column; + place-items: center; + + padding: 20px; + background: #FFFFFF; + border: 1px solid #DCDCDC; + border-radius: 12px; + box-sizing: border-box; +} + +.header-card_primary { + width: 30%; +} + +.header-card_secondary { + width: 40%; +} + +.header-card-title { + font-weight: 700; + font-size: 20px; + line-height: 28px; + text-align: center; + color: #2B2D3A; + margin-bottom: 12px; +} + +.header-card-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; + color: #2B2D3A; +} + +.header-card-image { + margin-top: 16px; + width: fit-content; + height: fit-content; +} + +.header-card-button-wrapper { + display: flex; + justify-content: center; + width: 100%; + padding: 18px 0 24px; + border-bottom: 2px dashed #D9D9D9; +} + +.header-card-button { + padding: 14px 24px; + background: #0090DE; + border-radius: 8px; + + font-weight: 700; + font-size: 16px; + line-height: 24px; + text-align: center; + color: #FFFFFF; +} + +.header-link { + display: flex; + align-items: center; + flex-direction: row; + gap: 8px; + margin-top: 18px; + cursor: pointer; + position: relative; +} + +.header-link:hover .header-link-text { + color: #33BEF0; + transition: .3s all linear; +} + +.header-link-images { + position: relative; +} + +.header-link-image_secondary { + position: absolute; + left: 0; + opacity: 0; + + transition: .3s all linear; +} + +.header-link-image { + transition: .3s all linear; +} + +.header-link-text { + text-transform: uppercase; + font-weight: 550; + font-size: 14px; + line-height: 16px; + text-align: center; + color: #848484; +} + +.service-wrapper { + background: transparent; +} + +.service-wrapper_secondary { + background: #F7F7F7; +} + +.service { + flex-direction: row; + gap: 80px; + padding: 100px 0; + max-width: 816px; +} + +.card-left-panel { + display: flex; + flex-direction: column; + justify-content: center; + width: 50%; +} + +.card-left-panel-image { + width: fit-content; + height: fit-content; + margin-bottom: 36px; +} + +.card-left-panel-text { + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #2B2D3A; +} + +.card-right-panel { + width: 50%; +} + +.card-right-panel img { + width: auto; + height: auto; +} + +.card-left-panel-button { + margin-top: 52px; + width: fit-content; +} + +.footer { + background: #2B2D3A; + padding: 24px 24px 0; +} + +.footer-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.footer-text { + display: flex; + flex-direction: column; +} + +.footer-text-name { + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #FFFFFF; +} + +.footer-text-info { + font-weight: 300; + font-size: 16px; + line-height: 24px; + color: #FFFFFF; + + opacity: 0.5; +} + +.footer-phone { + font-weight: 400; + font-size: 20px; + line-height: 24px; + color: #FFFFFF; +} + +.header-link-image_part { + display: none; +} + +.card-left-panel-image_mobile { + display: none; +} + +@media (max-width: 1024px) { + .header-tabs-image { + display: none; + } + + .header-tab-link { + display: none; + } + + .header-tabs { + justify-content: center; + } + + .header-middle { + margin: 64px 0 24px; + } + + .header-cards { + gap: 12px; + position: relative; + flex-direction: column; + justify-content: center; + } + + .header-card_primary { + width: 100%; + } + + .header-card_secondary { + position: absolute; + bottom: -290px; + width: 100%; + } + + .header-container { + padding: 24px 24px 186px; + } + + .header-card-title { + margin-bottom: 4px; + } + + .header-card-button { + width: 100%; + } + + .header-card-image { + display: none; + } + + .header-card-button-wrapper { + border: none; + padding: 12px 0; + } + + .header-link { + width: 100%; + justify-content: center; + padding: 14px; + margin: 0; + + background: #2B2D3A; + border-radius: 8px; + } + + main { + padding-top: 120px; + } + + .header-link-text { + font-weight: 700; + font-size: 16px; + line-height: 24px; + text-transform: none; + text-align: center; + color: #FFFFFF; + } + + .header-link-image_part { + display: flex; + } + + .header-link-image { + display: none; + } + + .header-link-image_secondary { + display: none; + } + + .header-description { + max-width: 100%; + } + + .service { + flex-direction: column-reverse; + gap: 16px; + background: #F7F7F7; + border-radius: 12px; + padding: 16px; + } + + .card-left-panel { + width: 100%; + } + + .card-right-panel { + display: flex; + justify-content: center; + width: 100%; + } + + .card-left-panel-text { + text-align: center; + } + + .card-left-panel-button { + display: flex; + justify-content: center; + width: 100%; + margin-top: 16px; + } + + .service-wrapper { + background: transparent; + padding: 24px; + } + + .card-right-panel img { + width: 120px; + height: 120px; + } + + .card-left-panel-image { + display: none; + } + + .card-left-panel-image_mobile { + display: flex; + margin-bottom: 16px; + } + + .footer { + display: none; + } + + + + + + + + + + +} diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..5431d05 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,800 @@ +body { + padding: 46px 0 0; +} + +.header { + padding: 0 20px; +} + +.header-container { + display: flex; + flex-direction: column; + max-width: 1232px; + margin: 0 auto; + position: relative; + + padding: 20px 32px 40px; + background: linear-gradient(282.88deg, rgba(2, 128, 196, 0.2) 3.94%, rgba(255, 255, 255, 0.2) 84.15%), #0090DE; + border-radius: 28px; +} + +.header-star-1 { + position: absolute; + top: -48px; + left: -35px; +} + +.header-star-4 { + position: absolute; + right: 50px; + top: -28px; +} + +.header-tabs { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + gap: 12px; +} + +.header-tab { + position: relative; + cursor: pointer; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: #FFFFFF; +} + +.header-tab-button { + cursor: pointer; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #FFFFFF; + padding: 8px 16px; + background: #2B2D3A; + border-radius: 8px; +} + +.header-middle { + display: flex; + flex-direction: row; + gap: 40px; + margin-bottom: 20px; +} + +.header-text { + display: flex; + flex-direction: column; + justify-content: center; + gap: 40px; + width: 55%; +} + +.header-title-image { + cursor: pointer; + width: 500px; +} + +.header-title { + max-width: 70%; + font-weight: 700; + font-size: 24px; + line-height: 32px; + color: #FFFFFF; +} + +.header-description { + display: flex; + margin-top: 40px; + font-weight: 400; + font-size: 18px; + line-height: 28px; + color: #FFFFFF; +} + +.header-image-wrapper { + position: relative; +} + +.header-star-2 { + position: absolute; + top: 15%; + right: 0; +} + +.header-star-3 { + position: absolute; + top: 15%; + left: 0; +} + +.header-list-wrapper { + position: relative; + background: #FFFFFF; + display: flex; + flex-direction: column; + gap: 20px; + padding: 15px 50px; + + backdrop-filter: blur(7px); + border-radius: 20px; +} + +.header-list-title { + font-weight: 700; + font-size: 20px; + line-height: 28px; + color: #2B2D3A; +} + +.header-list { + display: flex; + flex-direction: row; + gap: 40px; + padding: 0 10px; +} + +.header-list-item { + position: relative; + padding-left: 12px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #2B2D3A; +} + +.header-list-item::before { + content: ""; + display: block; + width: 6px; + height: 6px; + background: #2B2D3A; + border-radius: 50%; + position: absolute; + left: 0; + top: 50%; + transform: translate(0, -50%); +} + +.schema { + display: flex; + flex-direction: column; + gap: 40px; + position: relative; + margin: 0 auto; + max-width: 1000px; + + padding: 96px 0 112px; +} + +.schema-title { + display: flex; + justify-content: center; + font-weight: 700; + font-size: 24px; + line-height: 32px; + color: #2B2D3A; +} + +.schema-cards { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 40px; +} + +.schema-card { + max-width: 296px; + display: flex; + flex-direction: column; + justify-content: center; + place-items: center; + gap: 24px; +} + +.schema-card-image { + +} + +.schema-card-text { + width: 64%; + font-weight: 400; + font-size: 16px; + line-height: 24px; + display: flex; + text-align: center; + color: #2B2D3A; +} + +.video { + cursor: pointer; + max-width: 1000px; + margin: 0 auto; + padding: 0 0 60px; +} + +.coop { + background: #FAFAFA; + padding: 76px 0; +} + +.container { + display: flex; + flex-direction: column; + gap: 40px; + max-width: 1232px; + margin: 0 auto; +} + +.coop-title { + font-weight: 700; + font-size: 24px; + line-height: 32px; + color: #2B2D3A; +} + +.coop-cards-wrapper { + display: flex; + flex-direction: row; + gap: 16px; +} + +.coop-cards { + display: flex; + flex-direction: column; + gap: 16px; +} + +.coop-card { + max-width: 608px; + width: 100%; + display: flex; + flex-direction: row; + gap: 20px; + padding: 8px 20px; + + background: #FFFFFF; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); + border-radius: 12px; +} + +.coop-card_secondary { + padding: 16px 20px 0; + display: flex; + flex-direction: column; + gap: 8px; + align-items: center; +} + +.coop-card-title { + font-weight: 400; + font-size: 16px; + line-height: 24px; + display: flex; + align-items: center; + color: #2B2D3A; +} + +.coop-card-title_secondary { + font-weight: 700; + font-size: 16px; + line-height: 24px; + display: flex; + align-items: flex-end; + text-align: center; + color: #2B2D3A; +} + +.coop-card-description { + font-weight: 400; + font-size: 14px; + line-height: 24px; + text-align: center; + color: #2B2D3A; +} + +.coop-title_secondary { + max-width: 80%; +} + +.team-card-text { + display: flex; + flex-direction: column; + justify-content: center; + gap: 12px; +} + +.team-card-title { + font-weight: 700; + font-size: 20px; + line-height: 28px; + color: #2B2D3A; +} + +.team-card-description { + text-align: left; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #2B2D3A; +} + +.team-card { + padding: 11px 40px 11px 20px; +} + +.team-card_secondary { + padding: 20px; + align-items: flex-start; + gap: 12px; +} + +.team-card-button { + display: flex; + justify-content: center; + background: #2B2D3A; + border-radius: 8px; + padding: 16px 80px 12px; + + font-weight: 550; + font-size: 14px; + line-height: 16px; + color: #FFFFFF; +} + +.team-card-image { + padding-left: 130px; +} + +.team-card-title_secondary { + font-weight: 700; + font-size: 20px; + line-height: 28px; + color: #2B2D3A; +} + +.team-card-description_secondary { + text-align: left; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #2B2D3A; +} + +.footer { + background: #2B2D3A; + padding: 24px 0; +} + +.footer-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.footer-text { + display: flex; + flex-direction: column; +} + +.footer-text-name { + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #FFFFFF; +} + +.footer-text-info { + font-weight: 300; + font-size: 16px; + line-height: 24px; + color: #FFFFFF; + + opacity: 0.5; +} + +.footer-phone { + font-weight: 400; + font-size: 20px; + line-height: 24px; + color: #FFFFFF; +} + +.header-tab-button_mobile { + display: none; +} + +.rates { + background: linear-gradient(282.88deg, rgba(2, 128, 196, 0.2) 3.94%, rgba(255, 255, 255, 0.2) 84.15%), linear-gradient(0deg, #0090DE, #0090DE), #FFFFFF; + padding: 56px 0; +} + +.rates-title { + display: flex; + justify-content: center; + font-weight: 700; + font-size: 24px; + line-height: 32px; + color: #FFFFFF; + margin-bottom: 40px; +} + +.rates-cards { + display: flex; + flex-direction: row; + gap: 32px; +} + +.rates-card { + display: flex; + flex-direction: column; + max-width: 320px; + + padding: 24px 20px 20px; + background: #FFFFFF; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); + border-radius: 12px; + height: fit-content; +} + +.rates-card-title { + font-weight: 700; + font-size: 20px; + line-height: 28px; + text-align: center; + color: #2B2D3A; + margin-bottom: 16px; +} + +.rates-card-items { + display: flex; + flex-direction: column; + gap: 12px; +} + +.rates-card-item { + position: relative; + padding-left: 20px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #2B2D3A; +} + +.rates-card-item strong { + font-weight: 600; +} + +.rates-card-item::before { + content: ""; + position: absolute; + display: block; + height: 6px; + width: 6px; + background: #000; + border-radius: 50%; + left: 6px; + top: 10px; +} + +.rates-price-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 4px; + margin: 24px 0 12px; +} + +.rates-price-primary { + font-weight: 700; + font-size: 24px; + line-height: 32px; + + color: #2B2D3A; +} + +.rates-price-secondary { + font-weight: 400; + font-size: 18px; + line-height: 24px; + text-decoration: line-through; + + color: #9F9F9F; +} + +.rates-price-button { + font-weight: 700; + font-size: 16px; + line-height: 24px; + text-align: center; + + color: #FFFFFF; + padding: 14px 24px; + background: linear-gradient(282.88deg, rgba(2, 128, 196, 0.2) 3.94%, rgba(255, 255, 255, 0.2) 84.15%), #0090DE; + border-radius: 8px; +} + +.rates-container { + max-width: 1024px; + gap: 0; +} + + +@media (max-width: 1050px) { + body { + padding: 0; + background: #F5F5F5; + } + + .header-container { + padding: 20px 30px; + border-radius: 0; + } + + .header { + padding: 0; + } + + .header-star-1 { + display: none; + } + + .header-star-4 { + display: none; + } + + .header-list { + flex-direction: column; + gap: 12px; + } + + .header-list-wrapper { + padding: 16px; + gap: 16px; + } + + .header-description { + font-weight: 400; + font-size: 14px; + line-height: 20px; + } + + .header-tab-button { + display: none; + } + + .header-tab-button_mobile { + display: flex; + width: 100%; + justify-content: center; + margin-bottom: 24px; + padding: 13px 0 11px; + } + + .header-middle { + flex-direction: column-reverse; + } + + .header-text { + width: 100%; + place-items: center; + gap: 0; + } + + .header-title { + margin: 16px 0 20px; + text-align: center; + max-width: 100%; + + font-weight: 700; + font-size: 18px; + line-height: 28px; + color: #FFFFFF; + } + + .header-description { + text-align: center; + margin: 0; + } + + .header-image-wrapper { + display: flex; + justify-content: center; + } + + .header-tabs { + margin-bottom: 20px; + } + + .header-star-3 { + top: 0; + left: 40%; + } + + .header-star-2 { + right: 30%; + } + + .schema { + padding: 32px 20px 44px; + } + + .schema-cards { + justify-content: center; + } + + .schema-title { + font-weight: 700; + font-size: 20px; + line-height: 28px; + text-align: center; + } + + .video-content { + width: 100%; + padding: 0 30px; + } + + .video { + padding: 0; + } + + .coop { + padding: 44px 30px; + background: #F5F5F5; + } + + .coop-title { + font-weight: 700; + font-size: 20px; + line-height: 28px; + } + + .coop-title_blue { + color: #0090DE; + } + + .coop-cards-wrapper { + flex-direction: column; + } + + .coop-card { + max-width: 100%; + } + + .coop-card-title { + font-weight: 400; + font-size: 14px; + line-height: 20px; + } + + .coop-card-description { + text-align: left; + font-weight: 400; + font-size: 12px; + line-height: 20px; + } + + .coop-card-images { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + } + + .coop-card-images img { + width: 135px; + } + + .team-card { + padding: 16px; + } + + .team-card .coop-card-image { + display: none; + } + + .team-title { + max-width: 100%; + text-align: center; + } + + .team-card-title { + text-align: center; + color: #0090DE; + } + + .team-card-description { + text-align: center; + } + + .team-card-text { + width: 100%; + } + + .team-card-title_secondary { + color: #0090DE; + width: 100%; + justify-content: center; + } + + .team-card-image { + display: none; + } + + .team-card-description_secondary { + font-weight: 400; + font-size: 14px; + line-height: 20px; + text-align: center; + } + + .team-card-description_secondary br { + display: none; + } + + .team-card-button { + padding: 16px 0 12px; + width: 100%; + } + + .footer { + display: none; + } + + .rates { + padding: 40px 25px 44px; + } + + .rates-cards { + flex-direction: column; + justify-content: center; + } + + .rates-card { + max-width: 100%; + } + + .rates-title { + font-size: 20px; + line-height: 28px; + text-align: center; + margin-bottom: 32px; + } + + .rates-price-wrapper { + margin: 20px 0 8px; + } + +} + +@media (max-width: 768px) { + .header-star-3 { + left: 30%; + } + + .header-star-2 { + right: 20%; + } +} + +@media (max-width: 500px) { + .header-star-3 { + left: 20%; + } + + .header-star-2 { + right: 10%; + } +} + +@media (max-width: 370px) { + .coop-card-images img { + width: 110px; + } +}