better change

AnnaSamtash · Dec 27, 2023 · 87b2add · 87b2add
1 parent 013b312
commit 87b2add
Show file tree

Hide file tree

Showing 116 changed files with 127 additions and 104 deletions.
diff --git a/src/css/about-us.css b/src/css/about-us.css
@@ -1,6 +1,8 @@
 .about-us-section {
   margin-left: auto;
   margin-right: auto;
+  position: relative;
+  top: -59px;
 }
 
 .box-about-us {
@@ -69,6 +71,9 @@
 
 @media screen and (min-width: 768px) {
 
+  .about-us-section {
+    top: -67px;
+  }
 
   .about-us-wrapper {
     gap: 50px;
@@ -98,6 +103,9 @@
 
 @media screen and (min-width: 1280px) {
 
+  .about-us-section {
+    top: -35px;
+  }
 
   .about-us-wrapper {
     flex-direction: row;

diff --git a/src/css/hero.css b/src/css/hero.css
@@ -1,40 +1,40 @@
-.background-picture {
-  width: 100%;
-}
-
 /* linear-gradient(359deg,
   rgba(17, 19, 31, 0.8) 42.62%,
   rgba(17, 19, 31, 0.31) 84.12%,
   rgba(17, 19, 31, 0) 99.94%), */
 
-.background-picture {
-  background-image:
-    url(../img/hero/background-hero-mobil.jpg);
-  background-repeat: no-repeat;
-  background-position: 50% 0;
-  background-size: 100% 812px;
-}
-
-@media screen and (min-resolution: 192dpi),
-screen and (min-resolution: 2dppx),
-screen and (min-device-pixel-ratio: 2) {
-  .background-picture {
-    background-image:
-      url(../img/hero/background-hero-mobil@2.jpg);
-  }
-}
-
 
 .hero {
   margin-left: auto;
   margin-right: auto;
   padding-top: 260px;
-  padding-bottom: 243px;
+  padding-bottom: 302px;
   padding-left: 20px;
   padding-right: 20px;
   background-color: transparent;
+  background-image: linear-gradient(359deg,
+
+      rgba(17, 19, 31, 0.31) 14.12%,
+      rgba(17, 19, 31, 0) 99.94%),
+    url(../img/hero/background-hero-mobil.webp);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 
+@media screen and (min-resolution: 192dpi),
+screen and (min-resolution: 2dppx),
+screen and (min-device-pixel-ratio: 2) {
+  .hero {
+    background-image: linear-gradient(359deg,
+
+        rgba(17, 19, 31, 0.31) 14.12%,
+        rgba(17, 19, 31, 0) 99.94%),
+      url(../img/hero/background-hero-mobil@2.webp);
+  }
+}
+
+
 .hero-title {
   color: #fbfbfb;
   text-align: center;
@@ -92,27 +92,29 @@ screen and (min-device-pixel-ratio: 2) {
 
 @media screen and (min-width: 768px) {
 
-  .background-picture {
-    background-image:
-      url(../img/hero/background-hero-tablet.jpg);
-    background-size: 100% 962px;
-  }
-
   @media screen and (min-resolution: 192dpi),
   screen and (min-resolution: 2dppx),
   screen and (min-device-pixel-ratio: 2) {
-    .background-picture {
-      background-image:
-        url(../img/hero/background-hero-tablet@2.jpg);
+    .hero {
+      background-image: linear-gradient(359deg,
+
+          rgba(17, 19, 31, 0.31) 14.12%,
+          rgba(17, 19, 31, 0) 99.94%),
+        url(../img/hero/background-hero-tablet@2.webp);
     }
   }
 
   .hero {
     padding-top: 280px;
-    padding-bottom: 215px;
+    padding-bottom: 282px;
     padding-left: 32px;
     padding-right: 32px;
-    margin-bottom: 24px;
+    /* margin-bottom: 24px; */
+    background-image: linear-gradient(359deg,
+
+        rgba(17, 19, 31, 0.31) 14.12%,
+        rgba(17, 19, 31, 0) 99.94%),
+      url(../img/hero/background-hero-tablet.webp);
   }
 
   .hero-title {
@@ -194,26 +196,31 @@ screen and (min-device-pixel-ratio: 2) {
 /*-----DESKTOP1280-----*/
 
 @media screen and (min-width: 1280px) {
-  .background-picture {
-    background-image:
-      url(../img/hero/background-hero-desktop.jpg);
-    background-size: 100% 800px;
-  }
+
 
   @media screen and (min-resolution: 192dpi),
   screen and (min-resolution: 2dppx),
   screen and (min-device-pixel-ratio: 2) {
-    .background-picture {
-      background-image:
-        url(../img/hero/background-hero-desktop@2.jpg);
+    .hero {
+      background-image: linear-gradient(359deg,
+
+          rgba(17, 19, 31, 0.31) 14.12%,
+          rgba(17, 19, 31, 0) 99.94%),
+        url(../img/hero/background-hero-desktop@2.webp);
     }
   }
 
   .hero {
     padding-top: 235px;
-    padding-bottom: 180px;
+    padding-bottom: 215px;
     padding-left: 50px;
     padding-right: 50px;
+    background-image: linear-gradient(359deg,
+
+        rgba(17, 19, 31, 0.31) 14.12%,
+        rgba(17, 19, 31, 0) 99.94%),
+      url(../img/hero/background-hero-desktop.webp);
+
   }
 
   .hero-title {
@@ -224,17 +231,24 @@ screen and (min-device-pixel-ratio: 2) {
 
 /*-----DESKTOP1440-----*/
 @media screen and (min-width: 1440px) {
-  .background-picture {
-    background-image:
-      url(../img/hero/background-hero-desktop1440.jpg);
+
+  .hero {
+    background-image: linear-gradient(359deg,
+
+        rgba(17, 19, 31, 0.31) 14.12%,
+        rgba(17, 19, 31, 0) 99.94%),
+      url(../img/hero/background-hero-desktop1440.webp);
   }
 
   @media screen and (min-resolution: 192dpi),
   screen and (min-resolution: 2dppx),
   screen and (min-device-pixel-ratio: 2) {
-    .background-picture {
-      background-image:
-        url(../img/hero/background-hero-desktop1440@2.jpg);
+    .hero {
+      background-image: linear-gradient(359deg,
+
+          rgba(17, 19, 31, 0.31) 14.12%,
+          rgba(17, 19, 31, 0) 99.94%),
+        url(../img/hero/background-hero-desktop1440@2.webp);
     }
   }
 }
diff --git a/src/img/about_us/about-us-desktop-1440.jpg b/src/img/about_us/about-us-desktop-1440.jpg
diff --git a/src/img/about_us/about-us-desktop-1440@2.jpg b/src/img/about_us/about-us-desktop-1440@2.jpg
diff --git a/src/img/about_us/about-us-desktop.jpg b/src/img/about_us/about-us-desktop.jpg
diff --git a/src/img/about_us/about-us-desktop.webp b/src/img/about_us/about-us-desktop.webp
diff --git a/src/img/about_us/about-us-desktop1440.jpg b/src/img/about_us/about-us-desktop1440.jpg
diff --git a/src/img/about_us/about-us-desktop1440.webp b/src/img/about_us/about-us-desktop1440.webp
diff --git a/src/img/about_us/about-us-desktop1440@2.jpg b/src/img/about_us/about-us-desktop1440@2.jpg
diff --git a/src/img/about_us/about-us-desktop1440@2.webp b/src/img/about_us/about-us-desktop1440@2.webp
diff --git a/src/img/about_us/about-us-desktop@2.jpg b/src/img/about_us/about-us-desktop@2.jpg
diff --git a/src/img/about_us/about-us-desktop@2.webp b/src/img/about_us/about-us-desktop@2.webp
diff --git a/src/img/about_us/about-us-mobil.jpg b/src/img/about_us/about-us-mobil.jpg
diff --git a/src/img/about_us/about-us-mobil.webp b/src/img/about_us/about-us-mobil.webp
diff --git a/src/img/about_us/about-us-mobil@2.jpg b/src/img/about_us/about-us-mobil@2.jpg
diff --git a/src/img/about_us/about-us-mobil@2.webp b/src/img/about_us/about-us-mobil@2.webp
diff --git a/src/img/about_us/about-us-tablet.jpg b/src/img/about_us/about-us-tablet.jpg
diff --git a/src/img/about_us/about-us-tablet.webp b/src/img/about_us/about-us-tablet.webp
diff --git a/src/img/about_us/about-us-tablet@2.jpg b/src/img/about_us/about-us-tablet@2.jpg
diff --git a/src/img/about_us/about-us-tablet@2.webp b/src/img/about_us/about-us-tablet@2.webp
diff --git a/src/img/advantages/advantages-desktop.jpg b/src/img/advantages/advantages-desktop.jpg
diff --git a/src/img/advantages/advantages-desktop.webp b/src/img/advantages/advantages-desktop.webp
diff --git a/src/img/advantages/advantages-desktop1440.jpg b/src/img/advantages/advantages-desktop1440.jpg
diff --git a/src/img/advantages/advantages-desktop1440.webp b/src/img/advantages/advantages-desktop1440.webp
diff --git a/src/img/advantages/advantages-desktop1440@2.jpg b/src/img/advantages/advantages-desktop1440@2.jpg
diff --git a/src/img/advantages/advantages-desktop1440@2.webp b/src/img/advantages/advantages-desktop1440@2.webp
diff --git a/src/img/advantages/advantages-desktop@2.jpg b/src/img/advantages/advantages-desktop@2.jpg
diff --git a/src/img/advantages/advantages-desktop@2.webp b/src/img/advantages/advantages-desktop@2.webp
diff --git a/src/img/advantages/advantages-mobil.jpg b/src/img/advantages/advantages-mobil.jpg
diff --git a/src/img/advantages/advantages-mobil.webp b/src/img/advantages/advantages-mobil.webp
diff --git a/src/img/advantages/advantages-mobil@2.jpg b/src/img/advantages/advantages-mobil@2.jpg
diff --git a/src/img/advantages/advantages-mobil@2.webp b/src/img/advantages/advantages-mobil@2.webp
diff --git a/src/img/advantages/advantages-tablet.jpg b/src/img/advantages/advantages-tablet.jpg
diff --git a/src/img/advantages/advantages-tablet.webp b/src/img/advantages/advantages-tablet.webp
diff --git a/src/img/advantages/advantages-tablet@2.jpg b/src/img/advantages/advantages-tablet@2.jpg
diff --git a/src/img/advantages/advantages-tablet@2.webp b/src/img/advantages/advantages-tablet@2.webp
diff --git a/src/img/hero/background-hero-desktop.jpg b/src/img/hero/background-hero-desktop.jpg
diff --git a/src/img/hero/background-hero-desktop.webp b/src/img/hero/background-hero-desktop.webp
diff --git a/src/img/hero/background-hero-desktop1440.jpg b/src/img/hero/background-hero-desktop1440.jpg
diff --git a/src/img/hero/background-hero-desktop1440.webp b/src/img/hero/background-hero-desktop1440.webp
diff --git a/src/img/hero/background-hero-desktop1440@2.jpg b/src/img/hero/background-hero-desktop1440@2.jpg
diff --git a/src/img/hero/background-hero-desktop1440@2.webp b/src/img/hero/background-hero-desktop1440@2.webp
diff --git a/src/img/hero/background-hero-desktop@2.jpg b/src/img/hero/background-hero-desktop@2.jpg
diff --git a/src/img/hero/background-hero-desktop@2.webp b/src/img/hero/background-hero-desktop@2.webp
diff --git a/src/img/hero/background-hero-mobil.jpg b/src/img/hero/background-hero-mobil.jpg
diff --git a/src/img/hero/background-hero-mobil.webp b/src/img/hero/background-hero-mobil.webp
diff --git a/src/img/hero/background-hero-mobil@2.jpg b/src/img/hero/background-hero-mobil@2.jpg
diff --git a/src/img/hero/background-hero-mobil@2.webp b/src/img/hero/background-hero-mobil@2.webp
diff --git a/src/img/hero/background-hero-tablet.jpg b/src/img/hero/background-hero-tablet.jpg
diff --git a/src/img/hero/background-hero-tablet.webp b/src/img/hero/background-hero-tablet.webp
diff --git a/src/img/hero/background-hero-tablet@2.jpg b/src/img/hero/background-hero-tablet@2.jpg
diff --git a/src/img/hero/background-hero-tablet@2.webp b/src/img/hero/background-hero-tablet@2.webp
diff --git a/src/img/our_yachts/our-yacht-2-desktop1440.jpg b/src/img/our_yachts/our-yacht-2-desktop1440.jpg
diff --git a/src/img/our_yachts/our-yacht-2-desktop1440.webp b/src/img/our_yachts/our-yacht-2-desktop1440.webp
diff --git a/src/img/our_yachts/our-yacht-2-desktop1440@2.jpg b/src/img/our_yachts/our-yacht-2-desktop1440@2.jpg
diff --git a/src/img/our_yachts/our-yacht-2-desktop1440@2.webp b/src/img/our_yachts/our-yacht-2-desktop1440@2.webp
diff --git a/src/img/our_yachts/our-yacht-3-desktop1440.jpg b/src/img/our_yachts/our-yacht-3-desktop1440.jpg
diff --git a/src/img/our_yachts/our-yacht-3-desktop1440.webp b/src/img/our_yachts/our-yacht-3-desktop1440.webp
diff --git a/src/img/our_yachts/our-yacht-3-desktop1440@2.jpg b/src/img/our_yachts/our-yacht-3-desktop1440@2.jpg
diff --git a/src/img/our_yachts/our-yacht-3-desktop1440@2.webp b/src/img/our_yachts/our-yacht-3-desktop1440@2.webp
diff --git a/src/img/our_yachts/our-yacht-desktop.jpg b/src/img/our_yachts/our-yacht-desktop.jpg
diff --git a/src/img/our_yachts/our-yacht-desktop.webp b/src/img/our_yachts/our-yacht-desktop.webp
diff --git a/src/img/our_yachts/our-yacht-desktop1440.jpg b/src/img/our_yachts/our-yacht-desktop1440.jpg
diff --git a/src/img/our_yachts/our-yacht-desktop1440.webp b/src/img/our_yachts/our-yacht-desktop1440.webp
diff --git a/src/img/our_yachts/our-yacht-desktop1440@2.jpg b/src/img/our_yachts/our-yacht-desktop1440@2.jpg
diff --git a/src/img/our_yachts/our-yacht-desktop1440@2.webp b/src/img/our_yachts/our-yacht-desktop1440@2.webp
diff --git a/src/img/our_yachts/our-yacht-desktop2.jpg b/src/img/our_yachts/our-yacht-desktop2.jpg
diff --git a/src/img/our_yachts/our-yacht-desktop2.webp b/src/img/our_yachts/our-yacht-desktop2.webp
diff --git a/src/img/our_yachts/our-yacht-desktop2@2.jpg b/src/img/our_yachts/our-yacht-desktop2@2.jpg
diff --git a/src/img/our_yachts/our-yacht-desktop2@2.webp b/src/img/our_yachts/our-yacht-desktop2@2.webp
diff --git a/src/img/our_yachts/our-yacht-desktop3.jpg b/src/img/our_yachts/our-yacht-desktop3.jpg
diff --git a/src/img/our_yachts/our-yacht-desktop3.webp b/src/img/our_yachts/our-yacht-desktop3.webp
diff --git a/src/img/our_yachts/our-yacht-desktop3@2.jpg b/src/img/our_yachts/our-yacht-desktop3@2.jpg
diff --git a/src/img/our_yachts/our-yacht-desktop3@2.webp b/src/img/our_yachts/our-yacht-desktop3@2.webp
diff --git a/src/img/our_yachts/our-yacht-desktop@2.jpg b/src/img/our_yachts/our-yacht-desktop@2.jpg
diff --git a/src/img/our_yachts/our-yacht-desktop@2.webp b/src/img/our_yachts/our-yacht-desktop@2.webp
diff --git a/src/img/our_yachts/our-yacht-tablet.jpg b/src/img/our_yachts/our-yacht-tablet.jpg
diff --git a/src/img/our_yachts/our-yacht-tablet.webp b/src/img/our_yachts/our-yacht-tablet.webp
diff --git a/src/img/our_yachts/our-yacht-tablet2.jpg b/src/img/our_yachts/our-yacht-tablet2.jpg
diff --git a/src/img/our_yachts/our-yacht-tablet2.webp b/src/img/our_yachts/our-yacht-tablet2.webp
diff --git a/src/img/our_yachts/our-yacht-tablet2@2.jpg b/src/img/our_yachts/our-yacht-tablet2@2.jpg
diff --git a/src/img/our_yachts/our-yacht-tablet2@2.webp b/src/img/our_yachts/our-yacht-tablet2@2.webp
diff --git a/src/img/our_yachts/our-yacht-tablet@2.jpg b/src/img/our_yachts/our-yacht-tablet@2.jpg
diff --git a/src/img/our_yachts/our-yacht-tablet@2.webp b/src/img/our_yachts/our-yacht-tablet@2.webp
diff --git a/src/img/our_yachts/our-yaht-mobil.jpg b/src/img/our_yachts/our-yaht-mobil.jpg
diff --git a/src/img/our_yachts/our-yaht-mobil.webp b/src/img/our_yachts/our-yaht-mobil.webp
diff --git a/src/img/our_yachts/our-yaht-mobil@2.jpg b/src/img/our_yachts/our-yaht-mobil@2.jpg
diff --git a/src/img/our_yachts/our-yaht-mobil@2.webp b/src/img/our_yachts/our-yaht-mobil@2.webp
diff --git a/src/img/rent_a_yacht/rent-desktop.jpg b/src/img/rent_a_yacht/rent-desktop.jpg
diff --git a/src/img/rent_a_yacht/rent-desktop.webp b/src/img/rent_a_yacht/rent-desktop.webp
diff --git a/src/img/rent_a_yacht/rent-desktop1440.jpg b/src/img/rent_a_yacht/rent-desktop1440.jpg
diff --git a/src/img/rent_a_yacht/rent-desktop1440.webp b/src/img/rent_a_yacht/rent-desktop1440.webp
diff --git a/src/img/rent_a_yacht/rent-desktop1440@2.jpg b/src/img/rent_a_yacht/rent-desktop1440@2.jpg
diff --git a/src/img/rent_a_yacht/rent-desktop1440@2.webp b/src/img/rent_a_yacht/rent-desktop1440@2.webp
diff --git a/src/img/rent_a_yacht/rent-desktop@2.jpg b/src/img/rent_a_yacht/rent-desktop@2.jpg
diff --git a/src/img/rent_a_yacht/rent-desktop@2.webp b/src/img/rent_a_yacht/rent-desktop@2.webp
diff --git a/src/img/rent_a_yacht/rent-mobil.jpg b/src/img/rent_a_yacht/rent-mobil.jpg
diff --git a/src/img/rent_a_yacht/rent-mobil.webp b/src/img/rent_a_yacht/rent-mobil.webp
diff --git a/src/img/rent_a_yacht/rent-mobil@2.jpg b/src/img/rent_a_yacht/rent-mobil@2.jpg
diff --git a/src/img/rent_a_yacht/rent-mobil@2.webp b/src/img/rent_a_yacht/rent-mobil@2.webp
diff --git a/src/img/rent_a_yacht/rent-tablet.jpg b/src/img/rent_a_yacht/rent-tablet.jpg
diff --git a/src/img/rent_a_yacht/rent-tablet.webp b/src/img/rent_a_yacht/rent-tablet.webp
diff --git a/src/img/rent_a_yacht/rent-tablet@2.jpg b/src/img/rent_a_yacht/rent-tablet@2.jpg
diff --git a/src/img/rent_a_yacht/rent-tablet@2.webp b/src/img/rent_a_yacht/rent-tablet@2.webp
diff --git a/src/img/reviews/ihor-trachuk.png b/src/img/reviews/ihor-trachuk.png
diff --git a/src/img/reviews/ihor-trachuk@2.png b/src/img/reviews/ihor-trachuk@2.png
diff --git a/src/img/reviews/john-wax.png b/src/img/reviews/john-wax.png
diff --git a/src/img/reviews/john-wax@2.png b/src/img/reviews/john-wax@2.png
diff --git a/src/img/reviews/victoria-romashenko.png b/src/img/reviews/victoria-romashenko.png
diff --git a/src/img/reviews/victoria-romashenko@2.png b/src/img/reviews/victoria-romashenko@2.png
diff --git a/src/index.html b/src/index.html
@@ -35,10 +35,8 @@
   <body>
     <load src="partials/header.html" />
     <main>
-      <div class="background-picture">
-        <load src="partials/hero.html" />
-        <load src="partials/about-us.html" />
-      </div>
+      <load src="partials/hero.html" />
+      <load src="partials/about-us.html" />
       <load src="partials/our-yachts.html" />
       <load src="partials/advantages.html" />
       <load src="partials/rent-a-yacht.html" />

diff --git a/src/partials/about-us.html b/src/partials/about-us.html
@@ -23,33 +23,33 @@ <h2 class="about-us-title">
         <picture class="about-us-picture">
           <source
             srcset="
-              ./img/about_us/about-us-desktop-1440.jpg   1x,
-              ./img/about_us/about-us-desktop-1440@2.jpg 2x
+              ../img/about_us/about-us-desktop1440.webp   1x,
+              ../img/about_us/about-us-desktop1440@2.webp 2x
             "
             media="(min-width: 1440px)"
           />
           <source
             srcset="
-              ./img/about_us/about-us-desktop.jpg   1x,
-              ./img/about_us/about-us-desktop@2.jpg 2x
+              ./img/about_us/about-us-desktop.webp   1x,
+              ./img/about_us/about-us-desktop@2.webp 2x
             "
             media="(min-width: 1280px)"
           />
           <source
             srcset="
-              ./img/about_us/about-us-tablet.jpg   1x,
-              ./img/about_us/about-us-tablet@2.jpg 2x
+              ./img/about_us/about-us-tablet.webp   1x,
+              ./img/about_us/about-us-tablet@2.webp 2x
             "
             media="(min-width: 768px)"
           />
           <source
             srcset="
-              ./img/about_us/about-us-mobil.jpg   1x,
-              ./img/about_us/about-us-mobil@2.jpg 2x
+              ./img/about_us/about-us-mobil.webp   1x,
+              ./img/about_us/about-us-mobil@2.webp 2x
             "
             media="(max-width: 767px)"
           />
-          <img src="./img/about_us/about-us-mobil.jpg" alt="Yacht image" />
+          <img src="./img/about_us/about-us-mobil.webp" alt="Yacht image" />
         </picture>
       </div>
     </div>

diff --git a/src/partials/advantages.html b/src/partials/advantages.html
@@ -35,36 +35,36 @@ <h3 class="advantages-number current">04</h3>
     <picture>
       <source
         srcset="
-          ./img/advantages/advantages-desktop1440.jpg   1x,
-          ./img/advantages/advantages-desktop1440@2.jpg 2x
+          ./img/advantages/advantages-desktop1440.webp   1x,
+          ./img/advantages/advantages-desktop1440@2.webp 2x
         "
         media="(min-width: 1440px)"
       />
       <source
         srcset="
-          ./img/advantages/advantages-desktop.jpg   1x,
-          ./img/advantages/advantages-desktop@2.jpg 2x
+          ./img/advantages/advantages-desktop.webp   1x,
+          ./img/advantages/advantages-desktop@2.webp 2x
         "
         media="(min-width: 1280px)"
       />
       <source
         srcset="
-          ./img/advantages/advantages-tablet.jpg   1x,
-          ./img/advantages/advantages-tablet@2.jpg 2x
+          ./img/advantages/advantages-tablet.webp   1x,
+          ./img/advantages/advantages-tablet@2.webp 2x
         "
         media="(min-width: 768px)"
       />
       <source
         srcset="
-          ./img/advantages/advantages-mobil.jpg   1x,
-          ./img/advantages/advantages-mobil@2.jpg 2x
+          ./img/advantages/advantages-mobil.webp   1x,
+          ./img/advantages/advantages-mobil@2.webp 2x
         "
         media="(max-width: 767px)"
       />
 
       <img
         class="advatages-image"
-        src="./img/advantages/advantages-mobil.jpg"
+        src="./img/advantages/advantages-mobil.webp"
         alt="Advantages picture"
       />
     </picture>