HTML Source Code :-
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><linkhref="https://cdn.jsdelivr.net/npm/remixicon@3.0.0/fonts/remixicon.css"rel="stylesheet"/><link rel="stylesheet" href="style.css" /><title>Responsive Nav Bar By Indian Coding Wala</title></head><body><header><nav><div class="nav__logo"><a href="#">Indian Coding Wala.</a></div><ul class="nav__links"><li class="link">Home</li><li class="link">About</li><li class="link">Service</li><li class="link">Blog</li><li class="link">Contact</li></ul><div class="toggle__btn"><i class="ri-menu-line"></i></div></nav><div class="hero"><h2>Indian Coding</h2><h1>Wala</h1><button>Read More</button></div></header><script>const toggleBtn = document.querySelector(".toggle__btn");const toggleBtnIcon = document.querySelector(".toggle__btn i");const menu = document.querySelector(".nav__links");toggleBtn.onclick = function () {menu.classList.toggle("open");const isOpen = menu.classList.contains("open");toggleBtnIcon.classList = isOpen ? "ri-close-line" : "ri-menu-line";};</script></body></html>
CSS Source Code :-
:root {--extra-light: #facb2d;}* {padding: 0;margin: 0;box-sizing: border-box;}a {text-decoration: none;}body {font-family: "Open Sans", sans-serif;height: 100vh;background-image: url("https://images.pexels.com/photos/6044217/pexels-photo-6044217.jpeg?auto=compress&cs=tinysrgb&w=600");background-position: center center;background-size: cover;background-repeat: no-repeat;}header {position: relative;padding: 0 2rem;}nav {height: 80px;width: 100%;max-width: 1200px;margin: auto;display: flex;align-items: center;justify-content: space-between;position: relative;}.nav__logo a {font-size: 1.5rem;font-weight: 600;color: var(--extra-light);}.nav__links {position: absolute;right: 0;top: 80px;width: 100%;list-style: none;display: none;flex-direction: column;gap: 0.5rem;padding: 0.5rem;border-radius: 1rem;background-color: rgba(255, 255, 255, 0.1);}.open {display: flex;}.nav__links .link {font-size: 1.25rem;color: var(--extra-light);text-align: center;width: 100%;padding: 0.5rem 1rem;border-radius: 0.5rem;cursor: pointer;transition: 0.3s;}.nav__links .link:hover {background-color: rgba(255, 255, 255, 0.1);}.toggle__btn {display: block;color: var(--extra-light);font-size: 2rem;}.hero {max-width: 1200px;height: calc(100vh - 80px);margin: auto;display: flex;align-items: center;justify-content: center;flex-direction: column;color: var(--extra-light);}.hero h2 {font-size: 3rem;font-weight: 700;line-height: 1rem;}.hero h1 {font-size: 6rem;font-weight: 700;}.hero button {width: 150px;padding: 0.75rem;font-size: 1rem;border-radius: 1rem;background-color: rgb(192, 1, 103);}@media screen and (min-width: 640px) {.nav__links {width: 250px;}.hero {align-items: flex-start;}}@media screen and (min-width: 1024px) {.nav__links {position: unset;width: unset;flex-direction: row;gap: 0.5rem;display: flex !important;background: transparent;}.toggle__btn {display: none;}.hero h2 {font-size: 4rem;}.hero h1 {font-size: 8rem;}.hero button {width: 200px;padding: 1rem;}}
Social Plugin