Skip to content

Commit 070bd49

Browse files
author
Ronan
committed
Add challenge-1 files (copied from last challenge in previous section)
1 parent 4c75310 commit 070bd49

File tree

9 files changed

+181
-0
lines changed

9 files changed

+181
-0
lines changed

‎starter/04-CSS-Layouts/challenge-1/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.formatOnSave": true
3+
}

‎starter/04-CSS-Layouts/challenge-1/img/challenges.jpg‎

120 KB
Loading

‎starter/04-CSS-Layouts/challenge-1/img/laura-jones.jpg‎

6.64 KB
Loading

‎starter/04-CSS-Layouts/challenge-1/img/post-img.jpg‎

53.4 KB
Loading

‎starter/04-CSS-Layouts/challenge-1/img/related-1.jpg‎

50.2 KB
Loading

‎starter/04-CSS-Layouts/challenge-1/img/related-2.jpg‎

33 KB
Loading

‎starter/04-CSS-Layouts/challenge-1/img/related-3.jpg‎

43.5 KB
Loading

‎starter/04-CSS-Layouts/challenge-1/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Challenge 3</title>
5+
<link rel="stylesheet" href="styles.css" />
6+
</head>
7+
<body>
8+
<article class="product">
9+
<p class="sale">sale</p>
10+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
11+
<img
12+
src="img/challenges.jpg"
13+
alt="Chuck Taylor All Star Shoe"
14+
width="250"
15+
height="250"
16+
/>
17+
<p class="price"><strong>$65.00</strong></p>
18+
<p class="shipping">Free shipping</p>
19+
<p>
20+
Ready to dress up or down, these classic canvas Chucks are an everyday
21+
wardrobe staple.
22+
</p>
23+
<a class="more-info" href="#">More information &rarr;</a>
24+
<div class="colors">
25+
<div class="color"></div>
26+
<div class="color color-blue"></div>
27+
<div class="color color-red"></div>
28+
<div class="color color-yellow"></div>
29+
<div class="color color-green"></div>
30+
<div class="color color-brown"></div>
31+
</div>
32+
<h3 class="details-title">Product details</h3>
33+
<ul class="details-list">
34+
<li>Lightweight, durable canvas sneaker</li>
35+
<li>Lightly padded footbed for added comfort</li>
36+
<li>Iconic Chuck Taylor ankle patch</li>
37+
</ul>
38+
<button class="add-to-cart">Add to cart</button>
39+
</article>
40+
</body>
41+
</html>

‎starter/04-CSS-Layouts/challenge-1/styles.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
font-family: sans-serif;
8+
font-size: 14px;
9+
}
10+
11+
.product {
12+
border: 4px solid black;
13+
width: 825px;
14+
margin: 50px auto;
15+
position: relative;
16+
}
17+
18+
.sale {
19+
background-color: red;
20+
color: white;
21+
font-size: 10px;
22+
font-weight: bold;
23+
text-transform: uppercase;
24+
padding: 10px 20px;
25+
display: inline-block;
26+
/* width: 40px;
27+
text-align: center; */
28+
position: absolute;
29+
top: -17px;
30+
left: -39px;
31+
letter-spacing: 2px;
32+
}
33+
34+
.product-title {
35+
text-align: center;
36+
font-size: 22px;
37+
background-color: #eee;
38+
text-transform: uppercase;
39+
padding: 15px 0;
40+
}
41+
42+
p {
43+
margin-bottom: 10px;
44+
}
45+
46+
.price {
47+
font-size: 20px;
48+
margin-bottom: 5px;
49+
}
50+
51+
.shipping {
52+
text-transform: uppercase;
53+
color: #aaa;
54+
font-size: 12px;
55+
font-weight: bold;
56+
margin-bottom: 20px;
57+
}
58+
59+
.more-info:link,
60+
.more-info:visited {
61+
color: black;
62+
display: inline-block;
63+
margin-bottom: 30px;
64+
}
65+
66+
.more-info:hover,
67+
.more-info:active {
68+
text-decoration: none;
69+
}
70+
71+
.color {
72+
width: 20px;
73+
height: 20px;
74+
display: inline-block;
75+
margin: 0 5px;
76+
}
77+
78+
.color:first-child {
79+
margin-left: 0;
80+
background-color: rgb(66, 66, 66);
81+
}
82+
83+
.color-blue {
84+
background-color: rgb(42, 133, 237);
85+
}
86+
87+
.color-red {
88+
background-color: rgb(226, 82, 15);
89+
}
90+
91+
.color-yellow {
92+
background-color: rgba(251, 251, 9, 0.947);
93+
}
94+
95+
.color-green {
96+
background-color: rgb(23, 161, 53);
97+
}
98+
99+
.color-brown {
100+
background-color: burlywood;
101+
margin-right: 0;
102+
}
103+
/* Product Details */
104+
105+
.details-title {
106+
text-transform: uppercase;
107+
font-size: 16px;
108+
margin-top: 30px;
109+
margin-bottom: 15px;
110+
}
111+
112+
.details-list {
113+
list-style-type: square;
114+
margin-left: 20px;
115+
}
116+
117+
.details-list li {
118+
margin-bottom: 10px;
119+
}
120+
/* Button */
121+
122+
.add-to-cart {
123+
border: none;
124+
background-color: black;
125+
color: white;
126+
font-size: 20px;
127+
text-transform: uppercase;
128+
cursor: pointer;
129+
padding: 15px;
130+
width: 100%;
131+
}
132+
133+
.add-to-cart:hover {
134+
border-top: 4px solid black;
135+
background-color: white;
136+
color: black;
137+
}

0 commit comments

Comments
 (0)