nimtaurel
/
landing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

fix
nimtaurel 2023-12-28 10:22:22 +06:00
parent 0f887b4bf0
commit 28c4b6442e
4 changed files with 249 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -8,16 +8,16 @@
</head> </head>
<body> <body>
<div class="row"> <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"> <header class="PBP-header p-2">
<div class="logo-container"> <div class="logo-container">
<p><b>ESEP </b>ПБП</p> <p><b>ESEP </b>ПБП</p>
<p class="sm-text">БЮДЖЕТНОЕ ПЛАНИРОВАНИЕ</p> <p class="sm-text">БЮДЖЕТНОЕ ПЛАНИРОВАНИЕ</p>
</div> </div>
</header> </header>
<main class=""> <main class="d-flex justify-content-center align-items-center">
<img src="img/pb_bg.jpg" alt=""> <img src="img/pb_bg.jpg" alt="">
<div class="container"> <div class="container px-2">
<div class="main-text-wrapper"> <div class="main-text-wrapper">
<h1> <h1>
ПОРТАЛ<br> ПОРТАЛ<br>
@ -35,23 +35,23 @@
</div> </div>
</main> </main>
</div> </div>
<div class="PF-container col-6"> <div class="PF-container col-md-6 col-sm-12">
<header class="PF-header p-2"> <header class="PF-header p-2">
<div class="logo-container"> <div class="logo-container">
<p><b>ESEP </b>ПЛАН<span>ФАКТ</span></p> <p><b>ESEP </b>ПЛАН<span>ФАКТ</span></p>
<p class="sm-text">ОБЛАЧНАЯ БУХГАЛТЕРИЯ</p> <p class="sm-text">ОБЛАЧНАЯ БУХГАЛТЕРИЯ</p>
</div> </div>
</header> </header>
<main class="main-pf"> <main class="main-pf d-flex justify-content-center align-items-end">
<img src="img/pf_bg.jpg" alt=""> <img src="img/pf_bg.jpg" alt="">
<div class="container"> <div class="container px-2">
<div class="main-text-wrapper"> <div class="main-text-wrapper">
<h1> <h1>
ОБЛАЧНАЯ БУХГАЛТЕРИЯ ОБЛАЧНАЯ БУХГАЛТЕРИЯ
</h1> </h1>
<div class="line"></div> <div class="line"></div>
</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"> <div class="contact-us-wrapper d-flex flex-column justify-content-center align-items-center">
<h5>СВЯЗАТЬСЯ С НАМИ</h5> <h5>СВЯЗАТЬСЯ С НАМИ</h5>
<div class="line"></div> <div class="line"></div>

293
styles.css
View File

@ -3,11 +3,7 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
.row { .row, p {
margin: 0;
}
p {
margin: 0; margin: 0;
} }
@ -15,10 +11,70 @@ header {
height: 70px; 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; padding: 0;
} }
.PBP-container .PBP-header { .PBP-container .PBP-header, .PF-container .PBP-header {
background-color: #001529; background-color: #001529;
color: #f8f8f8; color: #f8f8f8;
display: flex; display: flex;
@ -26,42 +82,27 @@ header {
justify-content: center; justify-content: center;
align-items: start; align-items: start;
} }
.PBP-container .PBP-header .logo-container { .PBP-container .PF-header, .PF-container .PF-header {
padding: 11px 12px; background: linear-gradient(32deg, #D05353 24%, #E58F65 100%);
font-size: 20px; color: #f8f8f8;
font-weight: 400; display: flex;
white-space: nowrap; flex-direction: column;
justify-content: center;
align-items: end;
} }
.PBP-container .PBP-header .logo-container p { .PBP-container main, .PF-container main {
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 {
position: relative; position: relative;
height: calc(100vh - 70px); height: calc(100vh - 70px);
min-height: fit-content; min-height: fit-content;
} }
.PBP-container main img { .PBP-container main img, .PF-container main img {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.PBP-container main::before { .PBP-container main::before, .PF-container main::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
@ -71,190 +112,56 @@ header {
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
z-index: 1; z-index: 1;
} }
.PBP-container main .container { .PBP-container main .btn, .PF-container main .btn {
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;
color: white; color: white;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
margin-bottom: 25%; margin-bottom: 15%;
transition: all 0.3s; transition: all 0.3s;
} }
.PBP-container main .container .btn-pb:hover { .PBP-container main .btn:active, .PF-container main .btn:active {
background-color: #093460;
}
.PBP-container main .container .btn-pb:active {
transform: translateY(2px); transform: translateY(2px);
padding: 4px 10px; padding: 4px 10px;
border: none; 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; font-weight: 600;
margin-bottom: 0; margin-bottom: 0;
text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17); 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; width: 100px;
height: 1px; 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; font-weight: bolder;
} }
.PF-container { .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 {
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;
color: #D05353; color: #D05353;
} }
.PF-container .main-pf .container .main-text-wrapper { .PF-container .main-text-wrapper .line, .PF-container .contact-us-wrapper .line {
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;
background-color: #D05353; 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 */ /*# sourceMappingURL=styles.css.map */

2
styles.css.map
View File

@ -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"}

363
styles.scss
View File

@ -3,18 +3,83 @@ body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
.row { .row, p {
margin: 0; margin: 0;
} }
p {
margin: 0;
}
header { header {
height: 70px; 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; padding: 0;
.PBP-header { .PBP-header {
background-color: #001529; background-color: #001529;
color: #f8f8f8; color: #f8f8f8;
@ -22,42 +87,30 @@ header {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: start; 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 { main {
position: relative; position: relative;
height: calc(100vh - 70px); height: calc(100vh - 70px);
min-height: fit-content; min-height: fit-content;
img { img {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
background-position:center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -68,210 +121,76 @@ header {
background-color: rgba(255, 255, 255, 0.60); background-color: rgba(255, 255, 255, 0.60);
z-index: 1; 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 { .btn {
position: relative; color: white;
display: flex; font-size: 16px;
flex-direction: column; font-weight: 500;
justify-content: center; margin-bottom: 15%;
align-items: center; transition: all 0.3s;
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-pb:active { &:active {
transform: translateY(2px); transform: translateY(2px);
padding: 4px 10px; padding: 4px 10px;
border: none; 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 { .line {
h5 { width: 100px;
font-weight: 600; height: 1px;
margin-bottom: 0; }
text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17);
} p {
.line { font-weight: bolder;
width: 100px;
height: 1px;
background-color: #001529;
}
p {
font-weight: bolder;
}
} }
} }
} }
} }
.PF-container { .PF-container {
padding: 0; .main-text-wrapper, .contact-us-wrapper {
.PF-header { p, h1, h5 {
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; color: #D05353;
}
.main-text-wrapper { .line {
position: relative; background-color: #D05353;
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;
}
}
} }
} }
} }
.PBP-container {
.main-text-wrapper, .contact-us-wrapper {
p, h1, h5 {
color: #001529;
}
.line {
background-color: #001529;
}
}
}