markup & styles

contains:
- markup and basic styles for all devices.

misses: @meadia for containers, retina images for desktop1440 (were not fetched from main)

test:
- if div.background-picture properties are displayed properly (markup not fetched from main, but styles are commited)

src/css/hero.css

@@ -0,0 +1,162 @@
+.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 {
+    padding-top: 198px;
+    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-style: normal;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: -0.02em;
+}
+
+.capitalize {
+    text-transform: capitalize;
+}
+
+.hero-paragraph {
+    color: rgba(251, 251, 251, 0.70);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 1.17; 
+}
+
+.hero-btn {
+    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;
+}
+
+/*-----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: 204px;
+        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;
+    }
+}
+
+/*-----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: 155px;
+        padding-bottom: 180px;
+    }
+
+    .hero-title {
+        font-size: 80px;
+    }
+
+    .hero-container {
+        padding: 0 130px;
+    }
+
+}
+
+/*-----DESKTOP1440-----*/
+@media screen and (min-width: 1440px) {
+
+    .hero-container {
+        padding: 0 214px;
+    }
+
+}

src/partials/hero.html

@@ -0,0 +1,10 @@
+<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>