Script Login

A. Pendahuluan

Hallo kawan saya disini akan memberitahukan cara membuat tema login hotspot.

B. Penjelasan

Disini saya akan memakai atau menggunakan script html, css, dan bootstrap. Karena sesuai dengan materi yang saya sampaikan dulu....

C. Tutorial

------------------------------------------------------------------------------------------------------------------
   script css :
* {
    padding: 0px;
    margin: 0px;
    font-family: arial;
}
#login {
    width: 100%;
    height: 100vh;
    background-image: url("naruto.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
}
#login1 {
    width: 100%;
    height: 100vh;
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
}
.center {
    width: 550px;
    height: auto;
    margin: 0 auto;
    margin-top: 100px;
    background-color: transparent;
    padding :40px;
}
.center h2 {
    font-size: 40px;
    text-align: center;
    color: #757575;
    padding-bottom: 40px;
}
.fl {
    width: 100px;
}
.itpw {
    width: 92%;
    padding: 13px 10px;
    margin: 5px 0px;
    background-color: transparent;
    border: 3px solid transparent;
    color: #757575;
    transition: all 0.7s;
}
.its {
    width: 99.7%
    font-size: 19px;
    color: #f5f5f5;
    padding: 12px;
    margin: 5px 0;
    background-color: #004d40;
    border: none;
    transition: all 0.4s;
}
.itpw :focus {
border-bottom: 3px solid #004d40;
color: #004d40
}

.its :hover .its :focus {
opacity: 0.7;
cursor: pointer;
}
.center p {
    margin: 20px 0;
    text-align: center;
    font-size: 14px
}
.ceneter p a{
    color: #757575;
}
@media screen and (max-width:900px) {
    #login {
    background-size: 100% 100%;
    }
    #login1 {
    background-size: 100% 100%;
    }
    .its {
    width: 100%;
    }
    .itpw {
    font-size: 14px;
    width: 90%;
    padding: 13px 3%;
    }
    .center {
    width: 230px;
    }
    .center p {
    font-size: 12px;
    }
}
@media screen and (max-width:350px) {
    .center {
    padding: 20px;
    width: 75%;
    }
}
---------------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------------------------------------------
script html :
<html>
    <head>
    <meta charset="utf-8">
    <title>Terserah lhooo ajhaa</title>
    <link rel="stylesheet" href="css111.css">
    <meta name="viewport" content="width=device-width , initial-scale=1">
    </head>
<body>
<div id="login">
<marquee bgcolor="red" scrollamount="3" height="22px"><b>.: SELAMAT DATANG DI LOGIN KAMI :.</b></marquee>
<div id="login1">
<div class="center">
    <h2>SELAMAT DATANG DI LOGIN KAMI</h2>
    <form class="fl" action="" methode="post">
        <input class="itpw" type="text" name="username" placeholder="Username or Email"><br>
            <input class="itpw" type="password" name="password" placeholder="Password"><br>
            <input class="its" type="submit" name="login" value="LOGIN">
          </form>

          <p><a href="#">Forget your password ?</a> | <a href="">Created an account</a> </p>
    </div>
   </div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------
script bootstrap :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
------------------------------------------------------------------------------------------------------------------------------------------------

Hasil :