HTML और CSS लॉगिन सिस्टम

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

5 July 2025

ग्लासी लॉगिन और रजिस्टर पैनल V3 TheDoc से

22 January 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="loginsystemstyle.css">
    <link rel="stylesheet" href="bootstrap-icons-1.11.3">
    <link rel="stylesheet" href="fontawesome-free-6.7.2-desktop/otfs/Font Awesome 6 Brands-Regular-400.otf">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <title>Login System</title>
</head>
<body>
    <div class="subContainer">
            <ul class="unorderedcont">
                <li class="listContainer"><a href="">Home</a></li>
                <li class="list2Container"><a href="">About Us</a></li>
                <li class="list3Container"><a href="">Contanct Us</a></li>
                <li class="list4Container"><a href="">Login</a></li>
            </ul>
    </div>
    <div class="mainContainer">
        <div class="loginmainCont">
            <h3>Please Enter Your details to Login</h3>
            <input type="email" name="email" id="email" placeholder="Email">
            <input type="password" id="pswd" placeholder="Password">
            <br>
            <button type="button" value="submit" id="button"><i class="fa fa-"></i> Login</button>
        </div>
    </div>
</body>
</html>

CSS

body{
    background-color:rgb(255, 255, 255);
    margin: 0;
}
.subContainer{
    background-color: #1e5470;
    display: flex;

}
ul{
    display: flex;
}

li{
    padding: 0px;
    margin: 0;
    list-style-type: none;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}

li a{
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    padding: 16px;
    margin: 4px;
}

a:hover{
    background-color: #eed3f6;
    color: #1e5470;
}

.mainContainer{
    margin: 60px auto;
    background-color: #1e547023;
    width: 340px;
    border: 1px solid #1e547023;
    border-radius: 10px;
    box-shadow: 1px solid rgba(19, 19, 19, 0.3);
    
}
.loginmainCont{
    padding: 30px 20px;
}
.unorderedcont{
    margin: 18px 4px;
}

#email{

}

#pswd, #email{
    width: 260px;
    margin: 5px;
    padding: 12px 16px;
    border:1px solid #1e5470;
    border-radius: 20px;

}
#button{
    width: 290px;
    margin: 26px 0;
    padding: 14px 4px;
    font-family: 'Times New Roman', serif;
    font-size: 16px;
    background-color: #1e5470;
    color: #fff;
    border: 0 solid #1e5470;
    border-radius: 6px;
}

i{
    padding: 6px;
    font-size: 16px;
    color: #fff;
}
h3{
    color: #1e5470;
}

HTML और CSS लॉगिन सिस्टम

अनुशंसित

ग्लासी लॉगिन और रजिस्टर पैनल V3 TheDoc से

लॉगिन पासवर्ड सरल

लॉगिन फ़ॉर्म धुंधला करें

HTML

CSS

JS

अनुशंसित

ग्लासी लॉगिन और रजिस्टर पैनल V3 TheDoc से

लॉगिन पासवर्ड सरल

लॉगिन फ़ॉर्म धुंधला करें

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS