fix
nimtaurel
parent
0f887b4bf0
commit
28c4b6442e
14
index.html
14
index.html
|
|
@ -8,16 +8,16 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="row">
|
||||
<div class="PBP-container col-6">
|
||||
<div class="PBP-container col-md-6 col-sm-12">
|
||||
<header class="PBP-header p-2">
|
||||
<div class="logo-container">
|
||||
<p><b>ESEP </b>ПБП</p>
|
||||
<p class="sm-text">БЮДЖЕТНОЕ ПЛАНИРОВАНИЕ</p>
|
||||
</div>
|
||||
</header>
|
||||
<main class="">
|
||||
<main class="d-flex justify-content-center align-items-center">
|
||||
<img src="img/pb_bg.jpg" alt="">
|
||||
<div class="container">
|
||||
<div class="container px-2">
|
||||
<div class="main-text-wrapper">
|
||||
<h1>
|
||||
ПОРТАЛ<br>
|
||||
|
|
@ -35,23 +35,23 @@
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="PF-container col-6">
|
||||
<div class="PF-container col-md-6 col-sm-12">
|
||||
<header class="PF-header p-2">
|
||||
<div class="logo-container">
|
||||
<p><b>ESEP </b>ПЛАН<span>ФАКТ</span></p>
|
||||
<p class="sm-text">ОБЛАЧНАЯ БУХГАЛТЕРИЯ</p>
|
||||
</div>
|
||||
</header>
|
||||
<main class="main-pf">
|
||||
<main class="main-pf d-flex justify-content-center align-items-end">
|
||||
<img src="img/pf_bg.jpg" alt="">
|
||||
<div class="container">
|
||||
<div class="container px-2">
|
||||
<div class="main-text-wrapper">
|
||||
<h1>
|
||||
ОБЛАЧНАЯ БУХГАЛТЕРИЯ
|
||||
</h1>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<a href="https://planfact.kz/ru/" class="btn btn-pb">Перейти</a>
|
||||
<a href="https://planfact.kz/ru/" class="btn btn-pf">Перейти</a>
|
||||
<div class="contact-us-wrapper d-flex flex-column justify-content-center align-items-center">
|
||||
<h5>СВЯЗАТЬСЯ С НАМИ</h5>
|
||||
<div class="line"></div>
|
||||
|
|
|
|||
293
styles.css
293
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 */
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
{"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"}
|
||||
321
styles.scss
321
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,191 +121,36 @@ 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;
|
||||
.btn {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 25%;
|
||||
margin-bottom: 15%;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
transform: translateY(2px);
|
||||
padding: 4px 10px;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
.btn-pb:hover {
|
||||
}
|
||||
|
||||
.btn-pb {
|
||||
background-color: #1871b2;
|
||||
|
||||
&:hover {
|
||||
background-color: #093460;
|
||||
}
|
||||
|
||||
.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: #001529;
|
||||
}
|
||||
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;
|
||||
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 {
|
||||
.btn-pf {
|
||||
background-color: #146960;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 25%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-pb:hover {
|
||||
&:hover {
|
||||
background-color: #0e4f47;
|
||||
}
|
||||
|
||||
.btn-pb:active {
|
||||
transform: translateY(2px);
|
||||
padding: 4px 10px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.contact-us-wrapper {
|
||||
|
|
@ -265,7 +163,6 @@ header {
|
|||
.line {
|
||||
width: 100px;
|
||||
height: 1px;
|
||||
background-color: #D05353;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -273,5 +170,27 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.PF-container {
|
||||
.main-text-wrapper, .contact-us-wrapper {
|
||||
p, h1, h5 {
|
||||
color: #D05353;
|
||||
}
|
||||
.line {
|
||||
background-color: #D05353;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.PBP-container {
|
||||
.main-text-wrapper, .contact-us-wrapper {
|
||||
p, h1, h5 {
|
||||
color: #001529;
|
||||
}
|
||||
.line {
|
||||
background-color: #001529;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue