Skip to content

Commit 4480d7b

Browse files
TemceoTemceo
committed
update index and css page. Add legumes.html
1 parent a7b8a25 commit 4480d7b

3 files changed

Lines changed: 78 additions & 18 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,43 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta charset="UTF-8" >
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
66
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
7+
<link rel="stylesheet" href="style.css" >
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
11+
<h1>The key to good health</h1>
1512
</header>
1613
<main>
1714
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
15+
<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" >
16+
<h2>The power of legumes</h2>
17+
<p>
18+
Legumes, a diverse group including beans, lentils, peas, and chickpeas, are nutritional powerhouses that offer significant benefits for human health ...
19+
</p>
20+
<a href="">Read more</a>
21+
</article>
22+
23+
<article>
24+
<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" >
25+
<h2>Lentils</h2>
26+
<p>
27+
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 ...
28+
</p>
29+
<a href="">Read more</a>
30+
</article>
31+
32+
<article>
33+
<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" >
34+
<h2>Chickpeas</h2>
2035
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
36+
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 ...
2337
</p>
2438
<a href="">Read more</a>
2539
</article>
40+
2641
</main>
2742
<footer>
2843
<p>

‎Wireframe/legumes.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" >
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
6+
<title>Legumes</title>
7+
<link rel="stylesheet" href="style.css" >
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Legumes</h1>
12+
</header>
13+
<main>
14+
<article>
15+
<h2>Why legumes are good for you</h2>
16+
<p>
17+
Legumes, a diverse group including beans, lentils, peas, and chickpeas, are nutritional powerhouses that offer significant benefits for human health. Rich in plant-based protein, they provide a valuable alternative to meat, supporting muscle growth and repair while being lower in saturated fat, which contributes to heart health.
18+
19+
One of the standout features of legumes is their high fiber content. Dietary fiber aids digestion, promotes satiety, and helps regulate blood sugar levels, reducing the risk of type 2 diabetes. Additionally, the soluble fiber in legumes can help lower cholesterol, supporting cardiovascular wellness. Legumes are also packed with essential vitamins and minerals, including folate, iron, magnesium, and potassium, which contribute to energy production, bone health, and proper nerve function.
20+
21+
Regular consumption of legumes has been linked to weight management, as their combination of protein and fiber helps control appetite. Moreover, their low glycemic index makes them suitable for stabilizing blood sugar, benefiting individuals with insulin sensitivity. Beyond personal health, legumes have environmental benefits, enriching soil nitrogen and requiring less water than animal protein sources, making them a sustainable choice. Incorporating legumes into the diet offers a practical, versatile, and health-promoting way to support long-term well-being.
22+
</p>
23+
24+
</article>
25+
</main>
26+
<footer>
27+
<p>
28+
Legumes For All &copy; 2026
29+
</footer>
30+
</body>
31+
</html>

‎Wireframe/style.css‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ As well as useful links to learn more */
2727
/* ====== Base Elements ======
2828
General rules for basic HTML elements in any context */
2929
body {
30+
display: grid;
31+
grid-template-rows: auto 1fr auto;
32+
min-height: 100vh;
33+
border: 2px solid red;
3034
background: var(--paper);
3135
color: var(--ink);
3236
font: var(--font);
@@ -45,12 +49,16 @@ svg {
4549
Setting the overall rules for page regions
4650
https://www.w3.org/WAI/tutorials/page-structure/regions/
4751
*/
52+
53+
header {
54+
text-align: center;
55+
}
4856
main {
4957
max-width: var(--container);
5058
margin: 0 auto calc(var(--space) * 4) auto;
5159
}
5260
footer {
53-
position: fixed;
61+
/* position: fixed; */
5462
bottom: 0;
5563
text-align: center;
5664
}
@@ -61,12 +69,16 @@ Play with the options that come up.
6169
https://developer.chrome.com/docs/devtools/css/grid
6270
https://gridbyexample.com/learn/
6371
*/
64-
main {
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
72+
73+
74+
@media (min-width: 550px) {
75+
main {
76+
display: grid;
77+
grid-template-columns: 1fr 1fr;
78+
gap: var(--space);
79+
> *:first-child {
80+
grid-column: span 2;
81+
}
7082
}
7183
}
7284
/* ====== Article Layout ======
@@ -77,6 +89,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
7789
article {
7890
border: var(--line);
7991
padding-bottom: var(--space);
92+
margin-bottom: 1rem;
8093
text-align: left;
8194
display: grid;
8295
grid-template-columns: var(--space) 1fr var(--space);
@@ -87,3 +100,4 @@ article {
87100
grid-column: span 3;
88101
}
89102
}
103+

0 commit comments

Comments
 (0)