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

Jump to bottom

new #13

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

new #13

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
a809c9f
Update style.css
mariamthedeveloper Apr 29, 2023
db65465
Update index.html
mariamthedeveloper Apr 29, 2023
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
135 changes: 87 additions & 48 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,57 +20,96 @@
<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="Man pouring coffee into mug"
/>
<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-two">
<img src="images/coffee-2-2.jpg" alt="Coffee being poured from a distance into cup."
/>
</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>
<section>
<div class="group">
<div class="item">
<img src="images/coffee-3-1.jpg" alt="Three cups of coffee on a table"
/>
<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 cheerings cups with coffee"
/>
<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 a table"
/>
<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>

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

<!-- 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 class="bg">
<!-- Group #3 with 4 items -->
<div class="group">
<div class="item">
<img src="images/coffee-4-1.jpg" alt="Couple ordering coffee at counter."
/>
</div>
<div class="item">
<img src="images/coffee-4-2.jpg" alt="Steamed milk being poured into cup of coffee."
/>
</div>
<div class="item">
<img src="images/coffee-4-3.jpg" alt="Steamed milk making a design as it is poured into cup of coffee."
/>
</div>
<div class="item">
<img src="images/coffee-4-4.jpg" alt="Steamed milk making a fancy design as it is poured into cup of coffee"
/>
</div>
</div>
</section>
</main>

<script src="script.js"></script>
</body>
</html>
38 changes: 38 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,41 @@ main p {
font-family: "Roboto", sans-serif;
margin-top: 0;
}

.bg {
background-color: #5f4c39;
}

.group img {
width: 100%;
}

/* Groups & Items (Mobile First) */

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

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

.item-two {
flex: 2;
margin: 10px;
}

/* Groups & Items (Desktop) */

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

.group {
flex-direction: row;
}
}