new file: INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Desktop Version - Screenshot.png

new file: INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Mobile Version - Screenshot.png new file: INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Tablet Version - Screenshot.png new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png new file: INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png new file: INFO-1252 (Front End Dev)/Labs/Lab-5/index.html new file: INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt new file: INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css
2025-11-02 12:30:09 -05:00
parent 4bdef9e16a
commit 9e58bb20db
11 changed files with 325 additions and 0 deletions
--- a/Dev)/Labs/Lab-5/Lab
+++ b/Dev)/Labs/Lab-5/Lab
--- a/Dev)/Labs/Lab-5/Lab
+++ b/Dev)/Labs/Lab-5/Lab
--- a/Dev)/Labs/Lab-5/Lab
+++ b/Dev)/Labs/Lab-5/Lab
--- a/Dev)/Labs/Lab-5/images/dinner.jpg
+++ b/Dev)/Labs/Lab-5/images/dinner.jpg
--- a/Dev)/Labs/Lab-5/images/dinnerparty.jpg
+++ b/Dev)/Labs/Lab-5/images/dinnerparty.jpg
--- a/Dev)/Labs/Lab-5/images/nachos.jpg
+++ b/Dev)/Labs/Lab-5/images/nachos.jpg
--- a/Dev)/Labs/Lab-5/images/smileyface.png
+++ b/Dev)/Labs/Lab-5/images/smileyface.png
--- a/Dev)/Labs/Lab-5/images/squares_bg.png
+++ b/Dev)/Labs/Lab-5/images/squares_bg.png
--- a/Dev)/Labs/Lab-5/index.html
+++ b/Dev)/Labs/Lab-5/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Sandy's Cooking Blog</title>
+  <link rel="stylesheet" href="styles/main.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:wght@100;400;500;700&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="main.css" />
+</head>
+
+<body>
+  <!-- Header -->
+  <header class="header">
+    <img class="header-logo" src="images/smileyface.png" />
+    <h1 class="header-title">Sandy's Cooking Blog</h1>
+
+    <nav class="header-nav">
+      <ul class="header-nav-list">
+        <li class="header-nav-list-item"><a href="#">Home</a></li>
+        <li class="header-nav-list-item"><a href="#">Categories</a></li>
+        <li class="header-nav-list-item"><a href="#">About Sandy</a></li>
+        <li class="header-nav-list-item"><a href="#">Recipe Index</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <!-- Main Page-->
+  <main>
+    <!-- Recipes -->
+    <section class="recipes">
+      <article class="recipe">
+        <h2 class="recipe-title">Dinner Party Ideas</h2>
+        <div class="recipe-by">By: <strong>John</strong></div>
+        <div class="recipe-date">Jan 11, 2022</div>
+        <img class="recipe-image" src="images/dinnerparty.jpg" alt="dinner party food" />
+        <p class="recipe-desc">
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
+          mollis, nulla non elementum tincidunt, felis ligula sodales lectus,
+          sit amet dignissim quam massa sit amet lorem. Aenean lorem risus,
+          tempus nec, gravida eu.
+        </p>
+      </article>
+
+      <article class="recipe">
+        <h2 class="recipe-title">Weeknight Meals</h2>
+        <div class="recipe-by">By: <strong>Mary</strong></div>
+        <div class="recipe-date">Jan 07, 2022</div>
+        <img class="recipe-image" src="images/dinner.jpg" alt="nice dinner" />
+        <p class="recipe-desc">
+          Donec cursus faucibus turpis. Quisque auctor est at magna. In
+          sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus
+          elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer
+          non, leo. Phasellus suscipit felis non est.
+        </p>
+      </article>
+
+      <article class="recipe">
+        <h2 class="recipe-title">Superbowl Snacks</h2>
+        <div class="recipe-by">By: <strong>Sandy</strong></div>
+        <div class="recipe-date">Jan 06, 2022</div>
+        <img class="recipe-image" src="images/nachos.jpg" alt="plate of nachos" />
+        <p class="recipe-desc">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada
+          fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet
+          adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus
+          quis libero. Vivamus quam.
+        </p>
+      </article>
+    </section>
+
+    <!-- About -->
+    <section class="about">
+      <h2 class="about-title">About Sandy</h2>
+      <img class="about-logo" src="images/smileyface.png" />
+      <p class="about-text">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
+        gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent
+        taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+        himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas
+        elementum, augue at vulputate ornare, ipsum enim lacinia orci, id
+        elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac
+        habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis
+        condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus
+        nec efficitur sagittis. Aliquam sed nunc ligula.
+      </p>
+      <p class="about-text">
+        Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed
+        interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit
+        amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet
+        sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est.
+        Maecenas quis hendrerit dui, tincidunt maximus velit.
+      </p>
+    </section>
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <p>Copyright <strong>&copy;</strong> 2025.</p>
+    <p>Developed by <strong class="footer-name">Levi McLean</strong>.</p>
+  </footer>
+</body>
+
+</html>
--- a/Dev)/Labs/Lab-5/notes.txt
+++ b/Dev)/Labs/Lab-5/notes.txt
@@ -0,0 +1,22 @@
+  This project has all the css code in one giant file and there are 
+  pros and cons of doing this.
+
+  pros: 
+    slightly faster webpage load times and less network traffic.
+  cons: 
+    you have one big giant css file which can be hard to maintain if the
+    project is just a little bit larger than this.
+  
+  In the industry, we separate the css codes into multiple files. 
+  The css code can easily be thousands of lines in a small real-world projects
+  and we have no choice but to separate the codes. 
+  By doing this we get the benefit of maintainability.
+
+  When the code is actually sent to the clients/users there are tools
+  to combine the css(and JavaScript) code into less css file. 
+  By doing this we get the benefit of less network traffic and slightly 
+  faster load times.
+
+  Do not worry about it for now if this does not make sense.
+  Try different approaches and see how you like it.
+  You will learn/experience more about this throughout the journey of IWD.
--- a/Dev)/Labs/Lab-5/styles/main.css
+++ b/Dev)/Labs/Lab-5/styles/main.css
@@ -0,0 +1,192 @@
+/* global settings */
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 62.5%;
+  line-height: 1.6;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  background: url(../images/squares_bg.png);
+  color: #686868;
+}
+
+li {
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* Header */
+.header-logo {
+  display: block;
+  margin: 2rem auto;
+  opacity: 30%;
+  width: 50%;
+}
+
+.header-title {
+  font-family: "Dancing script";
+  font-size: 4.2rem;
+  text-align: center;
+  color: teal;
+}
+
+.header-nav {
+  background-color: #fff;
+  text-align: center;
+  border-top: 5px solid teal;
+  border-bottom: 5px solid teal;
+  padding: 0.4rem 0;
+  margin-top: 2.4rem;
+}
+
+.header-nav-list-item {
+  margin: 0.8rem 0;
+}
+
+.header-nav-list-item a:link,
+.header-nav-list-item a:visited {
+  font-size: 2.4rem;
+  color: #686868;
+}
+
+.header-nav-list-item a:hover,
+.header-nav-list-item a:active {
+  color: teal;
+  font-weight: 600;
+}
+
+/* Main */
+.recipes {
+  margin-top: 2.4rem;
+}
+
+.recipe {
+  margin: 2rem 1rem;
+  border: 1px solid grey;
+  background-color: white;
+  border-radius: 20px;
+  padding: 2.4rem 1.2rem;
+}
+
+.recipe:hover {
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
+  transform: translateY(-10px);
+  /* we will learn this later. Don't worry about this line*/
+}
+
+.recipe-title {
+  font-family: "Dancing script";
+  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+  font-size: 3.6rem;
+  color: teal;
+  margin-bottom: 2.4rem;
+}
+
+.recipe-by,
+.recipe-by strong,
+.recipe-date {
+  text-align: right;
+  font-size: 1.6rem;
+}
+
+.recipe-image {
+  width: 80%;
+  border-radius: 50%;
+  display: block;
+  margin: 1rem auto;
+}
+
+.recipe-desc {
+  font-size: 1.8rem;
+  margin-top: 2.4rem;
+  padding: 0 1.2rem;
+}
+
+/* About */
+.about {
+  padding: 2.4rem;
+  background-color: rgb(82, 82, 82);
+  opacity: 70%;
+}
+
+.about-title {
+  font-family: "Dancing script";
+  font-size: 4.8rem;
+  color: #fff;
+  margin-top: 2rem;
+  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75);
+}
+
+.about-text {
+  /* use white colour + opacity or grey font color to achieve this result*/
+  color: #fff;
+  opacity: 0.75;
+  font-size: 1.8rem;
+  margin: 2rem 0;
+  text-shadow: 1px 1px 0 black;
+}
+
+.about-logo {
+  display: none;
+}
+
+/* Footer */
+.footer {
+  background-color: teal;
+  color: rgb(207, 207, 207);
+  text-align: center;
+  padding: 3.6rem 0;
+  font-size: 2.4rem;
+}
+
+.footer-name {
+  color: #fff;
+  font-size: 2.4rem;
+}
+
+@media (min-width: 820px) {
+  .header {
+    position: relative;
+  }
+
+  .header-logo {
+    position: absolute;
+    left: 5%;
+    top: 33%;
+    transform: translateY(-50%);
+    width: 15%;
+    opacity: 0.3;
+    z-index: 0;
+  }
+
+  .header-nav {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .header-nav-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4rem;
+    width: 100%;
+  }
+}
+
+@media (min-width: 1200px) {}