Beautiful NFT Login Page using HTML & CSS

Hello dear students.

So let us create a beautiful NFT login page using our knowledge of HTML and CSS.

Create an HTML file named “nftlogin.html”
Create a CSS file named “nftlogin.css”
Copy and paste these codes in respective places for HTML & CSS.
Run your code
After getting the result, settle down and start deleting each line of CSS code one after the other to know what they do in the code.

HTML


<html>
<head>
<meta charset="UTF-8"> 
<title>NFT Login page with CSS and HTML</title>
<link rel="stylesheet" href="nftlogin.css" type="text/css">
</head>
<body>
    <div class="container">
        <div class="c1">   
           <div class="c11">
              <h1 class="mainhead">NFT LOGIN</h1>
           </div>
           <div id="left"><h1 class="s1class"><span>SIGN</span><span class="su">IN</span>
           </h1></div>
           <div id="right"><h1 class="s2class"><span>SIGN</span><span class="su">UP</span></h1></div>
        </div>
        <div class="c2">
           <form class="signup">
              <h1 class="signup1">SIGN UP</h1>
              <br><br><br><br>
                 <input name="username" type="text" placeholder="Username*" class="username"/>
                 
                 <input name="email" type="text" placeholder="Email*" class="username"/>
                 
                 <input name="password" type="password" placeholder="Password*" class="username"/>
              
              <button class="btn">Sign Up</button>
           </form>
           <form class="signin">
              <br><br><br><br>
              <a href=""><p class="signup2">Forget Password?</p></a>
           </form>
           <script src="script.js"> </script>
        </div>
     </div>
</body>
</html>

CSS

Copy Code


body {
    font-family: 'Roboto';
    border-radius: 11px;
  background: #db6e14;
  box-shadow:  5px 5px 6px #ce6713,
               -5px -5px 6px #e87515;
  }
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #db6e14;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #db6e14;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #db6e14;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #db6e14;
  }
  .container{
     display:true;
     position:absolute;
      width: auto;
      height:auto;
      top: calc(50% - 240px);
      left: calc(40% - 160px);
     border-radius:15px 15px 15px 15px;
  }
  .c1{
     background-color:white;
     width:300px;
     height:500px;
     display:inline-block;
     border-radius:15px 15px 15px 15px;
  }
  
  .c11{
     background-image:url('https://ritzherald.com/wp-content/uploads/2021/11/Tainsei-NFT-Collection-Japanese-Art-meets-Ethereum-900x425.jpg');
     background-size:300px 400px;
     background-repeat: no-repeat;
     background-color:white;
     width:300px;
     height:400px;
     display:inline-block;
     position:absolute;
     z-index:4;
     border-radius:15px 15px 200px 200px;
  }
  #left, #right {
     color:white;
     display: inline-block;
     width:146px;
     height: 500px;
     background-color:white;
     cursor:pointer;
  }
  #left{
     border-radius:15px 0px 0px 15px;
  }
  #right{
     border-radius:15px 15px 15px 0px;
  }
  .left_hover{
     color:#EE9BA3;
     box-shadow: 5px 0 18px -10px #333;
     z-index:1;
     position:absolute;
  }
  .right_hover{
     box-shadow: -5px 0 15px -10px #333;
     z-index:1;
     position:absolute;
  }
  .s1class{
     color:#db6e14;
     position:absolute;
     bottom:0;
     left:63%;
     margin-left: -50%;
  }
  .s1class span,  .s2class span{
     display:block;
  }
  .su{
     font-size:20px;
  }
  .s2class{
     color:#db6e14;
     position:absolute;
     bottom:0;
     right:63%;
     margin-right: -50%;
  }
  .mainhead{
     color:white;
     font-size:24px;
     text-align:center;
     margin-top:50px;
  }
  .mainp{
     color:white;
     font-size:13px;
     text-align:center;
     margin-top:10px;
  }
  .c2{
     background-color:white;
     width:300px;
     height:500px;
     border-radius:15px;
     position:absolute;
     left:370px;
     display:inline-block;
  }
  .username{
     font-weight: bold;
     width: 200px;
     margin: 0 35px 20px ;
     height: 35px;
     padding: 6px 15px;
     border-radius: 5px;
     outline: none;
     border: none;
     background: #F6F7F9;
     color: #748194;
     font-size: 14px;
  }
  .btn{
     font-weight: bold;
     width: 230px;
     margin: 0 35px 20px ;
     height: 45px;
     padding: 6px 15px;
     border-radius: 5px;
     outline: none;
     border: none;
     background: #db6e14;
     color: white;
     font-size: 14px;
  }
  .signup1{
     color:#db6e14;
     font-size:30px;
     text-align:center;
  }
  a{
     text-decoration: none;
  }
  .signup2{
     color:#db6e14;
     font-size:20px;
     text-align:center;
  }
  .signup{
     display:initial;
  }
  .signin{
     display:initial;
  }

Good luck with your modifications

Beautiful NFT Login Page using HTML & CSS

One Comment

Leave a Reply Cancel reply