Merge pull request #1 from AnnaSamtash/hero

markup & styles
AnnaSamtash · Dec 22, 2023 · b939ec5 · b939ec5
2 parents 35808f1 + 5b44afe
commit b939ec5
Show file tree

Hide file tree

Showing 2 changed files with 191 additions and 0 deletions.
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;
+    }
+
+}
diff --git a/src/partials/hero.html b/src/partials/hero.html
@@ -0,0 +1,16 @@
+<section class="hero">
+  <div class="container hero-container">
+    <!-- <div class="content-container"> -->
+    <h1 class="hero-title">
+      Explore the <span class="capitalize">hight seas</span> with
+      <span class="capitalize">our luxury yacht rentals</span>
+    </h1>
+    <p class="hero-paragraph">
+      Experience the freedom and luxury of yachting on the open seas. Choose
+      from our top-of-the-line yachts and embark on an unforgettable journey
+      surrounded by breathtaking views and state-of-the-art amenities.
+    </p>
+    <!-- </div> -->
+    <a href="#rent-a-yacht" class="hero-btn">Yacht rental</a>
+  </div>
+</section>