Skip to content

London | 26-ITP-May | Martin Mwaka | Sprint 2 | Wireframe #1308

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
Temceo wants to merge 8 commits into
base: main
Choose a base branch
from
Open

London | 26-ITP-May | Martin Mwaka | Sprint 2 | Wireframe #1308

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
4480d7b
update index and css page. Add legumes.html
Temceo May 18, 2026
720445e
update legumes.html
Temceo May 18, 2026
4b2d901
add lentis.html
Temceo May 18, 2026
c19f4d4
add chickpeas.html
Temceo May 18, 2026
8adc6fa
update article background colour
Temceo May 18, 2026
f8a1b5d
update site font size
Temceo May 18, 2026
076f02a
update article a in css
Temceo May 18, 2026
cc640aa
update chickpeas.html
Temceo May 18, 2026
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
47 changes: 47 additions & 0 deletions Wireframe/chickpeas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Chickpeas</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<h1>Chickpeas</h1>
</header>
<main>
<article>
<h2>Chickpeas: A Superfood for Health and Wellness</h2>
<p>
Chickpeas, also known as garbanzo beans, have been cultivated for thousands of years and are a staple in cuisines from the Middle East to the Mediterranean. Beyond their versatility and mild, nutty flavour, chickpeas are widely recognized as a superfood due to their dense nutritional profile and numerous health benefits.
</p>
<p>
One of the most compelling reasons chickpeas are considered a superfood is their high protein content. Rich in plant-based protein, chickpeas provide essential amino acids needed for muscle growth, repair, and overall body function. They are particularly valuable for vegetarians and vegans, offering a wholesome, low-fat alternative to animal proteins. Protein, combined with their fiber content, also helps keep you full longer, aiding in appetite control and weight management.
</p>
<p>
Chickpeas are loaded with dietary fibre, which supports digestive health by promoting regular bowel movements and feeding beneficial gut bacteria. Soluble fibre in chickpeas helps reduce LDL cholesterol, lowering the risk of heart disease, while also regulating blood sugar levels. This makes chickpeas an excellent choice for those managing diabetes or aiming for steady energy levels throughout the day.
</p>
<p>
In addition to protein and fibre, chickpeas are packed with essential vitamins and minerals. They are a rich source of folate, iron, magnesium, manganese, and phosphorus, nutrients vital for red blood cell production, energy metabolism, bone health, and proper nervous system function. Regular consumption of chickpeas can help prevent nutrient deficiencies and support overall health.
</p>
<p>
Another reason chickpeas are a superfood is their low glycemic index, which allows for slow digestion and gradual glucose release into the bloodstream. This contributes to stable blood sugar levels, improved energy, and reduced risk of insulin resistance. Their versatility also makes them easy to incorporate into a variety of dishes—hummus, salads, soups, stews, roasted snacks, and even baked goods—ensuring that getting their nutritional benefits can also be delicious.
</p>
<p>
Chickpeas also have environmental benefits. They are nitrogen-fixing legumes, which enrich the soil and reduce the need for synthetic fertilizers. Compared to animal proteins, chickpeas require less water and produce fewer greenhouse gas emissions, making them an eco-friendly choice that supports sustainable agriculture.
</p>
<p>
Incorporating chickpeas into your diet can be simple and rewarding. Nutrition experts recommend including at least two servings per week to reap the benefits for heart health, digestion, blood sugar regulation, and overall nutrient intake. With their combination of protein, fiber, vitamins, minerals, and environmental sustainability, chickpeas are more than just a pantry staple—they are a superfood that supports long-term wellness.
</p>
<p>
In summary, chickpeas offer an impressive array of health benefits in a small, versatile package. Their ability to promote cardiovascular health, support digestion, provide sustained energy, and deliver essential nutrients makes them a true superfood. By including chickpeas regularly in meals, you can enhance your diet, improve overall health, and contribute to a more sustainable food system—all while enjoying delicious and satisfying dishes.
</p>
</article>
</main>
<footer>
<p>
Legumes For All &copy; 2026
</footer>
</body>
</html>
44 changes: 31 additions & 13 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<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=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
<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>
<h1>The key to good health</h1>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://images.unsplash.com/photo-1708436477916-f97964f3ccf1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A selection of legumes in bowls" >
<h2>The power of legumes</h2>
<p>
Legumes, a diverse group including beans, lentils, peas, and chickpeas, are nutritional powerhouses that offer significant benefits for human health ...
</p>
<a href="legumes.html" target="_blank">Read more</a>
</article>

<article>
<img src="https://images.unsplash.com/photo-1708436478056-1872a208c010?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Lentils in a bowl" >
<h2>Lentils</h2>
<p>
Lentils are often called a superfood, and for good reason. These small, lens-shaped legumes pack a powerful nutritional punch, making them an excellent addition to any diet ...
</p>
<a href="lentils.html" target="_blank">Read more</a>
</article>

<article>
<img src="https://plus.unsplash.com/premium_photo-1675237625827-38268aafc571?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Row chickpeas" >
<h2>Chickpeas</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
Chickpeas, also known as garbanzo beans, are tiny legumes with big nutritional benefits, earning them the title of a superfood. Packed with plant-based protein, chickpeas are excellent for muscle repair ...
</p>
<a href="">Read more</a>
<a href="chickpeas.html" target="_blank">Read more</a>
</article>

</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Legumes For All &copy; 2026
</p>
</footer>
</body>
Expand Down
52 changes: 52 additions & 0 deletions Wireframe/legumes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Legumes</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<h1>Legumes</h1>
</header>
<main>
<article>
<h2>Legumes: A Nutritional Powerhouse for Human Health</h2>
<p>
Legumes, which include beans, lentils, peas, chickpeas, and peanuts, are among the most nutrient-dense foods available. These humble plants have been staples in human diets for thousands of years, and modern science confirms their exceptional benefits for health and well-being.
</p>
<p>
One of the most notable advantages of legumes is their high protein content. For individuals seeking plant-based protein, legumes are a natural solution, offering essential amino acids needed for muscle growth, repair, and overall bodily function. Unlike many animal-based protein sources, legumes are low in saturated fat, making them a heart-healthy alternative while still supporting strength and energy.
</p>
<p>
Legumes are also an excellent source of dietary fibre, which plays a critical role in digestive health. Fibre promotes regular bowel movements, supports gut microbiota, and contributes to a feeling of fullness, which can help with weight management. Additionally, soluble fibre in legumes helps regulate blood sugar levels, reducing spikes after meals—a benefit particularly important for individuals with type 2 diabetes. Fibre also aids in lowering LDL cholesterol, supporting cardiovascular health over the long term.
</p>
<p>
Beyond protein and fibre, legumes are rich in essential vitamins and minerals. Folate, iron, magnesium, potassium, and zinc are commonly found in legumes, helping with red blood cell formation, energy metabolism, bone health, and proper nerve and muscle function. Regular consumption of legumes can prevent nutrient deficiencies while providing a low-calorie, nutrient-dense dietary option.
</p>
<p>
Another compelling reason to include legumes in the diet is their low glycemic index, which helps maintain steady energy levels and improves blood sugar management. This property, combined with their high fibre and protein content, makes legumes particularly beneficial for weight control and metabolic health.
</p>
<p>
Legumes are also incredibly versatile in culinary applications. They can be added to soups, stews, salads, curries, dips, or even blended into spreads like hummus. Their mild flavour and ability to absorb seasonings make them adaptable to a wide variety of cuisines, helping people increase their nutrient intake without compromising taste.
</p>
<p>
In addition to human health benefits, legumes contribute to environmental sustainability. As nitrogen-fixing plants, they enrich the soil, reducing the need for chemical fertilizers. They also require less water and produce fewer greenhouse gases compared to most animal-based protein sources, making them a responsible choice for both personal health and the planet.
</p>
<p>
Incorporating legumes into the diet can be simple and highly rewarding. Nutritionists often recommend consuming at least 2–3 servings of legumes per week, which can support heart health, improve digestion, stabilize blood sugar, and promote weight management. With their unique combination of protein, fibre, vitamins, minerals, and environmental benefits, legumes are not only a nutritious dietary choice but also a smart investment in long-term health.
</p>
<p>
In summary, legumes are much more than a traditional pantry staple—they are a superfood for modern diets. Their ability to provide essential nutrients, support metabolic and cardiovascular health, aid digestion, and promote sustainable food practices makes them one of the most valuable foods for human health. Adding a variety of legumes to daily meals is an easy, cost-effective way to enhance overall nutrition and well-being.
</p>


</article>
</main>
<footer>
<p>
Legumes For All &copy; 2026
</footer>
</body>
</html>
47 changes: 47 additions & 0 deletions Wireframe/lentils.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Lentils</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<h1>Lentils</h1>
</header>
<main>
<article>
<h2>Lentils: The Superfood You Shouldn’t Ignore</h2>
<p>
Lentils, small lens-shaped legumes, have been a staple of diets around the world for thousands of years. From traditional Indian dals to Mediterranean soups, lentils are cherished not just for their taste but also for their remarkable nutritional value. They are widely recognized as a superfood—a nutrient-dense food that delivers a wide range of health benefits with relatively few calories.
</p>
<p>
One of the standout features of lentils is their high protein content. For those seeking plant-based protein, lentils are an excellent choice, providing essential amino acids necessary for muscle growth, repair, and overall body function. They offer a heart-healthy alternative to meat, as they are naturally low in saturated fat and cholesterol-free. For vegetarians, vegans, or anyone looking to reduce animal protein intake, lentils are a powerful, versatile option.
</p>
<p>
Dietary fibre is another reason lentils earn their superfood status. Rich in both soluble and insoluble fiber, lentils support healthy digestion, regulate bowel movements, and promote a feeling of fullness, which can aid in weight management. Soluble fibre also helps lower LDL cholesterol, reducing the risk of heart disease, while helping stabilise blood sugar levels—a key benefit for people with diabetes or insulin resistance.
</p>
<p>
Lentils are packed with essential vitamins and minerals, including folate, iron, magnesium, potassium, and zinc. Folate supports cell growth and development, iron prevents anemia, magnesium aids in nerve and muscle function, and potassium helps maintain healthy blood pressure. Regular consumption of lentils contributes to overall vitality and helps prevent nutrient deficiencies.
</p>
<p>
Another advantage of lentils is their low glycemic index, meaning they release energy slowly and help maintain stable blood sugar levels. This makes them an excellent food for sustained energy, weight management, and metabolic health. Lentils are also extremely versatile in cooking. They can be used in soups, stews, salads, veggie burgers, and even blended into spreads, making it easy to incorporate them into daily meals without sacrificing taste or variety.
</p>
<p>
Beyond personal health, lentils are environmentally friendly. They are nitrogen-fixing plants, enriching the soil naturally and reducing the need for synthetic fertilizers. They also require less water than most animal protein sources and have a smaller carbon footprint, making them a sustainable choice that benefits both human health and the planet.
</p>
<p>
Incorporating lentils into your diet can be simple and highly rewarding. Nutritionists often recommend including at least 2–3 servings per week, which can support heart health, improve digestion, stabilize blood sugar, and provide a rich source of vitamins and minerals. With their combination of protein, fiber, micronutrients, versatility, and environmental benefits, lentils clearly deserve their superfood label.
</p>
<p>
In summary, lentils are more than just a pantry staple—they are a powerhouse of nutrition. By adding lentils to your meals regularly, you can enhance your health, support sustainable food practices, and enjoy delicious, versatile dishes. Whether in soups, salads, or stews, lentils are a simple, cost-effective way to nourish your body and promote long-term well-being.
</p>
</article>
</main>
<footer>
<p>
Legumes For All &copy; 2026
</footer>
</body>
</html>
53 changes: 43 additions & 10 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,31 @@ As well as useful links to learn more */
https://web.dev/articles/min-max-clamp
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
html {
font-size: 18px;
line-height: 1.2;
}
:root {
--font-primary: "Roboto", sans-serif;
--clr-primary: #f5f5f5;
--clr-accent1: #BEBFC5;
--clr-accent2: #DBD7D2;
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--ink: #333333;
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--line: 1px solid #F5F5F5;
--container: 1280px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
background: var(--paper);
color: var(--ink);
font: var(--font);
font-family: var(--font-primary);
}
a {
padding: var(--space);
Expand All @@ -45,12 +56,16 @@ svg {
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/

header {
text-align: center;
}
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
/* position: fixed; */
bottom: 0;
text-align: center;
}
Expand All @@ -61,12 +76,16 @@ Play with the options that come up.
https://developer.chrome.com/docs/devtools/css/grid
https://gridbyexample.com/learn/
*/
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
grid-column: span 2;


@media (min-width: 550px) {
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
grid-column: span 2;
}
}
}
/* ====== Article Layout ======
Expand All @@ -77,6 +96,8 @@ Keeping things orderly and separate is the key to good, simple CSS.
article {
border: var(--line);
padding-bottom: var(--space);
background-color: var(--clr-primary);
margin-bottom: 1rem;
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
Expand All @@ -87,3 +108,15 @@ article {
grid-column: span 3;
}
}

article a {
font-weight: 600;
background-color: var(--clr-accent1);
text-transform: uppercase;
text-decoration: none;
}

article a:hover {
background-color: var(--clr-accent2);
}