Save Nature & Save Lives [Navigation Bar & Login Form]

Ticker

10/recent/ticker-posts

Save Nature & Save Lives [Navigation Bar & Login Form]

AK Creative 4/27/2021 10:34:00 PM

 Navigation Bar & Login Form By This Source Code 👇


Source Code

HTML Code


<!DOCTYPE html>

<html>

    <head>

        <title>Navigation Bar & Login Form</title>

        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <div class="topnav">

            <a class="active" href="#home">Home</a>

            <a href="#about">News</a>

            <a href="#about">Blog</a>

            <a href="#about">Gallery</a>

            <a href="#about">About</a>

            <a href="#contact">Contact</a>

  <div class="login-container">

    <form action="/action_page.php">

      <input type="text" placeholder="Username" name="username">

      <input type="text" placeholder="Password" name="psw">

      <button type="submit">Login</button>

    </form>

  </div>

</div>

    </body>

</html>


CSS Code


* {box-sizing: border-box;}

 

body{

    margin: 0;

    padding: 0;

    font-family: high tower;

    text-transform: uppercase;

    font-weight: bold;

background: url(https://blogger.googleusercontent.com/img/proxy/AVvXsEiObcFyakaxFj-Pt81nGjEeiZ18_CwFTnLHYff_VBnpkfSfYlQqm1I4jbjx5L46J2fvce_bqknVH6P13y7BZx11zSPr_Lf40nI5xXwn9eRS0xNM3Y9KSecn46w4SvqslzJeTULYobgLsJ73uKzb-gZCpsKVp1aEvkV0uCUydASzTTKshK8O4wZHqej6HLvS5Zfk=s0-d) no-repeat;

}

.topnav {

  overflow: hidden;

  background: url(https://cdn.hipwallpaper.com/i/50/63/OuWKQZ.jpg);

  line-height: 20px;

}

 

.topnav a {

  float: left;

  display: block;

  width:110px;

  color: black;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 16px;

  color:#fff005;

}

 

.topnav a:hover {

  background-color: #dda23d;

  color: black;

}

 

.topnav a.active {

  background-color: #a196F3;

  color: white;

}

 

.topnav .login-container {

  float: right;

  margin-right: 100px;

  margin-top: 10px;

}

 

.topnav input[type=text] {

  padding: 6px;

  margin-top: 8px;

  font-size: 17px;

  border: none;

  width: 170px; 

}

 

.topnav .login-container button {

  float: right;

  padding: 6px;

  margin-top: 8px;

  margin-right: 16px;

  background: #a196F3;

  color:#fff;

  font-size: 17px;

  border: none;

  cursor: pointer;

}

 

.topnav .login-container button:hover {

  background: #ccffac;

}



OUTPUT Screen



Tags:

Post a Comment

16 Comments