Skip to content

Commit 5e9a75f

Browse files
author
Ronan
committed
Copy challenge-1 to challenge-2
1 parent 895196f commit 5e9a75f

File tree

9 files changed

+228
-0
lines changed

9 files changed

+228
-0
lines changed

‎starter/04-CSS-Layouts/challenge-2/.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-2/img/challenges.jpg‎

120 KB
Loading

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

6.64 KB
Loading

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

53.4 KB
Loading

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

50.2 KB
Loading

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

33 KB
Loading

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

43.5 KB
Loading

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

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

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

0 commit comments

Comments
 (0)