diff --git a/index.html b/index.html index 438032a..c73a8cf 100644 --- a/index.html +++ b/index.html @@ -121,6 +121,69 @@ +
+
+

Вам не придется ждать!

+
+

+ Любые запчасти для всех моделей Белаз
+ всегда в наличии! +

+
+
+
+
+
+ # +
+
+

+ Все модификации Белаз
+ от 45т до 450 т +

+
+
+
+
+
+
+ # +
+
+

+ Отгружаем в день заказа! +

+
+
+
+
+
+
+ # +
+
+

+ Любые типы деталей
+ от шайбы до двигателя! +

+
+
+
+
+
+
+ # +
+
+

+ Доставим в любое место! +

+
+
+
+
+
+
diff --git a/src/img/main-advantages/icon-1.png b/src/img/main-advantages/icon-1.png new file mode 100644 index 0000000..ba6e578 Binary files /dev/null and b/src/img/main-advantages/icon-1.png differ diff --git a/src/img/main-advantages/icon-2.png b/src/img/main-advantages/icon-2.png new file mode 100644 index 0000000..100411d Binary files /dev/null and b/src/img/main-advantages/icon-2.png differ diff --git a/src/img/main-advantages/icon-3.png b/src/img/main-advantages/icon-3.png new file mode 100644 index 0000000..ce23e3a Binary files /dev/null and b/src/img/main-advantages/icon-3.png differ diff --git a/src/img/main-advantages/icon-4.png b/src/img/main-advantages/icon-4.png new file mode 100644 index 0000000..5ee76f2 Binary files /dev/null and b/src/img/main-advantages/icon-4.png differ diff --git a/src/styles/media.css b/src/styles/media.css index 7dbf674..931aa65 100644 --- a/src/styles/media.css +++ b/src/styles/media.css @@ -1,15 +1,21 @@ @media (max-width: 991px) { - #price .form-price__input input, #price .form-price__submit button, #price .form-submit__description { + + #price .form-price__input input, + #price .form-price__submit button, + #price .form-submit__description { width: 440px; } + #price h2 { text-align: center; } } + @media (max-width: 880px) { header .header-wrap { flex-direction: column; } + header .header-wrap__info p { display: block; text-align: center; @@ -17,65 +23,80 @@ margin-bottom: 15px; margin-top: 15px; } + header .header-wrap__info { display: flex; justify-content: center; flex-direction: column; align-items: center; } + header .header-wrap__opening { order: 1; margin-top: 15px; } + header .header-wrap__logo { text-align: center; } } + @media (max-width: 630px) { #price .form-price__input { flex-direction: column; } + #price .form-price__input input { margin-left: 0px; margin-top: 15px; width: 100%; } + #price .form-price__submit { flex-direction: column; } + #price .form-submit__description { width: 100%; text-align: center; } + #price .form-price__submit button { width: 100%; margin: 0; margin-top: 30px; } } + @media (max-width: 576px) { #info .info-wrap__card { padding-left: 50px; } + #info .info-card__title h1 { font-size: 32px; } + #info .info-card__description p { font-size: 18px; } + #info .info-advantages__item p { font-size: 16px; } - .no-gutter > [class*='col-'] { - padding-right:0; - padding-left:0; + + .no-gutter>[class*='col-'] { + padding-right: 0; + padding-left: 0; } } + @media (max-width: 400px) { #info .info-wrap__card { padding-left: 25px; } } + @media (max-width: 360px) { #info .info-card__title h1 { font-size: 29px; diff --git a/src/styles/style.css b/src/styles/style.css index 1575123..2aef273 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -7,15 +7,16 @@ font-weight: normal; font-style: normal; } + @font-face { font-family: 'ProximaNovaBold'; src: url('../fonts/ProximaNova-Bold.eot'); src: url('../fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'), - url('../fonts/ProximaNova-Bold.woff') format('woff'), - url('../fonts/ProximaNova-Bold.ttf') format('truetype'); + url('../fonts/ProximaNova-Bold.woff') format('woff'), + url('../fonts/ProximaNova-Bold.ttf') format('truetype'); font-weight: normal; font-style: normal; - } +} @font-face { font-family: 'ProximaNovaBlack'; @@ -26,15 +27,16 @@ font-weight: normal; font-style: normal; } + @font-face { font-family: 'ProximaNovaExtraBold'; src: url('../fonts/ProximaNova-Extrabld.eot'); src: url('../fonts/ProximaNova-Extrabld.eot?#iefix') format('embedded-opentype'), - url('../fonts/ProximaNova-Extrabld.woff') format('woff'), - url('../fonts/ProximaNova-Extrabld.ttf') format('truetype'); + url('../fonts/ProximaNova-Extrabld.woff') format('woff'), + url('../fonts/ProximaNova-Extrabld.ttf') format('truetype'); font-weight: normal; font-style: normal; - } +} h1, h2, @@ -46,11 +48,13 @@ p { margin: 0; padding: 0; } + h2 { font-family: 'ProximaNovaBlack'; text-align: center; - font-size: 26px; + font-size: 29px; } + body { font-family: 'ProximaNovaRegular'; margin: 0; @@ -63,6 +67,12 @@ button { .container { max-width: 1170px; } + +.title-desctiprion { + text-align: center; + margin-top: 35px; +} + /* Section Header */ header { padding-top: 25px; @@ -70,30 +80,39 @@ header { background-color: #191919; color: #fff; } + .header-wrap { display: flex; justify-content: space-between; align-items: center; } -.header-wrap__logo, .header-wrap__opening, .header-wrap__info { + +.header-wrap__logo, +.header-wrap__opening, +.header-wrap__info { width: 370px; } + .header-wrap__opening { width: 150px; } + .header-wrap__opening p { font-size: 13px; line-height: 23px; font-family: 'ProximaNovaBold'; text-align: center; } + .header-wrap__opening p span { font-family: 'ProximaNovaRegular'; font-size: 12px; } + .header-wrap__info { text-align: right; } + .header-wrap__info button { width: 170px; cursor: pointer; @@ -107,10 +126,12 @@ header { vertical-align: top; height: 50px; } + .header-wrap__info button:hover { background: none; border: 2px solid #1669b3; } + .header-wrap__info p { display: inline-block; text-align: right; @@ -119,12 +140,14 @@ header { position: relative; right: 28px; } + /* Section Maon-info */ #info { min-height: 860px; background: url(../img/main-info/main-info__background.jpg) no-repeat center center; background-size: cover; } + .info-wrap__card { background-color: #f7b516; color: #000000; @@ -132,28 +155,34 @@ header { padding-top: 100px; padding-left: 100px; } + .info-card__title h1 { text-transform: uppercase; font-family: 'ProximaNovaBlack'; font-size: 38px; } + .info-card__description p { font-family: 'ProximaNovaExtraBold'; margin-top: 47px; font-size: 24px; } + .info-card__advantages { margin-top: 100px; font-family: 'ProximaNovaRegular'; } + .info-advantages__item { margin-top: 45px; } + .info-advantages__item p { padding-left: 15px; display: inline-block; font-size: 18px; } + .info-advantages__item:nth-child(1)::before { content: ''; display: inline-block; @@ -163,6 +192,7 @@ header { bottom: 4px; background: url(../img/main-info/icon-1.png) no-repeat center center; } + .info-advantages__item:nth-child(2)::before { content: ''; display: inline-block; @@ -172,6 +202,7 @@ header { bottom: 4px; background: url(../img/main-info/icon-2.png) no-repeat center center; } + .info-advantages__item:nth-child(3)::before { content: ''; display: inline-block; @@ -181,6 +212,7 @@ header { bottom: 4px; background: url(../img/main-info/icon-3.png) no-repeat center center; } + .info-advantages__item:nth-child(4)::before { content: ''; display: inline-block; @@ -190,6 +222,7 @@ header { bottom: 4px; background: url(../img/main-info/icon-4.png) no-repeat center center; } + /* Section Main-price */ #price { min-height: 500px; @@ -198,19 +231,24 @@ header { padding-top: 100px; padding-bottom: 100px; } + #price h2 { text-align: right; } + .wrap-price { margin-top: 60px; } -.form-price__input{ + +.form-price__input { display: flex; justify-content: space-between; } + .form-price__input input:nth-child(1) { margin-left: 0px; } + .form-price__input input { width: 370px; margin-left: 30px; @@ -222,17 +260,20 @@ header { font-family: 'ProximaNovaRegular'; text-transform: uppercase; } + .form-price__submit { margin-top: 30px; display: flex; justify-content: space-between; } + .form-price__submit p { text-align: right; padding-top: 27px; display: inline-block; padding-right: 30px; } + .form-price__submit button { width: 360px; margin-left: 30px; @@ -245,15 +286,18 @@ header { cursor: pointer; transition: all .2s; } + .form-price__submit button:hover { background: none; border: 2px solid #1866af; color: #000; } + .form-submit__description { width: 360px; text-align: right; } + .form-submit__description::after { content: ''; display: inline-block; @@ -261,3 +305,32 @@ header { height: 30px; background: url(../img/main-price/clock-icon.png) no-repeat center center; } + +/* Section Advantages */ +#advantages { + background-color: #08243e; + padding-top: 100px; + padding-bottom: 100px; +} + +#advantages h2, +#advantages p { + color: #fff; +} + +.wrap-advantages { + margin-top: 100px; +} + +.wrap-advantages__card { + text-align: center; + margin-top: 25px; +} + +.advantages-card__description { + margin-top: 50px; +} + +.advantages-card__img { + height: 100px; +} \ No newline at end of file