Skip to content

Commit fdb1b64

Browse files
shivaji1277shivaji1277
committed
Added CSS mini Project
1 parent e7cc16f commit fdb1b64

3 files changed

Lines changed: 234 additions & 0 deletions

File tree

‎Domains/Frontend/MiniProjects/Responsive-Sidebar-Navigation-with-CSS-Font-Awesome/index.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CSS Project</title>
8+
<link rel="stylesheet " href="style.css"/>
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
13+
rel="stylesheet"
14+
/>
15+
<link
16+
rel="stylesheet"
17+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
18+
/>
19+
<link rel="preconnect" href="https://fonts.googleapis.com">
20+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
21+
<link
22+
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Qwitcher+Grypen:wght@400;700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
23+
rel="stylesheet">
24+
</head>
25+
<body>
26+
<div class="main_box">
27+
<input type="checkbox" id="check" />
28+
<div class="btn_one">
29+
<label for="check" style="color: white">
30+
<i class="fa-solid fa-bars"></i>
31+
</label>
32+
</div>
33+
34+
<div class="sidebar_menu">
35+
<div class="logo">
36+
<a href="#">Apna College</a>
37+
</div>
38+
39+
<div class="btn_two">
40+
<label for="check" >
41+
<i class="fa-solid fa-xmark"></i>
42+
</label>
43+
</div>
44+
45+
<div class="menu">
46+
<ul>
47+
<li>
48+
<i class="fa-solid fa-image"></i>
49+
<a href="#" id="gallery">Gallery</a>
50+
</li>
51+
<li>
52+
<i class="fa-solid fa-arrow-up-right-from-square"></i>
53+
<a href="#">Shortcuts</a>
54+
</li>
55+
<li>
56+
<i class="fa-solid fa-photo-film"></i>
57+
<a href="#">Exhibits</a>
58+
</li>
59+
<li>
60+
<i class="fa-solid fa-calendar-days"></i>
61+
<a href="#">Events</a>
62+
</li>
63+
<li>
64+
<i class="fa-solid fa-store"></i>
65+
<a href="#">Store</a>
66+
</li>
67+
<li>
68+
<i class="fa-solid fa-phone"></i>
69+
<a href="#">Contact</a>
70+
</li>
71+
<li>
72+
<i class="fa-regular fa-comments"></i>
73+
<a href="#">Feedback</a>
74+
</li>
75+
</ul>
76+
</div>
77+
78+
<div class="social_media">
79+
<ul>
80+
<a href="#"><i class="fa-brands fa-facebook"></i></i></a>
81+
<a href="#"><i class="fa-brands fa-twitter"></i></a>
82+
<a href="#"><i class="fa-brands fa-instagram"></i></i></a>
83+
<a href="#"><i class="fa-brands fa-youtube"></i></a>
84+
</ul>
85+
</div>
86+
</div>
87+
</div>
88+
<script src="app.js"></script>
89+
</body>
90+
</html>

‎Domains/Frontend/MiniProjects/Responsive-Sidebar-Navigation-with-CSS-Font-Awesome/photo.jpg‎

85.5 KB
Loading

‎Domains/Frontend/MiniProjects/Responsive-Sidebar-Navigation-with-CSS-Font-Awesome/style.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: "Poppins", sans-serif;
5+
}
6+
7+
.main_box{
8+
background-image: url("photo.jpg");
9+
height: 100vh;
10+
background-size: cover;
11+
}
12+
13+
.btn_one{
14+
color: white;
15+
font-size: 30px;
16+
font-weight: 700;
17+
position: absolute;
18+
line-height: 60px;
19+
left: 16px;
20+
cursor: pointer;
21+
transition: all 0.3s linear;
22+
}
23+
24+
.sidebar_menu{
25+
position: fixed;
26+
height: 100vh;
27+
width: 300px;
28+
left: -300px;
29+
background-color:rgba(255, 255, 255, 0.1);
30+
box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
31+
transition: all 0.3s linear;
32+
}
33+
34+
.sidebar_menu .logo {
35+
position: absolute;
36+
line-height: 60px;
37+
width: 100%;
38+
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
39+
height: 60px;
40+
}
41+
42+
.sidebar_menu .logo a {
43+
position: absolute;
44+
color: white;
45+
text-decoration: none;
46+
left: 50px;
47+
font-size: 25px;
48+
font-weight: 700;
49+
}
50+
51+
.sidebar_menu .btn_two i {
52+
color: gray;
53+
left: 275px;
54+
font-size: 25px;
55+
line-height: 60px;
56+
position: absolute;
57+
/* opacity: 0; */
58+
cursor: pointer;
59+
transition: all 0.3s linear;
60+
}
61+
62+
.sidebar_menu .menu {
63+
top: 60px;
64+
position: absolute;
65+
color: white;
66+
width: 100%;
67+
cursor: pointer;
68+
}
69+
70+
.sidebar_menu .menu li {
71+
margin-top: 6px;
72+
padding: 14px 20px;
73+
}
74+
75+
.sidebar_menu .menu i {
76+
color: white;
77+
text-decoration: none;
78+
padding-left: 10px;
79+
font-size: 20px;
80+
}
81+
82+
.sidebar_menu .menu a {
83+
color: white;
84+
text-decoration: none;
85+
padding-left: 10px;
86+
font-size: 20px;
87+
}
88+
89+
.sidebar_menu .social_media {
90+
position: absolute;
91+
bottom: 50px;
92+
left: 25%;
93+
}
94+
95+
/* .sidebar_menu .sidebar_menu i {
96+
color: white;
97+
opacity: 0.5;
98+
padding: 0 5px;
99+
} */
100+
101+
.sidebar_menu .social_media i{
102+
color: white;
103+
opacity: 0.5;
104+
padding: 0 5px;
105+
}
106+
107+
#check{
108+
display: none;
109+
}
110+
111+
/* .sidebar_menu .menu li:hover {
112+
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
113+
}
114+
115+
.btn_two:hover {
116+
font-size: 30px;
117+
} */
118+
119+
.btn_one i:hover{
120+
font-size: 40px;
121+
}
122+
123+
.btn_two i:hover{
124+
font-size: 30px;
125+
}
126+
127+
.sidebar_menu .menu li:hover {
128+
background: rgba(255, 255, 255, 0.2);
129+
box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
130+
/* transition: all 0.3s linear; */
131+
}
132+
133+
.sidebar_menu .social_media i:hover{
134+
opacity: 1;
135+
transform: scale(1.1);
136+
}
137+
138+
#check:checked ~ .sidebar_menu {
139+
left: 0;
140+
}
141+
142+
#check:checked ~ .btn_one{
143+
opacity: 0;
144+
}

0 commit comments

Comments
 (0)