diff --git a/index.html b/index.html index c3df174..894be60 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@
+
@@ -1981,7 +1982,25 @@ slidesToShow: 4, infinite: true, 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) { @@ -1999,6 +2018,14 @@ dots: true, appendDots: $(".testimonials_dots"), waitForAnimate: false, + responsive: + [ + { + breakpoint: 700, + settings: { + slidesToShow: 1}, + }, + ] }); $(".testimonials_prev").on("click", function (e) { @@ -2042,17 +2069,21 @@ //анимируем переход на расстояние - 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"); } else { $(".burger").removeClass("burger--follow"); } - }) - $(".burger").on("click", function (e) { + }, 0); + + + $(".burger, .overlay").on("click", function (e) { e.preventDefault(); $(".header_top").toggleClass("header_top--open"); + $(".overlay").toggleClass("overlay--show"); }); diff --git a/style.css b/style.css index 143cd44..ba1f6d9 100644 --- a/style.css +++ b/style.css @@ -97,6 +97,25 @@ body { 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 { @@ -221,7 +240,7 @@ body { display: flex; } .header_content_btn { - margin-right: 24px; + margin-right: 24px; } .header_content_btn:last-child { margin-right: 0px; @@ -329,6 +348,7 @@ body { .about_numbers { margin-left: 30px; align-self: center; + white-space: nowrap; } .about_number span { font-size: 48px; @@ -364,10 +384,12 @@ body { } .directions_filter_box { display: flex; - margin-bottom: 56px; + flex-wrap: wrap; + margin-bottom: 40px; } .directions_filter_item { margin-right: 45px; + margin-bottom: 15px; } .directions_filter_item:last-child { margin-right: 0; @@ -382,6 +404,7 @@ body { border-radius: 4px; padding: 5px 8px; background: transparent; + white-space: nowrap; } .directions_filter_btn--active { background: linear-gradient(56deg, #ff3f3a 0%, #f75e05 100%); @@ -525,6 +548,7 @@ body { } .cert_logos-item { margin-right: 40px; + } .cert_logos-item:last-child { margin-right: 0; @@ -535,6 +559,11 @@ body { 0 30px 24px -10px rgba(154, 156, 165, 0.10), 0 12px 10px -6px rgba(154, 156, 165, 0.08), 0 4px 4px -4px rgba(30, 33, 44, 0.05); + object-fit: contain; +} +.cert_image-box img { + width: 100%; + height: 100%; } /* ------------------------------MAIN SLIDER----------------------------------- */ @@ -580,6 +609,7 @@ body { width: 100%; height: 100%; object-fit: cover; + object-position: top; } .team_socials { position: absolute; @@ -947,6 +977,7 @@ body { .blog_btn { } .button { + white-space: nowrap; } .blog_row { display: flex; @@ -1441,7 +1472,47 @@ body { 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) { .burger { @@ -1529,8 +1600,155 @@ body { .header_user-nav { 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; + } +} - -} \ No newline at end of file