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
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
how do you do this things please… you are really a genius