Skip to content

Commit 4a1985b

Browse files
gitdagraygitdagray
committed
Added bonus lesson
1 parent 4b4e893 commit 4a1985b

File tree

9 files changed

+639
-0
lines changed

9 files changed

+639
-0
lines changed

‎25_lesson-bonus/css/style.css

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
--HEADER-BGCOLOR: #000;
11+
--HEADER-COLOR: whitesmoke;
12+
}
13+
14+
html {
15+
font-size: 1.5rem;
16+
font-family: 'Nunito', sans-serif;
17+
}
18+
19+
body {
20+
background-color: midnightblue;
21+
background-image: linear-gradient(to right, midnightblue, rebeccapurple);
22+
min-height: 100vh;
23+
display: flex;
24+
flex-flow: column nowrap;
25+
}
26+
27+
header {
28+
color: var(--HEADER-COLOR);
29+
position: sticky;
30+
top: 0;
31+
z-index: 1;
32+
}
33+
34+
.header-title-line {
35+
background-color: var(--HEADER-BGCOLOR);
36+
padding: 0.25rem 0.5rem;
37+
display: flex;
38+
flex-flow: row nowrap;
39+
justify-content: space-between;
40+
}
41+
42+
.menu-button {
43+
background-color: transparent;
44+
border: none;
45+
width: 48px;
46+
height: 48px;
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
position: relative;
51+
}
52+
53+
.closeMenuBtn {
54+
display: none;
55+
background-color: transparent;
56+
outline: none;
57+
/* border: 1px solid red; */
58+
border: none;
59+
position: absolute;
60+
top: 0.25rem;
61+
right: 0.5rem;
62+
width: 48px;
63+
height: 48px;
64+
}
65+
66+
.menu-icon,
67+
.menu-icon::before,
68+
.menu-icon::after {
69+
background-color: var(--HEADER-COLOR);
70+
width: 40px;
71+
height: 5px;
72+
border-radius: 5px;
73+
position: absolute;
74+
transition: all 0.5s;
75+
}
76+
77+
.menu-icon::before,
78+
.menu-icon::after {
79+
content: "";
80+
}
81+
82+
.menu-icon::before {
83+
transform: translate(-20px, -12px);
84+
}
85+
86+
.menu-icon::after {
87+
transform: translate(-20px, 12px);
88+
}
89+
90+
.header-title-line:focus-within .menu-icon {
91+
background-color: transparent;
92+
transform: rotate(720deg)
93+
}
94+
95+
.header-title-line:focus-within .menu-icon::before {
96+
transform: translateX(-20px) rotate(45deg);
97+
}
98+
99+
.header-title-line:focus-within .menu-icon::after {
100+
transform: translateX(-20px) rotate(-45deg);
101+
}
102+
103+
nav {
104+
display: none;
105+
position: relative;
106+
}
107+
108+
header:focus-within nav {
109+
display: block;
110+
transform-origin: top center;
111+
animation: showMenu 0.5s ease-in-out forwards;
112+
}
113+
114+
header:focus-within .closeMenuBtn {
115+
display: block;
116+
}
117+
118+
header:focus-within .closeMenuBtn:focus {
119+
transform: translateX(-50px);
120+
}
121+
122+
.closeMenuBtn:focus+nav {
123+
transform-origin: top center;
124+
animation: hideMenu 0.5s ease forwards;
125+
}
126+
127+
@keyframes showMenu {
128+
0% {
129+
transform: scaleY(0);
130+
}
131+
132+
80% {
133+
transform: scaleY(1.2);
134+
}
135+
136+
100% {
137+
transform: scaleY(1);
138+
}
139+
}
140+
141+
@keyframes hideMenu {
142+
0% {
143+
transform: scaleY(1);
144+
}
145+
146+
20% {
147+
transform: scaleY(1.2);
148+
}
149+
150+
100% {
151+
transform: scaleY(0);
152+
}
153+
}
154+
155+
nav ul {
156+
background-color: var(--HEADER-BGCOLOR);
157+
position: absolute;
158+
width: 100%;
159+
top: 0;
160+
z-index: 1;
161+
list-style-type: none;
162+
display: flex;
163+
flex-flow: column nowrap;
164+
}
165+
166+
nav li {
167+
padding: 0.5rem;
168+
border-top: 1px solid var(--HEADER-COLOR);
169+
}
170+
171+
nav a {
172+
display: block;
173+
text-align: center;
174+
width: 80%;
175+
margin: auto;
176+
}
177+
178+
nav a:any-link {
179+
color: var(--HEADER-COLOR);
180+
font-weight: bold;
181+
text-decoration: none;
182+
}
183+
184+
nav a:hover,
185+
nav a:focus {
186+
transform: scale(1.2);
187+
transition: all 0.3s;
188+
}
189+
190+
main {
191+
flex-grow: 1;
192+
display: grid;
193+
place-content: center;
194+
min-height: 200vh;
195+
}
196+
197+
198+
@media screen and (min-width: 768px) {
199+
.menu-button {
200+
display: none;
201+
}
202+
203+
nav {
204+
display: block;
205+
}
206+
207+
nav ul {
208+
flex-flow: row nowrap;
209+
justify-content: space-evenly;
210+
border-top: 1px solid var(--HEADER-COLOR);
211+
}
212+
213+
nav li {
214+
border-top: none;
215+
}
216+
217+
header:focus-within nav {
218+
animation: none;
219+
}
220+
}

‎25_lesson-bonus/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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 Animated Menu</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<section class="header-title-line">
15+
<h1>Acme Co.</h1>
16+
<button class="menu-button" title="Open Nav Menu">
17+
<div class="menu-icon"></div>
18+
</button>
19+
</section>
20+
21+
<button class="closeMenuBtn" title="Close Nav Menu" tabindex="-1"></button>
22+
23+
<nav>
24+
<ul>
25+
<li><a href="products.html">Products</a></li>
26+
<li><a href="#">Forum</a></li>
27+
<li><a href="#">About</a></li>
28+
<li><a href="#">Contact</a></li>
29+
</ul>
30+
</nav>
31+
</header>
32+
33+
<main>
34+
<p>Hey!</p>
35+
</main>
36+
37+
</body>
38+
39+
</html>

‎25_lesson-bonus/products.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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>Products</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<section class="header-title-line">
15+
<h1>Products</h1>
16+
<button class="menu-button" title="Open Nav Menu">
17+
<div class="menu-icon"></div>
18+
</button>
19+
</section>
20+
21+
<button class="closeMenuBtn" title="Close Nav Menu" tabindex="-1"></button>
22+
23+
<nav>
24+
<ul>
25+
<li><a href="/">Home</a></li>
26+
<li><a href="#">Forum</a></li>
27+
<li><a href="#">About</a></li>
28+
<li><a href="#">Contact</a></li>
29+
</ul>
30+
</nav>
31+
</header>
32+
33+
<main>
34+
35+
</main>
36+
37+
</body>
38+
39+
</html>

0 commit comments

Comments
 (0)