Skip to content

Commit 5963d53

Browse files
jamesacox53jamesacox53
committed
Completed CHALLENGE jonasschmedtmann#2 
1 parent 2926a67 commit 5963d53

File tree

4 files changed

+139
-2
lines changed

4 files changed

+139
-2
lines changed

‎myWork/03-CSS-Fundamentals/challenges/challenge1css.css renamed to ‎myWork/03-CSS-Fundamentals/challenges/Challenge1/challenge1css.css

File renamed without changes.

‎myWork/03-CSS-Fundamentals/challenges/challenge1html.html renamed to ‎myWork/03-CSS-Fundamentals/challenges/Challenge1/challenge1html.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Section 2 - Challenge #2</title>
5+
<title>Section 3 - Challenge #1</title>
66
<link href="challenge1css.css" rel="stylesheet" />
77
</head>
88
<body>
99
<article class="product">
1010
<header>
1111
<h2 class="product-name">Converse Chuck Taylor All Star Low Top</h2>
1212
<img
13-
src="../images/challenges.jpg"
13+
src="../../images/challenges.jpg"
1414
alt="Converse Chuck Taylor All Star Low Top"
1515
height="250"
1616
width="250"

‎myWork/03-CSS-Fundamentals/challenges/Challenge2/challenge2css.css

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
.container {
7+
width: 825px;
8+
margin: 5px auto;
9+
}
10+
11+
body {
12+
font-family: sans-serif;
13+
line-height: 1.4;
14+
}
15+
16+
.product {
17+
border: 4px solid black;
18+
}
19+
20+
.product-name {
21+
text-transform: uppercase;
22+
font-size: 22px;
23+
font-weight: bold;
24+
background-color: #f7f7f7;
25+
text-align: center;
26+
padding: 10px 0;
27+
}
28+
29+
.price {
30+
font-size: 18px;
31+
font-weight: bold;
32+
}
33+
34+
.shipping {
35+
text-transform: uppercase;
36+
font-size: 14px;
37+
font-weight: bold;
38+
color: #1098ad;
39+
margin-bottom: 10px;
40+
}
41+
42+
.more-info-link:link,
43+
.more-info-link:visited {
44+
color: black;
45+
}
46+
47+
.more-info-link:hover,
48+
.more-info-link:active {
49+
color: black;
50+
text-decoration: none;
51+
}
52+
53+
.product-details-heading {
54+
text-transform: uppercase;
55+
font-size: 18px;
56+
margin: 30px 0 5px 0;
57+
}
58+
59+
.product-details-list {
60+
list-style-type: square;
61+
margin: 10px 20px;
62+
}
63+
64+
.product-details-list li {
65+
margin-bottom: 5px;
66+
}
67+
68+
.product-details-list li:last-child {
69+
margin-bottom: 0;
70+
}
71+
72+
.add-to-cart-button {
73+
width: 100%;
74+
text-transform: uppercase;
75+
background-color: black;
76+
color: white;
77+
border: none;
78+
border-top: 4px solid black;
79+
font-size: 16px;
80+
cursor: pointer;
81+
padding: 10px 0;
82+
}
83+
84+
.add-to-cart-button:hover {
85+
background-color: white;
86+
color: black;
87+
}
88+
89+
.short-description-text {
90+
margin-bottom: 5px;
91+
}

‎myWork/03-CSS-Fundamentals/challenges/Challenge2/challenge2html.html

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

0 commit comments

Comments
 (0)