From 40b63bab687dcc5895a57dc8e3650f880405083c Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sun, 1 Sep 2019 02:29:38 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A4=D0=B8=D0=BD=D0=B0=D0=BB=D1=8C=D0=BD?= =?UTF-8?q?=D0=B0=D1=8F=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/index.js | 2 +- src/styles/media.css | 27 ++++++++++++++++++++++++++- src/styles/style.css | 30 +++++++++++++++++++++++++++++- 3 files changed, 56 insertions(+), 3 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index 9057d49..c2901ef 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -39,5 +39,5 @@ links.forEach((link) => { }); contentTollTip.classList.add('fade'); contentTollTip.style.display = 'block'; - }); + }); }); \ No newline at end of file diff --git a/src/styles/media.css b/src/styles/media.css index fffc00f..c63c9d7 100644 --- a/src/styles/media.css +++ b/src/styles/media.css @@ -15,15 +15,22 @@ #working .working-item__description p br { display: none; } + #questions .wrap-questions .col-lg-6:nth-child(2) { display: none; } + #questions .wrap-questions__item { text-align: center; } + #questions .more-questions { text-align: center; } + + #questions .question-content { + margin-left: 130px; + } } @media (max-width: 880px) { @@ -64,6 +71,7 @@ #guarantees .guarantees-card__desctiption { margin-top: 20px; } + #detail { padding-bottom: 100px; } @@ -117,25 +125,36 @@ padding-right: 0; padding-left: 0; } + footer .footer-wrap { flex-direction: column; } - footer .footer-wrap__copy, footer .footer-wrap__info { + + footer .footer-wrap__copy, + footer .footer-wrap__info { margin-top: 15px; } + footer .footer-wrap__info p { line-height: 27px; } + #advice { padding-bottom: 100px; } + #questions .wrap-questions__item { text-align: left; } + #questions .wrap-questions__item a { margin-left: 10px; font-size: 16px; } + + #questions .question-content { + margin-left: 0px; + } } @media (max-width: 400px) { @@ -148,4 +167,10 @@ #info .info-card__title h1 { font-size: 29px; } +} + +@media (max-width: 355px) { + #questions .wrap-questions__item .question-content { + width: 295px; + } } \ No newline at end of file diff --git a/src/styles/style.css b/src/styles/style.css index d67867d..0da53fb 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -78,6 +78,7 @@ input { font-family: 'ProximaNovaRegular'; text-transform: uppercase; } + /* Fade Animation */ .fade { -webkit-animation-name: fade; @@ -107,6 +108,7 @@ input { opacity: 1; } } + .container { max-width: 1170px; } @@ -547,6 +549,7 @@ header { color: #fff; margin-top: 35px; } + /* Section Questions */ #questions { color: #fff; @@ -554,12 +557,15 @@ header { padding-bottom: 100px; background-color: #0b3554; } + .wrap-questions__image img { width: 100%; } + .wrap-questions { margin-top: 100px; } + .image-title { display: inline-block; background-color: rgb(11, 53, 84); @@ -568,37 +574,46 @@ header { bottom: 25px; padding: 12px 30px 12px 19px; } + .wrap-questions__item a { margin-left: 30px; color: #fff; border-bottom: 1px solid #fff; transition: all .2s; + cursor: pointer; } + .wrap-questions__item a:hover { color: #579eff; border: none; } + .wrap-questions__item { font-family: 'ProximaNovaBold'; font-size: 18px; margin-top: 55px; } + .wrap-questions__item:nth-child(1) { margin-top: 0px; } + .more-questions { margin-top: 55px; } + .more-questions p a { color: #fff; transition: all .2s; padding-left: 45px; text-decoration: underline; } + .more-questions p a:hover { color: #579eff; text-decoration: none; } + .more-questions p::before { content: ''; display: inline-block; @@ -607,6 +622,7 @@ header { height: 20px; position: absolute; } + .question-content { background-color: #fff; color: #000; @@ -619,18 +635,22 @@ header { margin-left: 30px; margin-top: 35px; display: none; + z-index: 999; } + .question-content::before { border: 20px solid transparent; border-bottom: 20px solid #fff; content: ''; position: absolute; - top: -40px; + top: -40px; } + .tooltip-close { float: right; cursor: pointer; } + /* Section Working */ #working { padding-top: 100px; @@ -792,6 +812,7 @@ header { background-repeat: no-repeat; background-position: center right 30px; } + /* Section Come */ #come { padding-top: 100px; @@ -799,18 +820,22 @@ header { background: url(../img/main-come/main-come__background.jpg) no-repeat center center; background-size: cover; } + #come .title-description { margin-top: 100px; } + #come .title-description p { color: #000; } + #come .title-description p span { font-family: 'ProximaNovaBlack'; font-size: 28px; display: block; margin-top: 20px; } + /* Footer */ footer { min-height: 120px; @@ -819,15 +844,18 @@ footer { padding-bottom: 40px; color: #fff; } + .footer-wrap { display: flex; justify-content: space-between; align-items: center; } + .footer-wrap__info p { text-align: right; font-size: 16px; } + .footer-wrap__info p span { font-family: 'ProximaNovaBlack'; font-size: 21px;