Skip to content

Commit bddf02a

Browse files
owen-webbowen-webb
authored
Merge pull request #3 from owen-webb/section-4
Section 4
2 parents b16f84f + 19d8c84 commit bddf02a

File tree

6 files changed

+457
-30
lines changed

6 files changed

+457
-30
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+
<img
13+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
14+
alt="Chuck Taylor All Star Shoe"
15+
height="250"
16+
width="250"
17+
class="product-img"
18+
/>
19+
<div class="product-info">
20+
<div class="product-info-header">
21+
<p class="price"><strong>$65.00</strong></p>
22+
<p class="shipping">Free shipping</p>
23+
</div>
24+
<p class="sale">Sale</p>
25+
26+
<p class="product-description">
27+
Ready to dress up or down, these classic canvas Chucks are an everyday
28+
wardrobe staple.
29+
</p>
30+
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>
31+
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>
41+
42+
<div class="product-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>
53+
</html>

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

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

‎starter/04-CSS-Layouts/css-grid.html

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@
1111
}
1212
.el--2 {
1313
background-color: orangered;
14+
/* grid-column: 1 / 2; */
15+
/* grid-column: 1 / -1; */
16+
grid-column: 1 / span 1;
17+
grid-row: 2 / 3;
1418
}
1519
.el--3 {
1620
background-color: green;
17-
height: 150px;
21+
/* height: 150px; */
1822
}
1923
.el--4 {
2024
background-color: goldenrod;
@@ -24,35 +28,64 @@
2428
}
2529
.el--6 {
2630
background-color: steelblue;
31+
grid-column: 4 / span 1;
32+
grid-row: 1 / span 2;
2733
}
2834
.el--7 {
2935
background-color: yellow;
3036
}
3137
.el--8 {
3238
background-color: crimson;
39+
grid-column: 2 / 3;
40+
grid-row: 1 / 2;
3341
}
3442

3543
.container--1 {
3644
/* STARTER */
3745
font-family: sans-serif;
3846
background-color: #ddd;
39-
font-size: 40px;
47+
font-size: 32px;
4048
margin: 40px;
49+
height: 500px;
4150

4251
/* CSS GRID */
52+
display: grid;
53+
/* gap: 30px; */
54+
column-gap: 10px;
55+
row-gap: 40px;
56+
/* grid-template-columns: 2fr 1fr 1fr auto; */
57+
grid-template-columns: repeat(4, 1fr);
58+
/* grid-template-rows: 300px 200px; */
59+
grid-template-rows: 1fr 1fr;
4360
}
4461

4562
.container--2 {
4663
/* STARTER */
4764
font-family: sans-serif;
4865
background-color: black;
4966
font-size: 40px;
50-
margin: 100px;
67+
margin: 40px;
5168

52-
width: 1000px;
69+
width: 700px;
5370
height: 600px;
5471

5572
/* CSS GRID */
73+
display: grid;
74+
grid-template-columns: 125px 200px 125px;
75+
grid-template-rows: 250px 100px;
76+
gap: 10px;
77+
78+
/* Align tracks in container. Distribute empty space. */
79+
justify-content: center;
80+
align-content: center;
81+
82+
/* Align items inside cells. */
83+
align-items: center;
84+
justify-items: center;
85+
}
86+
87+
.el--3 {
88+
align-self: end;
5689
}
5790
</style>
5891
</head>

‎starter/04-CSS-Layouts/flexbox.html

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,42 @@
3636
/* STARTER */
3737
font-family: sans-serif;
3838
background-color: #ddd;
39-
font-size: 40px;
39+
font-size: 32px;
4040
margin: 40px;
4141

4242
/* FLEXBOX */
43+
align-items: center;
44+
display: flex;
45+
gap: 10px;
46+
justify-content: flex-start;
47+
}
48+
49+
.el {
50+
51+
/* DEFAULTS:
52+
flex-grow: 0;
53+
flex-shrink: 1;
54+
flex-basis: auto; */
55+
56+
/* flex-basis: 200px; */
57+
/* flex-shrink: 0; */
58+
/* flex-grow: 1; */
59+
flex: 1;
60+
}
61+
62+
.el--1 {
63+
align-self: flex-start;
64+
/* order: 2; */
65+
/* flex-grow: 3; */
66+
}
67+
68+
.el--5 {
69+
align-self: stretch;
70+
order: 1;
71+
}
72+
73+
.el--6 {
74+
order: -1;
4375
}
4476
</style>
4577
</head>

0 commit comments

Comments
 (0)