Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf8575cd

Browse files
committed
feat: add cascade layers
1 parented6d816 commitf8575cd

File tree

9 files changed

+195
-0
lines changed

9 files changed

+195
-0
lines changed

‎101-cascade layers/index.html

Lines changed: 88 additions & 0 deletions
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+
<htmllang="en">
4+
<head>
5+
<metacharset="UTF-8"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<title>Cascade Layers</title>
8+
<linkrel="stylesheet"href="styles/main.css"/>
9+
</head>
10+
<body>
11+
<navclass="main-nav container">
12+
<h1>Cascade Layers 101</h1>
13+
<ahref="/">Home</a>
14+
<ahref="/about">About</a>
15+
<ahref="/login"class="btn">Login</a>
16+
</nav>
17+
18+
<main>
19+
<sectionclass="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<ahref="/">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+
<ahref="/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+
<ahref="/articles"class="btn">Read More</a>
56+
</footer>
57+
</article>
58+
59+
<divclass="grid m-top">
60+
<divclass="card">
61+
<h3>CSS Rules!</h3>
62+
<p>
63+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
64+
necessitatibus...
65+
</p>
66+
<ahref="/"class="btn">More...</a>
67+
</div>
68+
<divclass="card">
69+
<h3>Specificty Headaches</h3>
70+
<p>
71+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste,
72+
necessitatibus...
73+
</p>
74+
<ahref="/"class="btn">More...</a>
75+
</div>
76+
<divclass="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+
<ahref="/"class="btn">More...</a>
83+
</div>
84+
</div>
85+
</section>
86+
</main>
87+
</body>
88+
</html>
Lines changed: 14 additions & 0 deletions
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:8px12px;
11+
border-radius:8px;
12+
text-decoration: none;
13+
display: inline-block;
14+
}

‎101-cascade layers/styles/content.css

Lines changed: 26 additions & 0 deletions
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-contentarticlea {
8+
color:var(--primary);
9+
background: transparent;
10+
text-decoration: underline;
11+
}
12+
.main-contentarticlep {
13+
line-height:1.5em;
14+
color:#777;
15+
margin-top:20px;
16+
}
17+
.main-contentarticleh2 {
18+
margin-bottom:20px;
19+
}
20+
articlefooter {
21+
border-top:1px dashedvar(--secondary);
22+
margin:30px0px;
23+
display: flex;
24+
align-items: center;
25+
justify-content: space-between;
26+
}

‎101-cascade layers/styles/layout.css

Lines changed: 24 additions & 0 deletions
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:10px0;
7+
display: flex;
8+
align-items: center;
9+
gap:20px;
10+
border-bottom:1px solidvar(--secondary);
11+
}
12+
.main-nava: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:1fr1fr1fr;
23+
gap:20px;
24+
}

‎101-cascade layers/styles/main.css

Lines changed: 10 additions & 0 deletions
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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@importurl("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:0010px0;
14+
padding:0;
15+
}

‎101-cascade layers/styles/theme.css

Lines changed: 5 additions & 0 deletions
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

Lines changed: 12 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
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)
[8]ページ先頭
©2009-2025 Movatter.jp