Sistema de inicio de sesión HTML y CSS

Abrir en el editor Video Publica tu código

Recomendado

15 August 2025

Código HTML para tableta de dibujo con Javascript

24 May 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;
}

Sistema de inicio de sesión HTML y CSS

Recomendado

Código HTML para tableta de dibujo con Javascript

Un código de testingai

Un código de Metehan

HTML

CSS

JS

Recomendado

Código HTML para tableta de dibujo con Javascript

Un código de testingai

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS