Skip to content
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

Update index.html #17

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update index.html #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77d0c89
Update index.html
jolvu Feb 19, 2024
087de42
Update style.css
jolvu Feb 19, 2024
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
125 changes: 76 additions & 49 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,57 +20,84 @@
<main>
<!-- Group #1 with 2 items -->
<h1>Perk Up Your Afternoon</h1>
<img src="images/coffee-2-1.jpg" alt="" width="400" />
<h2>Coffee Basics</h2>
<p>
Coffee is a brewed drink prepared from roasted coffee beans, the seeds
of berries from certain Coffea species. It is darkly colored, bitter,
slightly acidic and has a stimulating effect in humans, primarily due to
its caffeine content.
</p>
<p>
Coffee plants are now cultivated in over 70 countries and is one of the
most popular drinks in the world. It can be prepared and presented in a
variety of ways (e.g., espresso, French press, caffè latte). It is
usually served hot, although iced coffee is a popular alternative.
</p>

<img src="images/coffee-2-2.jpg" alt="" width="400" />

<section>
<div class="group">
<div class="item">
<img src="images/coffee-2-1.jpg"
alt="Pouring coffee" width="400" />
<h2>Coffee Basics</h2>
<p>
Coffee is a brewed drink prepared from roasted coffee beans, the seeds
of berries from certain Coffea species. It is darkly colored, bitter,
slightly acidic and has a stimulating effect in humans, primarily due to
its caffeine content.
</p>
<p>
Coffee plants are now cultivated in over 70 countries and is one of the
most popular drinks in the world. It can be prepared and presented in a
variety of ways (e.g., espresso, French press, caffè latte). It is
usually served hot, although iced coffee is a popular alternative.
</p>
</div>
<div class="item-double">
<img src="images/coffee-2-2.jpg" alt="Coffee being poured from above" width="400" />
</div>
</div>
</section>

<!-- Group #2 with 3 items -->
<img src="images/coffee-3-1.jpg" alt="" width="400" />
<h3>Dates back to 800 A.D.</h3>
<p>
Legend has it that 9th-century goat herders noticed the effect caffeine
had on their goats, who appeared to "dance" after eating the fruit of
the Coffea plant. A local monk then made a drink with the produce and
found that it kept him awake at night, thus the original cup of coffee
was born.
</p>

<img src="images/coffee-3-2.jpg" alt="" width="400" />
<h3>Technically seeds</h3>
<p>
Coffee beans are technically seeds. They're the pits of the cherry-like
berries found on the flowering shrubs, but we call them "beans" because
of the resemblance to legumes.
</p>

<img src="images/coffee-3-3.jpg" alt="" width="400" />
<h3>Banned in the past</h3>
<p>
Back in 1511, leaders in Mecca believed it stimulated radical thinking
and outlawed the drink. Some 16th-century Italian clergymen also tried
to ban coffee because they believed it to be "satanic." However, Pope
Clement VII loved coffee so much that he lifted the ban and had coffee
baptized in 1600.
</p>

<section>
<div class="group">
<div class="item">
<img src="images/coffee-3-1.jpg" alt="Three cups of coffee" width="400" />
<h3>Dates back to 800 A.D.</h3>
<p>
Legend has it that 9th-century goat herders noticed the effect caffeine
had on their goats, who appeared to "dance" after eating the fruit of
the Coffea plant. A local monk then made a drink with the produce and
found that it kept him awake at night, thus the original cup of coffee
was born.
</p>
</div>
<div class="item"
<img src="images/coffee-3-2.jpg" alt="Three people cheering with cups of coffee" width="400" />
<h3>Technically seeds</h3>
<p>
Coffee beans are technically seeds. They're the pits of the cherry-like
berries found on the flowering shrubs, but we call them "beans" because
of the resemblance to legumes.
</p>
</div>
<div class="item">
<img src="images/coffee-3-3.jpg" alt="Four cups of coffee on table" width="400" />
<h3>Banned in the past</h3>
<p>
Back in 1511, leaders in Mecca believed it stimulated radical thinking
and outlawed the drink. Some 16th-century Italian clergymen also tried
to ban coffee because they believed it to be "satanic." However, Pope
Clement VII loved coffee so much that he lifted the ban and had coffee
baptized in 1600.
</p>
</div>
</div>
</section>
<!-- Group #3 with 4 items -->
<img src="images/coffee-4-1.jpg" alt="" width="400" />
<img src="images/coffee-4-2.jpg" alt="" width="400" />
<img src="images/coffee-4-3.jpg" alt="" width="400" />
<img src="images/coffee-4-4.jpg" alt="" width="400" />
<section>
<div class="group">
<div class="item">
<img src="images/coffee-4-1.jpg" alt="People ordering coffee" width="400" />
</div>
<div class="item">
<img src="images/coffee-4-2.jpg" alt="Barista making latte art" width="400" />
</div>
<div class="item">
<img src="images/coffee-4-3.jpg" alt="Barista making latte art" width="400" />
</div>
<div class="item">
<img src="images/coffee-4-4.jpg" alt="Barista making latte art close up" width="400" />
</div>
</div>
</section>
</main>
</body>
</html>
21 changes: 21 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,24 @@ main p {
font-family: "Roboto", sans-serif;
margin-top: 0;
}

.group {
display: flex;
flex-direction: column;
margin-bottom: 100px;
}

.item {
flex: 1;.
margin: 10px;
}

@media all and (min-width: 800px) {
section {
padding: 0 10%;
}

.group {
flex-direction: row;
}
}