merge branch develop

blocks/carousel/__bg-image/carousel__bg-image.css

@@ -4,4 +4,17 @@
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
+  border-radius: 10px;
+}
+
+@media screen and (max-width: 1024px) {
+.carousel__bg-image {
+  border-radius: 8px;
+}
+}
+
+@media screen and (max-width: 768px) {
+.carousel__bg-image {
+  border-radius: 7px;
+}
 }

blocks/carousel/__indicator-container/carousel__indicator-container.css

@@ -0,0 +1,3 @@
+.carousel__indicator-container {
+  align-self: center;
+}

blocks/carousel/__nav-label/carousel__nav-label.css

@@ -2,10 +2,17 @@
   font-weight: normal;
   font-size: 16px;
   line-height: 1;
+  font-style: italic;
 }
 
 @media screen and (max-width: 768px) {
   .carousel__nav-label {
     font-size: 14px;
   }
 }
+
+@media screen and (max-width: 425px) {
+  .carousel__nav-label {
+    font-size: 12px;
+  }
+}

blocks/carousel/__nav/_type/carousel__nav_type_statistics.css

@@ -0,0 +1,22 @@
+.carousel__nav_type_statistics {
+  border-bottom: 1.7px solid #223d46;
+  padding-bottom: 60px;
+}
+
+@media screen and (max-width: 1024px) {
+  .carousel__nav_type_statistics {
+    padding-bottom: 50px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .carousel__nav_type_statistics {
+    padding-bottom: 40px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .carousel__nav_type_statistics {
+    padding-bottom: 30px;
+  }
+}

blocks/carousel/__slide-button/_type/carousel__slide-button_type_next.css

@@ -9,3 +9,15 @@
     margin-left: 25px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .carousel__slide-button_type_next {
+    margin-left: 20px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .carousel__slide-button_type_next {
+    margin-left: 10px;
+  }
+}

blocks/carousel/__slide-button/_type/carousel__slide-button_type_prev.css

@@ -8,3 +8,16 @@
     margin-right: 25px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .carousel__slide-button_type_prev {
+    margin-right: 20px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .carousel__slide-button_type_prev {
+    margin-right: 10px;
+  }
+}
+

blocks/carousel/__slide-button/carousel__slide-button.css

@@ -16,3 +16,19 @@
     width: 49px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .carousel__slide-button {
+    background-size: 45px;
+    height: 45px;
+    width: 45px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .carousel__slide-button {
+    background-size: 36px;
+    height: 36px;
+    width: 36px;
+  }
+}

blocks/carousel/__slide/_type/carousel__slide_type_about.css

@@ -1,4 +1,23 @@
 .carousel__slide_type_about {
   width: 1200px;
   height: 660px;
+  margin: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .carousel__slide_type_about {
+    height: 520px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .carousel__slide_type_about {
+    height: 390px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .carousel__slide_type_about {
+    height: 180px;
+  }
 }

blocks/carousel/__slide/_type/carousel__slide_type_statistics.css

@@ -1,5 +1,28 @@
 .carousel__slide_type_statistics {
-  max-width: 382px;
+  width: 382px;
   height: 210px;
   margin-right: 27px;
 }
+
+@media screen and (max-width: 1024px) {
+  .carousel__slide_type_statistics {
+    height: 166px;
+    margin-right: 19px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .carousel__slide_type_statistics {
+    height: 188px;
+    margin-right: 22px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .carousel__slide_type_statistics {
+    margin: 0;
+    border-left: 1px solid white;
+    border-right: 1px solid white;
+    width: 400px;
+  }
+}

blocks/carousel/__slide/carousel__slide.css

@@ -11,14 +11,12 @@
 
 @media screen and (max-width: 1024px) {
   .carousel__slide {
-    height: 166px;
-    margin-right: 19px;
+    border-radius: 8px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .carousel__slide {
-    height: 188px;
-    margin-right: 22px;
+    border-radius: 7px;
   }
 }

blocks/carousel/carousel.css

@@ -6,8 +6,9 @@
 @import url(./__bg-image/carousel__bg-image.css);
 @import url(./__slide-button/carousel__slide-button.css);
 @import url(./__nav/carousel__nav.css);
+@import url(./__nav-label/carousel__nav-label.css);
 @import url(./__indicator/carousel__indicator.css);
-@import url(./__indicators/carousel__indicators.css);
+@import url(./__indicator-container/carousel__indicator-container.css);
 @import url(./__button-wrapper/carousel__button-wrapper.css);
 @import url(./__slide-text-wrapper/carousel__slide-text-wrapper.css);
 /* modifiers */
@@ -16,3 +17,4 @@
 @import url(./__slide-button/_type/carousel__slide-button_type_prev.css);
 @import url(./__slide/_type/carousel__slide_type_statistics.css);
 @import url(./__slide/_type/carousel__slide_type_about.css);
+@import url(./__nav/_type/carousel__nav_type_statistics.css);

blocks/content-title/content-title.css

@@ -23,6 +23,6 @@
 @media screen and (max-width: 425px) {
   .content-title {
     font-size: 20px;
-    padding-bottom: 12px;
+    padding-bottom: 16px;
   }
 }

blocks/hello-there/hello-there.css

@@ -5,7 +5,6 @@
 
 .hello-there {
   padding: 50px 16px 0;
-  border-top: 1.7px solid #223d46;
 }
 
 @media (min-width: 768px) {

blocks/statistics/statistics.css

@@ -1,17 +1,23 @@
 .statistics {
   padding: 100px 40px 0;
-  padding-bottom: 60px;
+  max-width: 1200px;
+  margin: auto;
 }
 
 @media screen and (max-width: 1024px) {
   .statistics {
     padding-top: 84px;
-    padding-bottom: 50px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .statistics {
-    padding: 68px 30px 40px;
+    padding: 68px 30px 0;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .statistics {
+    padding: 50px 16px 0;
   }
 }

scripts/Carousel.js → components/Carousel.js

@@ -21,101 +21,102 @@ class Carousel {
   }
 
   _rotate(direction) {
-    const carouselTrack = this._carouselElement.querySelector('.carousel__track');
-    carouselTrack.style.transition = "transform 0.6s ease-in-out";
+    this._carouselTrack.style.transition = 'transform 0.6s ease-in-out';
     this._counter += direction;
-    carouselTrack.style.transform = 'translateX(' + ( -this._sizeOfSlide * this._numberOfSlidesPerPage * this._counter ) + 'px)';
+    this._carouselTrack.style.transform = `translateX(${ -this._sizeOfSlide * this._numberOfSlidesPerPage * this._counter }px)`;
     this._changeIndicator(direction);
   }
 
   _restart() {
-    const carouselTrack = this._carouselElement.querySelector('.carousel__track');
-    carouselTrack.style.transition = "transform 0.6s ease-in-out";
-    carouselTrack.style.transform = 'translateX(' + 0 + 'px)';
+    this._carouselTrack.style.transition = 'transform 0.6s ease-in-out';
+    this._carouselTrack.style.transform = 'translateX(0px)';
     this._changeIndicator(0);
     this._counter = 0;
   }
 
-  //indicators are the dots in the buttom of the carousel
+  // indicators are the dots in the buttom of the carousel
   _setIndicators() {
-    const carouselTrack = this._carouselElement.querySelector('.carousel__track');
-    const carouselIndicators = this._carouselElement.querySelector('.carousel__indicators');
+    const carouselIndicatorContainer = this._carouselElement.querySelector('.carousel__indicator-container');
 
     const button = [];
     for(let i=0; i < this._numberOfTransitions + 1; i++){
-      button[i] = document.createElement("BUTTON");
+      button[i] = document.createElement('BUTTON');
       button[i].classList.add('carousel__indicator');
-      carouselIndicators.appendChild(button[i]);
+      carouselIndicatorContainer.appendChild(button[i]);
     }
 
     // new const "carouselIndicator" is created which contains all the new indicators created in the for loop
     const carouselIndicator = this._carouselElement.querySelectorAll('.carousel__indicator');
 
     carouselIndicator[0].classList.add('carousel__indicator_active');
-    carouselTrack.style.transform = 'translateX(' + ( -this._sizeOfSlide * this._numberOfSlidesPerPage * this._counter ) + 'px)';
+    this._carouselTrack.style.transform = `translateX(${ -this._sizeOfSlide * this._numberOfSlidesPerPage * this._counter }px)`;
   }
 
   _setCarousel() {
     const carouselSlides = this._carouselElement.querySelectorAll('.carousel__slide');
-    const carouselTrack = this._carouselElement.querySelector('.carousel__track');
+    this._carouselTrack = this._carouselElement.querySelector('.carousel__track');
 
     this._counter = 0;
 
-    if(carouselTrack.classList.contains('carousel__track_type_statistics')) {
+    if(this._carouselTrack.classList.contains('carousel__track_type_statistics')) {
       if(screen.width > 768) {
         this._numberOfSlidesPerPage = 3;
+        this.addPixelFlag = 0;
       }
       else if(screen.width <= 768 && screen.width > 425) {
         this._numberOfSlidesPerPage = 2;
+        this.addPixelFlag = 0;
       }
       else {
         this._numberOfSlidesPerPage = 1;
+        this.addPixelFlag = 2; // this flag exists to enable 2px border between slides, to distinguish between them
       }
     }
     else {
       this._numberOfSlidesPerPage = 1;
+      this.addPixelFlag = 0;
     }
     const numOfSlides = carouselSlides.length;
-
     this._numberOfTransitions = Math.ceil(numOfSlides / this._numberOfSlidesPerPage) - 1;
-    this._slidePersentageOutOfScreen = (1 / this._numberOfSlidesPerPage) * 100;
-    const carouselOverflowWidth = Math.ceil(this._slidePersentageOutOfScreen * carouselSlides.length);
-    carouselTrack.style.width = carouselOverflowWidth + "%";
+    const slidePersentageOutOfScreen = (1 / this._numberOfSlidesPerPage) * 100;
+    const carouselOverflowWidth = Math.ceil(slidePersentageOutOfScreen * carouselSlides.length);
+
+    this._carouselTrack.style.width = carouselOverflowWidth + '%';
+
     const carouselSlidesStyle = getComputedStyle(carouselSlides[0]);
-    this._sizeOfSlide = carouselSlides[0].clientWidth + parseInt(carouselSlidesStyle.getPropertyValue('margin-right'), 10);
+    this._sizeOfSlide = carouselSlides[0].clientWidth + parseInt(carouselSlidesStyle.getPropertyValue('margin-right'), 10) + this.addPixelFlag;
   }
 
   _setEventListeners() {
-    const carouselTrack = this._carouselElement.querySelector('.carousel__track');
     const prevButton = this._carouselElement.querySelector('.carousel__slide-button_type_prev');
     const nextButton = this._carouselElement.querySelector('.carousel__slide-button_type_next');
     //Button Listeners
     nextButton.addEventListener('click', () => {
-      carouselTrack.style.animationPlayState = "paused";
+      this._carouselTrack.style.animationPlayState = 'paused';
       if(this._counter >= this._numberOfTransitions) { return;}
       this._rotate(1);
     });
 
     prevButton.addEventListener('click', () => {
-      carouselTrack.style.animationPlayState = "paused";
+      this._carouselTrack.style.animationPlayState = 'paused';
       if(this._counter <= 0) { return; }
       this._rotate(-1);
     });
 
     //Hover Listeners
-    carouselTrack.addEventListener("mouseover", () => {
-      carouselTrack.style.animationPlayState = "paused";
+    this._carouselTrack.addEventListener('mouseover', () => {
+      this._carouselTrack.style.animationPlayState = 'paused';
     });
 
-    carouselTrack.addEventListener("mouseout", () => {
-      carouselTrack.style.animationPlayState = "running";
+    this._carouselTrack.addEventListener('mouseout', () => {
+      this._carouselTrack.style.animationPlayState = 'running';
     });
 
     //Resize screen Listener
     window.addEventListener('resize', () => {
       //init carousel
       this._setCarousel();
-      carouselTrack.style.transform = 'translateX(' + ( -this._sizeOfSlide * this._numberOfSlides * this._counter ) + 'px)';
+      this._carouselTrack.style.transform = `translateX(${ -this._sizeOfSlide * this._numberOfSlides * this._counter }px)`;
       //init indicators
       const indicatorList = Array.from(this._carouselElement.querySelectorAll('.carousel__indicator'));
       indicatorList.forEach((indicatorElement) => {
@@ -127,10 +128,8 @@ class Carousel {
   }
 
   _interval() {
-    const carouselTrack = this._carouselElement.querySelector('.carousel__track');
-
     setInterval(() => {
-      if(carouselTrack.style.animationPlayState !== "paused"){
+      if(this._carouselTrack.style.animationPlayState !== 'paused'){
         if(this._counter >= this._numberOfTransitions) {
           this._restart();
         }
@@ -149,4 +148,4 @@ class Carousel {
   }
 }
 
-export { Carousel };
+export default Carousel;