Skip to content

Commit 73b3a7e

Browse files
spyr088spyr088
committed
changes to assigned Thinkful-Ed#1 
1 parent 3bbd6af commit 73b3a7e

File tree

3 files changed

+149
-49
lines changed

3 files changed

+149
-49
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎index.html

+106-49
Original file line numberDiff line numberDiff line change
@@ -20,57 +20,114 @@
2020
<main>
2121
<!-- Group #1 with 2 items -->
2222
<h1>Perk Up Your Afternoon</h1>
23-
<img src="images/coffee-2-1.jpg" alt="" width="400" />
24-
<h2>Coffee Basics</h2>
25-
<p>
26-
Coffee is a brewed drink prepared from roasted coffee beans, the seeds
27-
of berries from certain Coffea species. It is darkly colored, bitter,
28-
slightly acidic and has a stimulating effect in humans, primarily due to
29-
its caffeine content.
30-
</p>
31-
<p>
32-
Coffee plants are now cultivated in over 70 countries and is one of the
33-
most popular drinks in the world. It can be prepared and presented in a
34-
variety of ways (e.g., espresso, French press, caffè latte). It is
35-
usually served hot, although iced coffee is a popular alternative.
36-
</p>
37-
38-
<img src="images/coffee-2-2.jpg" alt="" width="400" />
23+
<section>
24+
<div class="group">
25+
<div class="item">
26+
<img
27+
src="images/coffee-2-1.jpg"
28+
alt="Man pouring coffee into mug"
29+
/>
30+
<h2>Coffee Basics</h2>
31+
<p>
32+
Coffee is a brewed drink prepared from roasted coffee beans, the
33+
seeds of berries from certain Coffea species. It is darkly
34+
colored, bitter, slightly acidic and has a stimulating effect in
35+
humans, primarily due to its caffeine content.
36+
</p>
37+
<p>
38+
Coffee plants are now cultivated in over 70 countries and is one
39+
of the most popular drinks in the world. It can be prepared and
40+
presented in a variety of ways (e.g., espresso, French press,
41+
caffè latte). It is usually served hot, although iced coffee is a
42+
popular alternative.
43+
</p>
44+
</div>
45+
<div class="item-double">
46+
<img
47+
src="images/coffee-2-2.jpg"
48+
alt="Coffee being poured from a distance into cup."
49+
/>
50+
</div>
51+
</div>
52+
</section>
3953

4054
<!-- Group #2 with 3 items -->
41-
<img src="images/coffee-3-1.jpg" alt="" width="400" />
42-
<h3>Dates back to 800 A.D.</h3>
43-
<p>
44-
Legend has it that 9th-century goat herders noticed the effect caffeine
45-
had on their goats, who appeared to "dance" after eating the fruit of
46-
the Coffea plant. A local monk then made a drink with the produce and
47-
found that it kept him awake at night, thus the original cup of coffee
48-
was born.
49-
</p>
50-
51-
<img src="images/coffee-3-2.jpg" alt="" width="400" />
52-
<h3>Technically seeds</h3>
53-
<p>
54-
Coffee beans are technically seeds. They're the pits of the cherry-like
55-
berries found on the flowering shrubs, but we call them "beans" because
56-
of the resemblance to legumes.
57-
</p>
55+
<section>
56+
<div class="group">
57+
<div class="item">
58+
<img
59+
src="images/coffee-3-1.jpg"
60+
alt="Three cups of coffee on a table"
61+
/>
62+
<h3>Dates back to 800 A.D.</h3>
63+
<p>
64+
Legend has it that 9th-century goat herders noticed the effect
65+
caffeine had on their goats, who appeared to "dance" after eating
66+
the fruit of the Coffea plant. A local monk then made a drink with
67+
the produce and found that it kept him awake at night, thus the
68+
original cup of coffee was born.
69+
</p>
70+
</div>
71+
<div class="item">
72+
<img
73+
src="images/coffee-3-2.jpg"
74+
alt="Three people cheerings cups with coffee"
75+
/>
76+
<h3>Technically seeds</h3>
77+
<p>
78+
Coffee beans are technically seeds. They're the pits of the
79+
cherry-like berries found on the flowering shrubs, but we call
80+
them "beans" because of the resemblance to legumes.
81+
</p>
82+
</div>
83+
<div class="item">
84+
<img
85+
src="images/coffee-3-3.jpg"
86+
alt="Four cups of coffee on a table"
87+
/>
88+
<h3>Banned in the past</h3>
89+
<p>
90+
Back in 1511, leaders in Mecca believed it stimulated radical
91+
thinking and outlawed the drink. Some 16th-century Italian
92+
clergymen also tried to ban coffee because they believed it to be
93+
"satanic." However, Pope Clement VII loved coffee so much that he
94+
lifted the ban and had coffee baptized in 1600.
95+
</p>
96+
</div>
97+
</div>
98+
</section>
5899

59-
<img src="images/coffee-3-3.jpg" alt="" width="400" />
60-
<h3>Banned in the past</h3>
61-
<p>
62-
Back in 1511, leaders in Mecca believed it stimulated radical thinking
63-
and outlawed the drink. Some 16th-century Italian clergymen also tried
64-
to ban coffee because they believed it to be "satanic." However, Pope
65-
Clement VII loved coffee so much that he lifted the ban and had coffee
66-
baptized in 1600.
67-
</p>
68-
69-
<!-- Group #3 with 4 items -->
70-
<img src="images/coffee-4-1.jpg" alt="" width="400" />
71-
<img src="images/coffee-4-2.jpg" alt="" width="400" />
72-
<img src="images/coffee-4-3.jpg" alt="" width="400" />
73-
<img src="images/coffee-4-4.jpg" alt="" width="400" />
100+
<section class="bg-primary">
101+
<!-- Group #3 with 4 items -->
102+
<div class="group">
103+
<div class="item">
104+
<img
105+
src="images/coffee-4-1.jpg"
106+
alt="Couple ordering coffee at counter."
107+
/>
108+
</div>
109+
<div class="item">
110+
<img
111+
src="images/coffee-4-2.jpg"
112+
alt="Steamed milk being poured into cup of coffee."
113+
/>
114+
</div>
115+
<div class="item">
116+
<img
117+
src="images/coffee-4-3.jpg"
118+
alt="Steamed milk making a design as it is poured into cup of coffee."
119+
/>
120+
</div>
121+
<div class="item">
122+
<img
123+
src="images/coffee-4-4.jpg"
124+
alt="Steamed milk making a fancy design as it is poured into cup of coffee"
125+
/>
126+
</div>
127+
</div>
128+
</section>
74129
</main>
130+
131+
<script src="script.js"></script>
75132
</body>
76-
</html>
133+
</html>

‎style.css

+40
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* General Styles */
2+
13
main {
24
margin-top: 60px;
35
}
@@ -27,3 +29,41 @@ main p {
2729
font-family: "Roboto", sans-serif;
2830
margin-top: 0;
2931
}
32+
33+
.bg-primary {
34+
background-color: #775f47;
35+
}
36+
37+
.group img {
38+
width: 100%;
39+
}
40+
41+
/* Groups & Items (Mobile First) */
42+
43+
.group {
44+
display: flex;
45+
flex-direction: column;
46+
margin-bottom: 100px;
47+
}
48+
49+
.item {
50+
flex: 1;
51+
margin: 10px;
52+
}
53+
54+
.item-double {
55+
flex: 2;
56+
margin: 10px;
57+
}
58+
59+
/* Groups & Items (Desktop) */
60+
61+
@media all and (min-width: 800px) {
62+
section {
63+
padding: 0 10%;
64+
}
65+
66+
.group {
67+
flex-direction: row;
68+
}
69+
}

0 commit comments

Comments
 (0)