Skip to content

Commit 702be82

Browse files
gitdagraygitdagray
committed
Added lesson 21
1 parent 1777aa0 commit 702be82

File tree

4 files changed

+397
-0
lines changed

4 files changed

+397
-0
lines changed

‎21_lesson/css/style.css

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
2+
3+
/* || RESET */
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
/* || VARIABLES */
11+
:root {
12+
/* FONT */
13+
--FF: "Nunito", sans-serif;
14+
--FS: clamp(1.75rem, 3vh, 2.25rem);
15+
--FS-SM: clamp(1.25rem, 2vh, 1.5rem);
16+
--FS-XL: 3rem;
17+
18+
/* COLOR */
19+
--BGCOLOR: #475569;
20+
--ALT-BGCOLOR: #1E293B;
21+
--RADIAL-COLOR: whitesmoke;
22+
--LIGHT-COLOR: whitesmoke;
23+
--DARK-COLOR: #000;
24+
25+
/* SQUARE */
26+
--SQUARE-BGCOLOR: papayawhip;
27+
--SQUARE-SIZE: max(150px, 20vw);
28+
29+
/* GENERAL */
30+
--PADDING: 0.5em;
31+
--SHADOWS: 0 6px 5px -5px var(--DARK-COLOR);
32+
--BORDERS: 2px solid var(--DARK-COLOR);
33+
}
34+
35+
@media (prefers-color-scheme: light) {
36+
:root {
37+
--BGCOLOR: #000;
38+
--ALT-BGCOLOR: #333;
39+
--RADIAL-COLOR: rgb(217, 217, 217);
40+
--SQUARE-BGCOLOR: rgb(202, 174, 202);
41+
}
42+
}
43+
44+
/* || GENERAL STYLES */
45+
body {
46+
font: var(--FS) var(--FF);
47+
min-height: 100vh;
48+
49+
background-color: var(--BGCOLOR);
50+
background-image: radial-gradient(var(--RADIAL-COLOR), var(--BGCOLOR));
51+
display: flex;
52+
flex-direction: column;
53+
}
54+
55+
header,
56+
nav,
57+
footer {
58+
display: grid;
59+
place-content: center;
60+
grid-template-columns: 100%;
61+
text-align: center;
62+
}
63+
64+
header,
65+
footer {
66+
position: sticky;
67+
background-color: var(--ALT-BGCOLOR);
68+
color: var(--LIGHT-COLOR);
69+
}
70+
71+
header {
72+
top: 0;
73+
}
74+
75+
nav {
76+
background-color: var(--LIGHT-COLOR);
77+
color: var(--DARK-COLOR);
78+
border-bottom: var(--BORDERS);
79+
box-shadow: var(--SHADOWS);
80+
}
81+
82+
main {
83+
flex-grow: 1;
84+
padding: var(--PADDING);
85+
display: grid;
86+
grid-template-columns: repeat(4, minmax(100px, 300px));
87+
gap: min(2vw, 20px);
88+
/* display: flex;
89+
flex-flow: column nowrap;
90+
justify-content: flex-start; */
91+
}
92+
93+
main section {
94+
flex-grow: 1;
95+
padding: var(--PADDING);
96+
}
97+
98+
main aside {
99+
background-color: hsla(0, 0%, 20%, 0.8);
100+
color: var(--LIGHT-COLOR);
101+
font-size: var(--FS-SM);
102+
font-style: italic;
103+
padding: var(--PADDING);
104+
}
105+
106+
.content {
107+
margin-top: 20px;
108+
}
109+
110+
.tooltip {
111+
border-bottom: 1px dashed orange;
112+
position: relative;
113+
}
114+
115+
.tooltip:hover::before {
116+
content: attr(data-tooltip);
117+
position: absolute;
118+
top: -20px;
119+
white-space: nowrap;
120+
background-color: var(--DARK-COLOR);
121+
padding: var(--PADDING);
122+
border-radius: 15px;
123+
}
124+
125+
footer {
126+
bottom: 0;
127+
}
128+
129+
a:any-link {
130+
color: firebrick;
131+
}
132+
133+
a:hover,
134+
a:focus {
135+
filter: brightness(150%);
136+
}
137+
138+
/* || FEATURES */
139+
140+
.square--highlight {
141+
--SQUARE-BGCOLOR: cornflowerblue;
142+
}
143+
144+
.square {
145+
background-color: var(--SQUARE-BGCOLOR);
146+
border: var(--BORDERS);
147+
border-radius: 15px;
148+
display: grid;
149+
place-content: center;
150+
font-size: var(--FS-XL);
151+
box-shadow: var(--SHADOWS);
152+
}
153+
154+
@media screen and (min-width: 576px) {
155+
main {
156+
flex-flow: row nowrap;
157+
justify-content: space-between;
158+
}
159+
160+
main section {
161+
width: calc(70% - 5px);
162+
}
163+
164+
main aside {
165+
width: calc(30% - 5px);
166+
}
167+
}

‎21_lesson/index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>CSS Functions</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>Header</h1>
15+
<nav>
16+
<h2>Nav</h2>
17+
</nav>
18+
</header>
19+
20+
<main>
21+
<!-- <section>
22+
<h2>My Heading</h2>
23+
<p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo aperiam porro, odio
24+
mollitia suscipit eius
25+
similique corrupti! Facere nihil cum recusandae officia autem tenetur suscipit exercitationem atque
26+
tempora
27+
molestiae.
28+
</p>
29+
<br>
30+
<a href="https://www.google.com/">Google</a>
31+
</section>
32+
<aside>
33+
<h2>Aside</h2>
34+
<p class="content">
35+
<span class="tooltip" data-tooltip="This is Latin">Lorem</span> ipsum dolor sit amet consectetur
36+
adipisicing elit. Modi quo aperiam porro, odio
37+
mollitia suscipit eius
38+
similique corrupti! Facere nihil cum recusandae officia autem tenetur suscipit exercitationem atque
39+
tempora
40+
molestiae.
41+
</p>
42+
</aside> -->
43+
<div class="square">
44+
<p>Hey</p>
45+
</div>
46+
<div class="square">💻</div>
47+
<div class="square">💻</div>
48+
<div class="square">💻</div>
49+
<div class="square">💻</div>
50+
<div class="square">💻</div>
51+
<div class="square">💻</div>
52+
<div class="square square--highlight">💻</div>
53+
<div class="square">💻</div>
54+
<div class="square">💻</div>
55+
<div class="square">💻</div>
56+
<div class="square">💻</div>
57+
</main>
58+
59+
<footer>
60+
<h2>Footer</h2>
61+
</footer>
62+
</body>
63+
64+
</html>

‎21_lesson_starter/css/style.css

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
2+
3+
/* || RESET */
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
/* || VARIABLES */
11+
:root {
12+
/* FONT */
13+
--FF: "Nunito", sans-serif;
14+
--FS: 1.5rem;
15+
--FS-XL: 3rem;
16+
17+
/* COLOR */
18+
--BGCOLOR: #475569;
19+
--ALT-BGCOLOR: #1E293B;
20+
--RADIAL-COLOR: whitesmoke;
21+
--LIGHT-COLOR: whitesmoke;
22+
--DARK-COLOR: #000;
23+
24+
/* SQUARE */
25+
--SQUARE-BGCOLOR: papayawhip;
26+
--SQUARE-SIZE: max(150px, 20vw);
27+
28+
/* GENERAL */
29+
--PADDING: 0.5rem;
30+
--SHADOWS: 0 6px 5px -5px var(--DARK-COLOR);
31+
--BORDERS: 2px solid var(--DARK-COLOR);
32+
}
33+
34+
@media (prefers-color-scheme: light) {
35+
:root {
36+
--BGCOLOR: #000;
37+
--ALT-BGCOLOR: #333;
38+
--RADIAL-COLOR: rgb(217, 217, 217);
39+
--SQUARE-BGCOLOR: rgb(202, 174, 202);
40+
}
41+
}
42+
43+
/* || GENERAL STYLES */
44+
body {
45+
font: var(--FS) var(--FF);
46+
min-height: 100vh;
47+
48+
background-color: var(--BGCOLOR);
49+
background-image: radial-gradient(var(--RADIAL-COLOR), var(--BGCOLOR));
50+
display: flex;
51+
flex-direction: column;
52+
}
53+
54+
header,
55+
nav,
56+
footer {
57+
display: grid;
58+
place-content: center;
59+
grid-template-columns: 100%;
60+
text-align: center;
61+
}
62+
63+
header,
64+
footer {
65+
position: sticky;
66+
background-color: var(--ALT-BGCOLOR);
67+
color: var(--LIGHT-COLOR);
68+
}
69+
70+
header {
71+
top: 0;
72+
}
73+
74+
nav {
75+
background-color: var(--LIGHT-COLOR);
76+
color: var(--DARK-COLOR);
77+
padding: var(--PADDING);
78+
border-bottom: var(--BORDERS);
79+
box-shadow: var(--SHADOWS);
80+
}
81+
82+
main {
83+
flex-grow: 1;
84+
85+
padding: 10px 0;
86+
display: flex;
87+
justify-content: space-evenly;
88+
align-items: center;
89+
flex-flow: row wrap;
90+
gap: min(4vw, 15px);
91+
}
92+
93+
footer {
94+
bottom: 0;
95+
}
96+
97+
/* || FEATURES */
98+
99+
.square--highlight {
100+
--SQUARE-BGCOLOR: cornflowerblue;
101+
}
102+
103+
.square {
104+
background-color: var(--SQUARE-BGCOLOR);
105+
width: var(--SQUARE-SIZE);
106+
height: var(--SQUARE-SIZE);
107+
border: var(--BORDERS);
108+
border-radius: 15px;
109+
display: grid;
110+
place-content: center;
111+
font-size: var(--FS-XL);
112+
box-shadow: var(--SHADOWS);
113+
}

0 commit comments

Comments
 (0)