Skip to content

Sheffield | May2025 | Waleed-Yahya Salih-Taha | wireframe #617

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+54 −20
Open

Sheffield | May2025 | Waleed-Yahya Salih-Taha | wireframe #617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
94a639b
Ddeleted pharagraph opener
Bluejay600 May 17, 2025
643fd8c
1. I created the featured wireframe
Bluejay600 May 29, 2025
41ca88b
I deleted the new lines between the text.
Bluejay600 May 30, 2025
de8c518
I changed the text and deleted the new lines on it.
Bluejay600 May 31, 2025
a7dd45a
1. On screens ≥768px, articles are shown in a grid.
Bluejay600 Jun 3, 2025
dfc8fea
changed the css code and the layout of the wireframe.
Bluejay600 Jun 4, 2025
7360e77
1. changed footer to flex.
Bluejay600 Jun 4, 2025
57299e8
1. Added a <nav> element (placeholder for now).
Bluejay600 Jun 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 39 additions & 18 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best Food Recipes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<header aria-label="Page introduction">
<h1>Best Food Recipes</h1>
<p>Find simple, family-friendly recipes for every season and occasion, from 30-minute meals to slow cooker favorites. Browse by category, ingredient, or occasion and get inspired by TODAY's chefs and experts.</p>
</header>

<!-- Navigation placeholder -->
<nav aria-label="Main navigation">
<!-- Add links here when needed -->
<!-- Example: <a href="#readme">README Info</a> -->
</nav>

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://media-cldnry.s-nbcnews.com/image/upload/t_fit-760w,f_auto,q_auto:best/newscms/2024_01/2044706/ali-rosen-stuffed-cabbage-2x1-zz-240102.jpg" alt="Illustration showing README file usage in development">
<h2>Stuffed Cabbage without the Stuffing</h2>
<p>Stuffed cabbage is historically a slow-braised dish, but this recipe speeds things up a bit by, well, skipping the stuffing. Cutting the cabbage into pieces and cooking the ground meat directly against the heat of the pan or pot helps to cut down on time.</p>
<a href="https://www.today.com/recipes/stuffed-cabbage-without-stuffing-recipe-t295507" target="_blank" rel="noopener noreferrer">Read more</a>
</article>

<article>
<img src="https://media-cldnry.s-nbcnews.com/image/upload/t_fit-1000w,f_auto,q_auto:best/newscms/2025_23/2106703/bobby-flays-barbecue-grilled-chicken-mc-2x1-250603.jpg" alt="Wireframe diagram illustrating layout design">
<h2>Grilled Chicken with Molasses and Rum Barbecue Sauce</h2>
<p>
This recipe sneaks in some Caribbean flavors, evoking a beach-time feeling.
The key is making sure the grill is at the right temperature. Heat it to medium, place the chicken skin-side down and slowly cook so the fat renders and the skin gets crispy, without touching.
Make the barbecue sauce in advance. It can be stored in an airtight container for a few days, then reheat when ready to serve.
</p>
<a href="https://www.today.com/recipes/grilled-chicken-molasses-rum-barbecue-sauce-t299646" target="_blank" rel="noopener noreferrer">Read more</a>
</article>

<article>
<img src="https://media-cldnry.s-nbcnews.com/image/upload/t_fit-1000w,f_auto,q_auto:best/newscms/2025_22/2105341/legendary-smash-burger-te-250527.jpg" alt="Diagram showing branching in Git version control">
<h2>Legendary Smash Burger</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
This delicious recipe is inspired by the Hard Rock Cafe's Legendary Smash Burger — named that for good reason. The perfectly charred patties are topped with bacon onion jam, crisp pickles and signature Legendary Sauce.
</p>
<a href="">Read more</a>
<a href="https://www.today.com/recipes/hard-rock-legendary-smash-burger-recipe-t299624" target="_blank" rel="noopener noreferrer">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>

<footer aria-label="Page footer">
<p>This is a recipe book webpage that provides the best food recipes everr been made.</p>
</footer>
</body>
</html>
17 changes: 15 additions & 2 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,23 @@ As well as useful links to learn more */
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
background: var(--paper);
color: var(--ink);
font: var(--font);
}
h2{
background: rgba(252, 179, 179, 0.705);

}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
}
a:hover,
a:focus {
background: var(--paper);
color: black;
}
img,
svg {
width: 100%;
Expand All @@ -52,8 +60,13 @@ main {
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #c0b2b2;
text-align: center;
padding: 1rem;
}

/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Inspect this in Devtools and click the "grid" button in the Elements view
Expand Down Expand Up @@ -86,4 +99,4 @@ article {
> img {
grid-column: span 3;
}
}
}