desktop version completed

Author: Nadix92

starter/07-Omnifood-Desktop/content.md

@@ -119,10 +119,12 @@ Create account
 Sign in
 iOS app
 Android app
+
 About Omnifood
 For Business
 Cooking partners
 Careers
+
 Recipe directory
 Help center
 Privacy & terms

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

@@ -61,6 +61,7 @@ html {
   /* 10px / 16px = 0.625 = 62.5% */
   /* Percenteage of user's browser font-size settings */
   font-size: 62.5%;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -87,6 +88,10 @@ body {
   padding: 0 3.2rem;
 }
 
+.grid:not(:last-child) {
+  margin-bottom: 9.6rem;
+}
+
 .grid--2-cols {
   grid-template-columns: repeat(2, 1fr);
 }
@@ -99,6 +104,10 @@ body {
   grid-template-columns: repeat(4, 1fr);
 }
 
+.grid--5-cols {
+  grid-template-columns: repeat(5, 1fr);
+}
+
 .grid--center-v {
   align-items: center;
 }
@@ -139,6 +148,7 @@ body {
   letter-spacing: 0.75px;
 }
 
+.btn,
 .btn:link,
 .btn:visited {
   display: inline-block;
@@ -148,7 +158,12 @@ body {
   padding: 1.6rem 3.2rem;
   border-radius: 9px;
 
-  transition: background-color 0.3s;
+  /* Only for .btn it self */
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+
+  transition: all 0.3s;
 }
 
 .btn--full:link,
@@ -176,6 +191,74 @@ body {
   box-shadow: inset 0 0 0 3px #fff;
 }
 
+.btn--form {
+  align-self: end;
+  padding: 1.2rem;
+
+  background-color: #45260a;
+  color: #fdf2e9;
+}
+
+.btn--form:hover {
+  background-color: #fff;
+  color: #555;
+}
+
+.link:link,
+.link:visited {
+  display: inline-block;
+  text-decoration: none;
+  color: #e67e22;
+  border-bottom: 1px solid currentColor;
+  padding-bottom: 2px;
+  transition: all 0.3s;
+}
+
+.link:hover,
+.link:active {
+  color: #cf711f;
+  border-bottom: 1px solid transparent;
+}
+
+.list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.list-item {
+  font-size: 1.8rem;
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.list-icon {
+  width: 3rem;
+  height: 3rem;
+  color: #e67e22;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5);
+}
+
+/* Helpers */
+
 .margin-right-sm {
   margin-right: 1.6rem !important;
 }
+
+.margin-bottom-md {
+  margin-bottom: 4.8rem !important;
+}
+
+.center-text {
+  text-align: center;
+}
+
+strong {
+  font-weight: 500;
+}