Skip to content

Commit

Permalink
changes to assigned Thinkful-Ed#1
Browse files Browse the repository at this point in the history
  • Loading branch information
@spyr088
spyr088 committed Mar 11, 2024
1 parent 3bbd6af commit 73b3a7e
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 49 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
155 changes: 106 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,57 +20,114 @@
<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-double">
<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-primary">
<!-- 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>
</html>
40 changes: 40 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* General Styles */

main {
margin-top: 60px;
}
Expand Down Expand Up @@ -27,3 +29,41 @@ main p {
font-family: "Roboto", sans-serif;
margin-top: 0;
}

.bg-primary {
background-color: #775f47;
}

.group img {
width: 100%;
}

/* Groups & Items (Mobile First) */

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

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

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

/* Groups & Items (Desktop) */

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

.group {
flex-direction: row;
}
}

0 comments on commit 73b3a7e

Please sign in to comment.