diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..aa44e6b --- /dev/null +++ b/css/main.css @@ -0,0 +1,557 @@ +@font-face { + font-family: 'gilroy_extrabold'; + src: url("../fonts/gilroyextrabold.woff2"); +} + +@font-face { + font-family: 'gilroy_light'; + src: url("../fonts/gilroylight.woff2"); +} + +/* open-sans-300 - latin_cyrillic */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + src: url('../fonts/open-sans-v34-latin_cyrillic-300.eot'); /* IE9 Compat Modes */ + src: local(''), + url('../fonts/open-sans-v34-latin_cyrillic-300.woff2') format('woff2'), /* Super Modern Browsers */ + } + /* open-sans-regular - latin_cyrillic */ + @font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: url('../fonts/open-sans-v34-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */ + src: local(''), + url('../fonts/open-sans-v34-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */ + } + +h2{ + font-family: "gilroy_extrabold", Arial, sans-serif; +} + +.visually-hidden{ + margin: -1; + padding: 0px; + position: absolute; + height: 1px; + top: 0%; + left: 0%; + width: 1px; + + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} + +body{ + font-family: 'Open Sans'; + margin: 0px; + padding: 0px; + background-color: white; +} + +.header-logo{ + margin: auto; + margin-top: 40px; + margin-bottom: 0px; + padding: 51px 60px; + padding-bottom: 0; + + width: 1040px; + height: 135px; + + background-color: #f7e296 ; +} + +.main-navigation{ + margin: 0; + margin-top: 0px; + padding: 0; + width: auto; + + font-size: 15px; + background-color: #f7e296; + background-position: bottom; +} + +.main-search{ + margin: 0%; + width: 540px; + display: inline-block; + padding: 0%; +} +.user-menu-left{ + width: 287px; + display: inline-block; +} + +.login-button{ + background-image: url("../img/user.svg"); + background-repeat: no-repeat; + background-position: 0px center; + + background-size: 13px 12px; + + + padding: 0%; + padding-left: 23px; + margin: 0%; + vertical-align: middle; +} + +.site-navigation{ + padding: 0%; + margin: 0%; + width: 100%; + margin-top: 50px; + white-space: nowrap; + font-size: 0px; +} + +.site-navigation li{ + + + display: inline-block; + font-family: "gilroy_extrabold", Arial, Helvetica, sans-serif; + font-size: 18px; + letter-spacing: 3px; + + font-weight: bold; + text-transform: uppercase; + line-height: 1.333; +} + +.site-navigation li a{ + text-decoration: none; + color: rgb(0, 0, 0); +} + + + +.user-menu-right{ + width: auto; + display: inline-block; +} + +.cart-button{ + background-image: url("../img/cart.svg"); + background-repeat: no-repeat; + background-position: 0px center; + + background-size: 12px; + + + padding: 0%; + padding-left: 23px; + margin: 0%; + vertical-align: middle; +} + +.compare-button{ + background-image: url("../img/compare.svg"); + background-repeat: no-repeat; + background-position: 0px center; + background-size: 11px; + + + padding: 0%; + padding-left: 23px; + margin: 0%; + vertical-align: middle; +} + + +#search-input{ + border-style: none; + background-color: transparent; + background-image: url("../img/search.svg"); + background-size: 16px; + background-position: 0px 0px; + background-repeat: no-repeat; + + padding: 0%; + padding-left: 38px; + margin: 0%; + + font-family: 'Open Sans'; + font-weight: 300; + font-size: 15px; + opacity: 1; + color: black; + vertical-align: middle; +} + +#search-input::placeholder{ + opacity: 0.3; +} + +.main-user-menu{ + margin: 0%; + width: auto; + display: inline-block; + padding: 0%; +} + +.cart-navigation{ + list-style: none; + margin: 0%; + width: auto; + display: inline-block; + padding: 0%; +} + +.cart-navigation li{ + display: inline-block; +} + +.cart-navigation li a{ + color: black; + text-decoration: none; +} + + +/*.user-navigation li{ + display: inline; +}*/ + + + +.user-navigation{ + list-style: none; + margin: 0%; + padding: 0%; + width: 287; + display: inline-block; +} + +.header-logo h1{ + position: absolute; + top: 10px; + left: calc(50% - 523px); + margin: 0px; + padding: 0px; + border-style: none; + opacity: 1; + + font-family: "gilroy_extrabold", Arial, Helvetica, sans-serif; + font-size: 48px; + text-transform: uppercase; + color: black; +} + + +.header-logo a:focus, .header-logo a:hover{ + opacity: 0.6; + +} + +.header-logo a:active{ + opacity: 0.3; + +} + + +.container{ + margin: 0% auto; + width: 100%; + padding: 0px; +} + +.adv-section{ + margin: 0% auto; + padding: 0%; + width: 1160px; + + background:linear-gradient(to bottom, #f7e296 0px 113px, white 113px 100%); + font-size: 0px; + height: 483px; +} + +.adv-section-image{ + vertical-align: top; + height: 100%; + box-sizing: border-box; + width: 500px; + margin-top: 10px; + margin-bottom: 0px; + margin-left: 60px; + margin-right: 20px; + display: inline-block; + font-size: 15px; + + text-align: center; + vertical-align: middle; +} + +.adv-section-description{ + vertical-align: top; + height: 100%; + box-sizing: border-box; + width: 490px; + margin-top: 10px; + margin-bottom: 0px; + margin-left: 20px; + margin-right: 60px; + display: inline-block; + font-size: 15px; + + background-image: url("../img/01.svg"); + background-repeat: no-repeat; + background-position: right top; +} + +.h2{ + font-family: "gilroy_extrabold",Arial, sans-serif; + font-size: 47px; +} + +.header3{ + font-family: "gilroy_extrabold",Arial, sans-serif; + font-size: 18px; + padding: 0%; + margin: 0%; + text-align: center; + text-transform: uppercase; + letter-spacing: 4px; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px calc(50% - 4px), #f0c52e calc(50% - 2px) calc(50% + 4px), rgba(255, 255, 255, 0) calc(50% - 4px) 100%); +} + +.adv-section-description-table-1st{ + font-family: "gilroy_light"; + font-size: 36px; +} + +.adv-section-description-table-2st{ + font-size: 13px; +} + +.adv-section-description-table{ + border: none; + border-width: 0; + border-spacing: 0; + padding: 0%; +} + +.adv-section-description-table tr td{ + width: 160px; + padding: 0%; + padding: 0%; +} + +.header3-detail{ + width: 220px; +} + +.adv-section-image img{ + width: fit-content; +} + +.popular{ + margin: 0% auto; + padding: 0%; + width: auto; + height: auto; + text-align: center; +} + +.popular-nav-list{ + margin: 0%; + padding: 0%; + width: auto; + height: auto; + font-size: 0px; + margin-top: 100px; + vertical-align: top; +} + + + +.popular-nav-list li{ + margin: 0% 20px; + width: 160px; + height: 220px; + display: inline-table; + font-size: 18px; + font-family: "gilroy_extrabold", Arial, sans-serif; + text-align: center; + color: black; + background: linear-gradient(to bottom, #f7e296 0px 160px, transparent 160px 100%); + +} + +.popular-nav-list li div{ + margin: 0%; + padding: 0%; + width: 100%; + height: 240px; + background-position: 50% calc(50% - 40px); + text-align: left; +} + +.popular-nav-list li div span{ + display: inline-table; + padding: 0%; + margin: 0%; + margin-top: 200px; + height: 40px; + text-align: left; + opacity: inherit; +} + +.popular-nav-list li:hover, focus{ + background: linear-gradient(to bottom, #f0c52e 0px 160px, transparent 160px 100%); +} + +.popular-nav-list li div:active{ + opacity: 30%; +} + +.popular-vr{ + background-image: url("../img/popular-1.svg"); + background-repeat: no-repeat; + +} + +.popular-monopad{ + background-image: url("../img/popular-2.svg"); + background-repeat: no-repeat; +} +.popular-action{ + background-image: url("../img/popular-3.svg"); + background-repeat: no-repeat; +} +.popular-fittness { + background-image: url("../img/popular-4.svg"); + background-repeat: no-repeat; +} +.popular-smart-watch { + background-image: url("../img/popular-5.svg"); + background-repeat: no-repeat; +} +.popular-quadro{ + background-image: url("../img/popular-6.svg"); + background-repeat: no-repeat; +} + +.services{ + margin: 0%; + padding: 0%; + margin-top: 100px; + + text-align: center; + width: 100%; + height: 400px; + padding: auto; + background: linear-gradient(to bottom, white 0px 98px, #e5e5e5 98px 300px); +} + +.services__div{ + margin: 0% auto; + padding: 0%; + width: 1160px; + text-align: left; + background-image: url("../img/delivery.png"); + background-repeat: no-repeat; + background-position: right center; +} + +.services-left{ + padding: 0px 0px; + + display: inline-block; + width: 278px; + height: 320px; + background: linear-gradient(to left, black 0px 7px, rgba(255, 255, 255, 0) 7px 100px); +} + +.services-list{ + margin: 81px 0%; + padding: 0%; + list-style: none; +} + +.services-list li button{ + margin-top: 26px; + padding: 11px 0px; + vertical-align: middle; + border: none; +} + +.textblock{ + display: block; + margin-top: auto; + margin-bottom: auto; +} + + +.services-list-sel{ + width: 100%; + text-align: left; + background: black; + color: #f7e296; +} + +.services-list li:hover,:focus{ + width: calc(100% - 7px); + text-align: left; + background: #f0c52e; + color: black; +} + + +.services-list-unsel{ + width: 160px; + border: none; +} + +.services-list__span{ + width: 160px; + display: block; + text-align: center; +} + +.services-right-visible{ + margin: auto; + margin-left: 117px; + display: inline-table; + width: 437px; + vertical-align: top; + font-size: 15px; + line-height: 30px; +} + +.services-right-visible h2{ + margin-top: 81px; + text-align: left; + font-size: 47px; +} + +.logotypes{ + width: 1200px; + margin: auto; + margin-top: 150px; + margin-bottom: 0; + padding: 0%; +} + +.logotypes-list{ + margin: 0%; + padding: 0%; + font-size: 0; +} + +.logotypes-list li{ + display: inline-block; + margin: 20px; + width: 260; + mix-blend-mode: luminosity; + opacity: 20%; +} + +.logotypes-list li:hover, :focus{ + mix-blend-mode: normal; + opacity: 100%; +} \ No newline at end of file diff --git a/fonts/gilroyextrabold.woff2 b/fonts/gilroyextrabold.woff2 new file mode 100644 index 0000000..c6a4478 Binary files /dev/null and b/fonts/gilroyextrabold.woff2 differ diff --git a/fonts/gilroylight.woff2 b/fonts/gilroylight.woff2 new file mode 100644 index 0000000..ed1c2aa Binary files /dev/null and b/fonts/gilroylight.woff2 differ diff --git a/img/01.svg b/img/01.svg new file mode 100644 index 0000000..d682013 --- /dev/null +++ b/img/01.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/cart.svg b/img/cart.svg new file mode 100644 index 0000000..f61beb7 --- /dev/null +++ b/img/cart.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/img/compare.svg b/img/compare.svg new file mode 100644 index 0000000..6c19651 --- /dev/null +++ b/img/compare.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/img/delivery.png b/img/delivery.png new file mode 100644 index 0000000..b3c6fd9 Binary files /dev/null and b/img/delivery.png differ diff --git a/img/instagram.svg b/img/instagram.svg new file mode 100644 index 0000000..c60e54d --- /dev/null +++ b/img/instagram.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + diff --git a/img/logo-1.png b/img/logo-1.png new file mode 100644 index 0000000..70c1c75 Binary files /dev/null and b/img/logo-1.png differ diff --git a/img/logo-1color.png b/img/logo-1color.png new file mode 100644 index 0000000..6753c96 Binary files /dev/null and b/img/logo-1color.png differ diff --git a/img/logo-2.png b/img/logo-2.png new file mode 100644 index 0000000..d30ac84 Binary files /dev/null and b/img/logo-2.png differ diff --git a/img/logo-2color.png b/img/logo-2color.png new file mode 100644 index 0000000..04e3768 Binary files /dev/null and b/img/logo-2color.png differ diff --git a/img/logo-3.png b/img/logo-3.png new file mode 100644 index 0000000..67612e7 Binary files /dev/null and b/img/logo-3.png differ diff --git a/img/logo-3color.png b/img/logo-3color.png new file mode 100644 index 0000000..02c1b6e Binary files /dev/null and b/img/logo-3color.png differ diff --git a/img/logo-4.png b/img/logo-4.png new file mode 100644 index 0000000..1759142 Binary files /dev/null and b/img/logo-4.png differ diff --git a/img/logo-4color.png b/img/logo-4color.png new file mode 100644 index 0000000..a341c5c Binary files /dev/null and b/img/logo-4color.png differ diff --git a/img/logocolor.svg b/img/logocolor.svg new file mode 100644 index 0000000..8259dae --- /dev/null +++ b/img/logocolor.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/popular-1.svg b/img/popular-1.svg new file mode 100644 index 0000000..bc97359 --- /dev/null +++ b/img/popular-1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + diff --git a/img/popular-2.svg b/img/popular-2.svg new file mode 100644 index 0000000..fde4441 --- /dev/null +++ b/img/popular-2.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/img/popular-3.svg b/img/popular-3.svg new file mode 100644 index 0000000..5ec08e4 --- /dev/null +++ b/img/popular-3.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + diff --git a/img/popular-4.svg b/img/popular-4.svg new file mode 100644 index 0000000..a5cb79c --- /dev/null +++ b/img/popular-4.svg @@ -0,0 +1,75 @@ + + + + + + + + + diff --git a/img/popular-5.svg b/img/popular-5.svg new file mode 100644 index 0000000..48ac0a6 --- /dev/null +++ b/img/popular-5.svg @@ -0,0 +1,24 @@ + + + + + + + + + + diff --git a/img/popular-6.svg b/img/popular-6.svg new file mode 100644 index 0000000..a5940c2 --- /dev/null +++ b/img/popular-6.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + diff --git a/img/search.svg b/img/search.svg new file mode 100644 index 0000000..bca8686 --- /dev/null +++ b/img/search.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/img/slide1.png b/img/slide1.png new file mode 100644 index 0000000..92aeca8 Binary files /dev/null and b/img/slide1.png differ diff --git a/img/slide2.png b/img/slide2.png new file mode 100644 index 0000000..fd9c0bb Binary files /dev/null and b/img/slide2.png differ diff --git a/img/slide3.png b/img/slide3.png new file mode 100644 index 0000000..a043c75 Binary files /dev/null and b/img/slide3.png differ diff --git a/img/slider-button-empty.svg b/img/slider-button-empty.svg new file mode 100644 index 0000000..78384d5 --- /dev/null +++ b/img/slider-button-empty.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/img/slider-button.svg b/img/slider-button.svg new file mode 100644 index 0000000..ad69817 --- /dev/null +++ b/img/slider-button.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + diff --git a/img/user.svg b/img/user.svg new file mode 100644 index 0000000..bad46ee --- /dev/null +++ b/img/user.svg @@ -0,0 +1,8 @@ + + + + + + diff --git "a/img/\320\242\320\262\320\270\321\202\320\265\321\200.svg" "b/img/\320\242\320\262\320\270\321\202\320\265\321\200.svg" new file mode 100644 index 0000000..cbd35b1 --- /dev/null +++ "b/img/\320\242\320\262\320\270\321\202\320\265\321\200.svg" @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git "a/img/\320\244\320\221.svg" "b/img/\320\244\320\221.svg" new file mode 100644 index 0000000..627d07b --- /dev/null +++ "b/img/\320\244\320\221.svg" @@ -0,0 +1,8 @@ + + + + + + diff --git a/index.html b/index.html index 88ab448..c3d50b4 100644 --- a/index.html +++ b/index.html @@ -2,62 +2,81 @@ - Device - Главная страница + Device - Главная страница + -
-

Device

-
+
-

Реклама лучшей палки

+

Реклама лучшей палки

+
- Картинка самой длинной селфи-палки + Картинка длинной селфи-палки
+
-

+ +
+

+ Делай селфи,
как Бен Стиллер! +

Самая длинная палка для селфи доступна в нашем магазине. Восемь (Восемь, Карл!) метров длиной и весом всего 5 килограмм.

-

+

Подробнее

- + @@ -68,91 +87,170 @@

-

Разделы продуктов

+

Разделы продуктов

-
-
    -
  • - Доставка -
    • -
  • - Гарантия -
    • -
  • - Кредит -
    • -
+
+

Меню сервисов

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+

Доставка

+

+ Мы с удовольствием доставим ваш товар прямо к вашему + подъезду совершенно бесплатно! Ведь мы неплохо заработаем, + поднимая его на ваш этаж. +

+
+ +
-
-

Доставка

-

- Мы с удовольствием доставим ваш товар прямо к вашему - подъезду совершенно бесплатно! Ведь мы неплохо заработаем, - поднимая его на ваш этаж. -

-
-
-

Гарантия

-

- Если из-за возгорания купленного у нас товара у вас сгорит дом — - не переживайте, мы выдадим вам новый. Товар, не дом, конечно же. -

-
-

Кредит

-

- Залезть в долговую яму стало проще! - Кредитные консультанты подберут для вас наиболее выгодные - условия кредита. Выгодные для нашего банка, разумеется. -

  • - 1-й лготип + 1-й лготип
  • - 2-й лготип + 2-й лготип
  • - 3-й лготип + 3-й лготип
  • - 4-й лготип + 4-й лготип
-
-

Последняя секция

+
+

О нас

- + Огромный выбор гаджетов не оставит равнодушным гика, который есть в каждом из нас.

+

+ Мы можем доставить ваш товар в самые отдаленные точки России! DEVICE работает со многими транспортными компаниями: +

+
    +
  • Деловые Линии
    • +
  • Автотрейдинг
    • +
  • ЖелДорЭкспедиция
    • +
+ Подробнее о нас +
+
+

О нас

+

+ Вы можете забрать товар сами, заехав в наш офис. Заодно, вы сможете проверить работоспособность покупки. Всякое бывает. +

+ Адрес: Улица Строителей, дом 15 + + Напишите нам
+
+ +
+ г.Москва, ул.Строителей, 15 +
    +
  • Доставка
    • +
  • Гарантия
    • +
  • Контакты
    • +
+ Тел.: +7 (495) 495-95-95 +
+
+
    +
    • +
    • +
    • +
+ +
+
+
+

Форма отправки сообщения

+ +
+ + + + + + +
+
+

Карта

+

+ +

+
8.5м 5кгкарбонКарбон
длина палки