প্রতিদিনের নতুন নতুন সংবাদ ও বিভিন্ন প্রকার টিপস কম্পিউটার টিপস মোবাইল টিপস ভিডিও এডিটিং টিপস ও অন্যান্য ইত্যাদি টিপস জানতে আমাদের ওয়েবসাইট টি ঘুরে আসুন
অনুসন্ধান ফলাফল পেতে এখানে টাইপ করুন!
middle ad

Transparent Login Form HTML CSS & JavaScript

 

স্বচ্ছ লগইন ফর্ম HTML CSS এবং জাভাস্ক্রিপ্টহ্যালো বন্ধুরা, আজ এই ব্লগে আপনি শিখবেন কিভাবে HTML CSS এবং Javascript ব্যবহার করে একটি আশ্চর্যজনক স্বচ্ছ লগইন ফর্ম তৈরি করতে হয়। আগের ব্লগে, আমি শেয়ার করেছি কিভাবে HTML এবং CSS এ একটি লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি করতে হয় এবং এখন একটি সহজ কিন্তু আশ্চর্যজনক স্বচ্ছ লগইন ফর্ম html css তৈরি করার সময় এসেছে ।

 
আমি নিশ্চিত আপনি অনেক ওয়েবসাইটে অনেক লগইন ফর্ম এইচটিএমএল টেমপ্লেট দেখেছেন। সহজভাবে, একটি লগইন ফর্ম হল সীমাবদ্ধ পৃষ্ঠায় অ্যাক্সেসের আগে ব্যবহারকারীকে প্রমাণীকরণ বা যাচাই করতে ব্যবহৃত ইনপুটগুলির একটি সেট। লগইন ফর্মটি ব্যবহারকারীর নামের জন্য একটি ক্ষেত্র এবং পাসওয়ার্ডের জন্য আরেকটি ক্ষেত্র বহন করে।

এই ডিজাইনে [লগইন ফর্ম HTML CSS], আপনি চিত্র প্রিভিউতে দেখতে পাচ্ছেন, এটি একটি আশ্চর্যজনক স্বচ্ছ লগইন ফর্ম যা HTML CSS এবং JavaScript ব্যবহার করে তৈরি করা হয়েছে। জাভাস্ক্রিপ্ট শুধুমাত্র প্রদর্শন বা গোপন পাসওয়ার্ড টগল করতে ব্যবহার করা হয়. এই লগইন ফর্মটিতে, একটি চিত্র, একটি ফর্ম, কিছু পাঠ্য এবং কিছু সামাজিক মিডিয়া আইকন রয়েছে৷ html এবং css এর প্রাথমিক জ্ঞান থাকলে আপনি আপনার প্রয়োজনীয়তা অনুযায়ী এই ফর্মটি পরিবর্তন করতে পারেন।

এটি একটি লগইন ফর্ম যার কোনো ব্যাকএন্ড একীকরণ নেই৷ এই লগইন ফর্মটিকে কার্যকরী এবং গতিশীল করতে আপনি PHP-এর মতো ব্যাকএন্ড ভাষা ব্যবহার করতে পারেন। আমি কি বলছি তা বুঝতে যদি আপনার অসুবিধা হয়। আপনি এই ফর্মের একটি সম্পূর্ণ ভিডিও টিউটোরিয়াল দেখতে পারেন [লগইন ফর্ম HTML CSS]

স্বচ্ছ লগইন ফর্ম HTML CSS এর ভিডিও টিউটোরিয়াল

 
আমি আশা করি এই ভিডিওটি দেখার পর আপনি এই লগইন ফর্মটি তৈরি করার পিছনের মৌলিক কোডগুলি, ধারণাগুলি বুঝতে পেরেছেন৷ আপনি খুব সহজেই এই ফর্ম এবং চিত্রের অবস্থান পরিবর্তন করতে পারেন, আপনাকে কিছু অবস্থান সম্পত্তি মান পরিবর্তন করতে হবে। আপনি যদি এই লগইন ফর্মটি পছন্দ করেন এবং এই ফর্মের সোর্স কোডগুলি পেতে চান তবে চিন্তা করবেন না, আপনি প্রদত্ত কোড বক্সগুলি থেকে সহজেই অনুলিপি করতে পারেন বা প্রদত্ত ডাউনলোড বোতাম থেকে সহজে সোর্স কোড ফাইলগুলি ডাউনলোড করতে পারেন৷

আমি ইতিমধ্যে অনেক লগইন ফর্ম এইচটিএমএল টেমপ্লেট শেয়ার করেছি এবং আপনি এটি মিস করেছেন তাহলে চিন্তা করবেন না সমস্ত জনপ্রিয় লগইন ফর্ম এইচটিএমএল টেমপ্লেট দেখতে এখানে ক্লিক করুন এবং আমি বিশ্বাস করি আপনি এটি পছন্দ করবেন

আপনি এটি পছন্দ করতে পারেন:

স্বচ্ছ লগইন ফর্ম HTML CSS [সোর্স কোড]

এই ফর্মটি তৈরি করতে [স্বচ্ছ লগইন ফর্ম HTML CSS]। প্রথমত, আপনাকে দুটি ফাইল তৈরি করতে হবে একটি HTML ফাইল এবং আরেকটি হল CSS ফাইল। এই ফাইলগুলি তৈরি করার পরে আপনার ফাইলগুলিতে প্রদত্ত কোডগুলি পেস্ট করুন।

প্রথমে, index.html নামের একটি HTML ফাইল তৈরি করুন এবং প্রদত্ত কোডগুলি আপনার HTML ফাইলে পেস্ট করুন। মনে রাখবেন, আপনাকে .html এক্সটেনশন দিয়ে একটি ফাইল তৈরি করতে হবে।

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Transparent Login Form HTML CSS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Login Form</header>
<form action="#">
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email or Phone">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password">
<span class="show">SHOW</span>
</div>
<div class="pass">
<a href="#">Forgot Password?</a>
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">
Or login with
</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">
Don't have account?
<a href="#">Signup Now</a>
</div>
</div>
</div>
<script>
const pass_field = document.querySelector('.pass-key');
const showBtn = document.querySelector('.show');
showBtn.addEventListener('click', function(){
if(pass_field.type === "password"){
pass_field.type = "text";
showBtn.textContent = "HIDE";
showBtn.style.color = "#3498db";
}else{
pass_field.type = "password";
showBtn.textContent = "SHOW";
showBtn.style.color = "#222";
}
});
</script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.


@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
.bg-img{
background: url('bg.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}
.bg-img:after{
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.7);
}
.content{
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
text-align: center;
padding: 60px 32px;
width: 370px;
transform: translate(-50%,-50%);
background: rgba(255,255,255,0.04);
box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.content header{
color: white;
font-size: 33px;
font-weight: 600;
margin: 0 0 35px 0;
font-family: 'Montserrat',sans-serif;
}
.field{
position: relative;
height: 45px;
width: 100%;
display: flex;
background: rgba(255,255,255,0.94);
}
.field span{
color: #222;
width: 40px;
line-height: 45px;
}
.field input{
height: 100%;
width: 100%;
background: transparent;
border: none;
outline: none;
color: #222;
font-size: 16px;
font-family: 'Poppins',sans-serif;
}
.space{
margin-top: 16px;
}
.show{
position: absolute;
right: 13px;
font-size: 13px;
font-weight: 700;
color: #222;
display: none;
cursor: pointer;
font-family: 'Montserrat',sans-serif;
}
.pass-key:valid ~ .show{
display: block;
}
.pass{
text-align: left;
margin: 10px 0;
}
.pass a{
color: white;
text-decoration: none;
font-family: 'Poppins',sans-serif;
}
.pass:hover a{
text-decoration: underline;
}
.field input[type="submit"]{
background: #3498db;
border: 1px solid #2691d9;
color: white;
font-size: 18px;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
font-family: 'Montserrat',sans-serif;
}
.field input[type="submit"]:hover{
background: #2691d9;
}
.login{
color: white;
margin: 20px 0;
font-family: 'Poppins',sans-serif;
}
.links{
display: flex;
cursor: pointer;
color: white;
margin: 0 0 20px 0;
}
.facebook,.instagram{
width: 100%;
height: 45px;
line-height: 45px;
margin-left: 10px;
}
.facebook{
margin-left: 0;
background: #4267B2;
border: 1px solid #3e61a8;
}
.instagram{
background: #E1306C;
border: 1px solid #df2060;
}
.facebook:hover{
background: #3e61a8;
}
.instagram:hover{
background: #df2060;
}
.links i{
font-size: 17px;
}
i span{
margin-left: 8px;
font-weight: 500;
letter-spacing: 1px;
font-size: 16px;
font-family: 'Poppins',sans-serif;
}
.signup{
font-size: 15px;
color: white;
font-family: 'Poppins',sans-serif;
}
.signup a{
color: #3498db;
text-decoration: none;
}
.signup a:hover{
text-decoration: underline;
}

That’s all, now you’ve successfully created an Amazing Transparent Login Form using HTML CSS & Javascript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

ট্যাগ

আরও দেখান

একটি মন্তব্য পোস্ট করুন

0 মন্তব্যসমূহ
* দয়া করে এখানে স্প্যাম করবেন না। সমস্ত মন্তব্য অ্যাডমিন দ্বারা পর্যালোচনা করা হয়.

Top Post Ad

middle ad

Below Post Ad

middle ad

add

middle ad
//