Skip to content

Commit a4be2ad

Browse files
thomascweithomascwei
committed
.
1 parent 7bd47b8 commit a4be2ad

File tree

6 files changed

+277
-176
lines changed

6 files changed

+277
-176
lines changed

‎starter/02-HTML-Fundamentals/challenge.html

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,33 @@
99
<body>
1010
<article>
1111
<h2>Converse low Top</h2>
12-
<img
13-
class="product-img"
14-
src="./img/challenges.jpg"
15-
alt="challenges"
16-
width="250"
17-
/>
18-
<div class="product-info">
19-
<p class="price"><strong>$60.0</strong></p>
20-
<p class="shipping">Free shipping</p>
21-
<div class="clear-fix"></div>
22-
<a class="more-info" href="#">More Information &rarr;</a>
23-
<div class="color-pick">
24-
<div class="color"></div>
25-
<div class="color color-red"></div>
26-
<div class="color color-green"></div>
12+
<div class="row">
13+
<img
14+
class="product-img"
15+
src="./img/challenges.jpg"
16+
alt="challenges"
17+
width="250"
18+
/>
19+
<div class="product-info">
20+
<div class="price-ship-row">
21+
<p class="price"><strong>$60.0</strong></p>
22+
<p class="shipping">Free shipping</p>
23+
</div>
24+
<a class="more-info" href="#">More Information &rarr;</a>
25+
<div class="color-pick">
26+
<div class="color"></div>
27+
<div class="color color-red"></div>
28+
<div class="color color-green"></div>
29+
</div>
2730
</div>
28-
</div>
2931

30-
<div class="product-detail">
31-
<h3 class="detail-title">Product details</h3>
32-
<ul class="detail-list">
33-
<li>light</li>
34-
<li>comfort</li>
35-
</ul>
32+
<div class="product-detail">
33+
<h3 class="detail-title">Product details</h3>
34+
<ul class="detail-list">
35+
<li>light</li>
36+
<li>comfort</li>
37+
</ul>
38+
</div>
3639
</div>
3740
</article>
3841
<button class="cart">add to cart</button>

‎starter/02-HTML-Fundamentals/style.css

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,30 @@ h2 {
1616
padding: 10px;
1717
}
1818
.product-img {
19-
float: left;
20-
margin-right: 20px;
19+
/* margin-right: 20px; */
2120
}
2221

2322
.product-info {
24-
width: 243px;
25-
float: left;
26-
margin-right: 20px;
23+
flex: 1;
24+
/* margin-right: 20px; */
2725
margin-top: 20px;
2826
}
2927
.product-detail {
30-
width: 243px;
31-
float: left;
3228
margin-top: 20px;
29+
flex: 1;
3330
}
3431

3532
.price {
3633
font-weight: bold;
3734
font-size: 25px;
38-
float: left;
3935
}
4036

4137
.shipping {
4238
text-transform: uppercase;
4339
font-weight: bold;
4440
color: #777;
45-
margin-bottom: 10px;
46-
margin-top: 5px;
47-
48-
float: right;
4941
}
5042

51-
.clear-fix {
52-
clear: both;
53-
}
5443
.more-info:link {
5544
display: inline-block;
5645
margin-bottom: 30px;
@@ -100,16 +89,13 @@ h2 {
10089
left: -30px;
10190
letter-spacing: 2px;
10291
padding: 5px;
103-
display: inline-block;
10492
}
10593

10694
.color {
10795
background-color: #000;
10896
width: 20px;
10997
height: 20px;
11098
margin-bottom: 0;
111-
margin-right: 20px;
112-
display: inline-block;
11399
}
114100

115101
.color-red {
@@ -118,3 +104,20 @@ h2 {
118104
.color-green {
119105
background-color: green;
120106
}
107+
108+
.row {
109+
display: flex;
110+
align-items: flex-start;
111+
/* justify-content: space-between; */
112+
gap: 40px;
113+
}
114+
.color-pick {
115+
display: flex;
116+
gap: 20px;
117+
}
118+
119+
.price-ship-row {
120+
display: flex;
121+
justify-content: space-between;
122+
align-items: center;
123+
}

‎starter/03-CSS-Fundamentals/css-grid.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,30 @@
4040
margin: 40px;
4141

4242
/* CSS GRID */
43+
display: grid;
44+
grid-template-columns: repeat(4, 1fr);
45+
/* grid-template-rows: 300px 200px; */
46+
grid-template-rows: 1fr 1fr;
47+
/* gap: 30px; */
48+
column-gap: 30px;
49+
row-gap: 60px;
50+
}
51+
52+
.el--8 {
53+
grid-column: 2/ 3;
54+
grid-row: 1 / 2;
55+
}
56+
57+
.el--2 {
58+
/* grid-column: 1 / span 2; */
59+
grid-column: 1 / 2;
60+
61+
grid-row: 2/3;
4362
}
4463

4564
.container--2 {
4665
/* STARTER */
66+
display: none;
4767
font-family: sans-serif;
4868
background-color: black;
4969
font-size: 40px;

‎starter/03-CSS-Fundamentals/flexbox.html

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,29 @@
4242
/* FLEXBOX */
4343
display: flex;
4444
align-items: center;
45-
justify-content: center;
45+
justify-content: flex-start;
46+
gap: 10px;
47+
}
48+
.el {
49+
/*
50+
default:
51+
flex-grow: 0;
52+
flex-shrink: 1;
53+
flex-basis: auto;
54+
*/
55+
/* flex-basis: 200px; */
56+
flex: 1;
57+
}
58+
.el--1 {
59+
align-self: flex-start;
60+
/* flex-grow: 5; */
61+
}
62+
.el--5 {
63+
align-self: stretch;
64+
order: 1;
65+
}
66+
.el--6 {
67+
order: -1;
4668
}
4769
</style>
4870
</head>

0 commit comments

Comments
 (0)