Update classes

2025-10-15 22:12:43 -04:00
commit f69edaaad4
11 changed files with 294 additions and 0 deletions
--- a/4/images/dinner.jpg
+++ b/4/images/dinner.jpg
--- a/4/images/dinnerparty.jpg
+++ b/4/images/dinnerparty.jpg
--- a/4/images/nachos.jpg
+++ b/4/images/nachos.jpg
--- a/4/images/smileyface.png
+++ b/4/images/smileyface.png
--- a/4/images/squares_bg.png
+++ b/4/images/squares_bg.png
--- a/Dev)/Labs/Lab
+++ b/Dev)/Labs/Lab
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
+  <link rel="stylesheet" href="./styles/styles.css">
+  <title>Sandy's Cooking Blog</title>
+</head>
+
+<body>
+  <!-- Header -->
+  <header>
+    <img class="logo" src="images/smileyface.png" alt="smily face" />
+    <h1 class="main-heading">Sandy's Cooking Blog</h1>
+  </header>
+
+  <!-- Main Menu-->
+  <nav>
+    <ul>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Categories</a></li>
+      <li><a href="#">About Sandy</a></li>
+      <li><a href="#">Recipe Index</a></li>
+    </ul>
+  </nav>
+
+  <!-- Main Page-->
+  <main>
+    <!-- Recipes -->
+    <section>
+      <div class="recipe-card">
+        <h2>Dinner Party Ideas</h2>
+        <div class="author">By: <strong>John</strong></div>
+        <div class="publish-date">Jan 11, 2022</div>
+        <img src="images/dinnerparty.jpg" alt="Dinner party food" />
+        <p>
+          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>
+      </div>
+
+      <div class="recipe-card">
+        <h2>Weeknight Meals</h2>
+        <div class="author">By: <strong>Mary</strong></div>
+        <div class="publish-date">Jan 07, 2022</div>
+        <img src="images/dinner.jpg" alt="Nice dinner" />
+        <p>
+          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>
+      </div>
+
+      <div class="recipe-card">
+        <h2>Superbowl Snacks</h2>
+        <div class="author">By: <strong>Sandy</strong></div>
+        <div class="publish-date">Jan 06, 2022</div>
+        <img src="images/nachos.jpg" alt="Plate of nachos" />
+        <p>
+          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>
+      </div>
+    </section>
+
+    <!-- About -->
+    <section class="about-sandy">
+      <h2>About Sandy</h2>
+
+      <img src="images/smileyface.png" class="logo" alt="smiley face" />
+
+      <p>
+        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>
+        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>
+    Copyright <strong>&copy</strong> 2025. Developed by
+    <strong>Levi McLean</strong>.
+  </footer>
+</body>
+
+</html>
--- a/4/styles/styles.css
+++ b/4/styles/styles.css
@@ -0,0 +1,102 @@
+/* Beginner elements */
+* {
+    font-size: 62.5%;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    background: url(../images/squares_bg.png);
+}
+
+/* Header and logo */
+.logo {
+    opacity: 30%;
+    display: block;
+    margin: 2rem auto;
+}
+
+h1,
+h2 {
+    font-family: "Dancing Script", cursive;
+    color: teal;
+    font-size: 3rem;
+    text-shadow: 2px 2px 4px grey;
+    margin: 2rem auto;
+}
+
+.main-heading {
+    font-size: 4rem;
+    text-align: center;
+}
+
+/* Navbar styling */
+nav {
+    background-color: white;
+    border-top: 5px solid teal;
+    border-bottom: 5px solid teal;
+    margin: 2rem 0;
+}
+
+a {
+    font-size: 2rem;
+    text-decoration: none;
+    list-style: none;
+    display: block;
+    text-align: center;
+    margin: 1.5rem 0;
+    color: grey;
+    font-weight: bold;
+    font-family: Helvetica, sans-serif;
+}
+
+/* Recipe card styling */
+.recipe-card {
+    margin: 2rem 1rem;
+    font-size: 3rem;
+    font-family: Helvetica, sans-serif;
+    border: 2px solid grey;
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: 2px 2px 4px grey;
+}
+
+.recipe-card img {
+    display: block;
+    margin: 1.5rem auto;
+    border-radius: 60%;
+}
+
+.recipe-card p {
+    text-align: left;
+    line-height: 25px;
+    margin: 2rem;
+}
+
+.author {
+    text-align: right;
+}
+
+.publish-date {
+    text-align: right;
+}
+
+/* About section styling */
+.about-sandy {
+    background-color: grey;
+    background-image: url(../images/squares_bg.png);
+}
+
+/* Footer styling */
+footer {
+    background: teal;
+    border-top: 2px solid white;
+    font-size: 2rem;
+    color: lightgrey;
+    margin: 2rem auto;
+}
+
+footer strong {
+    color: white;
+    font-size: 2rem;
+}