From 28c4b6442e9e06abf01575b0acb0138d4cdf8d90 Mon Sep 17 00:00:00 2001 From: nimtaurel Date: Thu, 28 Dec 2023 10:22:22 +0600 Subject: [PATCH] fix --- index.html | 14 +- styles.css | 293 ++++++++++++++------------------------- styles.css.map | 2 +- styles.scss | 363 +++++++++++++++++++------------------------------ 4 files changed, 249 insertions(+), 423 deletions(-) diff --git a/index.html b/index.html index fcabc5d..c5dd7a8 100644 --- a/index.html +++ b/index.html @@ -8,16 +8,16 @@
-
+

ESEP ПБП

БЮДЖЕТНОЕ ПЛАНИРОВАНИЕ

-
+
-
+

ПОРТАЛ
@@ -35,23 +35,23 @@

-
+

ESEP ПЛАНФАКТ

ОБЛАЧНАЯ БУХГАЛТЕРИЯ

-
+
-
+

ОБЛАЧНАЯ БУХГАЛТЕРИЯ

- Перейти + Перейти
СВЯЗАТЬСЯ С НАМИ
diff --git a/styles.css b/styles.css index f0361ab..9e0b482 100644 --- a/styles.css +++ b/styles.css @@ -3,11 +3,7 @@ body { font-family: "Roboto", sans-serif; } -.row { - margin: 0; -} - -p { +.row, p { margin: 0; } @@ -15,10 +11,70 @@ header { height: 70px; } -.PBP-container { +.container { + max-height: 50vh; + display: flex; + justify-content: end; + flex-direction: column; + align-items: center; + position: absolute; + bottom: 5%; + text-align: center; + z-index: 999; +} + +.logo-container { + padding: 11px 12px; + font-size: 20px; + font-weight: 400; + white-space: nowrap; +} +.logo-container p { + font-weight: 300; + font-size: 20px; + margin-bottom: 0; +} +.logo-container p b { + font-weight: bold; +} +.logo-container p span { + background-color: white; + color: #E58F65; + padding: 0 1px; +} +.logo-container .sm-text { + font-size: 11px; + letter-spacing: 1.4px; +} + +.main-text-wrapper { + position: relative; + display: flex; + flex-direction: column; + justify-content: end; + align-items: center; + margin-bottom: 20%; + height: 100px; +} +.main-text-wrapper h1 { + font-size: 29px; + font-weight: 600; + text-shadow: 5px 4px 10px rgba(0, 0, 0, 0.25); + line-height: 100%; + letter-spacing: 5px; +} +.main-text-wrapper .line { + position: absolute; + bottom: 0; + width: 330px; + height: 2px; + display: block; +} + +.PBP-container, .PF-container { padding: 0; } -.PBP-container .PBP-header { +.PBP-container .PBP-header, .PF-container .PBP-header { background-color: #001529; color: #f8f8f8; display: flex; @@ -26,42 +82,27 @@ header { justify-content: center; align-items: start; } -.PBP-container .PBP-header .logo-container { - padding: 11px 12px; - font-size: 20px; - font-weight: 400; - white-space: nowrap; +.PBP-container .PF-header, .PF-container .PF-header { + background: linear-gradient(32deg, #D05353 24%, #E58F65 100%); + color: #f8f8f8; + display: flex; + flex-direction: column; + justify-content: center; + align-items: end; } -.PBP-container .PBP-header .logo-container p { - font-weight: 300; - font-size: 20px; - margin-bottom: 0; -} -.PBP-container .PBP-header .logo-container p b { - font-weight: bold; -} -.PBP-container .PBP-header .logo-container p span { - background-color: white; - color: #E58F65; - padding: 0 1px; -} -.PBP-container .PBP-header .logo-container .sm-text { - font-size: 11px; - letter-spacing: 1.4px; -} -.PBP-container main { +.PBP-container main, .PF-container main { position: relative; height: calc(100vh - 70px); min-height: fit-content; } -.PBP-container main img { +.PBP-container main img, .PF-container main img { height: 100%; object-fit: cover; width: 100%; background-position: center; background-repeat: no-repeat; } -.PBP-container main::before { +.PBP-container main::before, .PF-container main::before { content: ""; position: absolute; top: 0; @@ -71,190 +112,56 @@ header { background-color: rgba(255, 255, 255, 0.6); z-index: 1; } -.PBP-container main .container { - max-height: 60%; - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - position: absolute; - top: 20%; - text-align: center; - z-index: 999; -} -.PBP-container main .container .main-text-wrapper { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 20%; -} -.PBP-container main .container .main-text-wrapper h1 { - font-size: 29px; - font-weight: 600; - text-shadow: 5px 4px 10px rgba(0, 0, 0, 0.25); - line-height: 100%; - letter-spacing: 5px; -} -.PBP-container main .container .main-text-wrapper .line { - position: absolute; - bottom: 0; - width: 330px; - height: 2px; - background-color: #001529; - display: block; -} -.PBP-container main .container .btn-pb { - background-color: #001529; +.PBP-container main .btn, .PF-container main .btn { color: white; font-size: 16px; font-weight: 500; - margin-bottom: 25%; + margin-bottom: 15%; transition: all 0.3s; } -.PBP-container main .container .btn-pb:hover { - background-color: #093460; -} -.PBP-container main .container .btn-pb:active { +.PBP-container main .btn:active, .PF-container main .btn:active { transform: translateY(2px); padding: 4px 10px; border: none; + color: white; } -.PBP-container main .container .contact-us-wrapper h5 { +.PBP-container main .btn-pb, .PF-container main .btn-pb { + background-color: #1871b2; +} +.PBP-container main .btn-pb:hover, .PF-container main .btn-pb:hover { + background-color: #093460; +} +.PBP-container main .btn-pf, .PF-container main .btn-pf { + background-color: #146960; +} +.PBP-container main .btn-pf:hover, .PF-container main .btn-pf:hover { + background-color: #0e4f47; +} +.PBP-container main .contact-us-wrapper h5, .PF-container main .contact-us-wrapper h5 { font-weight: 600; margin-bottom: 0; text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17); } -.PBP-container main .container .contact-us-wrapper .line { +.PBP-container main .contact-us-wrapper .line, .PF-container main .contact-us-wrapper .line { width: 100px; height: 1px; - background-color: #001529; } -.PBP-container main .container .contact-us-wrapper p { +.PBP-container main .contact-us-wrapper p, .PF-container main .contact-us-wrapper p { font-weight: bolder; } -.PF-container { - padding: 0; -} -.PF-container .PF-header { - background: linear-gradient(32deg, #D05353 24%, #E58F65 100%); - color: #f8f8f8; - display: flex; - flex-direction: column; - justify-content: center; - align-items: end; -} -.PF-container .PF-header .logo-container { - padding: 11px 12px; - font-size: 20px; - font-weight: 400; - white-space: nowrap; -} -.PF-container .PF-header .logo-container p { - font-weight: 300; - font-size: 20px; - margin-bottom: 0; -} -.PF-container .PF-header .logo-container p b { - font-weight: bold; -} -.PF-container .PF-header .logo-container p span { - background-color: white; - color: #E58F65; - padding: 0 1px; -} -.PF-container .PF-header .logo-container .sm-text { - font-size: 11px; - letter-spacing: 1.4px; -} -.PF-container .main-pf { - position: relative; - height: calc(100vh - 70px); - min-height: fit-content; -} -.PF-container .main-pf img { - height: 100%; - object-fit: cover; - width: 100%; - position: relative; - background-position: center; - background-repeat: no-repeat; -} -.PF-container .main-pf::before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(255, 238, 229, 0.68); - z-index: 1; -} -.PF-container .main-pf .container { - max-height: 60%; - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - position: absolute; - top: 20%; - text-align: center; - z-index: 999; +.PF-container .main-text-wrapper p, .PF-container .main-text-wrapper h1, .PF-container .main-text-wrapper h5, .PF-container .contact-us-wrapper p, .PF-container .contact-us-wrapper h1, .PF-container .contact-us-wrapper h5 { color: #D05353; } -.PF-container .main-pf .container .main-text-wrapper { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 26%; -} -.PF-container .main-pf .container .main-text-wrapper h1 { - font-size: 29px; - font-weight: 600; - text-shadow: 5px 4px 10px rgba(0, 0, 0, 0.25); - line-height: 100%; - letter-spacing: 5px; -} -.PF-container .main-pf .container .main-text-wrapper .line { - position: absolute; - bottom: 0; - width: 330px; - height: 2px; - background-color: #D05353; - display: block; -} -.PF-container .main-pf .container .btn-pb { - background-color: #146960; - color: white; - font-size: 16px; - font-weight: 500; - margin-bottom: 25%; - transition: all 0.3s; -} -.PF-container .main-pf .container .btn-pb:hover { - background-color: #0e4f47; -} -.PF-container .main-pf .container .btn-pb:active { - transform: translateY(2px); - padding: 4px 10px; - border: none; -} -.PF-container .main-pf .container .contact-us-wrapper h5 { - font-weight: 600; - margin-bottom: 0; - text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17); -} -.PF-container .main-pf .container .contact-us-wrapper .line { - width: 100px; - height: 1px; +.PF-container .main-text-wrapper .line, .PF-container .contact-us-wrapper .line { background-color: #D05353; } -.PF-container .main-pf .container .contact-us-wrapper p { - font-weight: bolder; + +.PBP-container .main-text-wrapper p, .PBP-container .main-text-wrapper h1, .PBP-container .main-text-wrapper h5, .PBP-container .contact-us-wrapper p, .PBP-container .contact-us-wrapper h1, .PBP-container .contact-us-wrapper h5 { + color: #001529; +} +.PBP-container .main-text-wrapper .line, .PBP-container .contact-us-wrapper .line { + background-color: #001529; } /*# sourceMappingURL=styles.css.map */ diff --git a/styles.css.map b/styles.css.map index bfcd716..8e6fc7a 100644 --- a/styles.css.map +++ b/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EAEA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AAIN;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAMV;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EAEA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AAKN;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAQJ;EACE;;AAEF;EACE;;;AAOF;EACE;;AAEF;EACE","file":"styles.css"} \ No newline at end of file diff --git a/styles.scss b/styles.scss index ddf6961..7a89e52 100644 --- a/styles.scss +++ b/styles.scss @@ -3,18 +3,83 @@ body { font-family: 'Roboto', sans-serif; } -.row { +.row, p { margin: 0; } -p { - margin: 0; -} header { height: 70px; } -.PBP-container { + +.container { + max-height: 50vh; + display: flex; + justify-content: end; + flex-direction: column; + align-items: center; + position: absolute; + bottom: 5%; + text-align: center; + z-index: 999; +} + +.logo-container { + padding: 11px 12px; + font-size: 20px; + font-weight: 400; + white-space: nowrap; + + p { + font-weight: 300; + font-size: 20px; + margin-bottom: 0; + + b { + font-weight: bold; + } + + span { + background-color: white; + color: #E58F65; + padding: 0 1px; + } + } + + .sm-text { + font-size: 11px; + letter-spacing: 1.4px; + } +} + +.main-text-wrapper { + position: relative; + display: flex; + flex-direction: column; + justify-content: end; + align-items: center; + margin-bottom: 20%; + height: 100px; + + h1 { + font-size: 29px; + font-weight: 600; + text-shadow: 5px 4px 10px rgba(0, 0, 0, 0.25); + line-height: 100%; + letter-spacing: 5px; + } + .line { + position: absolute; + bottom: 0; + width: 330px; + height: 2px; + display: block; + } +} + + +.PBP-container, .PF-container { padding: 0; + .PBP-header { background-color: #001529; color: #f8f8f8; @@ -22,42 +87,30 @@ header { flex-direction: column; justify-content: center; align-items: start; - .logo-container { - padding: 11px 12px; - font-size: 20px; - font-weight: 400; - white-space: nowrap; - p { - font-weight: 300; - font-size: 20px; - - margin-bottom: 0; - b { - font-weight: bold; - } - span { - background-color: white; - color: #E58F65; - padding: 0 1px; - } - } - .sm-text { - font-size: 11px; - letter-spacing: 1.4px; - } - } } + + .PF-header { + background: linear-gradient(32deg, #D05353 24%, #E58F65 100%); + color: #f8f8f8; + display: flex; + flex-direction: column; + justify-content: center; + align-items: end; + } + main { position: relative; height: calc(100vh - 70px); min-height: fit-content; + img { height: 100%; object-fit: cover; width: 100%; - background-position:center; + background-position: center; background-repeat: no-repeat; } + &::before { content: ""; position: absolute; @@ -68,210 +121,76 @@ header { background-color: rgba(255, 255, 255, 0.60); z-index: 1; } - .container { - max-height: 60%; - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - position: absolute; - top: 20%; - text-align: center; - z-index: 999; - .main-text-wrapper { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 20%; - h1 { - font-size: 29px; - font-weight: 600; - text-shadow: 5px 4px 10px rgba(0, 0, 0, 0.25); - line-height: 100%; - letter-spacing: 5px; - } - .line { - position: absolute; - bottom: 0; - width: 330px; - height: 2px; - background-color: #001529; - display: block; - } - } - .btn-pb { - background-color: #001529; - color: white; - font-size: 16px; - font-weight: 500; - margin-bottom: 25%; - transition: all 0.3s; - } - .btn-pb:hover { - background-color: #093460; - } + .btn { + color: white; + font-size: 16px; + font-weight: 500; + margin-bottom: 15%; + transition: all 0.3s; - .btn-pb:active { + &:active { transform: translateY(2px); padding: 4px 10px; border: none; + color: white; + } + } + + .btn-pb { + background-color: #1871b2; + + &:hover { + background-color: #093460; + } + } + + .btn-pf { + background-color: #146960; + + &:hover { + background-color: #0e4f47; + } + } + + .contact-us-wrapper { + h5 { + font-weight: 600; + margin-bottom: 0; + text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17); } - .contact-us-wrapper { - h5 { - font-weight: 600; - margin-bottom: 0; - text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17); - } - .line { - width: 100px; - height: 1px; - background-color: #001529; - } - p { - font-weight: bolder; - } + .line { + width: 100px; + height: 1px; + } + + p { + font-weight: bolder; } } } } + .PF-container { - padding: 0; - .PF-header { - background: linear-gradient(32deg, #D05353 24%, #E58F65 100%); - color: #f8f8f8; - display: flex; - flex-direction: column; - justify-content: center; - align-items: end; - - .logo-container { - padding: 11px 12px; - font-size: 20px; - font-weight: 400; - white-space: nowrap; - p { - font-weight: 300; - font-size: 20px; - - margin-bottom: 0; - b { - font-weight: bold; - } - span { - background-color: white; - color: #E58F65; - padding: 0 1px; - } - } - .sm-text { - font-size: 11px; - letter-spacing: 1.4px; - } - } - } - - .main-pf { - position: relative; - height: calc(100vh - 70px); - min-height: fit-content; - img { - height: 100%; - object-fit: cover; - width: 100%; - position: relative; - background-position:center; - background-repeat: no-repeat; - } - - &::before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(255, 238, 229, 0.68); - z-index: 1; - } - - .container { - max-height: 60%; - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - position: absolute; - top: 20%; - text-align: center; - z-index: 999; + .main-text-wrapper, .contact-us-wrapper { + p, h1, h5 { color: #D05353; - - .main-text-wrapper { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 26%; - - h1 { - font-size: 29px; - font-weight: 600; - text-shadow: 5px 4px 10px rgba(0, 0, 0, 0.25); - line-height: 100%; - letter-spacing: 5px; - } - - .line { - position: absolute; - bottom: 0; - width: 330px; - height: 2px; - background-color: #D05353; - display: block; - } - } - - .btn-pb { - background-color: #146960; - color: white; - font-size: 16px; - font-weight: 500; - margin-bottom: 25%; - transition: all 0.3s; - } - - .btn-pb:hover { - background-color: #0e4f47; - } - - .btn-pb:active { - transform: translateY(2px); - padding: 4px 10px; - border: none; - } - - .contact-us-wrapper { - h5 { - font-weight: 600; - margin-bottom: 0; - text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17); - } - - .line { - width: 100px; - height: 1px; - background-color: #D05353; - } - - p { - font-weight: bolder; - } - } + } + .line { + background-color: #D05353; } } -} \ No newline at end of file +} + +.PBP-container { + .main-text-wrapper, .contact-us-wrapper { + p, h1, h5 { + color: #001529; + } + .line { + background-color: #001529; + } + } +} +