СВЯЗАТЬСЯ С НАМИ
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;
+ }
+ }
+}
+
- 
-