Commit 4d2cc213 authored by nursultan's avatar nursultan
Browse files

Merge branch 'features' into 'master'

Features

See merge request !2
parents 822df521 82341d8b
No preview for this file type
@import url('https://fonts.googleapis.com/css?family=Exo+2&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@font-face {
font-family: "Pirulen";
src: url("../fonts/pirulen.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
html {
scroll-behavior: smooth;
}
body, ul, li, p, span{
body, ul, li, p, span {
margin: 0;
padding: 0;
/*font-family: 'Exo 2', sans-serif;*/
......@@ -13,13 +22,16 @@ body, ul, li, p, span{
line-height: normal;
letter-spacing: normal;
}
a{
a {
text-decoration: none;
}
ul{
ul {
list-style: none;
}
object{
object {
pointer-events: none;
}
......@@ -27,23 +39,26 @@ object{
.home {
display: none;
}
#main header{
#main header {
width: 100%;
height: 110px;
object-fit: contain;
background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
z-index: 999;
}
#main-nav{
display: block;
#main-nav {
display: flex;
justify-content: space-between;
position: fixed;
top: -100vh;
width: 100vw;
width: 100%;
height: calc(100vh - 100px);
background-color: rgba(0, 0, 0, .7);
-webkit-transition-duration: 0.3s;
......@@ -52,21 +67,26 @@ object{
transition-duration: 0.3s;
z-index: 990;
}
#main-nav.active{
#main-nav.active {
top: 100px;
}
#main-nav div{
padding: 10px 20px;
}
#main-nav div:first-child{
.page-nav {
margin-top: 50px;
}
#main-nav a{
.page-nav div {
padding: 10px 20px;
}
#main-nav a {
font-size: 24px;
color: #fff;
text-decoration: none;
position: relative;
}
#main-nav a::before {
content: '';
bottom: -8px;
......@@ -77,17 +97,54 @@ object{
background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
transition: 0.7s;
}
#main-nav a:hover:before {
width: 100%;
left: 0;
}
.header-hum{
width: 20%;
.header-posts {
display: flex;
flex-direction: column;
margin-top: 50px;
padding: 10px 20px;
}
.header-posts--title {
max-width: max-content;
}
.header-logo{
width: 60%;
text-align: center;
.header-posts .footer-links {
height: 35px;
margin-top: auto;
margin-bottom: 80px;
}
.header-posts--list {
padding-top: 30px;
}
.header-posts--list div {
display: flex;
align-items: center;
padding: 10px 20px;
}
.header-posts--list img {
width: 65px;
height: auto;
margin-right: 10px;
}
.header-hum {
width: 150px;
margin-right: auto;
}
.header-logo {
width: auto;
}
.ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
......@@ -97,50 +154,62 @@ object{
-ms-user-select: none;
user-select: none;
}
.hamRotate.active {
transform: rotate(45deg);
}
.hamRotate180.active {
transform: rotate(180deg);
}
.line {
fill:none;
fill: none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke:#fff;
stroke-width:5.5;
stroke-linecap:round;
stroke: #fff;
stroke-width: 5.5;
stroke-linecap: round;
}
.ham1 .top {
stroke-dasharray: 40 139;
}
.ham1 .bottom {
stroke-dasharray: 40 180;
}
.ham1.active .top {
stroke-dashoffset: -98px;
}
.ham1.active .bottom {
stroke-dashoffset: -138px;
}
.main-lang{
display: flex;
width: 20%;
justify-content: flex-end;
.main-lang {
width: 150px;
margin-left: auto;
}
.main-lang a{
.main-lang a, .header-posts a {
color: #ffffff;
text-decoration: underline;
}
.main-lang a:last-child{
.main-lang a:last-child {
padding-right: 30px;
}
.main-lang a:nth-child(2){
.main-lang a:nth-child(2) {
padding: 0 15px;
}
.clearfix{
.clearfix {
width: 100%;
clear: both;
}
.main-info {
display: flex;
justify-content: center;
......@@ -150,9 +219,10 @@ object{
position: relative;
z-index: 9;
}
.main-info::before{
.main-info::before {
content: '';
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)), url("/assets/images/FP_landing_pic.png");
background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)), url("/assets/images/FP_landing_pic.png");
background-repeat: no-repeat;
background-color: transparent;
background-size: cover;
......@@ -161,18 +231,39 @@ object{
position: absolute;
top: 5px;
}
.main-info p{
.main-info div {
position: relative;
width: 75%;
height: auto;
margin: auto;
}
.main-info p {
font-size: 40px;
line-height: 54px;
font-weight: bold;
text-align: center;
color: #ffffff;
margin: auto;
margin-bottom: 30px;
}
.main--btn{
.main-info span {
width: 100%;
display: block;
font-size: 70px;
line-height: normal;
font-family: "Pirulen", sans-serif;
text-align: center;
color: #ffffff;
padding-top: 100px;
}
.main-info span b {
font-size: 35px;
}
.main--btn {
width: 270px;
height: 60px;
object-fit: contain;
......@@ -183,7 +274,7 @@ object{
justify-content: center;
color: #ffffff;
background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
margin: 75px auto;
margin: 0 auto auto auto;
background-color: #fff;
position: relative;
overflow: hidden;
......@@ -192,10 +283,12 @@ object{
border: none;
outline: none;
}
.main--btn:hover{
box-shadow:0 0 10px rgba(89,3,8, .5);
.main--btn:hover {
box-shadow: 0 0 10px rgba(89, 3, 8, .5);
}
.feedback-btn--custom{
.feedback-btn--custom {
width: 270px;
height: 51px;
object-fit: contain;
......@@ -215,69 +308,75 @@ object{
border: none;
}
.feedback-btn--custom:hover{
color:#ffffff;
.feedback-btn--custom:hover {
color: #ffffff;
background-color: #e31f26;
box-shadow: 0 0 10px #bf222c, 0 0 40px #bf222c , 0 0 80px #e31f26;
box-shadow: 0 0 10px #bf222c, 0 0 40px #bf222c, 0 0 80px #e31f26;
transition-delay: .7s;
cursor: pointer;
}
.feedback-btn--custom span{
.feedback-btn--custom span {
position: absolute;
display: block;
}
.feedback-btn--custom span:nth-child(1){
.feedback-btn--custom span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background:linear-gradient(86deg, #bf222c 1%, #e31f26);
background: linear-gradient(86deg, #bf222c 1%, #e31f26);
}
.feedback-btn--custom:hover span:nth-child(1){
.feedback-btn--custom:hover span:nth-child(1) {
left: 100%;
transition: 1s;
transition-delay: .5s;
}
.feedback-btn--custom span:nth-child(3){
.feedback-btn--custom span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(86deg, #bf222c 1%, #e31f26);
}
.feedback-btn--custom:hover span:nth-child(3){
.feedback-btn--custom:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: .5s;
}
.feedback-btn--custom span:nth-child(2){
top:-100%;
.feedback-btn--custom span:nth-child(2) {
top: -100%;
right: 0;
height: 100%;
width: 2px;
background:linear-gradient(86deg, #bf222c 1%, #e31f26);
background: linear-gradient(86deg, #bf222c 1%, #e31f26);
}
.feedback-btn--custom:hover span:nth-child(2){
.feedback-btn--custom:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: .25s;
}
.feedback-btn--custom span:nth-child(4){
.feedback-btn--custom span:nth-child(4) {
bottom: -100%;
left:0;
left: 0;
height: 100%;
width: 2px;
background:linear-gradient(86deg, #bf222c 1%, #e31f26);
background: linear-gradient(86deg, #bf222c 1%, #e31f26);
}
.feedback-btn--custom:hover span:nth-child(4){
.feedback-btn--custom:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: .25s;
}
/*** main styles end ***/
......@@ -285,7 +384,8 @@ object{
#preview {
background-color: #fff;
}
.video-preview, .statistic-preview{
.video-preview, .statistic-preview {
height: 700px;
display: flex;
align-items: center;
......@@ -294,7 +394,8 @@ object{
justify-content: center;
overflow: hidden;
}
.video-preview::before{
.video-preview::before {
background-image: url("data:image/svg+xml,%3Csvg width='226' height='330' viewBox='0 0 226 330' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H226V329.377L120 176L0 0Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='138' y1='8.13018e-07' x2='202' y2='296' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239B4F55'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position-x: right;
......@@ -306,7 +407,8 @@ object{
top: 0;
right: 0;
}
.video-preview::after{
.video-preview::after {
background-image: url("data:image/svg+xml,%3Csvg width='633' height='656' viewBox='0 0 633 656' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H410L634 336V656H410L0 0Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='465' y1='60' x2='273' y2='308' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C4C4C4'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position-x: right;
......@@ -317,7 +419,8 @@ object{
z-index: 0;
right: 0;
}
.video-preview span{
.video-preview span {
background-image: url("data:image/svg+xml,%3Csvg width='635' height='656' viewBox='0 0 635 656' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M634.271 656H224.271L0.27124 320V0H224.271L634.271 656Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='183' y1='656' x2='439' y2='408' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D0CFCF'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position-x: left;
......@@ -329,7 +432,8 @@ object{
left: 0;
bottom: 0;
}
.video-preview span::before{
.video-preview span::before {
content: '';
background-image: url("data:image/svg+xml,%3Csvg width='226' height='330' viewBox='0 0 226 330' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M226 330H0V0.622864L106 154L226 330Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='20' y1='330' x2='88' y2='138' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23747475'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
......@@ -342,7 +446,8 @@ object{
left: 0;
bottom: 0;
}
.video-preview iframe{
.video-preview iframe {
height: calc(100% - 240px);
margin: auto;
position: absolute;
......@@ -351,13 +456,14 @@ object{
border: 4px solid #DE232E;
z-index: 1;
}
.statistic-preview{
.statistic-preview {
flex-direction: column;
object-fit: contain;
position: relative;
}
.statistic-preview::before{
.statistic-preview::before {
content: '';
background-image: url("/assets/images/static-bg.jpg");
background-repeat: no-repeat;
......@@ -367,14 +473,16 @@ object{
height: 100%;
z-index: 0;
}
.statistic-block{
.statistic-block {
display: flex;
justify-content: space-evenly;
text-align: center;
z-index: 1;
width: 100%;
}
.statistic-preview span{
.statistic-preview span {
font-size: 96px;
font-weight: bold;
line-height: 1.31;
......@@ -382,7 +490,8 @@ object{
color: #ffffff;
position: relative;
}
.statistic-preview--title{
.statistic-preview--title {
font-weight: bold;
font-size: 40px;
line-height: 54px;
......@@ -391,31 +500,35 @@ object{
color: #ffffff;
padding-bottom: 145px;
}
.statistic-preview div p{
.statistic-preview div p {
font-size: 24px;
line-height: 1.25;
letter-spacing: normal;
text-align: center;
color: #c4c4c4;
}
/*** preview styles end ***/
/*** know more styles start ***/
#know-more{
#know-more {
object-fit: contain;
background-color: #f1f1f1;
z-index: 0;
position: relative;
}
#know-more img{
#know-more img {
position: absolute;
width: 100%;
height: 475px;
mix-blend-mode: multiply;
z-index: 0;
}
#know-more span{
#know-more span {
background-image: url("data:image/svg+xml,%3Csvg width='138' height='525' viewBox='0 0 138 525' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M138 0.0974121H-0.72876V524.097L138 0.0974121Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='58' y1='0.0974121' x2='141.196' y2='378.823' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23DB0F18'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
......@@ -426,25 +539,29 @@ object{
left: 0;
top: 0;
}
.know-more--title {
position: relative;
padding-top: 105px;
padding-bottom: 85px;
z-index: 1;
}
.know-more--title p{
.know-more--title p {
font-size: 56px;
font-weight: 300;
text-align: center;
color: #4a4a4a;
margin: auto;
}
.know-more--cards {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.know-more--card{
.know-more--card {
display: flex;
align-items: center;
width: 575px;
......@@ -453,20 +570,23 @@ object{
position: relative;
margin-bottom: 65px;
}
.know-more--card p{
.know-more--card p {
font-size: 16px;
color: #404041;
padding-right: 35px;
text-align: justify;
}
.know-more--btn{
.know-more--btn {
width: 100%;
display: flex;
justify-content: center;
padding-top: 25px;
padding-bottom: 100px;
}
#know-more a{
#know-more a {
width: 350px;
height: 60px;
font-size: 20px;
......@@ -479,39 +599,46 @@ object{
align-items: center;
background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
}
#know-more a:hover{
box-shadow:0 0 10px rgba(89,3,8, .5);
#know-more a:hover {
box-shadow: 0 0 10px rgba(89, 3, 8, .5);
}
/*** know more styles end ***/
/*** decision more styles start ***/
#decision{
#decision {
background-image: url("/assets/images/decision-bg.svg");
background-repeat: no-repeat;
background-color: transparent;
background-size: cover;
}
.decision-title{
.decision-title {
padding-top: 80px;
padding-bottom: 65px;
}
.decision-title p{
.decision-title p {
font-size: 56px;
font-weight: 300;
text-align: center;
color: #ffffff;