completing the hero section

rameskum · rameskum · commit 8a307d18377f · 2022-03-01T00:14:00.000+05:30
- adding font
- and customers
diff --git a/practice/07 - Omnifood-Desktop/css/style.css b/practice/07 - Omnifood-Desktop/css/style.css
@@ -14,10 +14,8 @@
     -- 02 COLORS
 
         - Primary: #e67e22
-
-        - Tints:
-            #fdf2e9
-        - Shades:
+        - Tints: #fdf2e9
+        - Shades: #cf711f
         - Accents:
         - Greys:
             #555
@@ -46,7 +44,7 @@ html {
 }
 
 body {
-    font-family: sans-serif;
+    font-family: 'Rubik', sans-serif;
     line-height: 1;
     font-weight: 400;
     color: #555;
@@ -88,6 +86,7 @@ body {
     color: #fff;
     text-decoration: none;
     font-size: 2rem;
+    font-weight: 600;
     padding: 1.6rem 3.2rem;
     border-radius: 9px;
 
@@ -116,7 +115,7 @@ body {
     background-color: #fdf2e9;
     /*border: 3px solid #fff;*/
 
-/*    Trick to add border inside */
+    /*    Trick to add border inside */
     box-shadow: inset 0 0 0 3px #fff;
 }
 
@@ -127,4 +126,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 {
+    height: 4.8rem;
+    width: 4.8rem;
+    border-radius: 50%;
+    margin-right: -1.6rem;
+    border: 3px solid #fdf2e9;
+}
+
+.delivered-imgs img:last-child {
+    margin: 0;
+}
+
+.delivered-meals p span {
+    color: #cf711f;
+    font-weight: 700;
+}
+
+.delivered-text {
+    font-size: 1.8rem;
+    font-weight: 600;
 }
diff --git a/practice/07 - Omnifood-Desktop/index.html b/practice/07 - Omnifood-Desktop/index.html
@@ -6,6 +6,10 @@
 	      name="viewport">
 	<meta content="ie=edge" http-equiv="X-UA-Compatible">
 	<title>Omnifood</title>
+	<link href="https://fonts.googleapis.com" rel="preconnect">
+	<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
+	<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,600&display=swap"
+	      rel="stylesheet">
 	<link href="css/style.css" rel="stylesheet">
 </head>
 <body>
@@ -19,9 +23,21 @@ <h1 class="heading-primary">A healthy meal delivered to your door, every single
 			</p>
 			<a class="btn btn--full margin-right-sm" href="#">Start Eating Well</a>
 			<a class="btn btn--outline" href="#">Learn More &darr;</a>
+			<div class="delivered-meals">
+				<div class="delivered-imgs">
+					<img alt="customer1" src="img/customers/customer-1.jpg">
+					<img alt="customer2" src="img/customers/customer-2.jpg">
+					<img alt="customer3" src="img/customers/customer-3.jpg">
+					<img alt="customer4" src="img/customers/customer-4.jpg">
+					<img alt="customer5" src="img/customers/customer-5.jpg">
+					<img alt="customer6" src="img/customers/customer-6.jpg">
+				</div>
+				<p class="delivered-text"><span>250,000+</span> meals delivered last year!</p>
+			</div>
 		</div>
 		<div class="hero-img-box">
-			<img alt="Woman enjoying food, meask in storage container, and food bowls on a table" src="img/hero.png" class="hero-img">
+			<img alt="Woman enjoying food, meask in storage container, and food bowls on a table" class="hero-img"
+			     src="img/hero.png">
 		</div>
 	</div>
 </section>
