Add Hero section part1.

quechau · quechau · commit 934a0a62c26f · 2023-10-31T15:23:05.000+07:00
diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css
@@ -52,15 +52,15 @@ body {
   color: #555;
 }
 
-.test {
-  background-color: red;
-  padding: 100px;
-  /* width: 1000px; */
-  max-width: 1000px;
-
-  max-width: 50rem;
-  padding: 4rem;
-  font-size: 2rem;
-  color: #fff;
-  /* 1 rem = 16px -> 50rem = 800px */
+.hero {
+  /* width: 1300px; */
+  max-width: 130rem;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background-color: blueviolet;
+}
+
+.hero-img {
+  width: 100%;
 }
diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html
@@ -9,7 +9,29 @@
     <title>Omnifood</title>
   </head>
   <body>
-    <h1>A healthy meal delivered to your door, every single day</h1>
-    <div class="test">TEST</div>
+    <section class="section-hero">
+      <div class="hero">
+        <div class="hero-text-box">
+          <h1 class="heading-primary">
+            A healthy meal delivered to your door, every single day
+          </h1>
+          <p class="hero-description">
+            The smart 365-days-per-year food subscription that will make you eat
+            healthy again. Tailored to your personal tastes and nutritional
+            needs. We have delivered 250,000+ meals last year!
+          </p>
+
+          <a href="#" class="btn">Start eating well</a>
+          <a href="#" class="btn">Learn more &darr;</a>
+        </div>
+        <div class="hero-img-box">
+          <img
+            src="img/hero.png"
+            alt="Woman enjoying food, meals in storage container, and food bowls on a table."
+            class="hero-img"
+          />
+        </div>
+      </div>
+    </section>
   </body>
 </html>
