omnifood hero section

rameskum · rameskum · commit 658578c22951 · 2022-02-28T23:50:34.000+05:30
- responsive text
diff --git a/practice/07 - Omnifood-Desktop/css/style.css b/practice/07 - Omnifood-Desktop/css/style.css
@@ -0,0 +1,130 @@
+/*
+    -- 01 TYPOGRAPHY
+
+        - FONT SIZE SYSTEM (px)
+        10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+
+        - Font Weight:
+        Default: 400
+
+        - Line Heights:
+        Defaults: 1
+
+
+    -- 02 COLORS
+
+        - Primary: #e67e22
+
+        - Tints:
+            #fdf2e9
+        - Shades:
+        - Accents:
+        - Greys:
+            #555
+            #333
+
+    -- 05 SHADOWS
+
+    -- 06 BORDER RADIUS
+
+    -- 07 WHITESPACE
+
+        - SPACING SYSTEM (px)
+        2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+ */
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+body {
+    font-family: sans-serif;
+    line-height: 1;
+    font-weight: 400;
+    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;
+    gap: 9.6rem;
+    align-items: center;
+}
+
+.heading-primary {
+    font-size: 5.2rem;
+    line-height: 1.05;
+    color: #333;
+    font-weight: 700;
+    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;
+
+    color: #fff;
+    text-decoration: none;
+    font-size: 2rem;
+    padding: 1.6rem 3.2rem;
+    border-radius: 9px;
+
+    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 0 3px #fff;
+}
+
+
+.hero-img {
+    width: 100%;
+}
+
+.margin-right-sm {
+    margin-right: 1.6rem !important;
+}
diff --git a/practice/07 - Omnifood-Desktop/index.html b/practice/07 - Omnifood-Desktop/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+	      name="viewport">
+	<meta content="ie=edge" http-equiv="X-UA-Compatible">
+	<title>Omnifood</title>
+	<link href="css/style.css" rel="stylesheet">
+</head>
+<body>
+<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 class="btn btn--full margin-right-sm" href="#">Start Eating Well</a>
+			<a class="btn btn--outline" href="#">Learn More &darr;</a>
+		</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">
+		</div>
+	</div>
+</section>
+</body>
+</html>
