Skip to content

Commit 16fef46

Browse files
gitdagraygitdagray
committed
Added lesson 20
1 parent 0823bf3 commit 16fef46

File tree

4 files changed

+239
-0
lines changed

4 files changed

+239
-0
lines changed

‎20_lesson/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: dark) {
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+
}

‎20_lesson/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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 Variables</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+
<div class="square">
22+
<p>Hey</p>
23+
</div>
24+
<div class="square">💻</div>
25+
<div class="square">💻</div>
26+
<div class="square">💻</div>
27+
<div class="square">💻</div>
28+
<div class="square">💻</div>
29+
<div class="square">💻</div>
30+
<div class="square square--highlight">💻</div>
31+
<div class="square">💻</div>
32+
<div class="square">💻</div>
33+
<div class="square">💻</div>
34+
<div class="square">💻</div>
35+
</main>
36+
37+
<footer>
38+
<h2>Footer</h2>
39+
</footer>
40+
</body>
41+
42+
</html>

‎20_lesson_starter/css/style.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
/* || GENERAL STYLES */
11+
body {
12+
font: 1.5rem "Nunito", sans-serif;
13+
min-height: 100vh;
14+
15+
background-color: #475569;
16+
background-image: radial-gradient(whitesmoke, #475569);
17+
display: flex;
18+
flex-direction: column;
19+
}
20+
21+
header,
22+
nav,
23+
main,
24+
footer {
25+
display: grid;
26+
place-content: center;
27+
grid-template-columns: 100%;
28+
text-align: center;
29+
}
30+
31+
header,
32+
footer {
33+
position: sticky;
34+
background-color: #1E293B;
35+
color: whitesmoke;
36+
}
37+
38+
header {
39+
top: 0;
40+
}
41+
42+
nav {
43+
background-color: #fff;
44+
color: #000;
45+
padding: 0.5rem;
46+
border-bottom: 2px solid #000;
47+
}
48+
49+
main {
50+
flex-grow: 1;
51+
}
52+
53+
footer {
54+
bottom: 0;
55+
}

‎20_lesson_starter/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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 Variables</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+
<h2>Main</h2>
22+
</main>
23+
24+
<footer>
25+
<h2>Footer</h2>
26+
</footer>
27+
</body>
28+
29+
</html>

0 commit comments

Comments
 (0)