Skip to content

Commit 68efde3

Browse files
num-jsnum-js
authored
Merge pull request #7 from actuallyabhi/master
adding a new HTML page with CSS
2 parents 79e722c + 0267833 commit 68efde3

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

‎HTML&CSS/Responsive_menu.html

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8">
4+
<title>Responsive Navigation </title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
7+
<style>
8+
*{
9+
padding: 0;
10+
margin: 0;
11+
text-decoration: none;
12+
list-style: none;
13+
box-sizing: border-box;
14+
}
15+
body{
16+
font-family: montserrat;
17+
}
18+
nav{
19+
background: #0082e6;
20+
height: 80px;
21+
width: 100%;
22+
}
23+
label.logo{
24+
color: white;
25+
font-size: 35px;
26+
line-height: 80px;
27+
padding: 0 100px;
28+
font-weight: bold;
29+
}
30+
nav ul{
31+
float: right;
32+
margin-right: 20px;
33+
}
34+
nav ul li{
35+
display: inline-block;
36+
line-height: 80px;
37+
margin: 0 5px;
38+
}
39+
nav ul li a{
40+
color: white;
41+
font-size: 17px;
42+
padding: 7px 13px;
43+
border-radius: 3px;
44+
text-transform: uppercase;
45+
}
46+
a.active,a:hover{
47+
background: #1b9bff;
48+
transition: .5s;
49+
}
50+
.checkbtn{
51+
font-size: 30px;
52+
color: white;
53+
float: right;
54+
line-height: 80px;
55+
margin-right: 40px;
56+
cursor: pointer;
57+
display: none;
58+
}
59+
#check{
60+
display: none;
61+
}
62+
@media (max-width: 952px){
63+
label.logo{
64+
font-size: 30px;
65+
padding-left: 50px;
66+
}
67+
nav ul li a{
68+
font-size: 16px;
69+
}
70+
}
71+
@media (max-width: 858px){
72+
.checkbtn{
73+
display: block;
74+
}
75+
ul{
76+
position: fixed;
77+
width: 100%;
78+
height: 100vh;
79+
background: #2c3e50;
80+
top: 80px;
81+
left: -100%;
82+
text-align: center;
83+
transition: all .5s;
84+
}
85+
nav ul li{
86+
display: block;
87+
margin: 50px 0;
88+
line-height: 30px;
89+
}
90+
nav ul li a{
91+
font-size: 20px;
92+
}
93+
a:hover,a.active{
94+
background: none;
95+
color: #0082e6;
96+
}
97+
#check:checked ~ ul{
98+
left: 0;
99+
}
100+
}
101+
section{
102+
background: url(bg1.jpg) no-repeat;
103+
background-size: cover;
104+
height: calc(100vh - 80px);
105+
}
106+
</style>
107+
</head>
108+
<body>
109+
<nav>
110+
<input type="checkbox" id="check">
111+
<label for="check" class="checkbtn">
112+
<i class="fas fa-bars"></i>
113+
</label>
114+
<label class="logo">Page</label>
115+
<ul>
116+
<li><a class="active" href="#">Home</a></li>
117+
<li><a href="#">About</a></li>
118+
<li><a href="#">Services</a></li>
119+
<li><a href="#">Contact</a></li>
120+
<li><a href="#">Feedback</a></li>
121+
</ul>
122+
</nav>
123+
<section></section>
124+
</body>
125+
</html>

0 commit comments

Comments
 (0)