Skip to content

Commit 33421f8

Browse files
ronanmoriartyRonan
ronanmoriarty
and
Ronan
authored
Section 3: CSS Fundamentals (#3)
* Add text styles * Refactor to group selectors using same font-family and add nested selectors * Add id and class selectors * Add colour * Add pseudo-classes * Style hyperlinks * Resolving conflicts * Inheritance and the universal selector * Copy challenge-2.html for start of challenge-3 * Challenge 3 * Add margins and padding * Add width and height * Centre page * Rename old challenge as challenge-2 and put in separate folder * Copy challenge-2 as start of challenge-3 * Copy images to challenge folders too * Challenge-3 attempt * Minor amendments to challenge-3 as per video * Box types * Absolute positioning * Copy challenge 3 for start of challenge 4 * Challenge 4 * Align challenge 4 with solution in video * Pseudo elements --------- Co-authored-by: Ronan <ronan.moriarty@justeattakeaway.com>
1 parent c4ace47 commit 33421f8

29 files changed

+770
-122
lines changed

‎starter/03-CSS-Fundamentals/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.formatOnSave": true
3+
}

‎starter/03-CSS-Fundamentals/challenge-2/img/challenges.jpg‎

120 KB
Loading

‎starter/03-CSS-Fundamentals/challenge-2/img/laura-jones.jpg‎

6.64 KB
Loading

‎starter/03-CSS-Fundamentals/challenge-2/img/post-img.jpg‎

53.4 KB
Loading

‎starter/03-CSS-Fundamentals/challenge-2/img/related-1.jpg‎

50.2 KB
Loading

‎starter/03-CSS-Fundamentals/challenge-2/img/related-2.jpg‎

33 KB
Loading

‎starter/03-CSS-Fundamentals/challenge-2/img/related-3.jpg‎

43.5 KB
Loading

‎starter/03-CSS-Fundamentals/challenge-2/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Challenge 3</title>
5+
<link rel="stylesheet" href="styles.css">
6+
</head>
7+
<body>
8+
<article>
9+
<h2>Converse Chuck Taylor All Star Low Top</h2>
10+
<img
11+
src="img/challenges.jpg"
12+
alt="Chuck Taylor All Star Shoe"
13+
width="250"
14+
height="250"
15+
/>
16+
<p class="price"><strong>$65.00</strong></p>
17+
<p class="shipping">Free shipping</p>
18+
<p>
19+
Ready to dress up or down, these classic canvas Chucks are an everyday
20+
wardrobe staple.
21+
</p>
22+
<p><a class="more-info" href="#">More information &rarr;</a></p>
23+
<h3 class="details-title">Product details</h3>
24+
<ul class="details-list">
25+
<li>Lightweight, durable canvas sneaker</li>
26+
<li>Lightly padded footbed for added comfort</li>
27+
<li>Iconic Chuck Taylor ankle patch</li>
28+
</ul>
29+
<button class="add-to-cart">Add to cart</button>
30+
</article>
31+
</body>
32+
</html>

‎starter/03-CSS-Fundamentals/challenge-2/styles.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
body {
2+
font-family: sans-serif;
3+
font-size: 14px;
4+
}
5+
6+
article {
7+
border: 5px solid black;
8+
}
9+
10+
h2 {
11+
text-align: center;
12+
background-color: #eee;
13+
}
14+
15+
.price {
16+
font-size: 20px;
17+
}
18+
19+
.shipping {
20+
text-transform: uppercase;
21+
color: #aaa;
22+
font-size: 12px;
23+
font-weight: bold;
24+
}
25+
26+
.more-info:link, .more-info:visited {
27+
color: black;
28+
}
29+
30+
.more-info:hover, .more-info:active {
31+
text-decoration: none;
32+
}
33+
34+
/* Product Details */
35+
36+
.details-title {
37+
text-transform: uppercase;
38+
font-size: 16px;
39+
}
40+
41+
.details-list {
42+
list-style-type:square;
43+
}
44+
45+
/* Button */
46+
47+
.add-to-cart {
48+
border: none;
49+
background-color: black;
50+
color: white;
51+
font-size: 20px;
52+
text-transform: uppercase;
53+
cursor: pointer;
54+
}
55+
56+
.add-to-cart:hover {
57+
background-color: white;
58+
color: black;
59+
}

‎starter/03-CSS-Fundamentals/challenge-3/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.formatOnSave": true
3+
}

0 commit comments

Comments
 (0)