Skip to content

Commit b16f84f

Browse files
owen-webbowen-webb
authored
Merge pull request #2 from owen-webb/section-3
Section 3
2 parents 63a9a97 + 025dce9 commit b16f84f

File tree

4 files changed

+535
-120
lines changed

4 files changed

+535
-120
lines changed

‎starter/03-CSS-Fundamentals/challenge-1/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<header>
4+
<title>Section 2 - Challenge #2</title>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="style.css">
7+
</header>
8+
9+
<body>
10+
<article class="product">
11+
<h2 class="product-header">
12+
<div class="product-header-tag">sale</div>
13+
Converse Chuck Taylor All Star Low Top
14+
</h2>
15+
16+
<img alt="Converse shoes."
17+
height="250"
18+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
19+
width="250">
20+
21+
<p class="pricing-details"><strong>$65.00</strong></p>
22+
<p class="shipping-details">Free shipping</p>
23+
<p>Ready to dress up or down, these classic canvas Chucks are an everday wardrobe staple.</p>
24+
<p class="information-link">
25+
<a href="#">More information &rightarrow;</a>
26+
</p>
27+
28+
<!-- Color selector. -->
29+
<div class="color-pallete">
30+
<div class="black-option"></div>
31+
<div class="blue-option"></div>
32+
<div class="red-option"></div>
33+
<div class="yellow-option"></div>
34+
<div class="green-option"></div>
35+
<div class="brown-option"></div>
36+
</div>
37+
38+
<h4 class="details-header">Product details</h4>
39+
<ul>
40+
<li>Lightweight, durable canvas sneaker</li>
41+
<li>Lightly padded footbed for added comfort</li>
42+
<li>Iconic Chuck Taylor ankle patch.</li>
43+
</ul>
44+
45+
<button>Add to cart</button>
46+
</article>
47+
</body>
48+
</html>

‎starter/03-CSS-Fundamentals/challenge-1/style.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
font-family: sans-serif;
8+
line-height: 1.4;
9+
}
10+
11+
/* Use classes for all styling other than body. */
12+
13+
a {
14+
color: black;
15+
}
16+
17+
a:hover {
18+
text-decoration: none;
19+
}
20+
21+
button {
22+
background-color: black;
23+
border: 0;
24+
border-top: 4px solid black;
25+
color: white;
26+
padding: 20px 0;
27+
text-transform: uppercase;
28+
width: 100%;
29+
}
30+
31+
button:hover {
32+
background-color: white;
33+
color: black;
34+
cursor: pointer;
35+
}
36+
37+
li {
38+
list-style-type: square;
39+
margin-left: 20px;
40+
margin-bottom: 10px;
41+
}
42+
43+
h2 {
44+
text-transform: uppercase;
45+
margin-bottom: 15px;
46+
margin-top: 30px;
47+
}
48+
49+
.black-option {
50+
background-color: black;
51+
}
52+
53+
.blue-option {
54+
background-color: blue;
55+
}
56+
57+
.brown-option {
58+
background-color: brown;
59+
}
60+
61+
.color-pallete {
62+
margin-bottom: 15px;
63+
}
64+
65+
.color-pallete div {
66+
display: inline-block;
67+
height: 20px;
68+
margin-right: 8px;
69+
width: 20px;
70+
}
71+
72+
.details-header {
73+
text-transform: uppercase;
74+
margin-bottom: 15px;
75+
}
76+
77+
.green-option {
78+
background-color: green;
79+
}
80+
81+
.information-link {
82+
margin-bottom: 20px;
83+
}
84+
85+
.product {
86+
border: 4px solid black;
87+
margin: 50px auto;
88+
width: 825px;
89+
}
90+
91+
.product-header {
92+
background-color: #f7f7f7;
93+
font-size: 22px;
94+
margin: 0;
95+
padding: 15px;
96+
position: relative;
97+
text-align: center;
98+
}
99+
100+
.product-header-tag {
101+
background-color: red;
102+
color: white;
103+
display: inline-block;
104+
font-size: 16px;
105+
left: -4%;
106+
letter-spacing: 2px;
107+
padding: 5px 10px;
108+
position: absolute;
109+
text-transform: uppercase;
110+
top: -30%;
111+
}
112+
113+
.pricing-details {
114+
font-size: 24px;
115+
}
116+
117+
.red-option {
118+
background-color: red;
119+
}
120+
121+
.shipping-details {
122+
color: #777;
123+
font-size: 12px;
124+
font-weight: bold;
125+
margin-bottom: 20px;
126+
text-transform: uppercase;
127+
}
128+
129+
.yellow-option {
130+
background-color: yellow;
131+
}

0 commit comments

Comments
 (0)