HTML, CSS का प्रयोग करके लॉगिन पेज कैसे बनाये ?
यहां, हम आपको बताएंगे की “HTML, CSS का प्रयोग करके लॉगिन पेज कैसे बनाते है?” आप निम्न चरणों में आसानी से HTML, CSS का प्रयोग करके लॉगिन पेज बना सकते हैं.
चरण 1
पहले कोई भी कोड एडिटर को खोले फिर नई फाइल सेलेक्ट करें. और उसका नाम login.html रखकर सेव करदें फिर शिफ्ट 1 key दबाये आपके सामने html का सिंटेक्स आ जायेगा फिर उसमे अपनी इच्छानुसार टाइटल सेट करें. उसके बाद डिव के अंदर क्लास ले और उसका नाम डॉट फॉर्म रखदे. फिर h2 हैडिंग ले और उसमे USER LOGIN टाइटल डालकर सेव करदे फिर अपनी फाइल को ब्राउज़र पर ओपन करे आपके सामने लॉगिन फॉर्म का टाइटल दिख जायेगा.
चरण 2
फिर से डिव सेलेक्ट करें और उसको एक क्लास दे और क्लास का नाम icon रखदें. फिर https://ionic.io/ionicons/v4 पर जाये और उसका CDN लिंक कॉपी करके अपनी फाइल के हेड सेक्शन में पेस्ट करदे फिर आप इस वेबसाइट के icons आसानी से प्रयोग कर सकते हो. उसके बाद आपको आइकॉन का नाम सर्च करना होगा आइकॉन का नाम user डालकर सर्च करे. फिर उसको अपने आइकॉन वाली डिव में पेस्ट करदें.
चरण 3
फिर 2 इनपुट सेलेक्ट करे और उनको विथ और हाइट अपनी इच्छा अनुसार देकर सेट करदे फिर इनपुट के निचे चेकबॉक्स विथ remember me और forgot password सेट करे फिर एक बटन ले और उसका नाम LOG IN रखकर सेव करदें.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,100&family=Ubuntu:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(54,54,71);
}
.form{
width: 300px;
height: 400px;
padding: 20px;
background-color: white;
border-radius: 10px;
}
.form h2{
margin-bottom: 20px;
text-align: center;
letter-spacing: 1px;
color: rgb(21,91,124);
}
.form .icon{
width: 50px;
height: 50px;
border-radius: 10px;
background-color: rgb(206, 206, 206);
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.form .icon ion-icon{
font-size: 35px;
color: rgb(70, 70, 70);
}
.form input{
width: 100%;
height: 35px;
border: 0px;
border-bottom: 1px solid rgb(168, 168, 168);
outline: none;
padding-left: 5px;
font-size: 15px;
}
.form .first-input{
margin-top: 30px;
}
.form .small-icon-1{
position: relative;
top: -30px;
left: 92%;
font-size: 20px;
color: rgb(180,180,180);
}
.form .small-icon-2{
position: relative;
top: -30px;
left: 92%;
font-size: 20px;
color: rgb(180,180,180);
}
.form .base{
display: flex;
}
.form .base label{
position: absolute;
bottom: 36%;
left: 554px;
font-size: 12px;
}
.form .base label .checkbox{
width: 13px;
height: 13px;
}
.form .base a{
position: absolute;
bottom: 36%;
left: 710px;
font-size: 12px;
}
.form button{
width: 100px;
height: 30px;
margin: 40px 0 0 75px;
border: 0px;
border-radius: 10px;
transition: 0.5s;
letter-spacing: 1px;
font-weight: bold;
}
.form button:hover{
background-color: rgb(21,91,124);
color: rgb(219,219,219);
transform: translateY(-10px);
}
</style>
</head>
<body>
<div class="form">
<h2>USER LOGIN</h2>
<div class="icon">
<ion-icon name="person"></ion-icon>
</div>
<input class="first-input" type="text" placeholder="Username">
<span class="small-icon-1"><ion-icon name="person"></ion-icon></span>
<input class="second-input" type="password" placeholder="Password">
<span class="small-icon-2"><ion-icon name="lock"></ion-icon></span>
<div class="base">
<label>
<input type="checkbox" class="checkbox">
Remember me
</label>
<a href="#">Forgot Password</a>
</div>
<button>LOG IN</button>
</div>
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</body>
</html>
