TUGAS PEMOGRAMAN(FROM LOGIN)

•Nama : ANDI FAHRIZAL      Kelas : TKJ.D1
•TUGAS PEMOGRAMAN
•(FROM LOGIN HATML DAN CSS)
•https://fromloginhtmldancss.blogspot.com/2022/01/from-login.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="container">
            <h1>Login</h1>
            <form>
                <label>username</label><br>
                <input type="text"><br>
                <label>password</label><br>
                <input type="password"><br>
                <button>log in</button>
            </form>
        </div>
  </body>
</html>

*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'open sans',sans-serif;
}

body{
    height: 100vh;
    background-image: url(https://th.bing.com/th/id/OIP.X8E5YwaBzsJ5QtHWeSGuiQHaEK?pid=ImgDet&rs=1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 25px;
    width: 300px;

    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 10px rgba(255, 255, 255, 3);
}

.container h1{
    text-align: left;
    color: #ffffff;
    margin-bottom: 30px;
    text-transform: uppercase;
    border-bottom: 4px solid #2966d1;
}


.container form input{
    width: calc(100% - 20px);
    padding: 8px 10px;
    margin-bottom: 15px;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #2979ff;
    color: #fff;
    font-size: 20px;
}

.container form button{
    width: 100%;
    padding: 5px 0;
    border: none;
    background-color:#2979ff;
    font-size: 18px;
    color: #fafafa;
}

•HASIL : 
•LINK REVRENSI :
https://www.niagahoster.co.id/blog/membuat-form-login/

Komentar

Posting Komentar