Make Navigation Bar Using HTML and CSS

January 31, 2021 June 01, 2021

copied button

         <!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="" content="">

    <title>Nav Bar</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

   <style>

*{

  margin: 0px;

  padding: 0px;

  box-sizing: border-box;

}

body{ 

  background-image:url('1.jpeg');

  width: 100%;

}  

nav{ 

  background:#050505c7;

  position: fixed;

  width: 100%;

  line-height: 5px;

  

  

}

a{

  text-decoration: none;

  outline: none;

   padding: 1.5rem;

  color: white;

  font-size: 15px;

  float: right;

  transition: 0.5s;

}
a:hover{
  font-size: 30px;
}
.ga{
  color: #7ad7ef;
  font-size: 1.5rem;
  margin-right: 10px;
}
span{

  font-weight: 800;

  font-size: 40px;
  color: #00ccff;
  position: absolute;
  top: 20px;
}
    </style>
  </head>
  <body>
    <nav>
      <div class="nav">
       <span>iCloud</span>
        <a href="#"><i class="bi ga bi-box-arrow-in-left"></i>Sign In</a>
        <a href="#"><i class="bi ga bi-person-lines-fill"></i>Contact us</a>
        <a href="#"><i class="bi ga bi-file-person"></i>About Us</a> 
        <a href="#"><i class="bi ga bi-house-door-fill"></i>Home</a>
        </div>
    </nav>
  </body>
</html>

Daily Tech

Make Navigation Bar Using HTML and CSS

Post a Comment