first commit
This commit is contained in:
144
badanie/layout/style-scss/_mixins.scss
Normal file
144
badanie/layout/style-scss/_mixins.scss
Normal file
@@ -0,0 +1,144 @@
|
||||
$breakpoints: (
|
||||
xs: 576px,
|
||||
sm: 768px,
|
||||
md: 992px,
|
||||
lg: 1200px
|
||||
);
|
||||
@mixin respond-above($breakpoint) {
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
||||
@media (min-width: $breakpoint-value) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
||||
}
|
||||
}
|
||||
@mixin respond-below($breakpoint) {
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
||||
@media (max-width: ($breakpoint-value - 1)) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
||||
}
|
||||
}
|
||||
@mixin respond-between($lower, $upper) {
|
||||
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
|
||||
$lower-breakpoint: map-get($breakpoints, $lower);
|
||||
$upper-breakpoint: map-get($breakpoints, $upper);
|
||||
@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@if (map-has-key($breakpoints, $lower) == false) {
|
||||
@warn 'Your lower breakpoint was invalid: #{$lower}.';
|
||||
}
|
||||
@if (map-has-key($breakpoints, $upper) == false) {
|
||||
@warn 'Your upper breakpoint was invalid: #{$upper}.';
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin border-radius($px: 0) {
|
||||
-webkit-border-radius: $px;
|
||||
-moz-border-radius: $px;
|
||||
border-radius: $px;
|
||||
}
|
||||
@mixin box-shadow($value) {
|
||||
-webkit-box-shadow: $value;
|
||||
-moz-box-shadow: $value;
|
||||
box-shadow: $value;
|
||||
}
|
||||
@mixin transition($element: all, $time: .5s, $option: ease) {
|
||||
-webkit-transition: $element $time $option;
|
||||
transition: $element $time $option;
|
||||
}
|
||||
@mixin opacity($value) {
|
||||
$IEValue: $value*100;
|
||||
opacity: $value;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
|
||||
filter: alpha(opacity=$IEValue);
|
||||
}
|
||||
@mixin flexbox() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
@mixin flex($values) {
|
||||
-webkit-box-flex: $values;
|
||||
-moz-box-flex: $values;
|
||||
-webkit-flex: $values;
|
||||
-ms-flex: $values;
|
||||
flex: $values;
|
||||
}
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-moz-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
@mixin flex-wrap($wrap) {
|
||||
-webkit-flex-wrap: $wrap;
|
||||
-moz-flex-wrap: $wrap;
|
||||
-ms-flex-wrap: $wrap;
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
@mixin flex-flow($flow) {
|
||||
-webkit-flex-flow: $flow;
|
||||
-moz-flex-flow: $flow;
|
||||
-ms-flex-flow: $flow;
|
||||
flex-flow: $flow;
|
||||
}
|
||||
@mixin order($val) {
|
||||
-webkit-box-ordinal-group: $val;
|
||||
-moz-box-ordinal-group: $val;
|
||||
-ms-flex-order: $val;
|
||||
-webkit-order: $val;
|
||||
order: $val;
|
||||
}
|
||||
@mixin flex-grow($grow) {
|
||||
-webkit-flex-grow: $grow;
|
||||
-moz-flex-grow: $grow;
|
||||
-ms-flex-grow: $grow;
|
||||
flex-grow: $grow;
|
||||
}
|
||||
@mixin flex-shrink($shrink) {
|
||||
-webkit-flex-shrink: $shrink;
|
||||
-moz-flex-shrink: $shrink;
|
||||
-ms-flex-shrink: $shrink;
|
||||
flex-shrink: $shrink;
|
||||
}
|
||||
@mixin flex-basis($width) {
|
||||
-webkit-flex-basis: $width;
|
||||
-moz-flex-basis: $width;
|
||||
-ms-flex-basis: $width;
|
||||
flex-basis: $width;
|
||||
}
|
||||
@mixin justify-content($justify) {
|
||||
-webkit-justify-content: $justify;
|
||||
-moz-justify-content: $justify;
|
||||
-ms-justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
-ms-flex-pack: $justify;
|
||||
}
|
||||
@mixin align-content($align) {
|
||||
-webkit-align-content: $align;
|
||||
-moz-align-content: $align;
|
||||
-ms-align-content: $align;
|
||||
align-content: $align;
|
||||
}
|
||||
@mixin align-items($align) {
|
||||
-webkit-align-items: $align;
|
||||
-moz-align-items: $align;
|
||||
-ms-align-items: $align;
|
||||
align-items: $align;
|
||||
}
|
||||
@mixin align-self($align) {
|
||||
-webkit-align-self: $align;
|
||||
-moz-align-self: $align;
|
||||
-ms-align-self: $align;
|
||||
align-self: $align;
|
||||
}
|
||||
610
badanie/layout/style-scss/style.css
Normal file
610
badanie/layout/style-scss/style.css
Normal file
@@ -0,0 +1,610 @@
|
||||
body {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
.img-100 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.btn, .baner div[class^=col-]:first-child a {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
color: #000;
|
||||
background: #FFBF0D;
|
||||
padding: 10px 32px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn:focus, .baner div[class^=col-]:first-child a:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
padding: 7px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn2 img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.btn2:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
padding: 7px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn3:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title, .form-bottom.gray-bg h2, .benefits .row:first-child h2, .yellow-box .row:first-child h2, .baner h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
color: #000;
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.title, .form-bottom.gray-bg h2, .benefits .row:first-child h2, .yellow-box .row:first-child h2, .baner h1 {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 991px) {
|
||||
.title, .form-bottom.gray-bg h2, .benefits .row:first-child h2, .yellow-box .row:first-child h2, .baner h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.title, .form-bottom.gray-bg h2, .benefits .row:first-child h2, .yellow-box .row:first-child h2, .baner h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.text, .form-footer h3, .yellow-box .row:last-child div[class^=col-] div p, .yellow-box .row:last-child div[class^=col-] div h3, .box p, .form-bottom p, .benefits p {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
letter-spacing: 0px;
|
||||
color: #000;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.text, .form-footer h3, .yellow-box .row:last-child div[class^=col-] div p, .yellow-box .row:last-child div[class^=col-] div h3, .box p, .form-bottom p, .benefits p {
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.padding70, .benefits .row:first-child, .yellow-box {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding: 25px 0;
|
||||
}
|
||||
.top a {
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.top a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.top div[class^=col-]:first-child {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.top div[class^=col-]:last-child {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.top div[class^=col-]:last-child {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.top ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
-webkit-padding-start: 0;
|
||||
padding-inline-start: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.top ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.top ul li a {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.top .btn2 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
.top .btn2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.top .btn3 {
|
||||
color: #fff;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
.top .btn3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.top .mobile-btn-container {
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
touch-action: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.top .mobile-btn-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.top .mobile-btn-container .mobile-button {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mobile-menu-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.mobile-menu-container {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 0px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.mobile-menu-container.open {
|
||||
height: 174px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 407px) {
|
||||
.mobile-menu-container.open {
|
||||
height: 222px;
|
||||
}
|
||||
}
|
||||
.mobile-menu-container .menu-box {
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
-webkit-padding-start: 0;
|
||||
padding-inline-start: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mobile-menu-container .menu-box li a {
|
||||
padding: 0 10px;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.mobile-menu-container .menu-box li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.mobile-menu-container .buttons-box {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.mobile-menu-container .buttons-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.mobile-menu-container .btn2 {
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.mobile-menu-container .btn2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.mobile-menu-container .btn3 {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.mobile-menu-container .btn3 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.baner {
|
||||
background: #ededef;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.baner {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
.baner h1 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.baner h1 {
|
||||
font-size: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.baner h1 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
.baner div[class^=col-]:first-child {
|
||||
z-index: 7;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.baner div[class^=col-]:last-child {
|
||||
z-index: 7;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.baner div[class^=col-]:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.baner img {
|
||||
margin-top: 50px;
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.baner img {
|
||||
width: 60%;
|
||||
margin-top: -60px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.baner img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.baner .banner-star {
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
bottom: -273px;
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.baner .banner-star {
|
||||
left: -117px;
|
||||
bottom: -294px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 991px) {
|
||||
.baner .banner-star {
|
||||
left: -40px;
|
||||
bottom: -220px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.baner .banner-star {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.baner .banner-star img {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 991px) {
|
||||
.baner .banner-star img {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.box, .form-bottom, .benefits {
|
||||
padding-top: 101px;
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
.box p, .form-bottom p, .benefits p {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
.box p:before, .form-bottom p:before, .benefits p:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -30px;
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
background: #FFBF0D;
|
||||
}
|
||||
.box .img-box, .form-bottom .img-box, .benefits .img-box {
|
||||
padding: 50px 30px;
|
||||
box-shadow: rgba(255, 230, 159, 0.2) 0px 2px 23px 8px;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.box .img-box, .form-bottom .img-box, .benefits .img-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.box .img-box div, .form-bottom .img-box div, .benefits .img-box div {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.box .img-box div, .form-bottom .img-box div, .benefits .img-box div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.box .img-box div:not(:last-child), .form-bottom .img-box div:not(:last-child), .benefits .img-box div:not(:last-child) {
|
||||
border-right: 1px solid #e9e9e9;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.box .img-box div:not(:last-child), .form-bottom .img-box div:not(:last-child), .benefits .img-box div:not(:last-child) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.box .img-box div img, .form-bottom .img-box div img, .benefits .img-box div img {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 1199px) {
|
||||
.box .img-box div img, .form-bottom .img-box div img, .benefits .img-box div img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.box .img-box div img, .form-bottom .img-box div img, .benefits .img-box div img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.box .img-box div img, .form-bottom .img-box div img, .benefits .img-box div img {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.box .img-box div:nth-child(3) img, .form-bottom .img-box div:nth-child(3) img, .benefits .img-box div:nth-child(3) img {
|
||||
margin-top: -21px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.box .img-box div:nth-child(3) img, .form-bottom .img-box div:nth-child(3) img, .benefits .img-box div:nth-child(3) img {
|
||||
margin-top: -15px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.box .img-box div:nth-child(3) img, .form-bottom .img-box div:nth-child(3) img, .benefits .img-box div:nth-child(3) img {
|
||||
margin-top: -7px;
|
||||
}
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background: #FFBF0D;
|
||||
}
|
||||
.yellow-box .row:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
.yellow-box .row:first-child h2 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.yellow-box .row:last-child div[class^=col-] div {
|
||||
background: #fff;
|
||||
padding: 40px 30px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.yellow-box .row:last-child div[class^=col-] div {
|
||||
min-height: 404px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.yellow-box .row:last-child div[class^=col-] div {
|
||||
min-height: 436px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.yellow-box .row:last-child div[class^=col-] div {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
.yellow-box .row:last-child div[class^=col-] div p {
|
||||
line-height: 32px;
|
||||
}
|
||||
.yellow-box .row:last-child div[class^=col-] div img {
|
||||
height: 70px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.yellow-box .row:last-child div[class^=col-]:last-child div {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.benefits .row:first-child {
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.benefits .row:first-child h2 {
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
}
|
||||
.benefits .row:first-child h2::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 185px;
|
||||
background: #FFBF0D;
|
||||
position: absolute;
|
||||
top: -31px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.benefits .row:last-child div[class^=col-]:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.benefits .row:last-child div[class^=col-]:first-child img {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.benefits2 {
|
||||
background: #F9F9F9;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.benefits2 .content {
|
||||
max-width: 800px;
|
||||
}
|
||||
.benefits2 .content .dot {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.benefits3 {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.benefits3 div[class^=col-]:last-child {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.benefits3 div[class^=col-]:last-child img {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-align-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
background: #FFBF0D;
|
||||
color: #FFF;
|
||||
height: 67px;
|
||||
width: 67px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.dot-text {
|
||||
font-size: 22px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.benefits.gray-bg {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
.benefits.gray-bg .content {
|
||||
max-width: 755px;
|
||||
text-align: center;
|
||||
}
|
||||
.benefits.gray-bg .content .dot {
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
|
||||
.form-bottom.gray-bg {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
.form-bottom.gray-bg .star {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.form-bottom.gray-bg h2 {
|
||||
position: relative;
|
||||
padding-bottom: 35px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.form-bottom.gray-bg h2::after {
|
||||
content: "";
|
||||
height: 3px;
|
||||
background: #FFBF0D;
|
||||
width: 185px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
background: #fff;
|
||||
padding: 50px 30px;
|
||||
border: 1px solid #FFBF0D;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.form-footer {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
background: #000;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.footer p {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
1
badanie/layout/style-scss/style.css.map
Normal file
1
badanie/layout/style-scss/style.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["style.scss","style.css","_mixins.scss"],"names":[],"mappings":"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","file":"style.css"}
|
||||
624
badanie/layout/style-scss/style.scss
Normal file
624
badanie/layout/style-scss/style.scss
Normal file
@@ -0,0 +1,624 @@
|
||||
// out: ../style-css/style.css, compress: true, sourceMap: true
|
||||
@import "_mixins";
|
||||
$cGrayBg: #ededef;
|
||||
$cBlack: #000;
|
||||
$cYellow: #FFBF0D;
|
||||
$font-1: 'DM Sans',
|
||||
sans-serif;
|
||||
|
||||
body {
|
||||
font-family: $font-1;
|
||||
}
|
||||
.container {
|
||||
@include respond-above(lg) {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
.img-100 {
|
||||
max-width: 100%;
|
||||
}
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
color: $cBlack;
|
||||
background: $cYellow;
|
||||
padding: 10px 32px;
|
||||
border-radius: 0;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.btn2{
|
||||
padding: 7px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
color: $cBlack;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.btn3{
|
||||
padding: 7px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
background: $cBlack;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
color: $cBlack;
|
||||
|
||||
@include respond-between( md, lg ) {
|
||||
font-size: 34px;
|
||||
}
|
||||
@include respond-between( xs, md ) {
|
||||
font-size: 32px;
|
||||
}
|
||||
@include respond-below( xs ) {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
letter-spacing: 0px;
|
||||
color: $cBlack;
|
||||
@include respond-below( xs ) {
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
.padding70 {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
|
||||
.top{
|
||||
padding: 25px 0;
|
||||
a{
|
||||
font-size: 15px;
|
||||
color: $cBlack;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
div[class^="col-"]{
|
||||
&:first-child{
|
||||
@include respond-between( sm, md ) {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
@include respond-between( sm, md ) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
ul{
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
margin-bottom: 0;
|
||||
@include respond-below( sm ) {
|
||||
display: none;
|
||||
}
|
||||
li{
|
||||
a{
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.btn2{
|
||||
margin-right: 5px;
|
||||
@include respond-below( lg ) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.btn3{
|
||||
color: #fff;
|
||||
@include respond-below( lg ) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mobile-btn-container{
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
touch-action: none;
|
||||
@include respond-above( sm) {
|
||||
display: none;
|
||||
}
|
||||
.mobile-button {
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mobile-menu-container{
|
||||
|
||||
@include respond-above( sm) {
|
||||
display: none;
|
||||
}
|
||||
@include respond-below( sm) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
height: 0px;
|
||||
transition: all .3s ease;
|
||||
&.open{
|
||||
|
||||
height: 174px;
|
||||
|
||||
}
|
||||
}
|
||||
@media (max-width: 407px){
|
||||
|
||||
&.open{
|
||||
|
||||
height: 222px;
|
||||
|
||||
}
|
||||
}
|
||||
.menu-box{
|
||||
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
margin-bottom: 10px;;
|
||||
|
||||
li{
|
||||
a{
|
||||
padding: 0 10px;
|
||||
|
||||
font-size: 15px;
|
||||
color: $cBlack;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttons-box{
|
||||
@include respond-above( xs ) {
|
||||
display: flex;
|
||||
}
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.btn2{
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
@include respond-below( sm ) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.btn3{
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
@include respond-below( sm ) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.baner {
|
||||
background: $cGrayBg;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@include respond-below( sm ) {
|
||||
padding-top: 50px;
|
||||
}
|
||||
h1 {
|
||||
@extend .title;
|
||||
margin-bottom: 40px;
|
||||
@include respond-between( sm, md ) {
|
||||
font-size: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@include respond-below( xs ) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
div[class^="col-"]:first-child {
|
||||
z-index: 7;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
a {
|
||||
@extend .btn;
|
||||
}
|
||||
}
|
||||
div[class^="col-"]:last-child{
|
||||
z-index: 7;
|
||||
@include respond-below( sm ) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
img{
|
||||
margin-top: 50px;
|
||||
@include respond-between( xs, sm ) {
|
||||
width: 60%;
|
||||
margin-top: -60px;
|
||||
}
|
||||
@include respond-below( xs ) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.banner-star{
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
bottom: -273px;
|
||||
|
||||
@include respond-between( md, lg ) {
|
||||
left: -117px;
|
||||
bottom: -294px;
|
||||
|
||||
}
|
||||
|
||||
@include respond-between( xs, md ) {
|
||||
left: -40px;
|
||||
bottom: -220px;
|
||||
}
|
||||
@include respond-below( xs ) {
|
||||
display: none;
|
||||
|
||||
}
|
||||
img{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
z-index: 2;
|
||||
@include respond-between( xs, md ) {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box {
|
||||
padding-top: 101px;
|
||||
padding-bottom: 75px;
|
||||
|
||||
p {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@extend .text;
|
||||
position: relative;
|
||||
margin-bottom: 55px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -30px;
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
background: $cYellow;
|
||||
}
|
||||
}
|
||||
.img-box {
|
||||
padding: 50px 30px;
|
||||
box-shadow: rgba(255, 230, 159, .2) 0px 2px 23px 8px;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 29px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include respond-below( xs ) {
|
||||
display: block;
|
||||
}
|
||||
div {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include respond-below( xs ) {
|
||||
width: 100%;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid #e9e9e9;
|
||||
@include respond-below( xs ) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
@include respond-above( lg ) {
|
||||
width: 75%;
|
||||
}
|
||||
@include respond-between( sm, lg ) {
|
||||
width: 80%;
|
||||
}
|
||||
@include respond-between( xs, sm ) {
|
||||
width: 80%;
|
||||
}
|
||||
@include respond-below( xs ) {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3){
|
||||
img{
|
||||
|
||||
@include respond-above( md ) {
|
||||
margin-top: -21px;
|
||||
}
|
||||
@include respond-between( sm, md ) {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
@include respond-between( xs, sm ) {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
@extend .padding70;
|
||||
background: $cYellow;
|
||||
|
||||
.row {
|
||||
&:first-child {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
@extend .title;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
div[class^="col-"] {
|
||||
div {
|
||||
|
||||
background: #fff;
|
||||
padding: 40px 30px;
|
||||
border-radius: 12px;
|
||||
|
||||
@include respond-above( lg ) {
|
||||
min-height: 404px;
|
||||
|
||||
}
|
||||
@include respond-between( md, lg ) {
|
||||
min-height: 436px;
|
||||
}
|
||||
@include respond-below( md ) {
|
||||
margin-bottom: 40px;
|
||||
|
||||
}
|
||||
p, h3{
|
||||
@extend .text;
|
||||
|
||||
}
|
||||
p{
|
||||
line-height: 32px;
|
||||
}
|
||||
img {
|
||||
height: 70px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
div{
|
||||
@include respond-below( md ) {
|
||||
margin-bottom: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.benefits {
|
||||
|
||||
@extend .box;
|
||||
|
||||
.row {
|
||||
&:first-child {
|
||||
text-align: center;
|
||||
@extend .padding70;
|
||||
padding-top: 30px;
|
||||
|
||||
|
||||
h2 {
|
||||
@extend .title;
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 185px;
|
||||
background: #FFBF0D;
|
||||
position: absolute;
|
||||
top: -31px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
div[class^="col-"]:first-child {
|
||||
@include respond-below( md ) {
|
||||
text-align: center;
|
||||
}
|
||||
img{
|
||||
@include respond-below( md ) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.benefits2{
|
||||
background: #F9F9F9;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
text-align: center;
|
||||
.content{
|
||||
max-width: 800px;
|
||||
.dot{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.benefits3{
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
div[class^="col-"]:last-child{
|
||||
@include respond-below( md ) {
|
||||
text-align: center;
|
||||
}
|
||||
img{
|
||||
@include respond-below( md ) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.flex-align-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.dot {
|
||||
background: $cYellow;
|
||||
color: #FFF;
|
||||
height: 67px;
|
||||
width: 67px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.dot-text {
|
||||
font-size: 22px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.benefits {
|
||||
&.gray-bg {
|
||||
background: #F9F9F9;
|
||||
|
||||
.content {
|
||||
max-width: 755px;
|
||||
text-align: center;
|
||||
|
||||
.dot {
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-bottom {
|
||||
@extend .box;
|
||||
|
||||
&.gray-bg {
|
||||
background: #F9F9F9;
|
||||
|
||||
.star {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend .title;
|
||||
position: relative;
|
||||
padding-bottom: 35px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
height: 3px;
|
||||
background: #FFBF0D;
|
||||
width: 185px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-footer{
|
||||
background: #fff;
|
||||
padding: 50px 30px;
|
||||
border: 1px solid $cYellow;
|
||||
@include respond-below( md ) {
|
||||
margin-top: 50px;
|
||||
|
||||
}
|
||||
h3{
|
||||
@extend .text;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.footer{
|
||||
background: #000;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
p{
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user