Skip to content

Commit e8e1b0b

Browse files
jamesacox53jamesacox53
committed
Completed CHALLENGE jonasschmedtmann#1 
1 parent 2b93797 commit e8e1b0b

File tree

2 files changed

+244
-0
lines changed

2 files changed

+244
-0
lines changed

‎myWork/04-CSS-Layouts/challenges/Challenge1/challenge1css.css‎

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

‎myWork/04-CSS-Layouts/challenges/Challenge1/challenge1html.html‎

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

0 commit comments

Comments
 (0)