From 33cc2d9c6e2d63543a8f08ced6ee8be293f8d3cc Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Mon, 7 Oct 2024 02:58:52 +0300 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-core.css | 17 ++++++ assets/css/gp-style-desktop.css | 96 +++++++++++++++++++++++++++++++++ assets/css/gp-style-mobile.css | 25 +++++++++ assets/css/gp-style-tablet.css | 10 +++- index.html | 84 +++++++++++++++++++++++++++++ 5 files changed, 231 insertions(+), 1 deletion(-) diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index c614381..36fab3c 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -416,6 +416,11 @@ button{ } .social-media__item{ margin-left: 32px; + + transition: opacity .2s ease-out; +} +.social-media__item:hover{ + opacity: .8; } .social-media__item:first-child{ margin-left: 0px; @@ -571,6 +576,18 @@ button{ background-repeat: no-repeat; background-size: contain; } +.button--black{ + padding: 7px 15px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-white); + + background: var(--background-black); + border: 1px solid var(--text-white); +} .to-know{ width: 100%; diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index fa9abaa..1ecf1ce 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -557,6 +557,102 @@ } /* modal */ +/* footer */ +.footer{ + padding: 40px 24px; + + background: var(--background-black); +} +.footer__wrapper{ + width: 100%; + + display: flex; +} +.footer__content{ + width: calc(100% - 364px); +} +.footer__logo{ + width: 187px; + height: 43px; +} +.footer__address{ + margin-top: 24px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-white); + font-style: normal; +} +.footer__list{ + margin: 28px -12px -12px -12px; + + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.footer-list__item{ + margin: 12px; + + width: calc(50% - 24px); + + display: flex; + flex-direction: column; +} +.footer-list__item:nth-child(even){ + width: 322px; +} +.footer-list__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-white); +} +.footer-list__link{ + margin-top: 4px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-white); + + text-decoration: none; +} +.footer__form{ + margin-left: 48px; + + width: 364px; +} +.footer__about{ + margin-top: 16px; + + padding-top: 15px; + + display: flex; + justify-content: space-between; + align-items: center; + + border-top: 1px solid var(--text-white); +} +.footer-about__text{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + text-align: right; + color: var(--text-white); + opacity: 0.6; + + text-decoration: none; +} +.footer__social-media{ + display: none; +} +/* footer */ + @media only screen and (max-width: 1600px) { .wrapper{ diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css index 50f6be4..81467a0 100644 --- a/assets/css/gp-style-mobile.css +++ b/assets/css/gp-style-mobile.css @@ -41,6 +41,31 @@ } /* modal */ +/* footer */ +.footer__about{ + display: none; +} +.footer__wrapper{ + flex-direction: column; +} +.footer__content{ + width: 100%; +} +.footer__form{ + margin-top: 24px; + margin-left: 0; + + width: 100%; +} +.footer__social-media{ + display: block; + + margin-top: 24px; +} +.footer__list{ + margin-top: 20px; +} +/* footer */ } @media only screen and (max-width: 576px) { diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index c44ee7f..38e32dc 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -37,7 +37,15 @@ top: 56px; } /* header */ - + +/* footer */ +.footer__about{ + justify-content: center; +} +.footer-about__text{ + display: none; +} +/* footer */ } @media only screen and (max-width: 980px) { diff --git a/index.html b/index.html index 7505690..92b3e3d 100644 --- a/index.html +++ b/index.html @@ -757,7 +757,91 @@