Post Detail

Youman Kawan ..

Pada kesempatan kali ini saya akan membagikan sebuah tulisan mengenai cara membuat halaman login dengan warna reggae, langsung saja tanpa perlu basa-basi lagi. Berikut scriptnya 

Untuk file css nya

<style>
    *{
        margin: 0;
        padding: 0;
    }

    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main {
        width: 100%;
        height: 100%;
        background: #1E9600;  
        background: -webkit-linear-gradient(to right, #FF0000, #FFF200, #1E9600); 
        background: linear-gradient(to right, #FF0000, #FFF200, #1E9600); 

    }

    .login {
        width: 350px;
        height: 400px;
        background: white;
        flex-direction: column;
        position: relative;
        box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.301);
    }

    .user {
        width: 75px;
        height: 75px;
        color: black;
        font-size: 2.5rem;
        border-radius: 50%;
        margin-bottom: 50px;
        background: #1E9600;  
        background: -webkit-linear-gradient(to right, #FF0000, #FFF200, #1E9600); 
        background: linear-gradient(to right, #FF0000, #FFF200, #1E9600);

    }

    .fa-envelope, .fa-key {
        font-size: 1.8rem;
        color: rgb(34, 12, 64, 0.6);
    }

    input {
        width: 250px;
        height: 30px;
        border: none;
        border-bottom: 2px solid #000;
        outline: none;
        margin-left: 10px;
        padding-left: 5px;
        font-size: 1rem;
    }

    .email, .password {
        margin-bottom: 20px;
    }

    .btn {
        width: 150px;
        height: 40px;
        font-size: 1.1rem;
        outline: none;
        border: none;
        cursor: pointer;
        margin-top: 10px;
        background: #1E9600;  
        background: -webkit-linear-gradient(to right, #FF0000, #FFF200, #1E9600);  
        background: linear-gradient(to right, #FF0000, #FFF200, #1E9600);
        color: black;
    }
</style>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Untuk HTML nya

<div class="main center">
    <div class="login center">
        <div class="user center">
            <i class="fas fa-user"></i>
        </div>
        <div class="email center">
            <i class="fas fa-envelope"></i>
            <input type="email" class="" placeholder="Masukan Email">
        </div>
        <div class="password center">
            <i class="fas fa-key"></i>
            <input type="password" class="" placeholder="Masukan Password">
        </div>
        <button class="btn">LOGIN</button>
    </div>
</div>

Tulisan kali ini sangat sederhana sekali, sekian dan haturnuhun