html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created by Kevin -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<li class="logo">DesignX</li>
<li class="items"><a href="#">Home</a></li>
<li class="items"><a href="#">About</a></li>
<li class="items"><a href="#">Blogs</a></li>
<li class="items"><a href="#">Contact</a></li>
<li class="items"><a href="#">Feedback</a></li>
<li class="btn"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul>
</nav>
<script> $(document).ready(function(){
$('nav ul li a').on('click', function(){
$('nav ul li a').removeClass('active');
$(this).addClass('active');
});
});
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Created by Kevin */
body {
}
body {
background: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR_rULCgxJV4_821sMNFp56GPMInvkG3zW_14WQ6z0_BPfY1pkaHrJ4stu6");
background-size: 100vw 100vh;
}
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat',sans-serif;
}
nav{
background: green;
padding: 5px 40px;
}
nav ul{
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
// Created by Kevin
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run