Front End lab 5

INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css

@@ -156,7 +156,8 @@ a {
   font-size: 2.4rem;
 }
 
-@media (min-width: 820px) {
+@media only screen and (min-width: 820px) {
+  /* Header */
   .header {
     position: relative;
   }
@@ -166,11 +167,15 @@ a {
     left: 5%;
     top: 33%;
     transform: translateY(-50%);
-    width: 15%;
+    width: 25%;
     opacity: 0.3;
     z-index: 0;
   }
 
+  .header-title {
+    font-size: 6rem;
+  }
+
   .header-nav {
     position: relative;
     z-index: 1;
@@ -187,6 +192,112 @@ a {
     gap: 4rem;
     width: 100%;
   }
+
+  /* Recipe cards */
+  .recipe {
+    position: relative;
+  }
+
+  .recipe-image {
+    display: block;
+    width: 30%;
+    border-radius: 50%;
+    margin: 0;
+    float: left;
+  }
+
+  .recipe-title {
+    font-size: 4.8rem;
+  }
+
+  .recipe-desc {
+    display: inline-block;
+    width: 65%;
+    margin-left: 1.5rem;
+    margin-bottom: 1.5rem;
+    padding: 0;
+  }
+
+  /* About Sandy */
+  .about-logo {
+    display: inline;
+    float: left;
+    margin-top: 2rem;
+    margin-right: 4rem;
+    margin-bottom: 2rem;
+  }
+
+  .about-text {
+    display: inline;
+    vertical-align: top;
+    font-size: 1.8rem;
+  }
+
+  /* Footer needs no changes */
 }
 
-@media (min-width: 1200px) {}
+@media only screen and (min-width: 1200px) {
+  /* Header */
+  .header-logo {
+    width: 10%;
+  }
+
+  /* Recipe cards */
+  .recipes {
+    display: flex;
+    gap: 2rem;
+  }
+
+  .recipe-image {
+    width: 100%;
+    margin: auto;
+  }
+
+  .recipe-title {
+    font-size: 8rem;
+    margin: 0;
+    line-height: normal;
+  }
+
+  .recipe-by {
+    font-size: 2rem;
+  }
+
+  .recipe-date {
+    font-size: 2rem;
+  }
+  .recipe-desc {
+    width: 95%;
+    font-size: 2rem;
+  }
+
+  /* About Sandy */
+  .about-title {
+    font-size: 8rem;
+  }
+
+  .about-logo {
+    width: 300px;
+  }
+
+  .about-text {
+    font-size: 2.2rem;
+  }
+
+  /* Footer */
+  .footer {
+    margin-top: 0.2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3.6rem 2rem;
+  }
+
+  .footer p {
+    margin: 0;
+  }
+
+  .footer-name {
+    float: none;
+  }
+}