Cara Membuat Form Login Pure CSS + HTML


Form Login atau biasa disebut dengan kotak login merupakan sebuah kode yang disusun baik kode CSS, HTML, Js, Dan lainnya.

Form login berfungsi untuk memasukkan data login ke Database yang disediakan, dan biasanya database tersebut berada didalam Hosting, Proses inpu output mengguanakan Login php dan lainnya.
tetapi admin tidak membahas sampai dengan Php, kita membahas dari mulai pembuatan form loginnya.

Untuk ituu, mari simak berikut ini apa saja yang harus dilakukan..


Tahap Pertama : 
1. Untuk Memulai Pembuatannya, berikan nama sebagai berikut
login.html (untuk kode HTML) dan Style.Css (untuk Kode CSS)
2. pada data login.html > Masukkan kode HTML dibawah ini:


<html>
<head>
 <title>Cara Membuat Form Login Keren Pure CSS + HTML</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
    <div class="container">
        <h1>FORM LOGIN BY CHAYA EDUCATION</h1>
        <div class="login-body">
            <div class="top-login">
                <div class="title">
                    Login Form
                </div>
                <div class="line-1"></div>
                <div class="line-2"></div>
                <div class="line-3"></div>
                <div class="line-11"></div>
                <div class="line-22"></div>
                <div class="line-33"></div>
                <div class="line-111"></div>
                <div class="line-222"></div>
                <div class="line-333"></div>
            </div>
            <div class="character-circel">
                <div class="character-body">
                    <div class="head"></div>
                    <div class="hair1"></div>
                    <div class="hair2"></div>
                </div>
            </div>
            <div class="character-bacground"></div>
            <div class="character-bacground2"></div>
            <div class="character-bacground3"></div>
            <div class="character-circle1"></div>
            <div class="character-circle2"></div>

            <div class="login-box">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="morab31"></div>
                <div class="morab32"></div>
                <div class="morab33"></div>
                <div class="morab34"></div>
                <input type="text" placeholder="Username ...">
                <input type="password" placeholder="Password ...">
                <button class="button">Sign in</button>

                <div class="last-info">
                    <div class="one">
                        Remember Me
                        <input type="checkbox" id="thing">
                        <label for="thing"></label>
                    </div>
                    <div class="two">
                        <a href="#">Create Account</a>
                    </div>
                    <div class="three">
                        <a href="#">Forget Password ?</a>
                    </div>
                </div>
            </div>
            <div class="down-login">
            </div>
        </div>
    </div>
</body>
</html>

Langkah selanjutnya adalah, Sobat harus membuat file CSS dengan forma style.css > Lalu masukkan kode CSS dibawah ini..


/*Cara Membuat Form Login Keren Pure CSS + HTML CHAYAEDUCATION*/
body {
  margin: 0;
  padding: 0;
  background-color: #7a7a7a;
  overflow: hidden;
}
.container {
  width: 950px;
  margin: auto;
  overflow: hidden;
}
.container h1 {
  margin-top: 60px;
  font-family: Open Sans;
  font-size: 35px;
  font-weight: 600;
  color: white;
  text-align: center;
}
/* Login Body */
.login-body {
  position: fixed;
  margin-left: 277px;
  width: 400px;
  height: 508px;
  background-color: #e8e8e8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0px 13px 33px -10px rgba(0, 0, 0, 0.63);
}
.login-body .top-login {
  background-color: #128d9e;
  width: 420px;
  height: 85px;
  position: absolute;
}
/* LINES LINES LINES + Title */
.top-login .title {
  font-family: Open Sans;
  font-size: 25.5px;
  font-weight: 600;
  color: white;
  text-align: center;
  margin-top: 24px;
}
.line-1 {
  width: 54px;
  height: 8px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 16px;
  left: 45px;
}
.line-2 {
  width: 10px;
  height: 9px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 16px;
  left: 33px;
}
.line-3 {
  width: 54px;
  height: 8px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 16px;
  left: -23px;
}
.line-11 {
  width: 44px;
  height: 8px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 37px;
  left: 30px;
}
.line-22 {
  width: 10px;
  height: 9px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 37px;
  left: 18px;
}
.line-33 {
  width: 54px;
  height: 8px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 37px;
  left: -37px;
}
.line-111 {
  width: 44px;
  height: 8px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 60px;
  left: 41px;
}
.line-222 {
  width: 10px;
  height: 9px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 60px;
  left: 30px;
}
.line-333 {
  width: 54px;
  height: 8px;
  position: absolute;
  background-color: #ffffff;
  border-radius: 20px;
  top: 60px;
  left: -26px;
}
/* LINES LINES LINES */
/* Character */
.login-body .character-circel {
  position: absolute;
  background-color: #128596;
  top: 117px;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  left: 125px;
  overflow: hidden;
}
.login-body .character-body {
  position: absolute;
  background-color: #ff7d4a;
  top: 71px;
  width: 72px;
  height: 72px;
  left: 31px;
  border-radius: 25px;
}
.login-body .character-body:before {
  content: "";
  position: absolute;
  background-color: #aa0247;
  top: -7px;
  width: 30px;
  height: 30px;
  left: 48px;
  border-radius: 12px;
}
.login-body .character-body:after {
  content: "";
  position: absolute;
  background-color: #aa0247;
  top: -7px;
  width: 30px;
  height: 30px;
  left: -6px;
  border-radius: 12px;
}
.login-body .character-body .head {
  position: absolute;
  background-color: #ffb03e;
  top: -51px;
  width: 56px;
  height: 56px;
  left: 8px;
  border-radius: 22px;
  z-index: 1;
}
.login-body .character-body .head:before {
  content: "";
  position: absolute;
  background-color: #85ffff;
  top: 18px;
  width: 9px;
  height: 7px;
  left: 36px;
  border-radius: 8px;
  z-index: 1;
}
.login-body .character-body .head:after {
  content: "";
  position: absolute;
  background-color: #85ffff;
  top: 18px;
  width: 9px;
  height: 7px;
  left: 13px;
  border-radius: 8px;
  z-index: 1;
}
.login-body .character-body .hair1 {
  position: absolute;
  background-color: #85ffff;
  width: 8px;
  height: 27px;
  left: 32px;
  border-radius: 8px;
  z-index: 0;
  top: -66px;
}
.login-body .character-body .hair2 {
  position: absolute;
  background-color: #85ffff;
  width: 8px;
  height: 27px;
  left: 36px;
  border-radius: 8px;
  z-index: 0;
  top: -62px;
  -webkit-transform: rotate(-156deg);
  transform: rotate(-156deg);
}
.character-bacground {
  position: absolute;
  background-color: #5f416a;
  width: 230px;
  height: 25px;
  border-radius: 15px;
  top: 128px;
  z-index: -1;
  left: 89px;
}
.character-bacground:before {
  content: "";
  position: absolute;
  background-color: #5f416a;
  width: 44px;
  height: 21px;
  top: 22px;
  left: 15px;
}
.character-bacground:after {
  content: "";
  position: absolute;
  background-color: #2a0138;
  width: 44px;
  height: 21px;
  top: 24px;
  left: -3px;
  border-radius: 15px;
}
.character-bacground2 {
  position: absolute;
  background-color: #5f416a;
  width: 221px;
  height: 23px;
  border-radius: 15px;
  top: 172px;
  z-index: -1;
  left: 71px;
}
.character-bacground2:before {
  content: "";
  position: absolute;
  background-color: #5f416a;
  width: 44px;
  height: 21px;
  top: 22px;
  left: 152px;
}
.character-bacground2:after {
  content: "";
  position: absolute;
  background-color: #2a0138;
  width: 44px;
  height: 21px;
  top: 22px;
  left: 189px;
  border-radius: 11px;
}
.character-bacground3 {
  position: absolute;
  background-color: #5f416a;
  width: 108px;
  height: 23px;
  border-radius: 15px;
  top: 213px;
  z-index: -1;
  left: 223px;
}
.character-circle1 {
  position: absolute;
  background-color: #70557a;
  width: 11px;
  top: 157px;
  left: 112px;
  height: 11px;
  border-radius: 50%;
}
.character-circle1:before {
  content: "";
  position: absolute;
  background-color: #482554;
  width: 11px;
  left: -14px;
  height: 11px;
  border-radius: 50%;
}
.character-circle1:after {
  content: "";
  position: absolute;
  background-color: #401b4c;
  width: 11px;
  left: -28px;
  height: 11px;
  border-radius: 50%;
}
.character-circle2 {
  position: absolute;
  background-color: #401b4c;
  width: 11px;
  top: 199px;
  right: 93px;
  height: 11px;
  border-radius: 50%;
}
.character-circle2:before {
  content: "";
  position: absolute;
  background-color: #482554;
  width: 11px;
  left: -14px;
  height: 11px;
  border-radius: 50%;
}
.character-circle2:after {
  content: "";
  position: absolute;
  background-color: #70557a;
  width: 11px;
  left: -28px;
  height: 11px;
  border-radius: 50%;
}
.login-box {
  position: absolute;
  width: 300px;
  height: 175px;
  top: 264px;
  left: 50px;
}
.login-box .line1 {
  position: absolute;
  width: 260px;
  height: 1px;
  top: 41px;
  background-color: #ff7d4a;
  left: 20px;
}
.login-box .line2 {
  position: absolute;
  width: 260px;
  height: 1px;
  top: 89px;
  background-color: #ff7d4a;
  left: 20px;
}
.login-box .morab31 {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 85px;
  background-color: #ffffff;
  left: 16px;
  -webkit-transform: rotate(-64deg);
  transform: rotate(-64deg);
}
.login-box .morab32 {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 85px;
  background-color: #ffffff;
  right: 16px;
  -webkit-transform: rotate(-64deg);
  transform: rotate(-64deg);
}
.login-box .morab33 {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 37px;
  background-color: #ffffff;
  right: 16px;
  -webkit-transform: rotate(-64deg);
  transform: rotate(-64deg);
}
.login-box .morab34 {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 37px;
  background-color: #ffffff;
  left: 16px;
  -webkit-transform: rotate(-64deg);
  transform: rotate(-64deg);
}
.login-box input[type="text"] {
  color: #000000;
  border: none;
  font-family: Open Sans;
  font-size: 15px;
  padding-left: 35px;
  font-weight: 400;
  background-color: transparent;
  margin-top: 13px;
}
.login-box input[type="password"] {
  color: #000000;
  border: none;
  font-family: Open Sans;
  font-size: 15px;
  padding-left: 35px;
  font-weight: 400;
  background-color: transparent;
  margin-top: 24px;
}
.login-box .button {
  font-family: Open sans;
  font-size: 16px;
  font-weight: 400;
  color: white;
  border: none;
  background-color: #00b5c5;
  position: absolute;
  top: 113px;
  right: 42px;
  width: 210px;
  height: 47px;
  border-radius: 25px;
  cursor: pointer;
}
.login-box .button:hover {
  font-family: Open sans;
  font-size: 16px;
  font-weight: 400;
  color: #aa0247;
  border: none;
  background-color: #ffffff;
  position: absolute;
  top: 113px;
  right: 42px;
  width: 210px;
  height: 47px;
  border-radius: 25px;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.last-info {
  position: absolute;
  width: 400px;
  bottom: 2px;
}
.last-info .one {
  position: absolute;
  bottom: -45px;
  color: white;
  font-family: Open sans;
  font-size: 14px;
  left: -37px;
  width: 119px;
}
.last-info .one:after {
  content: "";
  position: absolute;
  width: 1.2px;
  height: 25px;
  background-color: white;
  color: white;
  font-family: Open sans;
  font-size: 14px;
  right: -6px;
  top: -2px;
}
.last-info .two a {
  position: absolute;
  bottom: -45px;
  font-family: Open sans;
  font-size: 14px;
  left: 100px;
  text-decoration: none;
  color: white;
}
.last-info .two a:after {
  content: "";
  position: absolute;
  width: 1.2px;
  height: 25px;
  background-color: white;
  color: white;
  font-family: Open sans;
  font-size: 14px;
  right: -15px;
  top: -2px;
}
.last-info .three a {
  position: absolute;
  bottom: -45px;
  font-family: Open sans;
  font-size: 14px;
  left: 224px;
  text-decoration: none;
  color: white;
  font-style: italic;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  top: 4px;
  background: #aa0247;
  height: 13px;
  width: 13px;
  border-radius: 30%;
  display: inline-block;
  padding: 0 0 0 0px;
  cursor: pointer;
  position: absolute;
  right: 5px;
  -webkit-transition: all 1s;
  transition: all 1s;
}
input[type="checkbox"]:checked + label {
  top: 4px;
  background: #ffffff;
  height: 13px;
  width: 13px;
  border-radius: 30%;
  display: inline-block;
  padding: 0 0 0 0px;
  cursor: pointer;
  position: absolute;
  right: 5px;
}
/* End Character */
/*Rare Down Login */
.down-login {
  position: absolute;
  background-color: #f93854;
  width: 420px;
  height: 10px;
  bottom: 0;
}
/*Rare Down Login*/
/* do not group these rules */
dah sobat, Mudah bukan?? Untuk membuat form atau tampilan memanglah mudah, Tetapii tidak sampai disitu, Jika ingin lanjut lagi, sobat harus menyewa hosting dengan login.php :D Semangat ya yang ingin membuatnya+_= Semoga bisa bermanfaat

Komentar

Posting Komentar

Postingan populer dari blog ini

Premium Template LK 21 Movie Streaming

Gambar
Template Layar Kaca 21 atau LK21 merupakan template yang dipakai oleh Lk21, yang sekarang sudah berganti domain menjadi dunia21.net Download template Film ilegal tersebut menjadi salah satu dambaan bagi para penonton film untuk menonton film film yang muncul. Namun admin tidak akan menjelaskan itu, admin mencoba menjual template yang digunakan oleh lk21, atau dunia21. Simak berikut ini : No Features Template Available 1 Responsive True 2 Mobile Friendly True 3 SEO Friendly True 4 Show Hide Search Box True 5 Ads Ready True 6 Validated Structured True 7 Minimalist True 8 Fast Loading True 9 HTML5 dan CSS3 True 10 Support HTTPS (SSL) True 11 Custum Error 404 page True 12 Related Post With Thumbnail True 13 Responsive Social Share Button True 14 Threaded Comment(Blogger) True 15 Auto Readmore With Resize True  16 Social Media Button True  17 Costum Sitemap True  18 Responsive Fixed Menu True  19 Compatible with major browsers True  20 Dll True Demo              Buy (100.000)
Baca selengkapnya

Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blogger

Gambar
Cara Memasang Popup Selamat Menunaikan ibadah puasa Seperti Arlina - Awal ingin membuat ini adalah pada saat mengunjungi situs Mbak arlina  Admin melihat sebuah popup selamat menunaikan ibadah puasa, tanpa berpikir lama admin mencoba untuk melihat kodenya dan agar semua muslim dan para blogger juga bisa mencicipinya. Tindakan ini bukanlah tindakan yang tidak diperbolehkan, hanya saja mengambil dan ingin membagikan, mbak arlina juga tidak keberatan loh sobat. Nahh jika sobat penasaran, silahkan simak berikut ini dan lihat demonya dulu ya+_= Selamat Menunaikan Ibadah Puasa ramadhan 1439 H Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blogger 1. Login ke Blogger 2. Masuk ke Tata  Letak > Edit HTML 3. Masukkan Font Awesome dibawah ini, Tepat diatas kode </body> <link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> 4. Masukkan CSS dibawah ini, Tepat diatas kode </head&
Baca selengkapnya

Cara Menghapus Credit Link Sora Template

Gambar
Ada banyak cara untuk Menghapus Credit link atau credit footer pada template. Terlebih khusus untuk sora template. Sora template merupakan salah satu website download template yang sangat bagus dan mengesankan, karena bagus dan mengesankan tersebut membuat pemilik template mengunci dan mengencrypt template di bagian credit footer agar tetap terlihat namanya. Cara ini sangat mudah untuk dipelajari, jadii untuk mempersingkat waktu, mari simak apa saja yang harus dilakukan. Hanya untuk pembelajaran saja, Lebih baik tidak melepas credit link untuk menghargai karya si pembuat template.  Cara Menghapus Credit Link Sora Template Ada Beberapa cara untuk menghapus credit link sora template, tapii admin menyediakan 3 cara, jika salah satunya tidak berhasil, maka coba lagii cara berikutnya. Cara Pertama Login Ke Blogger Lihat ke Tab Tema > Edit HTML > Dan Cari kode dibawah ini :  Hapus Kode Berikut dari tanda <script type='text/javascript'> Sampai Dengan </script> Setel
Baca selengkapnya