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
This commit is contained in:
2025-11-02 12:30:09 -05:00
parent 4bdef9e16a
commit 9e58bb20db
11 changed files with 325 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 915 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 819 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 467 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View File

@@ -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">