Hero section is complete

Author: shoaibansari5398

starter/07-Omnifood-Desktop/index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="style.css" />
     <title>Omnifood</title>
   </head>
@@ -23,6 +29,17 @@ <h1 class="heading-primary">
             >Start eating well</a
           >
           <a href="#" class="btn btn--outline">Learn more &darr;</a>
+          <div class="delivered-meals">
+            <div class="delivered-imgs">
+              <img src="./content/img/customers/customer-1.jpg" alt="Customer Image">
+              <img src="./content/img/customers/customer-2.jpg" alt="Customer Image">
+              <img src="./content/img/customers/customer-3.jpg" alt="Customer Image">
+              <img src="./content/img/customers/customer-4.jpg" alt="Customer Image">
+              <img src="./content/img/customers/customer-5.jpg" alt="Customer Image">
+              <img src="./content/img/customers/customer-6.jpg" alt="Customer Image">
+            </div>
+            <p class="delivered-text"><span>250000+</span> meals delivered last year</p>
+          </div>
         </div>
         <div class="hero-img-box">
           <img

starter/07-Omnifood-Desktop/style.css

@@ -9,7 +9,7 @@ html{
 }
 
 body {
-    font-family: "sans-serif";
+    font-family: "Rubik", sans-serif;
     line-height: 1;
     font-weight: 400;
     color: #555;
@@ -53,6 +53,7 @@ body {
     display: inline-block;
     text-decoration: none;
     font-size: 2rem;
+    font-weight: 600;
     padding: 1.6rem 3.2rem;
     border-radius: 9px;
     transition: background-color 0.3s;
@@ -85,4 +86,37 @@ body {
 
 .margin-right-sm{
     margin-right: 1.6rem !important;
+}
+
+.delivered-meals{
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    margin-top: 8rem;
+}
+
+.delivered-imgs{
+    display: flex;
+}
+
+.delivered-imgs img{
+    border-radius: 50%;
+    height: 4.8rem;
+    width: 4.8rem;
+    border: 3px solid #fdf2e9;
+    margin-right: -1.6rem;
+}
+
+.delivered-imgs img:last-child{
+    margin: 0;
+}
+
+.delivered-text{
+    font-size: 1.6rem;
+    font-weight:600;
+}
+
+.delivered-text span{
+    color: #cf711f;
+    font-weight: 700;
 }