ch. 96: Building a Hero Section - Part 2

Author: FrankGecko

starter/06-Components/05-hero.html

@@ -30,21 +30,37 @@
         }
 
         header {
-            background-color: orangered;
             height: 100vh;
+            position: relative;
+            background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url(hero.jpg);
+            background-size: cover;
+            color: white;
         }
 
         nav {
             font-size: 20px;
             font-weight: 700;
             display: flex;
             justify-content: space-between;
-            background-color: green;
+            padding-top: 32px;
+        }
+
+        .header-container {
+            width: 1200px;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .header-container-inner {
+            width: 50%;
         }
 
         h1 {
             font-size: 52px;
             margin-bottom: 32px;
+            line-height: 1.05;
         }
 
         p {
@@ -83,11 +99,13 @@
             <div>LOGO</div>
             <div>NAVIGATION</div>
         </nav>
-        <div class="container">
-            <h1>A healthy meal delivered to your door, every single day</h1>
-            <p>The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your
-                personal teastes and nutritional needs.</p>
-            <a href="#" class="btn">Start eating well</a>
+        <div class="header-container">
+            <div class="header-container-inner">
+                <h1>A healthy meal delivered to your door, every single day</h1>
+                <p>The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your
+                    personal teastes and nutritional needs.</p>
+                <a href="#" class="btn">Start eating well</a>
+            </div>
         </div>
     </header>
     <section>