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

Compare commits

base: nimtaurel:26c518f6f32d3a9f778165d32ce51b345f04cc98
Branches Tags
nimtaurel:master
nimtaurel:fix
..
compare: nimtaurel:83c1d0c53163ccaa13e1019e66089afee500f15e
Branches Tags
nimtaurel:master
nimtaurel:fix

No commits in common. "26c518f6f32d3a9f778165d32ce51b345f04cc98" and "83c1d0c53163ccaa13e1019e66089afee500f15e" have entirely different histories.
26c518f6f3 ... 83c1d0c531

4 changed files with 420 additions and 246 deletions
Show Stats 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-md-6 col-sm-12"> <div class="PBP-container col-6">
<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="d-flex justify-content-center align-items-center"> <main class="">
<img src="img/pb_bg.jpg" alt=""> <img src="img/pb_bg.jpg" alt="">
<div class="container px-2"> <div class="container">
<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-md-6 col-sm-12"> <div class="PF-container col-6">
<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 d-flex justify-content-center align-items-end"> <main class="main-pf">
<img src="img/pf_bg.jpg" alt=""> <img src="img/pf_bg.jpg" alt="">
<div class="container px-2"> <div class="container">
<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-pf">Перейти</a> <a href="https://planfact.kz/ru/" class="btn btn-pb">Перейти</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,7 +3,11 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
.row, p { .row {
margin: 0;
}
p {
margin: 0; margin: 0;
} }
@ -11,70 +15,10 @@ header {
height: 70px; height: 70px;
} }
.container { .PBP-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, .PF-container .PBP-header { .PBP-container .PBP-header {
background-color: #001529; background-color: #001529;
color: #f8f8f8; color: #f8f8f8;
display: flex; display: flex;
@ -82,27 +26,42 @@ header {
justify-content: center; justify-content: center;
align-items: start; align-items: start;
} }
.PBP-container .PF-header, .PF-container .PF-header { .PBP-container .PBP-header .logo-container {
background: linear-gradient(32deg, #D05353 24%, #E58F65 100%); padding: 11px 12px;
color: #f8f8f8; font-size: 20px;
display: flex; font-weight: 400;
flex-direction: column; white-space: nowrap;
justify-content: center;
align-items: end;
} }
.PBP-container main, .PF-container main { .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 {
position: relative; position: relative;
height: calc(100vh - 70px); height: calc(100vh - 70px);
min-height: fit-content; min-height: fit-content;
} }
.PBP-container main img, .PF-container main img { .PBP-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, .PF-container main::before { .PBP-container main::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
@ -112,56 +71,190 @@ 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 .btn, .PF-container main .btn { .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;
color: white; color: white;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
margin-bottom: 15%; margin-bottom: 25%;
transition: all 0.3s; transition: all 0.3s;
} }
.PBP-container main .btn:active, .PF-container main .btn:active { .PBP-container main .container .btn-pb:hover {
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 .btn-pb, .PF-container main .btn-pb { .PBP-container main .container .contact-us-wrapper h5 {
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 .contact-us-wrapper .line, .PF-container main .contact-us-wrapper .line { .PBP-container main .container .contact-us-wrapper .line {
width: 100px; width: 100px;
height: 1px; height: 1px;
background-color: #001529;
} }
.PBP-container main .contact-us-wrapper p, .PF-container main .contact-us-wrapper p { .PBP-container main .container .contact-us-wrapper p {
font-weight: bolder; font-weight: bolder;
} }
.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 { .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;
color: #D05353; color: #D05353;
} }
.PF-container .main-text-wrapper .line, .PF-container .contact-us-wrapper .line { .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;
background-color: #D05353; background-color: #D05353;
} }
.PF-container .main-pf .container .contact-us-wrapper p {
.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 { font-weight: bolder;
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;;;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"} {"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"}

357
styles.scss
View File

@ -3,83 +3,18 @@ body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
.row, p { .row {
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;
@ -87,30 +22,42 @@ 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;
.PF-header { margin-bottom: 0;
background: linear-gradient(32deg, #D05353 24%, #E58F65 100%); b {
color: #f8f8f8; font-weight: bold;
display: flex; }
flex-direction: column; span {
justify-content: center; background-color: white;
align-items: end; color: #E58F65;
padding: 0 1px;
}
}
.sm-text {
font-size: 11px;
letter-spacing: 1.4px;
}
}
} }
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;
@ -121,76 +68,210 @@ 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;
.btn { .main-text-wrapper {
color: white; position: relative;
font-size: 16px; display: flex;
font-weight: 500; flex-direction: column;
margin-bottom: 15%; justify-content: center;
transition: all 0.3s; 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;
}
&:active { .btn-pb:active {
transform: translateY(2px); transform: translateY(2px);
padding: 4px 10px; padding: 4px 10px;
border: none; 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 {
background-color: #146960;
color: white; color: white;
font-size: 16px;
font-weight: 500;
margin-bottom: 25%;
transition: all 0.3s;
} }
}
.btn-pb { .btn-pb:hover {
background-color: #1871b2;
&:hover {
background-color: #093460;
}
}
.btn-pf {
background-color: #146960;
&:hover {
background-color: #0e4f47; background-color: #0e4f47;
} }
}
.contact-us-wrapper { .btn-pb:active {
h5 { transform: translateY(2px);
font-weight: 600; padding: 4px 10px;
margin-bottom: 0; border: none;
text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17);
} }
.line { .contact-us-wrapper {
width: 100px; h5 {
height: 1px; font-weight: 600;
} 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: #D05353;
}
p {
font-weight: bolder;
}
} }
} }
} }
} }
.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;
}
}
}