Alena/Figma_1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adaptive_1

Browse Source
This commit is contained in:
Alena Trushcheva
2025-09-21 00:38:38 +03:00
parent 59d32a35c5
commit 70ef712f94
2 changed files with 260 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@@ -20,6 +20,7 @@
<body id="body"> <body id="body">
<!-- обертка --> <!-- обертка -->
<div class="wrapper"> <div class="wrapper">
<div class="overlay"></div>
<!-- первая страница сайта --> <!-- первая страница сайта -->
<header class="header"> <header class="header">
<!-- бургер меню --> <!-- бургер меню -->
@@ -1982,6 +1983,24 @@
infinite: true, infinite: true,
draggable: false, draggable: false,
waitForAnimate: false, waitForAnimate: false,
responsive:
[
{
breakpoint: 1100,
settings: {
slidesToShow: 3},
},
{
breakpoint: 750,
settings: {
slidesToShow: 2},
},
{
breakpoint: 550,
settings: {
slidesToShow: 1},
},
]
}); });
$(".team_slider-prev").on("click", function (e) { $(".team_slider-prev").on("click", function (e) {
@@ -1999,6 +2018,14 @@
dots: true, dots: true,
appendDots: $(".testimonials_dots"), appendDots: $(".testimonials_dots"),
waitForAnimate: false, waitForAnimate: false,
responsive:
[
{
breakpoint: 700,
settings: {
slidesToShow: 1},
},
]
}); });
$(".testimonials_prev").on("click", function (e) { $(".testimonials_prev").on("click", function (e) {
@@ -2042,17 +2069,21 @@
//анимируем переход на расстояние - top за 1500 мс //анимируем переход на расстояние - top за 1500 мс
$('body,html').animate({scrollTop: top}, 1500); $('body,html').animate({scrollTop: top}, 1500);
}); });
//
$(window).on("scroll", function () {
if ($(window).scrollTop() > 0) { setInterval(() => {
if ($(window).scrollTop() > 0 && $(".header_top").hasClass("header_top--open") === false) {
$(".burger").addClass("burger--follow"); $(".burger").addClass("burger--follow");
} else { } else {
$(".burger").removeClass("burger--follow"); $(".burger").removeClass("burger--follow");
} }
}) }, 0);
$(".burger").on("click", function (e) {
$(".burger, .overlay").on("click", function (e) {
e.preventDefault(); e.preventDefault();
$(".header_top").toggleClass("header_top--open"); $(".header_top").toggleClass("header_top--open");
$(".overlay").toggleClass("overlay--show");
}); });
</script> </script>

230
style.css
View File

@@ -97,6 +97,25 @@ body {
line-height: 1.3; line-height: 1.3;
} }
.overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.349);
z-index: 50;
visibility: hidden;
opacity: 0;
transition: all .3s;
}
.overlay--show {
opacity: 1;
visibility: visible;
}
/* ------------------------------HEADER TOP----------------------------------------------------------- */ /* ------------------------------HEADER TOP----------------------------------------------------------- */
.header { .header {
@@ -329,6 +348,7 @@ body {
.about_numbers { .about_numbers {
margin-left: 30px; margin-left: 30px;
align-self: center; align-self: center;
white-space: nowrap;
} }
.about_number span { .about_number span {
font-size: 48px; font-size: 48px;
@@ -364,10 +384,12 @@ body {
} }
.directions_filter_box { .directions_filter_box {
display: flex; display: flex;
margin-bottom: 56px; flex-wrap: wrap;
margin-bottom: 40px;
} }
.directions_filter_item { .directions_filter_item {
margin-right: 45px; margin-right: 45px;
margin-bottom: 15px;
} }
.directions_filter_item:last-child { .directions_filter_item:last-child {
margin-right: 0; margin-right: 0;
@@ -382,6 +404,7 @@ body {
border-radius: 4px; border-radius: 4px;
padding: 5px 8px; padding: 5px 8px;
background: transparent; background: transparent;
white-space: nowrap;
} }
.directions_filter_btn--active { .directions_filter_btn--active {
background: linear-gradient(56deg, #ff3f3a 0%, #f75e05 100%); background: linear-gradient(56deg, #ff3f3a 0%, #f75e05 100%);
@@ -525,6 +548,7 @@ body {
} }
.cert_logos-item { .cert_logos-item {
margin-right: 40px; margin-right: 40px;
} }
.cert_logos-item:last-child { .cert_logos-item:last-child {
margin-right: 0; margin-right: 0;
@@ -535,6 +559,11 @@ body {
0 30px 24px -10px rgba(154, 156, 165, 0.10), 0 30px 24px -10px rgba(154, 156, 165, 0.10),
0 12px 10px -6px rgba(154, 156, 165, 0.08), 0 12px 10px -6px rgba(154, 156, 165, 0.08),
0 4px 4px -4px rgba(30, 33, 44, 0.05); 0 4px 4px -4px rgba(30, 33, 44, 0.05);
object-fit: contain;
}
.cert_image-box img {
width: 100%;
height: 100%;
} }
/* ------------------------------MAIN SLIDER----------------------------------- */ /* ------------------------------MAIN SLIDER----------------------------------- */
@@ -580,6 +609,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: top;
} }
.team_socials { .team_socials {
position: absolute; position: absolute;
@@ -947,6 +977,7 @@ body {
.blog_btn { .blog_btn {
} }
.button { .button {
white-space: nowrap;
} }
.blog_row { .blog_row {
display: flex; display: flex;
@@ -1441,7 +1472,47 @@ body {
display: none; display: none;
} }
/* ----------------------------------------MEDIA--------------------------------------------------- */
/* ----------------------------------------------------900--------------------------------------------------------- */
@media (max-width: 900px) {
.header_img {
display: none;
}
.header_row {
display: none;
}
.about_img {
display: none;
}
.directions_filter_box {
justify-content: space-between;
}
.directions_filter_item {
margin-right: 10px;
}
.directions_list {
gap: 30px 10px;
}
.directions_link_content {
padding: 24px 5px;
}
}
/* ----------------------------------------------------1200--------------------------------------------------------- */
@media (max-width: 1200px) {
.header_title {
font-weight: 900;
font-size: 52px;
min-width: 376px;
}
.header_img {
max-width: 450px;
}
}
/* --------------------------------------------------1100------------------------------------------------------- */
@media (max-width: 1100px) { @media (max-width: 1100px) {
.burger { .burger {
@@ -1529,8 +1600,155 @@ body {
.header_user-nav { .header_user-nav {
margin-bottom: 30px; margin-bottom: 30px;
} }
.heading_title {
font-size: 37px;
}
.about_img {
max-width: 400px;
}
.cerf_inner {
flex-direction: column;
align-items: center;
}
.cert_content {
margin: 0px 0px 30px 0px;
align-self: center;
}
.cert_heading {
text-align: center;
}
.cert_logos {
justify-content: space-between;
}
.cert_text {
text-align: center;
}
} }
/* --------------------------------------------------------700--------------------------------------------------------------------------- */
@media (max-width:700px) {
.about_createx {
margin-bottom: 60px;
}
.about_values {
flex-direction: column;
}
.about_image_box {
display: none;
}
.about_numbers {
margin: 0;
align-self: flex-start;
}
.directions_list {
grid-template: repeat(3, auto) / repeat(2, 1fr);
}
.testimonials_slider_wrapper {
padding: 0;
}
.testimonials_arrow {
display: none;
}
.testimonials_slide {
padding: 30px 15px;
}
}
/* -------------------------------------------------------550------------------------------------------------------------------------ */
@media (max-width: 550px) {
.heading {
margin-bottom: 30px;
}
.heading_title {
font-size: 25px;
}
.about_text {
margin-bottom: 30px;
}
.heading_subtitle {
font-size: 14px;
margin: 0;
}
.about_paragraph {
font-size: inherit;
margin-bottom: 10px;
}
.about_btn_box {
flex-direction: column;
align-items: flex-start;
}
.about_btn {
margin-bottom: 30px;
}
.directions_list {
grid-template: none;
}
.directions_list_item--empty {
display: none;
}
.directions_filter_box {
margin-bottom: 15px;
justify-content: left;
}
.team_image_box {
max-width: 300px;
margin: 0 auto 16px;
}
.testimonials_slider_wrapper {
margin-bottom: 15px;
}
.testimonials_slide_inner {
padding-left: 30px;
}
.testimonials_quote {
font-size: inherit;
line-height: inherit;
}
.testimonials_quote::before {
left: -30px;
width: 20px;
}
.testimonials_dots button{
width: 20px;
}
}
/* ------------------------------------------------------450------------------------------------------------------------- */
@media (max-width: 450px) {
.header_top {
min-width: none;
width: 100%;
}
.header_title {
max-width: 376px;
font-size: 40px;
}
.header_content-buttons {
flex-direction: column;
align-items: flex-start;
}
.header_content_btn {
margin-right: 0;
margin-bottom: 30px;
text-align: center;
}
.directions_filter_box {
margin-bottom: 15px;
}
.cert_logos {
flex-direction: column;
align-items: center;
}
.cert_logos-item {
margin: 0px 0px 30px 0px;
}
.cert_logos-item:last-child {
margin: 0px 0px 0px 0px;
}
}