Skip to content

Commit 5137cf4

Browse files
MandoCastilloMandoCastillo
committed
Challenge 1 section 4
1 parent f1eafb1 commit 5137cf4

File tree

4 files changed

+101
-42
lines changed

4 files changed

+101
-42
lines changed

‎.idea/git_toolbox_prj.xml

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/prettier.xml

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎challenge/index.html

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,53 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<link rel="stylesheet" href="styles.css">
6-
<title>Title</title>
7-
</head>
8-
<body>
9-
<article class="product">
10-
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
11-
<img
12-
src="https://i.imgur.com/ZrTU3VK.jpeg"
13-
alt="Chuck Taylor All Star Shoe"
14-
height="250"
15-
width="250"
16-
/>
17-
<p class="price"><strong>$65.00</strong></p>
18-
<p class="shipping">Free shipping</p>
19-
<p class="sale">Sale</p>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="stylesheet" href="styles.css" />
6+
<title>Challenge S4- C1</title>
7+
</head>
8+
<body>
9+
<article class="product">
10+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
11+
<div class="container container-image">
12+
<img
13+
src="https://i.imgur.com/ZrTU3VK.jpeg"
14+
alt="Chuck Taylor All Star Shoe"
15+
height="250"
16+
width="250"
17+
/>
18+
</div>
19+
<div class="container container-price">
20+
<p class="price"><strong>$65.00</strong></p>
21+
<p class="shipping">Free shipping</p>
22+
<p class="sale">Sale</p>
2023

21-
<p class="product-description">
22-
Ready to dress up or down, these classic canvas Chucks are an everyday
23-
wardrobe staple.
24-
</p>
25-
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>
24+
<p class="product-description">
25+
Ready to dress up or down, these classic canvas Chucks are an everyday
26+
wardrobe staple.
27+
</p>
28+
<a href="https://converse.com" target="_blank" class="more-info"
29+
>More information &rarr;</a
30+
>
2631

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>
32+
<div class="colors">
33+
<div class="color"></div>
34+
<div class="color color-blue"></div>
35+
<div class="color color-red"></div>
36+
<div class="color color-yellow"></div>
37+
<div class="color color-green"></div>
38+
<div class="color color-brown"></div>
39+
</div>
40+
</div>
3541

36-
<h3 class="details-title">Product details</h3>
37-
<ul class="details-list">
38-
<li>Lightweight, durable canvas sneaker</li>
39-
<li>Lightly padded footbed for added comfort</li>
40-
<li>Iconic Chuck Taylor ankle patch.</li>
41-
</ul>
42-
<button class="add-cart">Add to cart</button>
43-
</article>
44-
</body>
42+
<div class="container container-details">
43+
<h3 class="details-title">Product details</h3>
44+
<ul class="details-list">
45+
<li>Lightweight, durable canvas sneaker</li>
46+
<li>Lightly padded footbed for added comfort</li>
47+
<li>Iconic Chuck Taylor ankle patch.</li>
48+
</ul>
49+
</div>
50+
<button class="add-cart">Add to cart</button>
51+
</article>
52+
</body>
4553
</html>

‎challenge/styles.css

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,26 @@ body {
1010
background: #b9a3a3;
1111
}
1212

13+
/* Container */
14+
.container {
15+
width: 240px;
16+
float: left;
17+
}
18+
19+
.container-image {
20+
width: 250px;
21+
height: 250px;
22+
}
23+
24+
.container-price {
25+
margin-top: 20px;
26+
margin-left: 50px;
27+
}
28+
29+
.container-details {
30+
margin-left: 30px;
31+
}
32+
1333
/* PRODUCT */
1434
.product {
1535
border: 4px solid black;
@@ -29,6 +49,11 @@ body {
2949
/* PRODUCT INFORMATION */
3050
.price {
3151
font-size: 24px;
52+
float: left;
53+
}
54+
55+
.product-description {
56+
clear: both;
3257
}
3358

3459
.shipping {
@@ -37,6 +62,8 @@ body {
3762
font-weight: bold;
3863
color: #777;
3964
margin-bottom: 20px;
65+
float: right;
66+
margin-top: 5px;
4067
}
4168

4269
.sale {
@@ -56,13 +83,15 @@ body {
5683
text-align: center; */
5784
}
5885

59-
.more-info:link, .more-info:visited {
86+
.more-info:link,
87+
.more-info:visited {
6088
color: black;
6189
margin-bottom: 30px;
6290
display: inline-block;
6391
}
6492

65-
.more-info:hover, .more-info:active {
93+
.more-info:hover,
94+
.more-info:active {
6695
text-decoration: none;
6796
}
6897

@@ -99,7 +128,7 @@ body {
99128
text-transform: uppercase;
100129
font-size: 16px;
101130
margin-bottom: 15px;
102-
margin-top: 30px;
131+
margin-top: 20px;
103132
}
104133

105134
.details-list {

0 commit comments

Comments
 (0)