Skip to content

Commit f8575cd

Browse files
solygambassolygambas
committed
feat: add cascade layers
1 parent ed6d816 commit f8575cd

File tree

9 files changed

+195
-0
lines changed

9 files changed

+195
-0
lines changed

‎101-cascade layers/index.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!-- Based on CSS Cascade Layers Tutorial by Shaun Pelling - Net Ninja (2023)
2+
see: https://www.youtube.com/playlist?list=PL4cUxeGkcC9jS4SctqK83Ag58a0_UEcE_ -->
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Cascade Layers</title>
8+
<link rel="stylesheet" href="styles/main.css" />
9+
</head>
10+
<body>
11+
<nav class="main-nav container">
12+
<h1>Cascade Layers 101</h1>
13+
<a href="/">Home</a>
14+
<a href="/about">About</a>
15+
<a href="/login" class="btn">Login</a>
16+
</nav>
17+
18+
<main>
19+
<section class="main-content container">
20+
<article>
21+
<h2>Selector Specificity</h2>
22+
<p>
23+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
24+
amet fugit similique reiciendis <a href="/">distinctio</a> enim esse
25+
voluptatibus debitis omnis blanditiis totam laudantium, hic a optio
26+
consequatur repudiandae?
27+
</p>
28+
<p>
29+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
30+
amet fugit similique reiciendis distinctio enim esse voluptatibus
31+
debitis omnis blanditiis totam laudantium, hic a optio consequatur
32+
repudiandae? Hic, at? Lorem ipsum dolor sit amet consectetur,
33+
adipisicing elit. Dicta dolorum architecto quaerat ut ex temporibus
34+
reiciendis laboriosam ea exercitationem praesentium fugit, accusamus
35+
aliquam deleniti sit porro, aliquid laborum culpa officia! Lorem
36+
ipsum dolor sit amet consectetur, adipisicing elit. Inventore animi
37+
itaque nam cumque molestiae temporibus rerum enim autem repudiandae
38+
accusamus, harum, aut dolores iste voluptate id aperiam. Voluptatum,
39+
maiores cumque!
40+
</p>
41+
<p>
42+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
43+
amet fugit similique reiciendis distinctio
44+
<a href="/about">enim</a> esse voluptatibus debitis omnis blanditiis
45+
totam laudantium, hic a optio consequatur repudiandae? Hic, at?
46+
</p>
47+
<p>
48+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
49+
amet fugit similique reiciendis distinctio enim esse voluptatibus
50+
debitis omnis blanditiis totam laudantium, hic a optio consequatur
51+
repudiandae? Hic, at?
52+
</p>
53+
<footer>
54+
<p>Written by Mario 2 hours ago.</p>
55+
<a href="/articles" class="btn">Read More</a>
56+
</footer>
57+
</article>
58+
59+
<div class="grid m-top">
60+
<div class="card">
61+
<h3>CSS Rules!</h3>
62+
<p>
63+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
64+
necessitatibus...
65+
</p>
66+
<a href="/" class="btn">More...</a>
67+
</div>
68+
<div class="card">
69+
<h3>Specificty Headaches</h3>
70+
<p>
71+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
72+
necessitatibus...
73+
</p>
74+
<a href="/" class="btn">More...</a>
75+
</div>
76+
<div class="card">
77+
<h3>Layers to the Rescue!</h3>
78+
<p>
79+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
80+
necessitatibus...
81+
</p>
82+
<a href="/" class="btn">More...</a>
83+
</div>
84+
</div>
85+
</section>
86+
</main>
87+
</body>
88+
</html>

‎101-cascade layers/styles/components.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.card {
2+
background: white;
3+
border-radius: 8px;
4+
padding: 15px;
5+
}
6+
7+
.btn {
8+
background: #1c9f6d;
9+
color: #fff;
10+
padding: 8px 12px;
11+
border-radius: 8px;
12+
text-decoration: none;
13+
display: inline-block;
14+
}

‎101-cascade layers/styles/content.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
h1,
2+
h2,
3+
h3,
4+
p {
5+
color: var(--default);
6+
}
7+
.main-content article a {
8+
color: var(--primary);
9+
background: transparent;
10+
text-decoration: underline;
11+
}
12+
.main-content article p {
13+
line-height: 1.5em;
14+
color: #777;
15+
margin-top: 20px;
16+
}
17+
.main-content article h2 {
18+
margin-bottom: 20px;
19+
}
20+
article footer {
21+
border-top: 1px dashed var(--secondary);
22+
margin: 30px 0px;
23+
display: flex;
24+
align-items: center;
25+
justify-content: space-between;
26+
}

‎101-cascade layers/styles/layout.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.container {
2+
max-width: 1200px;
3+
margin: 0 auto;
4+
}
5+
.main-nav {
6+
padding: 10px 0;
7+
display: flex;
8+
align-items: center;
9+
gap: 20px;
10+
border-bottom: 1px solid var(--secondary);
11+
}
12+
.main-nav a:last-child {
13+
margin-left: auto;
14+
}
15+
article {
16+
margin-top: 40px;
17+
padding: 20px;
18+
background: #fff;
19+
}
20+
.grid {
21+
display: grid;
22+
grid-template-columns: 1fr 1fr 1fr;
23+
gap: 20px;
24+
}

‎101-cascade layers/styles/main.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@layer reset, theme, bulma, layout, content, components, utility;
2+
3+
@import "reset.css" layer(reset);
4+
@import "theme.css" layer(theme);
5+
@import "layout.css" layer(layout);
6+
@import "content.css" layer(content);
7+
@import "components.css" layer(components);
8+
@import "utility.css" layer(utility);
9+
/* @import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
10+
layer(bulma); */

‎101-cascade layers/styles/reset.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap");
2+
3+
body {
4+
font-family: "Rubik";
5+
margin: 20px;
6+
background: var(--secondary);
7+
}
8+
p,
9+
h1,
10+
h2,
11+
h3,
12+
section {
13+
margin: 0 0 10px 0;
14+
padding: 0;
15+
}

‎101-cascade layers/styles/theme.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:root {
2+
--primary: #1c9f6d;
3+
--secondary: #f4f4f4;
4+
--default: #333;
5+
}

‎101-cascade layers/styles/utility.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.rounded {
2+
border-radius: 8px;
3+
}
4+
.underlined {
5+
text-decoration: underline;
6+
}
7+
.m-top {
8+
margin-top: 40px;
9+
}
10+
.center {
11+
text-align: center;
12+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@
106106
| 098 | [Magazine Layout](098-magazine%20layout) | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj) |
107107
| 099 | [Parallax Website](099-parallax%20website) | [Live Demo](https://codepen.io/solygambas/full/poeBdPr) |
108108
| 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone) | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy) |
109+
| 101 | [Cascade Layers](101-cascade%20layers) | [Live Demo](https://codepen.io/solygambas/full/poYaZmv) |
109110

110111
This repository is mostly based on 2 courses by Brad Traversy (2020):
111112

0 commit comments

Comments
 (0)