hero section

Author: haivn-vib

…r/07-Omnifood-Desktop/content/content.md starter/07-Omnifood-Desktop/content.mdstarter/07-Omnifood-Desktop/content/content.md renamed to starter/07-Omnifood-Desktop/content.md starter/07-Omnifood-Desktop/content/content.md renamed to starter/07-Omnifood-Desktop/content.md

@@ -0,0 +1,159 @@
+/*
+--- 01 TYPOGRAPHY SYSTEM
+
+- Font Size (px)
+10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+
+- Font Weight
+
+- Line heights
+Default: 1
+
+--- 02 COLORS
+
+- Primary: #e67e22
+- Tints:
+- Shades: #cf711f
+- Accents:
+- Greys:
+#555
+#333
+
+--- 05 SHADOWS
+
+--- 06 BORDER RADIUS
+
+--- 07 SPACING SYSTEM (px)
+
+- 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+*/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-family: 'Rubik', sans-serif;
+  font-weight: 400;
+  line-height: 1;
+
+  color: #555;
+}
+
+.section-hero {
+  background: #fdf2e9;
+  padding: 9.6rem 0;
+}
+
+.hero {
+  display: grid;
+  gap: 9.6rem;
+  max-width: 130rem;
+  margin: 0 auto;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.hero-text-box {
+}
+
+.hero-image-box {
+}
+
+.heading-primary {
+  font-size: 5.2rem;
+  font-weight: 700;
+  line-height: 1.05;
+  color: #333;
+  letter-spacing: -0.05rem;
+  margin-bottom: 3.2rem;
+}
+
+.hero-description {
+  font-size: 2rem;
+  line-height: 1.6;
+  margin-bottom: 4.8rem;
+}
+
+.hero-image {
+  width: 100%;
+  height: auto;
+}
+
+.btn:link,
+.btn:visited {
+  display: inline-block;
+  font-size: 2rem;
+  font-weight: 600;
+  padding: 1.6rem 3.2rem;
+  text-decoration: none;
+  border-radius: 0.8rem;
+
+  transition: background 0.3s;
+}
+
+.btn---full:link,
+.btn---full:visited {
+  background: #e67e22;
+  color: #fff;
+}
+
+.btn---full:hover,
+.btn---full:active {
+  background: #cf711f;
+}
+
+.btn---outline:link,
+.btn---outline:visited {
+  background: #fff;
+  color: #555;
+}
+
+.btn---outline:hover,
+.btn---outline:active {
+  background: #fdf2e9;
+  color: #555;
+  box-shadow: inset 0 0 0 3px #fff;
+}
+
+.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 {
+  width: 4.8rem;
+  height: 4.8rem;
+  border-radius: 50%;
+
+  border: 3px solid #fdf2e9;
+}
+
+.delivered-imgs img:not(:first-child) {
+  margin-left: -1.8rem;
+}
+
+.delivered-text {
+  font-size: 1.8rem;
+  font-weight: 600;
+}
+
+.delivered-text span {
+  color: #cf711f;
+}