hero p2

Author: zJiaJun

starter/07-Omnifood-Desktop/css/style.css

@@ -14,17 +14,12 @@ Default: 1
 --- 02 Colors System
 
 - Primary: #e67e22
-
-- 比较暗的
-- Tints:
-
-- 比较亮的
+- Tints: #fdf2e9
 - Shades:
-
 - Accents:
-
 - Greys:
 #555
+#333
 
 
 --- 05 Shadows
@@ -55,13 +50,74 @@ body {
   color: #555;
 }
 
+.section-hero {
+  background-color: #fdf2e9;
+  padding: 9.6rem 0;
+}
+
 .hero {
   max-width: 130rem;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 9.6rem;
+}
+
+.heading-primary {
+  font-size: 5.2rem;
+  font-weight: 700;
+  line-height: 1.05;
+  color: #333;
+  letter-spacing: -0.5px;
+  margin-bottom: 3.2rem;
+}
+.hero-description {
+  font-size: 2rem;
+  line-height: 1.6;
+  margin-bottom: 4.8rem;
+}
+
+.btn:link,
+.btn:visited {
+  display: inline-block;
+  font-size: 2rem;
+  text-decoration: none;
+  padding: 1.6rem 3.2rem;
+  border-radius: 9px;
+  /* Put transition on original "state" */
+  transition: background-color 0.3s;
 }
 
+.btn--full:link,
+.btn--full:visited {
+  background-color: #e67e22;
+  color: #fff;
+}
+
+.btn--full:hover,
+.btn--full:active {
+  background-color: #cf711f;
+}
+
+.btn--outline:link,
+.btn--outline:visited {
+  background-color: #fff;
+  color: #555;
+}
+
+.btn--outline:hover,
+.btn--outline:active {
+  background-color: #fdf2e9;
+  /* border: 3px solid #fff; */
+
+  /* Trick to add border inside */
+  box-shadow: inset 0 0 3px #fff;
+}
 .hero-img {
   width: 100%;
 }
+
+.margin-right-sm {
+  margin-right: 1.6rem !important;
+}

starter/07-Omnifood-Desktop/index.html

@@ -19,8 +19,10 @@ <h1 class="heading-primary">
             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">Lear more &rarr;</a>
+          <a href="#" class="btn btn--full margin-right-sm"
+            >Start eating well</a
+          >
+          <a href="#" class="btn btn--outline">Lear more &rarr;</a>
         </div>
         <div class="hero-img-box">
           <img