Merge branch 'main' into our-yachts-namliuk

AnnaSamtash · Dec 22, 2023 · fd27358 · fd27358
2 parents 9865af5 + 2132945
commit fd27358
Show file tree

Hide file tree

Showing 27 changed files with 774 additions and 21 deletions.
diff --git a/src/css/base.css b/src/css/base.css
@@ -35,12 +35,22 @@ button {
     margin-right: auto;
 }
 
-@media screen and (min-width: 320px) and (max-width: 375px) {
+@media screen and (min-width: 320px) and (max-width: 767px) {
     .container {
         max-width: 375px;
         padding-left: 20px;
         padding-right: 20px;
     }
+
+    .section {
+        padding-bottom: 80px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .section {
+        padding-bottom: 150px;
+    }
 }
 
 @media screen and (min-width: 768px) and (max-width: 1279px) {
@@ -51,18 +61,21 @@ button {
     }
 }
 
-@media screen and (min-width: 1280px) and (max-width: 1439px) {
+@media screen and (min-width: 1280px) {
     .container {
-        max-width: 1280px;
         padding-left: 50px;
         padding-right: 50px;
     }
 }
 
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+    .container {
+        max-width: 1280px;
+    }
+}
+
 @media screen and (min-width: 1440px) {
     .container {
         max-width: 1440px;
-        padding-left: 50px;
-        padding-right: 50px;
     }
 }
diff --git a/src/css/hero.css b/src/css/hero.css
@@ -0,0 +1,175 @@
+.background-picture {
+    background-image: linear-gradient(359deg, rgba(17, 19, 31, 0.80) 42.62%, rgba(17, 19, 31, 0.31) 84.12%, rgba(17, 19, 31, 0.00) 99.94%),
+        url(../img/hero/background-hero-mobil.jpg);
+    background-repeat: no-repeat;
+    background-position: 50% 0;
+    background-size: 375px 812px;
+}
+
+@media screen and (min-resolution: 192dpi),
+screen and (min-resolution: 2dppx),
+screen and (min-device-pixel-ratio: 2) {
+    .background-picture {
+        background-image: linear-gradient(359deg, rgba(17, 19, 31, 0.80) 42.62%, rgba(17, 19, 31, 0.31) 84.12%, rgba(17, 19, 31, 0.00) 99.94%),
+            url('../img/hero/background-hero-mobil@2.jpg');
+    }
+}
+
+.hero {
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 260px;
+    padding-bottom: 243px;
+    background-color: transparent;
+}
+
+/* .content-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    justify-content: center;
+    align-items: center;
+} */
+
+/* .hero-container {
+    display: flex;
+    flex-direction: column;
+    gap: 38px;
+} */
+
+.hero-title {
+    color: #FBFBFB;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 24px;
+}
+
+.capitalize {
+    text-transform: capitalize;
+}
+
+.hero-paragraph {
+    color: rgba(251, 251, 251, 0.70);
+    text-align: center;
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 1.17;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 38px;
+}
+
+.hero-btn {
+    width: 141px;
+    border-radius: 15px;
+    background-color: #1B414B;
+    border: none;
+    padding: 14px 32px;
+    color: #FBFBFB;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.29;
+    letter-spacing: -0.02em;
+    margin: 0 auto;
+    display: block;
+
+
+}
+
+/*-----TABLET-----*/
+@media screen and (min-width: 768px) {
+    .background-picture {
+        background-image: linear-gradient(359deg, rgba(17, 19, 31, 0.80) 42.62%, rgba(17, 19, 31, 0.31) 84.12%, rgba(17, 19, 31, 0.00) 99.94%),
+            url(../img/hero/background-hero-tablet.jpg);
+        background-repeat: no-repeat;
+        background-position: 50% 0;
+        background-size: 768px 962px;
+    }
+
+    @media screen and (min-resolution: 192dpi),
+    screen and (min-resolution: 2dppx),
+    screen and (min-device-pixel-ratio: 2) {
+        .background-picture {
+            background-image: linear-gradient(359deg, rgba(17, 19, 31, 0.80) 42.62%, rgba(17, 19, 31, 0.31) 84.12%, rgba(17, 19, 31, 0.00) 99.94%),
+                url(../img/hero/background-hero-tablet@2.jpg);
+        }
+    }
+
+    .hero {
+        padding-top: 280px;
+        padding-bottom: 215px;
+    }
+
+    /* .hero-container {
+        gap: 48px;
+    } */
+
+    .hero-title {
+        font-size: 70px;
+    }
+
+    .hero-paragraph {
+        font-size: 16px;
+        line-height: 1.4;
+        max-width: 597px;
+    }
+
+    .hero-btn {
+        padding: 16px 40px;
+        /* color: #FBFBFB; */
+        font-size: 18px;
+        line-height: 1.1;
+        width: 179px;
+    }
+}
+
+/*-----DESKTOP1280-----*/
+@media screen and (min-width: 1280px) {
+    .background-picture {
+        background-image: linear-gradient(359deg, rgba(17, 19, 31, 0.80) 42.62%, rgba(17, 19, 31, 0.31) 84.12%, rgba(17, 19, 31, 0.00) 99.94%),
+            url(../img/hero/background-hero-desktop.jpg);
+        background-repeat: no-repeat;
+        background-position: 50% 0;
+        background-size: 1280px 800px;
+    }
+
+    @media screen and (min-resolution: 192dpi),
+    screen and (min-resolution: 2dppx),
+    screen and (min-device-pixel-ratio: 2) {
+        .background-picture {
+            background-image: linear-gradient(359deg, rgba(17, 19, 31, 0.80) 42.62%, rgba(17, 19, 31, 0.31) 84.12%, rgba(17, 19, 31, 0.00) 99.94%),
+                url('../img/hero/background-hero-desktop@2.jpg');
+        }
+    }
+
+    .hero {
+        padding-top: 235px;
+        padding-bottom: 180px;
+    }
+
+    .hero-title {
+        font-size: 80px;
+    }
+
+    .hero-container {
+        padding-left: 140px;
+        padding-right: 140px;
+    }
+
+}
+
+/*-----DESKTOP1440-----*/
+@media screen and (min-width: 1440px) {
+
+    .hero-container {
+        padding-left: 220px;
+        padding-right: 220px;
+    }
+
+}