From 5c390fb88488d4a42614509e3d16ac441c85bbb0 Mon Sep 17 00:00:00 2001
From: AnnaSamtash <sansara6900@gmail.com>
Date: Sun, 24 Dec 2023 18:34:58 +0300
Subject: [PATCH] Slider

---
 src/css/js.css            | 129 +++++++++++++++++++++++++++-
 src/css/reviews.css       | 172 +-------------------------------------
 src/index.html            |  13 ++-
 src/js/slider.js          |   2 +-
 src/partials/reviews.html |  68 +++------------
 5 files changed, 151 insertions(+), 233 deletions(-)

diff --git a/src/css/js.css b/src/css/js.css
index 072e991..5f33164 100644
--- a/src/css/js.css
+++ b/src/css/js.css
@@ -1,8 +1,129 @@
-.slide>.slick-prev:before,
-.slide>.slick-next:before {
-    color: #4d5ae5;
+.slider {
+    display: none;
 }
 
-.slick-initialized .slick-track .slick-slide {
+.slider-item {
+    height: 282px;
+    border-radius: 24px;
+    background: #FBFBFB;
+    flex-shrink: 1;
+    padding: 32px 8px;
+    margin-right: 2px;
+    margin-left: 2px;
+}
+
+.reviews-form-label-file {
+    display: block;
+    width: 100%;
+}
+
+.review-form-text {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    color: #040306;
+    margin-bottom: 12px;
+}
+
+.reviews-list-item-form {
+    padding: 16px 8px;
+    border-radius: 24px;
+    background: #FBFBFB;
+    height: 282px;
+}
+
+.reviews-form-file {
+    z-index: 2;
+    margin-bottom: 8px;
+    width: 56px;
+    height: 56px;
+    margin-left: 130px;
+    display: inline-block;
+    border: 1px solid #1B414B;
+}
+
+.reviews-form-label-file {
     display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(4, 3, 6, 0.40);
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.4;
+    letter-spacing: -0.02em;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.reviews-form-input {
+    padding: 10px 10px;
+    margin-bottom: 8px;
+    color: rgba(4, 3, 6, 0.40);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+    border-radius: 12px;
+    border: 1px solid #1B414B;
+    width: 100%;
+    height: 36px;
+}
+
+.input-file-btn {
+    border-radius: 50%;
+    width: 58px;
+    height: 58px;
+    border: 1px solid #1B414B;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1;
+    padding-top: 16px;
+    color: rgba(4, 3, 6, 0.40);
+    margin-bottom: 20px;
+}
+
+.reviews-form-textarea {
+    padding: 10px 10px;
+    color: rgba(4, 3, 6, 0.40);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+    border-radius: 12px;
+    border: 1px solid #1B414B;
+    width: 100%;
+    height: 80px;
+    resize: none;
+    position: relative;
+}
+
+.reviews-form-textarea::placeholder,
+.reviews-form-input::placeholder {
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1;
+    padding: 10px 10px;
+    color: rgba(4, 3, 6, 0.40);
+}
+
+.reviews-form-btn {
+    border: none;
+    background-color: transparent;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    line-height: 0;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+}
+
+.reviews-form-icon-send {
+    fill: #1B414B;
 }
\ No newline at end of file
diff --git a/src/css/reviews.css b/src/css/reviews.css
index be7019c..b8a4d60 100644
--- a/src/css/reviews.css
+++ b/src/css/reviews.css
@@ -16,7 +16,7 @@
     margin-right: auto;
 }
 
-.reviews-list-item-first {
+.reviews-list-item {
     padding: 32px 8px;
     border-radius: 24px;
     background: #FBFBFB;
@@ -37,7 +37,7 @@
     margin-bottom: 8px;
 }
 
-.reviews-list-text-first {
+.reviews-list-text {
     color: rgba(4, 3, 6, 0.40);
     text-align: center;
     font-size: 16px;
@@ -49,118 +49,6 @@
     margin-right: auto;
 }
 
-.reviews-list-item-form {
-    display: none;
-}
-
-.review-form-text {
-    text-align: center;
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 1.1;
-    letter-spacing: -0.02em;
-    color: #040306;
-    margin-bottom: 12px;
-}
-
-.reviews-list-item-form {
-    padding: 16px 8px;
-    border-radius: 24px;
-    background: #FBFBFB;
-    height: 282px;
-}
-
-.reviews-form-file {
-    z-index: 2;
-    margin-bottom: 8px;
-    width: 56px;
-    height: 56px;
-    margin-left: 130px;
-    display: inline-block;
-    border: 1px solid #1B414B;
-}
-
-.reviews-form-label-file {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: rgba(4, 3, 6, 0.40);
-    text-align: center;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.4;
-    letter-spacing: -0.02em;
-    display: inline-block;
-    cursor: pointer;
-}
-
-.reviews-form-input {
-    padding: 10px 10px;
-    margin-bottom: 8px;
-    color: rgba(4, 3, 6, 0.40);
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1.16;
-    letter-spacing: -0.02em;
-    border-radius: 12px;
-    border: 1px solid #1B414B;
-    width: 100%;
-    height: 36px;
-}
-
-.input-file-btn {
-    border-radius: 50%;
-    width: 58px;
-    height: 58px;
-    border: 1px solid #1B414B;
-    display: inline-block;
-    font-size: 11px;
-    font-weight: 400;
-    line-height: 1;
-    padding-top: 16px;
-    color: rgba(4, 3, 6, 0.40);
-    margin-left: 130px;
-    margin-bottom: 20px;
-}
-
-.reviews-form-textarea {
-    padding: 10px 10px;
-    color: rgba(4, 3, 6, 0.40);
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1.16;
-    letter-spacing: -0.02em;
-    border-radius: 12px;
-    border: 1px solid #1B414B;
-    width: 100%;
-    height: 80px;
-    resize: none;
-}
-
-.reviews-form-textarea::placeholder,
-.reviews-form-input::placeholder {
-    font-size: 11px;
-    font-weight: 400;
-    line-height: 1;
-    padding: 10px 10px;
-    color: rgba(4, 3, 6, 0.40);
-}
-
-.reviews-form-btn {
-    border: none;
-    background-color: transparent;
-    width: 30px;
-    height: 30px;
-    padding: 0;
-    line-height: 0;
-    position: absolute;
-    bottom: 40px;
-    right: 30px;
-}
-
-.reviews-form-icon-send {
-    fill: #1B414B;
-}
 
 
 
@@ -205,22 +93,8 @@
         width: calc((100% - 32px) / 2);
     }
 
-    .reviews-list-item-second {
-        padding: 32px 8px;
-        border-radius: 24px;
-        background: #FBFBFB;
-    }
-
-    .reviews-list-text-second {
-        color: rgba(4, 3, 6, 0.40);
-        text-align: center;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 1.4;
-        letter-spacing: -0.02em;
+    .reviews-list-text {
         max-width: 296px;
-        margin-left: auto;
-        margin-right: auto;
     }
 }
 
@@ -242,40 +116,12 @@
 
     .reviews-list-item {
         width: calc((100% - 52px) / 3);
-    }
-
-    .reviews-list-item-first {
         padding: 32px 28px;
-    }
-
-    .reviews-list-text-first {
         max-width: 320px;
     }
 
-    .reviews-list-item-second {
-        padding: 32px 28px;
-    }
-
-    .reviews-list-text-second {
-        max-width: 320px;
-    }
-
-    .reviews-list-item-third {
-        padding: 32px 28px;
-        border-radius: 24px;
-        background: #FBFBFB;
-    }
-
-    .reviews-list-text-third {
-        color: rgba(4, 3, 6, 0.40);
-        text-align: center;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 1.4;
-        letter-spacing: -0.02em;
+    .reviews-list-text {
         max-width: 293px;
-        margin-left: auto;
-        margin-right: auto;
     }
 
 }
@@ -292,17 +138,7 @@
 
     .reviews-list-item {
         width: calc((100% - 64px) / 3);
-    }
-
-    .reviews-list-item-first {
-        padding: 32px 36px;
-    }
-
-    .reviews-list-item-second {
         padding: 32px 36px;
     }
 
-    .reviews-list-item-third {
-        padding: 32px 36px;
-    }
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 892afe5..ba7865a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,8 +5,17 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>YACHTJET</title>
-    <link rel="stylesheet" type="text/css" href="slick/slick.css" />
-    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
+    />
+
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
diff --git a/src/js/slider.js b/src/js/slider.js
index 9d10d21..aa7bff3 100644
--- a/src/js/slider.js
+++ b/src/js/slider.js
@@ -1,5 +1,5 @@
 $('.responsive').slick({
-  dots: true,
+  dots: false,
   infinite: false,
   speed: 300,
   slidesToShow: 4,
diff --git a/src/partials/reviews.html b/src/partials/reviews.html
index 9eb1036..3aba755 100644
--- a/src/partials/reviews.html
+++ b/src/partials/reviews.html
@@ -21,7 +21,7 @@ <h2 class="section-title reviews-title">
           alt="John Wax"
         />
         <h3 class="reviews-list-fullname">John Wax</h3>
-        <p class="reviews-list-text-first">
+        <p class="reviews-list-text">
           I rented the Lagoon 620 with my family for a week-long vacation and it
           was the best decision ever. The yacht was spacious, comfortable, and
           luxurious, and the crew took care of everything.
@@ -38,7 +38,7 @@ <h3 class="reviews-list-fullname">John Wax</h3>
           alt="Victoria Romashenko"
         />
         <h3 class="reviews-list-fullname">Victoria Romashenko</h3>
-        <p class="reviews-list-text-second">
+        <p class="reviews-list-text">
           The Sunseeker Manhattan 66 was the perfect choice for our romantic
           getaway. The yacht was beautifully designed, with all the amenities we
           needed, and the crew was attentive and friendly.
@@ -55,66 +55,18 @@ <h3 class="reviews-list-fullname">Victoria Romashenko</h3>
           alt="Ihor Trachuk"
         />
         <h3 class="reviews-list-fullname">Ihor Trachuk</h3>
-        <p class="reviews-list-text-third">
+        <p class="reviews-list-text">
           The Azimut 80 was the most luxurious yacht I've ever been on. The
           cabins were spacious and elegant, and the outdoor areas were perfect
           for relaxing and entertaining. Worth every penny!
         </p>
       </li>
-      <li class="reviews-list-item reviews-list-item-form">
-        <p class="review-form-text">Leave a review</p>
-        <form class="reviews-form" name="reviews-form">
-          <label class="reviews-form-label-file" for="upload-file__input_1">
-            <input
-              class="reviews-form-file visually-hidden"
-              id="upload-file__input_1"
-              name="user-photo"
-              type="file"
-              accept=".jpg, .jpeg, .png, .gif"
-            />
-            <span class="input-file-btn"
-              >Downloud your <br />
-              photo</span
-            >
-          </label>
-          <label class="reviews-form-label visually-hidden" for="user-fullname"
-            >Name</label
-          >
-          <input
-            class="reviews-form-input"
-            id="user-fullname"
-            name="user-fullname"
-            type="text"
-            placeholder="Your name"
-            required
-          />
-          <label class="reviews-form-label visually-hidden" for="user-review"
-            >Review</label
-          >
-          <textarea
-            class="reviews-form-textarea"
-            id="user-review"
-            name="user-review"
-            placeholder="Your review"
-          ></textarea>
-          <button class="reviews-form-btn" type="submit">
-            <svg
-              class="reviews-form-icon-send"
-              width="30"
-              height="30"
-              aria-label="reviews form icon send"
-            >
-              <use href="../img/icons.svg#icon-send"></use>
-            </svg>
-          </button>
-        </form>
-      </li>
     </ul>
 
     <!-- slider project -->
 
     <div class="slider responsive">
-      <div class="slider-item reviews-list-item reviews-list-item-first">
+      <div class="slider-item">
         <img
           class="reviews-list-avatar"
           srcset="
@@ -125,14 +77,14 @@ <h3 class="reviews-list-fullname">Ihor Trachuk</h3>
           alt="John Wax"
         />
         <h3 class="reviews-list-fullname">John Wax</h3>
-        <p class="reviews-list-text-first">
+        <p class="reviews-list-text">
           I rented the Lagoon 620 with my family for a week-long vacation and it
           was the best decision ever. The yacht was spacious, comfortable, and
           luxurious, and the crew took care of everything.
         </p>
       </div>
 
-      <div class="slider-item reviews-list-item reviews-list-item-second">
+      <div class="slider-item">
         <img
           class="reviews-list-avatar"
           srcset="
@@ -143,14 +95,14 @@ <h3 class="reviews-list-fullname">John Wax</h3>
           alt="Victoria Romashenko"
         />
         <h3 class="reviews-list-fullname">Victoria Romashenko</h3>
-        <p class="reviews-list-text-second">
+        <p class="reviews-list-text">
           The Sunseeker Manhattan 66 was the perfect choice for our romantic
           getaway. The yacht was beautifully designed, with all the amenities we
           needed, and the crew was attentive and friendly.
         </p>
       </div>
 
-      <div class="slider-item reviews-list-item reviews-list-item-third">
+      <div class="slider-item">
         <img
           class="reviews-list-avatar"
           srcset="
@@ -161,14 +113,14 @@ <h3 class="reviews-list-fullname">Victoria Romashenko</h3>
           alt="Ihor Trachuk"
         />
         <h3 class="reviews-list-fullname">Ihor Trachuk</h3>
-        <p class="reviews-list-text-third">
+        <p class="reviews-list-text">
           The Azimut 80 was the most luxurious yacht I've ever been on. The
           cabins were spacious and elegant, and the outdoor areas were perfect
           for relaxing and entertaining. Worth every penny!
         </p>
       </div>
 
-      <div class="slider-item reviews-list-item reviews-list-item-form">
+      <div class="slider-item">
         <p class="review-form-text">Leave a review</p>
         <form class="reviews-form" name="reviews-form">
           <label class="reviews-form-label-file" for="upload-file__input_1">