Skip to content

Commit 0f267c6

Browse files
jamesacox53jamesacox53
committed
Completed CHALLENGE jonasschmedtmann#3 
1 parent 783d6e2 commit 0f267c6

File tree

2 files changed

+206
-0
lines changed

2 files changed

+206
-0
lines changed

‎myWork/03-CSS-Fundamentals/challenges/Challenge3/challenge3css.css

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
.container {
7+
width: 825px;
8+
margin: 5px auto;
9+
10+
position: relative;
11+
}
12+
13+
body {
14+
font-family: sans-serif;
15+
line-height: 1.4;
16+
}
17+
18+
.product {
19+
border: 4px solid black;
20+
}
21+
22+
.product-name {
23+
text-transform: uppercase;
24+
font-size: 22px;
25+
font-weight: bold;
26+
background-color: #f7f7f7;
27+
text-align: center;
28+
padding: 10px 0;
29+
}
30+
31+
.price {
32+
font-size: 18px;
33+
font-weight: bold;
34+
}
35+
36+
.shipping {
37+
text-transform: uppercase;
38+
font-size: 14px;
39+
font-weight: bold;
40+
color: #1098ad;
41+
margin-bottom: 10px;
42+
}
43+
44+
.more-info-link:link,
45+
.more-info-link:visited {
46+
color: black;
47+
}
48+
49+
.more-info-link:hover,
50+
.more-info-link:active {
51+
color: black;
52+
text-decoration: none;
53+
}
54+
55+
.product-details-heading {
56+
text-transform: uppercase;
57+
font-size: 18px;
58+
margin-bottom: 5px;
59+
}
60+
61+
.product-details-list {
62+
list-style-type: square;
63+
margin: 10px 20px;
64+
}
65+
66+
.product-details-list li {
67+
margin-bottom: 5px;
68+
}
69+
70+
.product-details-list li:last-child {
71+
margin-bottom: 0;
72+
}
73+
74+
.add-to-cart-button {
75+
width: 100%;
76+
text-transform: uppercase;
77+
background-color: black;
78+
color: white;
79+
border: none;
80+
border-top: 4px solid black;
81+
font-size: 16px;
82+
cursor: pointer;
83+
padding: 10px 0;
84+
}
85+
86+
.add-to-cart-button:hover {
87+
background-color: white;
88+
color: black;
89+
}
90+
91+
.short-description-text {
92+
margin-bottom: 5px;
93+
}
94+
95+
.sale-banner {
96+
background-color: red;
97+
color: white;
98+
padding: 3px 10px;
99+
font-weight: bold;
100+
letter-spacing: 2px;
101+
left: -15px;
102+
top: 15px;
103+
104+
display: inline-block;
105+
position: absolute;
106+
}
107+
108+
.colors-boxes {
109+
margin-top: 20px;
110+
margin-bottom: 25px;
111+
margin-left: 15px;
112+
}
113+
114+
.colors-boxes .color-box {
115+
margin-right: 15px;
116+
}
117+
118+
.colors-boxes .color-box:last-child {
119+
margin-right: 0px;
120+
}
121+
122+
.color-box {
123+
padding: 15px;
124+
125+
display: inline-block;
126+
}
127+
128+
.black-box {
129+
background-color: black;
130+
}
131+
132+
.blue-box {
133+
background-color: blue;
134+
}
135+
136+
.red-box {
137+
background-color: red;
138+
}
139+
140+
.yellow-box {
141+
background-color: yellow;
142+
}
143+
144+
.light-green-box {
145+
background-color: lightgreen;
146+
}
147+
148+
.dark-green-box {
149+
background-color: darkgreen;
150+
}

‎myWork/03-CSS-Fundamentals/challenges/Challenge3/challenge3html.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Section 3 - Challenge #3</title>
6+
<link href="challenge3css.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<p class="sale-banner">SALE</p>
11+
<article class="product">
12+
<header>
13+
<h2 class="product-name">Converse Chuck Taylor All Star Low Top</h2>
14+
<img
15+
src="../../images/challenges.jpg"
16+
alt="Converse Chuck Taylor All Star Low Top"
17+
height="250"
18+
width="250"
19+
/>
20+
</header>
21+
22+
<h4 class="price">$65.00</h4>
23+
24+
<p class="shipping">Free shipping</p>
25+
26+
<p class="short-description-text">
27+
Ready to dress up or down, these classic canvas Chucks are an everyday
28+
wardrobe staple.
29+
</p>
30+
31+
<a href="#" target="_blank" class="more-info-link"
32+
>More information &rarr;</a
33+
>
34+
35+
<div class="colors-boxes">
36+
<div class="black-box color-box"></div>
37+
<div class="blue-box color-box"></div>
38+
<div class="red-box color-box"></div>
39+
<div class="yellow-box color-box"></div>
40+
<div class="light-green-box color-box"></div>
41+
<div class="dark-green-box color-box"></div>
42+
</div>
43+
44+
<h3 class="product-details-heading">Product details</h3>
45+
46+
<ul class="product-details-list">
47+
<li>Lightweight, durable canvas sneaker</li>
48+
<li>Lightly padded footbed for added comfort</li>
49+
<li>Iconic Chuck Taylor ankle patch</li>
50+
</ul>
51+
52+
<button class="add-to-cart-button">Add to cart</button>
53+
</article>
54+
</div>
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)