Skip to content

Commit bb5cb4c

Browse files
owen-webbowen-webb
committed
section-4: Initialize challenge.
1 parent 697a559 commit bb5cb4c

File tree

2 files changed

+214
-0
lines changed

2 files changed

+214
-0
lines changed

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<header>
4+
<title>Converse</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-title">Converse Chuck Taylor All Star Low Top</h2>
12+
<div class="container clearfix">
13+
<img
14+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
15+
alt="Chuck Taylor All Star Shoe"
16+
height="250"
17+
width="250"
18+
class="product-img"
19+
/>
20+
<div class="product-info">
21+
<p class="price"><strong>$65.00</strong></p>
22+
<p class="shipping">Free shipping</p>
23+
<p class="sale">Sale</p>
24+
25+
<p class="product-description">
26+
Ready to dress up or down, these classic canvas Chucks are an everyday
27+
wardrobe staple.
28+
</p>
29+
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>
30+
31+
<div class="colors">
32+
<div class="color"></div>
33+
<div class="color color-blue"></div>
34+
<div class="color color-red"></div>
35+
<div class="color color-yellow"></div>
36+
<div class="color color-green"></div>
37+
<div class="color color-brown"></div>
38+
</div>
39+
</div>
40+
41+
<div class="product-details">
42+
<h3 class="details-title">Product details</h3>
43+
<ul class="details-list">
44+
<li>Lightweight, durable canvas sneaker</li>
45+
<li>Lightly padded footbed for added comfort</li>
46+
<li>Iconic Chuck Taylor ankle patch.</li>
47+
</ul>
48+
</div>
49+
</div>
50+
<button class="add-cart">Add to cart</button>
51+
</article>
52+
</body>
53+
</html>

‎starter/04-CSS-Layouts/challenge/style.css

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

0 commit comments

Comments
 (0)