From b52e0f5195024e3fe4a0a642f053b928b79e529e Mon Sep 17 00:00:00 2001 From: Gadzhi Ibragimov Date: Mon, 4 Mar 2024 22:54:22 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BE=D1=82=D0=BA=D0=BE=D1=80=D1=80=D0=B5?= =?UTF-8?q?=D1=82=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BB=20=D0=BC?= =?UTF-8?q?=D0=B5=D0=B4=D0=B8=D0=B0=20=D0=B7=D0=B0=D0=BF=D1=80=D0=BE=D1=81?= =?UTF-8?q?=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/dark.css | 2 - styles/style.css | 214 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 208 insertions(+), 8 deletions(-) diff --git a/styles/dark.css b/styles/dark.css index c35e9fc..8b314b6 100644 --- a/styles/dark.css +++ b/styles/dark.css @@ -22,8 +22,6 @@ } @media (prefers-color-scheme: dark) { - :root { - } } .page.theme_dark { diff --git a/styles/style.css b/styles/style.css index af2a73e..6773078 100644 --- a/styles/style.css +++ b/styles/style.css @@ -120,7 +120,6 @@ top: 20px; right: 29px; display: flex; - display: flex; color: var(--menu-color, #ff0070); font-family: var(--mainfont, sans-serif); font-weight: 400; @@ -180,7 +179,6 @@ margin-inline-end: 20px; margin-block-start: 60px; margin-block-end: 80px; - justify-content: center; } .container--why { @@ -208,14 +206,11 @@ } .container--what-title { + padding-block-end: 20px; grid-column-start: 1; grid-row-start: 1; } -.container--what-title { - padding-block-end: 20px; -} - .title.container--what-block:nth-of-type(1) { grid-column-start: 1; grid-row-start: 2; @@ -372,7 +367,214 @@ } @media screen and (min-width: 376px) and (max-width: 768px) { + .header__theme-menu { + justify-self: flex-end; + align-self: center; + margin-inline-end: 27px; + } + .header__theme-menu-list { + flex-direction: column; + } + + .header__text { + margin-inline-end: 19px; + max-width: 364px; + } + .container--what { + grid-template-columns: 1fr; + } + + .container--what-title { + grid-column-start: 1; + grid-row-start: 1; + grid-row-end: 2; + } + + .title.container--what-block:nth-of-type(1) { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 3; + } + + .text__block.container--what-block:nth-of-type(1) { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 4; + } + + .title.container--what-block:nth-of-type(2) { + grid-column-start: 1; + grid-row-start: 4; + grid-row-end: 5; + } + + .text__block.container--what-block:nth-of-type(2) { + grid-column-start: 1; + grid-row-start: 5; + grid-row-end: 6; + } + + .title.container--what-block:nth-of-type(3) { + grid-column-start: 1; + grid-row-start: 6; + grid-row-end: 7; + } + + .text__block.container--what-block:nth-of-type(3) { + grid-column-start: 1; + grid-row-start: 8; + grid-row-end: 9; + } } @media (max-width: 375px) { + .decor__element { + top: 10px; + right: 19px; + } + + .decorated-zone:after { + top: 10px; + right: 10px; + } + .decorated-zone:before { + bottom: 10px; + left: 10px; + } + + .main-title { + font-size: var(--mainfont-size-mob, 116px); + } + + .header__theme-menu { + justify-self: flex-end; + align-self: center; + margin-inline-end: 17px; + } + .header__theme-menu-list { + flex-direction: column; + gap: 10px; + } + + .header__text { + margin-inline-end: 0; + max-width: 357px; + justify-self: center; + } + + .container { + margin-inline-start: 10px; + margin-inline-end: 10px; + margin-block-start: 50px; + margin-block-end: 50px; + } + + .container--what { + grid-template-columns: 1fr; + } + + .container--what-title { + grid-column-start: 1; + grid-row-start: 1; + grid-row-end: 2; + } + + .title.container--what-block:nth-of-type(1) { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 3; + } + + .text__block.container--what-block:nth-of-type(1) { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 4; + } + + .title.container--what-block:nth-of-type(2) { + grid-column-start: 1; + grid-row-start: 4; + grid-row-end: 5; + } + + .text__block.container--what-block:nth-of-type(2) { + grid-column-start: 1; + grid-row-start: 5; + grid-row-end: 6; + } + + .title.container--what-block:nth-of-type(3) { + grid-column-start: 1; + grid-row-start: 6; + grid-row-end: 7; + } + + .text__block.container--what-block:nth-of-type(3) { + grid-column-start: 1; + grid-row-start: 8; + grid-row-end: 9; + } + + .container--why { + grid-template-columns: 1fr; + } + .container--why-title { + grid-column-start: 1; + grid-row-start: 1; + grid-row-end: 2; + } + + .container--why-block { + grid-column-start: 1; + grid-row-start: span 1; + } + + .container--how { + grid-template-columns: 1fr; + } + + .container--how-title { + grid-column-start: 1; + grid-row-start: 1; + grid-row-end: 2; + } + + .container--img { + grid-template-columns: 1fr; + column-gap: 0; + row-gap: 5px; + } + + .container--img-title { + grid-column-start: 1; + grid-column-end: 1; + grid-row-start: 1; + } + + .container--img-block:nth-of-type(1) { + grid-column-start: 1; + grid-column-end: 1; + grid-row-start: 2; + } + .container--img-block:nth-of-type(2) { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 4; + } + + .container--img-block:nth-of-type(3) { + grid-column-start: 1; + grid-row-start: 4; + grid-row-end: 5; + } + + .container--img-block:nth-of-type(4) { + grid-column-start: 1; + grid-row-start: 5; + } + .container--img-block:nth-of-type(5) { + grid-column-start: 1; + grid-column-end: 6; + grid-row-start: 7; + } }