html login page with css
একটা html Login Form তৈরি করতে হলে যা খেয়াল রাখা উচিতঃ
১. প্রথমে index.html ফাইল তৈরি করে html structure তৈরি করুন।
২. head ত্যাগ এ-র ভিতর Font Awesome এ-র লিংক যুক্ত করুন। Font Awesome হলো আইকন যা ইমেইল অথবা পাসওয়ার্ডের হতে পারে।( এটা অপশনাল)
এবং style.css ফাইল তৈরি করে ফাইল লিংক যুক্ত করুন (বাধ্যতা মূলক)
৩. একটা লগিন ফর্ম এ-র টাইটেল যুক্ত করুন। body ত্যাগ এ-র ভিতর।
৪. ইমেইল বা নাম্বারের জন্য TextField তৈরি করুন।
৫. পাসওয়ার্ড এ-র জন্য TextField তৈরি করুন।
৬. লগিন বাটন তৈরি করুন।
৭. অবশ্যয় Forgotten Password? এ-র লিংক যুক্ত করুন যাতে ইউজার পাসওয়ার্ড রিকভারি করতে পারে।
নিচে ফলো করুন।
১ নং অনুযায়ী html structure তৈরি করা হলোঃ
(যদি কপি করতে চান তাহলে নিচে থেকে কপি করুন এবং index.html ফাইল এ-র ভিতর রাখুন)
<!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">
<title>HTML</title>
<!-- ২নং অনুযায়ী Awesome Icon Add করা হলো -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- এবং css ফাইল এ-র লিংক Add করা হলো -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<h1 class="title">World</h1>
<form action="">
<!--Email এবং নাম্বারের জন্য টেক্টফিল্ড -->
<label for="Email"><input id="en" type="text" class="field" placeholder="Enter Email or Number" required autofocus><i class="sh fa fa-address-card" aria-hidden="true"></i></label>
<!-- পাসওয়ার্ড এ-র জন্য TextField তৈরি করা হলো -->
<label for="password"><input class="field" type="password" name="password" id="password" placeholder="Enter Password" required autofocus/> <i id="i" class="sh fa fa-eye-slash" aria-hidden="true">
</i>
</label>
<!-- লগিন বাটন তৈরি করা হলো -->
<input class="login" type="submit" name="login" id="login" value="Login" />
<div>
<!-- পাসওয়ার্ড ভুলে গেছি? -->
<a href="">
Forgotten Password ? </a>
</div>
</form>
</div>
<!-- জাভাস্ক্রিপ্ট যুক্ত করা হলো -->
<script src="sh.js">sh.js</script>
<script src="main.js"></script>
</body>
</html>
এখানে থেকে কপি করা শেষ করুন।
নিচে style.css ফাইলের ভিতর সকল কোডগুলো রাখুন।
বডি ডিজাইন করা হলো
html{
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
padding:0 0 0 0;
margin: 0 0 0 0;
}
//এনিমেশন যুক্ত যুক্ত করা হলো বডির সাথে
@keyframes borderAnim{
25%{
box-shadow: 1vh 1vh 1vh 1vh limegreen;
}
50%{
box-shadow: 2vh 2vh 2vh 2vh limegreen;
}
75%{
box-shadow: -3vh -3vh -3vh -3vh limegreen;
}
80%{
box-shadow: -4vh -4vh -4vh -4vh limegreen;
}
10%{
box-shadow: -8vh -8vh -8vh -8vh limegreen;
}
}
// এনিমেশন যুক্ত কোন্ট্রল
.main{
animation-name: borderAnim;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 2;
background-image: url('i.jpg');
background-position: cover;
background-attachment: fixed;
}
.main{
height: 65vh;
width: 60vh;
border: 0.5vh solid limegreen;
margin: 8vh auto;
display: flex;
align-items: center;
flex-flow: column;
flex-wrap: nowrap;
background-color: limegreen;
border-radius: 2vh;
box-shadow: 0vh 0vh 4vh 2vh limegreen;
}
//টাইটেল ডিজাইন করা হলোঃ
.title{
color: greenyellow;
font-size: 5vh;
text-transform: uppercase;
text-shadow: 0vh 0vh .5vh white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-weight: bolder;
margin-top: 5vh;
margin-bottom: 4vh;
}
//ইমেইল এবং পাসওয়ার্ড ডিজাইন করা হলো
label[for=Email], label[for=password]{
position: relative;
font-size: 0vh;
display: block;
width: 55vh;
background:black;
height: 10vh;
margin-bottom: 4vh;
border: 0.1vh solid white;
border-radius: 1vh;
}
// লেবেল ডিজাইন করা হলো
label .field{
position: relative;
width: 55vh;
height: 10vh;
border-radius: 1vh;
box-sizing: border-box;
border: 1vh solid black;
font-size: 3vh;
text-align: center;
font-weight: bold;
font-family: sans-serif;
color: limegreen;
background: black;
}
label .sh{
position: absolute;
font-size: 4vh !important;
color: limegreen;
right: 2vh;
top: 3vh;
}
// ফোকাস ডিজাইন কিরা হলো
.field:focus{
border: 1vh black solid;
}
.field::placeholder{
color: red;
}
// লগিন বাটন ডিজাইন করা হলো
.login{
display: block;
width: 22vh;
height: 8vh;
margin:2vh auto 0vh auto;
font-size: 4vh;
background-color: limegreen;
color: white;
font-weight: bolder;
border-radius: 1vh;
border: 0.1vh solid red;
}
// পাসওয়ার্ড ভুলেগেছি - ডিজাইন করা হলো
a{
display: block;
width: 35vh;
height: 5vh;
color: limegreen;
margin: 1vh auto;
font-size: 3.1vh;
font-style: italic;
font-weight: bold;
}
নিচে download link
