Skip to content

Commit d67b5df

Browse files
HuXn-WebDevHuXn-WebDev
committed
Rounded Navbar Using HTML CSS and Javascript
1 parent 0bb0c0c commit d67b5df

File tree

3 files changed

+149
-0
lines changed

3 files changed

+149
-0
lines changed

‎52. Rounded Navbar/app.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
document.querySelector(".navbar-btn").addEventListener("click", () => {
2+
document.querySelector(".navbar-wrapper").classList.toggle("change");
3+
});

‎52. Rounded Navbar/index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Rounded Navbar</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
10+
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
11+
crossorigin="anonymous"
12+
referrerpolicy="no-referrer"
13+
/>
14+
<link rel="stylesheet" href="style.css" />
15+
</head>
16+
<body>
17+
<div class="navbar-wrapper">
18+
<div class="navbar">
19+
<a href="" class="navbar-link">
20+
<i class="fas fa-home"></i>
21+
</a>
22+
<a href="" class="navbar-link">
23+
<i class="fas fa-city"></i>
24+
</a>
25+
<a href="" class="navbar-link">
26+
<i class="fas fa-school"></i>
27+
</a>
28+
<a href="" class="navbar-link">
29+
<i class="fas fa-landmark"></i>
30+
</a>
31+
<a href="" class="navbar-link">
32+
<i class="fas fa-hotel"></i>
33+
</a>
34+
<a href="" class="navbar-link">
35+
<i class="fas fa-store-alt"></i>
36+
</a>
37+
</div>
38+
<div class="navbar-btn">
39+
<i class="fas fa-plus"></i>
40+
</div>
41+
</div>
42+
43+
<script src="app.js"></script>
44+
</body>
45+
</html>

‎52. Rounded Navbar/style.css

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
html {
7+
font-size: 62.5%;
8+
}
9+
10+
.navbar-wrapper {
11+
width: 100%;
12+
height: 100vh;
13+
background: #eccc68;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.navbar {
20+
width: 20rem;
21+
height: 20rem;
22+
background-color: #fd7272;
23+
position: relative;
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
border-radius: 50%;
28+
transform: scale(0) rotate(-180deg);
29+
transition: transfrom 0.5s;
30+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0) 0.23;
31+
}
32+
33+
.change .navbar {
34+
transform: scale(1) rotate(0);
35+
transition: all 1s;
36+
}
37+
38+
.navbar-link {
39+
position: absolute;
40+
}
41+
42+
.navbar-link i {
43+
font-size: 2.5rem;
44+
color: #fff;
45+
transition: color 0.3s;
46+
}
47+
48+
.navbar-link:hover i {
49+
color: #222;
50+
}
51+
52+
.navbar-link:nth-child(1) {
53+
top: 2rem;
54+
}
55+
56+
.navbar-link:nth-child(2) {
57+
top: 6rem;
58+
right: 2rem;
59+
}
60+
61+
.navbar-link:nth-child(3) {
62+
bottom: 6rem;
63+
right: 2rem;
64+
}
65+
66+
.navbar-link:nth-child(4) {
67+
bottom: 2rem;
68+
}
69+
70+
.navbar-link:nth-child(5) {
71+
bottom: 6rem;
72+
left: 2rem;
73+
}
74+
75+
.navbar-link:nth-child(6) {
76+
top: 6rem;
77+
left: 2rem;
78+
}
79+
80+
.navbar-btn {
81+
position: absolute;
82+
width: 6rem;
83+
height: 6rem;
84+
background: #4a69bd;
85+
display: flex;
86+
justify-content: center;
87+
align-items: center;
88+
border-radius: 50%;
89+
cursor: pointer;
90+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
91+
}
92+
93+
.navbar-btn i {
94+
font-size: 2rem;
95+
color: #fff;
96+
transition: transform 0.5s;
97+
}
98+
99+
.change .navbar-btn i {
100+
transform: rotate(45deg);
101+
}

0 commit comments

Comments
 (0)