html login page code কি ভাবে একটি লগ ইন পেজ তৈরি করব।
html login page code . প্রথমে html ফরমেট এর একাটি ফাইল নিতে হবে । তারপর সেই ফাইল এ আমাদের html এর কোডিং শুরু করতে হবে।
প্রথমে <!DOCTYPE html> নিতে হবে । তারপর <html> টেগ নিয়ে শুরু করতে হবে । তবে অবস্যই <html> টেগ বন্ধ করতে হবে । তারপর <head> tag শুরু করতে হবে এবং যথারিতি tag বন্ধ করতে হবে <head> </head> তারপর title tag শুরু করতে হবে যেমন – <title>Website</title> । তারপর css file add করতে হবে —
<link rel=”stylesheet” type=”text/css” href=”style.css”> তারপর <head> tag বন্ধ করতে হবে। এবং পরে <body> টেগ শুরু করতে হবে ।
html login page code
মুল কাজ শুরু হয় <body> টেগ এর ভিতর এ – <form> টেগ নিতে হবে এবং এর ভিতর এ <div> টেগ নিতে হবে তবে সব কয় টি টেগ এর সিএসএস এর কাজ এর জন্য id দিতে হবে । তারপর <h1 id=”signup“>Sign Up</h1> মানে হেডিং এর কাজ করতে হবে । তারপর এ <input> টেগ এর কাজ করতে হবে ।
html login page code
<input type=”text” name=”” placeholder=”First Name“>
<input type=”text” name=”” placeholder=”Last Name“>
<input type=”text” name=”” placeholder=”user name“>
<input type=”email” name=”” placeholder=”type your email“>
<input type=”password” name=”” placeholder=”type your password“>
<input type=”password” name=”” placeholder=”Retype your password“>
<input type=”submit” name=”” value=”Sign up“>
তারপর <form> টেগ বন্ধ করতে হবে </form> ।
পরে <br> tag দিয়ে লাইন ব্রেক করতে হবে । তারপরে আবার <form> টেগ দিব লগ ইন এর জন্য এর আগে সাইন আপ এর কাজ করি,
<form class=”box” action=”login.html” method=”POST“>
<h1 id=”login“> Log in </h1>
<input type=”text” name=”” placeholder=”username“>
<input type=”password” name=”” placeholder=”password“>
<input type=”submit” name=”” value=”log in“>
</form>
তারপরের কাজ হলো সব টেগ গুলো ঠিক ভাবে বন্ধ করা । এবার কাজ করতে হবে সি এস এস এর
body{
margin: 0px;
padding: 0px;
font-family: sans-serif;
background-color: #34495e;
}
#div{
border: 2px solid rgb(21, 195, 248);
}
.box{
width: 400px;
padding: 40px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
text-align: center;
}
#login{
font-size: x-large;
color: white;
font-family: 'Lucida Grande',;
}
.box input[type ="text"],.box input[type="password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid rgb(21, 195, 248);
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
}
.box input[type = "text"]:focus,.box input[type= "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type= "submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
}
.box input[type= "submit"]:hover{
background-color:#2ecc71 ;
}
.box1{
width: 400px;
padding: 35%;
top: 50%;
left: 50%;
text-align: center;
background-color: #191919;
}
#signup{
font-family: 'Arial Narrow';
color: white;
font-size: x-large;
}
.box1 input[type="text"],.box1 input[type="password"],.box1 input[type="email"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid rgb(21, 195, 248);
padding: 20px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
}
.box1 input[type="text"]:focus,.box1 input[type="password"]:focus,.box1 input[type="email"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box1 input[type= "submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid rgb(21, 195, 248);
padding: 20px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
}
.box1 input[type= "submit"]:hover{
background-color:#2ecc71 ;
}
এই ভাবে কাজ করলে আমরা একটি ভালো সাইন আপ ও লগ ইন পেজ বানাতে পারব html ও css ব্যবহার করে।
html login page code -
-
