Skip to content

Commit bb1c1d6

Browse files
solygambassolygambas
committedJan 21, 2021
add mobile tab navigation
1 parent 536af9e commit bb1c1d6

File tree

4 files changed

+204
-52
lines changed

4 files changed

+204
-52
lines changed
 

‎38-mobile tab navigation/index.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Mobile Tab Navigation</title>
14+
</head>
15+
<body>
16+
<div class="phone">
17+
<img
18+
src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80"
19+
alt="home"
20+
class="content show"
21+
/>
22+
<img
23+
src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
24+
alt="work"
25+
class="content"
26+
/>
27+
<img
28+
src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80"
29+
alt="blog"
30+
class="content"
31+
/>
32+
<img
33+
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
34+
alt="about"
35+
class="content"
36+
/>
37+
<nav>
38+
<ul>
39+
<li class="active">
40+
<i class="fas fa-home"></i>
41+
<p>Home</p>
42+
</li>
43+
<li>
44+
<i class="fas fa-box"></i>
45+
<p>Work</p>
46+
</li>
47+
<li>
48+
<i class="fas fa-book-open"></i>
49+
<p>Blog</p>
50+
</li>
51+
<li>
52+
<i class="fas fa-users"></i>
53+
<p>About Us</p>
54+
</li>
55+
</ul>
56+
</nav>
57+
</div>
58+
<script src="script.js"></script>
59+
</body>
60+
</html>

‎38-mobile tab navigation/script.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const contents = document.querySelectorAll(".content");
2+
const listItems = document.querySelectorAll("nav ul li");
3+
4+
const hideAllContents = () => {
5+
contents.forEach((content) => content.classList.remove("show"));
6+
};
7+
const hideAllItems = () => {
8+
listItems.forEach((item) => item.classList.remove("active"));
9+
};
10+
11+
listItems.forEach((item, index) => {
12+
item.addEventListener("click", () => {
13+
hideAllContents();
14+
hideAllItems();
15+
item.classList.add("active");
16+
contents[index].classList.add("show");
17+
});
18+
});

‎38-mobile tab navigation/style.css

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: rgba(155, 89, 182, 0.7);
9+
font-family: "Open Sans", sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
margin: 0;
15+
}
16+
17+
.phone {
18+
position: relative;
19+
overflow: hidden;
20+
border: 3px solid #eee;
21+
border-radius: 15px;
22+
height: 600px;
23+
width: 340px;
24+
}
25+
26+
.phone .content {
27+
opacity: 0;
28+
object-fit: cover;
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
height: calc(100% - 60px);
33+
width: 100%;
34+
transition: opacity 0.4s ease;
35+
}
36+
37+
.phone .content.show {
38+
opacity: 1;
39+
}
40+
41+
nav {
42+
position: absolute;
43+
bottom: 0;
44+
left: 0;
45+
margin-top: -5px;
46+
width: 100%;
47+
}
48+
49+
nav ul {
50+
background-color: #fff;
51+
display: flex;
52+
list-style-type: none;
53+
padding: 0;
54+
margin: 0;
55+
height: 60px;
56+
}
57+
58+
nav li {
59+
color: #777;
60+
cursor: pointer;
61+
flex: 1;
62+
padding: 10px;
63+
text-align: center;
64+
}
65+
66+
nav ul li p {
67+
font-size: 12px;
68+
margin: 2px 0;
69+
}
70+
71+
nav ul li:hover,
72+
nav ul li.active {
73+
color: #8e44ad;
74+
}

‎README.md

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,57 @@
44

55
[See all projects on CodePen](https://codepen.io/solygambas)
66

7-
| # | Project | Live Demo |
8-
| :-: | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- |
9-
| 01 | [Expanding Cards](https://github.com/solygambas/html-css-fifty-projects/tree/master/01-expanding%20cards) | [Live Demo](https://codepen.io/solygambas/full/qBaMWjE) |
10-
| 02 | [Progress Steps](https://github.com/solygambas/html-css-fifty-projects/tree/master/02-progress%20steps) | [Live Demo](https://codepen.io/solygambas/full/VwKGzzg) |
11-
| 03 | [Rotating Navigation Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/03-rotating%20navigation) | [Live Demo](https://codepen.io/solygambas/full/jOMvZqY) |
12-
| 04 | [Hidden Search Widget](https://github.com/solygambas/html-css-fifty-projects/tree/master/04-hidden%20search%20widget) | [Live Demo](https://codepen.io/solygambas/full/mdrzdPB) |
13-
| 05 | [Blurry Loading](https://github.com/solygambas/html-css-fifty-projects/tree/master/05-blurry%20loading) | [Live Demo](https://codepen.io/solygambas/full/WNGaNgB) |
14-
| 06 | [Scroll Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/06-scroll%20animation) | [Live Demo](https://codepen.io/solygambas/full/JjRmoWL) |
15-
| 07 | [Split Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/07-split%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/KKgGdmY) |
16-
| 08 | [Form Wave](https://github.com/solygambas/html-css-fifty-projects/tree/master/08-form%20wave%20animation) | [Live Demo](https://codepen.io/solygambas/full/Exgdegm) |
17-
| 09 | [Sound Board](https://github.com/solygambas/html-css-fifty-projects/tree/master/09-sound%20board) | [Live Demo](https://codepen.io/solygambas/full/oNzaPQa) |
18-
| 10 | [Dad Jokes](https://github.com/solygambas/html-css-fifty-projects/tree/master/10-dad%20jokes) | [Live Demo](https://codepen.io/solygambas/full/gOwBQZK) |
19-
| 11 | [Event Keycodes](https://github.com/solygambas/html-css-fifty-projects/tree/master/11-event%20KeyCodes) | [Live Demo](https://codepen.io/solygambas/full/zYKmypd) |
20-
| 12 | [FAQ Collapse](https://github.com/solygambas/html-css-fifty-projects/tree/master/12-FAQ%20collapse) | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm) |
21-
| 13 | [Random Choice Picker](https://github.com/solygambas/html-css-fifty-projects/tree/master/13-random%20choice%20picker) | [Live Demo](https://codepen.io/solygambas/full/eYdQgqN) |
22-
| 14 | [Animated Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/14-animated%20navigation) | [Live Demo](https://codepen.io/solygambas/full/KKgrWGz) |
23-
| 15 | [Incrementing Counter](https://github.com/solygambas/html-css-fifty-projects/tree/master/15-incrementing%20counter) | [Live Demo](https://codepen.io/solygambas/full/qBaQmeW) |
24-
| 16 | [Drink Water](https://github.com/solygambas/html-css-fifty-projects/tree/master/16-drink%20water) | [Live Demo](https://codepen.io/solygambas/full/yLaQoJy) |
25-
| 17 | [Movie App](https://github.com/solygambas/html-css-fifty-projects/tree/master/17-movie%20app) | [Live Demo](https://codepen.io/solygambas/full/mdrabXd) |
26-
| 18 | [Background Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/18-background%20slider) | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ) |
27-
| 19 | [Theme Clock](https://github.com/solygambas/html-css-fifty-projects/tree/master/19-theme%20clock) | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy) |
28-
| 20 | [Button Ripple Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/20-button%20ripple%20effect) | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw) |
29-
| 21 | [Drag N Drop](https://github.com/solygambas/html-css-fifty-projects/tree/master/21-drag%20n%20drop) | [Live Demo](https://codepen.io/solygambas/full/RwGEyme) |
30-
| 22 | [Drawing App](https://github.com/solygambas/html-css-fifty-projects/tree/master/22-drawing%20app) | [Live Demo](https://codepen.io/solygambas/full/wvzREMx) |
31-
| 23 | [Kinetic Loader](https://github.com/solygambas/html-css-fifty-projects/tree/master/23-kinetic%20loader) | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW) |
32-
| 24 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/24-content%20placeholder) | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX) |
33-
| 25 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/25-sticky%20navigation) | [Live Demo](https://codepen.io/solygambas/full/VwKqJmw/) |
34-
| 26 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/26-double%20vertical%20slider) | [Live Demo](https://codepen.io/solygambas/full/wvzNwqB) |
35-
| 27 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/27-toast%20notification) | [Live Demo](https://codepen.io/solygambas/full/YzGBNgW) |
36-
| 28 | [GitHub Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/28-github%20profiles) | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR) |
37-
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/29-double%20click%20heart) | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK) |
38-
| 30 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/30-auto%20text%20effect) | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM) |
39-
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/31-password%20generator) | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb) |
40-
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/32-good%20cheap%20fast) | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP) |
41-
| 33 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/33-notes%20app) | [Live Demo](https://codepen.io/solygambas/full/qBavQog) |
42-
| 34 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/34-animated%20countdown) | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW) |
43-
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/35-image%20carousel) | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK) |
44-
| 36 | [Hoverboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/36-hoverboard) | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK) |
45-
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/37-pokedex) | [Live Demo](https://codepen.io/solygambas/full/gOwygyP) |
46-
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/mobile-tab-navigation) | [Live Demo](/mobile-tab-navigation/) |
47-
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-strength-background) | [Live Demo](/password-strength-background/) |
48-
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/40-3D%20boxes%20background) | [Live Demo](/3d-background-boxes/) |
49-
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/verify-account-UI) | [Live Demo](/verify-account-ui/) |
50-
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/42-live%20user%20filter) | [Live Demo](/live-user-filter/) |
51-
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/43-feedback%20UI%20design) | [Live Demo](/feedback-ui-design/) |
52-
| 44 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/custom-range-slider) | [Live Demo](/custom-range-slider/) |
53-
| 45 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/netflix-mobile-navigation) | [Live Demo](/netflix-mobile-navigation/) |
54-
| 46 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/quiz-app) | [Live Demo](/quiz-app/) |
55-
| 47 | [Testimonial Box Switcher](https://github.com/solygambas/html-css-fifty-projects/tree/master/testimonial-box-switcher) | [Live Demo](/testimonial-box-switcher/) |
56-
| 48 | [Random Image Feed](https://github.com/solygambas/html-css-fifty-projects/tree/master/random-image-generator) | [Live Demo](/random-image-feed/) |
57-
| 49 | [Todo List](https://github.com/solygambas/html-css-fifty-projects/tree/master/todo-list) | [Live Demo](/todo-list/) |
58-
| 50 | [Insect Catch Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/insect-catch-game) | [Live Demo](/insect-catch-game/) |
7+
| # | Project | Live Demo |
8+
| :-: | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
9+
| 01 | [Expanding Cards](https://github.com/solygambas/html-css-fifty-projects/tree/master/01-expanding%20cards) | [Live Demo](https://codepen.io/solygambas/full/qBaMWjE) |
10+
| 02 | [Progress Steps](https://github.com/solygambas/html-css-fifty-projects/tree/master/02-progress%20steps) | [Live Demo](https://codepen.io/solygambas/full/VwKGzzg) |
11+
| 03 | [Rotating Navigation Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/03-rotating%20navigation) | [Live Demo](https://codepen.io/solygambas/full/jOMvZqY) |
12+
| 04 | [Hidden Search Widget](https://github.com/solygambas/html-css-fifty-projects/tree/master/04-hidden%20search%20widget) | [Live Demo](https://codepen.io/solygambas/full/mdrzdPB) |
13+
| 05 | [Blurry Loading](https://github.com/solygambas/html-css-fifty-projects/tree/master/05-blurry%20loading) | [Live Demo](https://codepen.io/solygambas/full/WNGaNgB) |
14+
| 06 | [Scroll Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/06-scroll%20animation) | [Live Demo](https://codepen.io/solygambas/full/JjRmoWL) |
15+
| 07 | [Split Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/07-split%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/KKgGdmY) |
16+
| 08 | [Form Wave](https://github.com/solygambas/html-css-fifty-projects/tree/master/08-form%20wave%20animation) | [Live Demo](https://codepen.io/solygambas/full/Exgdegm) |
17+
| 09 | [Sound Board](https://github.com/solygambas/html-css-fifty-projects/tree/master/09-sound%20board) | [Live Demo](https://codepen.io/solygambas/full/oNzaPQa) |
18+
| 10 | [Dad Jokes](https://github.com/solygambas/html-css-fifty-projects/tree/master/10-dad%20jokes) | [Live Demo](https://codepen.io/solygambas/full/gOwBQZK) |
19+
| 11 | [Event Keycodes](https://github.com/solygambas/html-css-fifty-projects/tree/master/11-event%20KeyCodes) | [Live Demo](https://codepen.io/solygambas/full/zYKmypd) |
20+
| 12 | [FAQ Collapse](https://github.com/solygambas/html-css-fifty-projects/tree/master/12-FAQ%20collapse) | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm) |
21+
| 13 | [Random Choice Picker](https://github.com/solygambas/html-css-fifty-projects/tree/master/13-random%20choice%20picker) | [Live Demo](https://codepen.io/solygambas/full/eYdQgqN) |
22+
| 14 | [Animated Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/14-animated%20navigation) | [Live Demo](https://codepen.io/solygambas/full/KKgrWGz) |
23+
| 15 | [Incrementing Counter](https://github.com/solygambas/html-css-fifty-projects/tree/master/15-incrementing%20counter) | [Live Demo](https://codepen.io/solygambas/full/qBaQmeW) |
24+
| 16 | [Drink Water](https://github.com/solygambas/html-css-fifty-projects/tree/master/16-drink%20water) | [Live Demo](https://codepen.io/solygambas/full/yLaQoJy) |
25+
| 17 | [Movie App](https://github.com/solygambas/html-css-fifty-projects/tree/master/17-movie%20app) | [Live Demo](https://codepen.io/solygambas/full/mdrabXd) |
26+
| 18 | [Background Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/18-background%20slider) | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ) |
27+
| 19 | [Theme Clock](https://github.com/solygambas/html-css-fifty-projects/tree/master/19-theme%20clock) | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy) |
28+
| 20 | [Button Ripple Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/20-button%20ripple%20effect) | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw) |
29+
| 21 | [Drag N Drop](https://github.com/solygambas/html-css-fifty-projects/tree/master/21-drag%20n%20drop) | [Live Demo](https://codepen.io/solygambas/full/RwGEyme) |
30+
| 22 | [Drawing App](https://github.com/solygambas/html-css-fifty-projects/tree/master/22-drawing%20app) | [Live Demo](https://codepen.io/solygambas/full/wvzREMx) |
31+
| 23 | [Kinetic Loader](https://github.com/solygambas/html-css-fifty-projects/tree/master/23-kinetic%20loader) | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW) |
32+
| 24 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/24-content%20placeholder) | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX) |
33+
| 25 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/25-sticky%20navigation) | [Live Demo](https://codepen.io/solygambas/full/VwKqJmw/) |
34+
| 26 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/26-double%20vertical%20slider) | [Live Demo](https://codepen.io/solygambas/full/wvzNwqB) |
35+
| 27 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/27-toast%20notification) | [Live Demo](https://codepen.io/solygambas/full/YzGBNgW) |
36+
| 28 | [GitHub Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/28-github%20profiles) | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR) |
37+
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/29-double%20click%20heart) | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK) |
38+
| 30 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/30-auto%20text%20effect) | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM) |
39+
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/31-password%20generator) | [Live Demo](https://codepen.io/solygambas/full/rNMRvWb) |
40+
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/32-good%20cheap%20fast) | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP) |
41+
| 33 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/33-notes%20app) | [Live Demo](https://codepen.io/solygambas/full/qBavQog) |
42+
| 34 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/34-animated%20countdown) | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW) |
43+
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/35-image%20carousel) | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK) |
44+
| 36 | [Hoverboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/36-hoverboard) | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK) |
45+
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/37-pokedex) | [Live Demo](https://codepen.io/solygambas/full/gOwygyP) |
46+
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/38-mobile%20tab%20navigation) | [Live Demo](/mobile-tab-navigation/) |
47+
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/39-password%20strength%20background) | [Live Demo](/password-strength-background/) |
48+
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/40-3D%20boxes%20background) | [Live Demo](/3d-background-boxes/) |
49+
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/41-verify%20account%20UI) | [Live Demo](/verify-account-ui/) |
50+
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/42-live%20user%20filter) | [Live Demo](/live-user-filter/) |
51+
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/43-feedback%20UI%20design) | [Live Demo](/feedback-ui-design/) |
52+
| 44 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/44-custom%20range%20slider) | [Live Demo](/custom-range-slider/) |
53+
| 45 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/45-netflix%20mobile%20navigation) | [Live Demo](/netflix-mobile-navigation/) |
54+
| 46 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/46-quiz%20app) | [Live Demo](/quiz-app/) |
55+
| 47 | [Testimonial Box Switcher](https://github.com/solygambas/html-css-fifty-projects/tree/master/47-testimonial%20box%20switcher) | [Live Demo](/testimonial-box-switcher/) |
56+
| 48 | [Random Image Feed](https://github.com/solygambas/html-css-fifty-projects/tree/master/48-random%20image%20generator) | [Live Demo](/random-image-feed/) |
57+
| 49 | [Todo List](https://github.com/solygambas/html-css-fifty-projects/tree/master/49-todo%20list) | [Live Demo](/todo-list/) |
58+
| 50 | [Insect Catch Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/50-insect%20catch%20game) | [Live Demo](/insect-catch-game/) |
5959

6060
Based on [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/) by Brad Traversy (2020).

0 commit comments

Comments
 (0)
Please sign in to comment.