goitacademy · adelina-h · Aug 27, 2024 · Aug 28, 2024 · Aug 28, 2024 · Aug 29, 2024
diff --git a/assets/actions-config-step-1.png b/assets/actions-config-step-1.png
diff --git a/assets/actions-config-step-2.png b/assets/actions-config-step-2.png
diff --git a/assets/how-it-works.png b/assets/how-it-works.png
diff --git a/assets/repo-settings.png b/assets/repo-settings.png
diff --git a/assets/status.png b/assets/status.png
diff --git a/src/css/about-us.css b/src/css/about-us.css
diff --git a/src/css/advantages.css b/src/css/advantages.css
diff --git a/src/css/footer.css b/src/css/footer.css
diff --git a/src/css/header.css b/src/css/header.css
diff --git a/src/css/hero.css b/src/css/hero.css
diff --git a/src/css/our-yachts.css b/src/css/our-yachts.css
diff --git a/src/css/rent-a-yacht.css b/src/css/rent-a-yacht.css
@@ -0,0 +1,143 @@
+.rent-a-yacht-sect {
+    background-color: #0E1823;
+}
+.yacht-renting-container {
+    min-width: 375px;
+    padding-left:20px;
+    padding-right: 20px;
+}
+.form-title {
+    color:#FBFBFB;
+    width: 222px;
+height: 28px;
+left: 20px;
+font-size: 28px;
+font-weight: 500;
+line-height: 28px;
+letter-spacing: -0.02em;
+margin-bottom: 40px;
+text-align: left;
+}
+.rent-form {
+display:flex;
+flex-direction: column;
+gap:18px;
+min-width:335px;
+min-height:288px;  
+}
+.input-form {
+    padding-left: 18px;
+    border: 1px solid #FBFBFB33;
+    background-color: #0E1823;
+    width:335px;
+    height:45px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14px;
+
+}
+.form-comment {
+width: 335px;
+    height: 108px;
+    padding-top: 14px;
+    padding-left:18px;
+    border-radius: 12px ;
+    border: 1px solid #FBFBFB33;
+    background-color: #0E1823;
+    resize: none;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 14px;
+        text-align: left;
+        margin-bottom: 20px;
+
+}
+.form-btn {
+
+    color: #FBFBFB;
+        background-color: #1B414B;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 18px;
+        letter-spacing: -0.02em;
+        text-align: center;
+        width: 122px;
+        height: 46px;
+        border-radius: 15px;
+        border:none;
+        padding: 15px;
+}
+.yacht-pic {
+    margin-top: 80px;
+    border-radius: 24px;
+
+}
+
+/* --tablet-- */
+@media (min-width:768px) {
+.yacht-renting-container {
+    min-width: 768px;
+    padding-left: 148px;
+    padding-right: 147px;
+}
+.form-title {
+    width: 381px;
+    height: 48px;
+    font-size: 48px;
+    font-weight: 500;
+    line-height: 48px;
+    letter-spacing: -0.02em;
+    text-align: left;
+
+
+}
+.input-form {
+width:472px;
+height:54px;
+     font-size: 14px;
+     font-weight: 400;
+     line-height: 18px;
+
+}
+.form-comment {
+    width:472px;
+    height: 116px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+
+}
+.form-btn {
+    width:194px;
+    height: 56px;
+}
+.form-container {
+    display: flex;
+    flex-direction: column;
+    margin-left:40px;
+
+}
+.yacht-pic {
+    width: 768px;
+}
+
+}
+
+/* --desktop-- */
+@media (min-width:1280px) {
+.yacht-renting-container {
+    min-width:1280px;
+    padding-left:50px;
+    margin-left:auto;
+    display: flex;
+    gap:50px;
+    flex-direction: row-reverse;
+}
+.yacht-pic {
+    width: 658px;
+    height: 536px;
+    margin-top: auto;
+
+}
+}
diff --git a/src/css/reviews.css b/src/css/reviews.css
@@ -0,0 +1,146 @@
+.reviews-container {
+    min-width: 375px;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.reviews_section {
+    padding-top: 80px;
+    padding-bottom: 100px;
+}
+.reviews-section-title {
+   max-width: 300px;
+   text-align: center;
+    margin-bottom: 25px;
+        font-size: 28px;
+        font-weight: 500;
+        line-height: 28px;
+        letter-spacing: -0.02em;
+        color:#FBFBFB;
+
+
+}
+.reviews-sect-description {
+    width:335px;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 14px;
+        letter-spacing: -0.02em;
+        text-align: center;
+        margin-bottom: 40px;
+        color:#FBFBFB;
+
+}
+.review-list-item {
+    background-color: #FBFBFB;
+    border-radius: 24px;
+    width: 335px;
+    height: 282px;
+    padding:20px 16px;
+}
+
+.reviewer-name {
+     color:#040306;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 19.8px;
+    letter-spacing: -0.02em;
+    text-align: center;
+    margin-top:20px;
+    margin-bottom: 10px;
+}
+.the-review {
+    width: 303px;
+     height: 110px;
+    font-size: 16px;
+     font-weight: 400;
+     line-height: 22.4px;
+    letter-spacing: -0.02em;
+      text-align: center;
+     color:#04030666;
+}
+.reviewer-pic {
+    margin:auto ;
+
+
+}
+@media (min-width:300px) and (max-width:767px) {
+.review-type-second, .review-type-last {
+    display: none;
+}
+}
+
+/* --tablet-- */
+@media (min-width:768px) {
+    .reviews_section {
+        padding-left: 50px;
+    }
+    .reviews-container {
+        min-width: 768px;
+        padding-left: 50px;
+        padding-right: 32px;
+    }
+    .reviews-section-title {
+        max-width:704px;
+        margin: auto;
+        font-size: 48px;
+        font-weight: 500;
+        line-height: 48px;
+        letter-spacing: -0.02em;
+
+        }
+        .reviews-sect-description {
+            width: 571px;
+                height: 36px;
+                font-size: 14px;
+                line-height: 18px;
+                letter-spacing: -0.02em;
+                margin: auto;
+                margin-top: 25px;
+        }
+
+    .reviews-list {
+        display: flex;
+        gap:26px;
+        margin-top: 75px;
+        margin-left: 50px;
+
+    }
+         .review-list-item {
+             padding:30px 16px;
+
+         }
+
+
+
+}
+
+@media (min-width:768px) and (max-width:1279px){
+.review-type-last {
+        display: none;
+    }
+ }
+
+/* --desktop-- */
+@media (min-width:1280px) {
+    .reviews_section {
+            padding-left: 70px;
+        }
+    .reviews-container {
+        min-width: 1280px;
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+         .reviews-section-title {
+            max-width: 854px;
+         }
+     .the-review {
+        width: 320px;
+     }
+    .reviews-list {
+            gap: 32px;
+            margin-left: 50px;
+        }
+   .review-list-item {
+       width: 376px;
+   }
+}
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -0,0 +1,61 @@
+@import url('./header.css');
+@import url('./hero.css');
+@import url('./about-us.css');  
+@import url('./our-yachts.css');
+@import url('./advantages.css');
+@import url('./rent-a-yacht.css');
+@import url('./reviews.css');
+@import url('./footer.css');
+
+
+
+
+body {
+    font-family: 'Inter', sans-serif;
+    color: #fbfbfb;
+    background-color: #0e1823;
+  }
+
+  a {
+    color: currentColor;
+    text-decoration: none;
+  }
+
+  ul,
+  ol {
+    list-style-type: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+
+
+  button {
+    cursor: pointer;
+  }
+
+
diff --git a/src/images/ihor-pic.jpg b/src/images/ihor-pic.jpg
diff --git a/src/images/john-wax.jpg b/src/images/john-wax.jpg
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/symbol-defs.svg b/src/images/symbol-defs.svg
diff --git a/src/images/victoria-pic.jpg b/src/images/victoria-pic.jpg
diff --git a/src/images/yacht-image.jpg b/src/images/yacht-image.jpg
diff --git a/src/images/yacht-img.jpg b/src/images/yacht-img.jpg