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

893 sirenapari

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

16 October 2025

CSS एनिमेटेड पृष्ठभूमि और लोडिंग प्रभाव

13 July 2024

सरलतम लॉगिन फ़ॉर्म टेम्पलेट

22 August 2025

बायोमेट्रिक प्रमाणीकरण के साथ लॉगिन और पंजीकरण फ़ॉर्म

HTML

<!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;
}

अनुशंसित

CSS एनिमेटेड पृष्ठभूमि और लोडिंग प्रभाव

सरलतम लॉगिन फ़ॉर्म टेम्पलेट

बायोमेट्रिक प्रमाणीकरण के साथ लॉगिन और पंजीकरण फ़ॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS