HTML & CSS Login System

Open In Editor Publish Your Code Need a Website?

<!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 Login System

Recommended

bomb login

HTML CSS Developer Landing Page

CSS Toggle Menu with Font Awesome Icons

HTML

CSS

JS

Recommended

bomb login

HTML CSS Developer Landing Page

CSS Toggle Menu with Font Awesome Icons

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS