html login page code কি ভাবে একটি লগ ইন পেজ তৈরি করব।

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=”stylesheettype=”text/csshref=”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=”textname=”” placeholder=”First Name“>

<input type=”textname=”” placeholder=”Last Name“>

<input type=”textname=”” placeholder=”user name“>

<input type=”emailname=”” placeholder=”type your email“>

<input type=”passwordname=”” placeholder=”type your password“>

<input type=”passwordname=”” placeholder=”Retype your password“>

<input type=”submitname=”” value=”Sign up“>

তারপর <form> টেগ বন্ধ করতে হবে </form> ।

পরে <br> tag দিয়ে লাইন ব্রেক করতে হবে । তারপরে আবার <form> টেগ দিব লগ ইন এর জন্য এর আগে সাইন আপ এর কাজ করি,

<form class=”boxaction=”login.htmlmethod=”POST“>

<h1 id=”login“> Log in </h1>

<input type=”textname=”” placeholder=”username“>

<input type=”passwordname=”” placeholder=”password“>

<input type=”submitname=”” 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 -

-

 

Leave a Comment