Responsive Navbar Using HTML CSS

#webdev #javascript #css #html

Navbar component is important part of website for client because its hold all information about your project or brand like about your brand contact and other details and navbar always sounds good when its responsive so, let's start with HTML code .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="./assets/Group 11.png" sizes="32x32" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://kit.fontawesome.com/814966721c.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <title>Personal Portfolio</title>
</head>
<body>
    <section id="home">
        <header>
            <nav class="nav">
              <a href="/" class="logo">Portfolio</a>

              <div class="hamburger">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
              </div>

              <div class="nav__link hide">
                <a href="#">home</a>
                <a href="#">about</a>
                <a href="#">Skills</a>
                <a href="#">blog</a>
                <a href="#">contact</a>
              </div>
            </nav>
          </header>

        <div class="content">
            Hey there,
            I am Ganesh and Congratulations
             you successfully
             build navbar component.

        </div>
    </section>
</body>
</html>

Now we done with HTML part now add CSS with our creativity

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Pattaya&family=Poppins:wght@200;400;600&family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background-color: #F8F8FF;
}

a {
    text-decoration: none;
    color: rgb(45, 182, 175);
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
  }
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
  }

  .logo {
    font-size: 32px;
    color: rgb(5, 5, 116);
    padding-left: 20px;
  }

  .hamburger {
    padding-right: 20px;
    cursor: pointer;
  }

  .hamburger .line {
    display: block;
    width: 40px;
    height: 5px;
    margin-bottom: 10px;
    background-color: black;
  }

  .nav__link {
    position: fixed;
    width: 94%;
    top: 5rem;
    left: 18px;
    /* background-color: lightblue; */
  }

  .nav__link a {
    display: block;
    text-align: center;
    padding: 10px 0;
  }

  .nav__link a:hover {
    border-bottom: 3px solid rgb(36, 145, 196);
    border-radius: 7px;
    transition: all 0.2s ease;
  }

  .hide {
    display: none;
  }
  .content{
    display: flex;
    justify-content: center;
    text-align: justify;
    align-items: center;
    margin-top: 20%;
    color: rgb(17, 19, 19);
    font-weight: 700;
    font-size: 20px;

    font-family: poppins,sans-serif;
  }
  @media screen and (min-width: 600px) {
    .nav__link {
      display: block;
      position: static;
      width: auto;
      margin-right: 20px;
      background: none;


    }

    .nav__link a {
      display: inline-block;
      padding: 15px 20px;


    }

    .hamburger {
      display: none;
    }
    .content{
      display: block;
      text-align: center;
      margin-left: 15px;
    }
  }