Système de connexion HTML et CSS

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

26 May 2025

Site Web de portfolio de développeur HTML

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

Système de connexion HTML et CSS

Recommandé

Un code par mironovbogdan341

application météo

Site Web de portfolio de développeur HTML

HTML

CSS

JS

Recommandé

Un code par mironovbogdan341

application météo

Site Web de portfolio de développeur HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS