Freebies: CSS3 Login, Register and Forgot Password Form

Beberapa hari yang lalu saya melihat seseorang membuat login form yang unik di CodePen dan itu membuat saya menjadi tertarik untuk membuatnya. Namun, bukan berarti saya akan membuat login form dengan tampilan yang sama, melainkan saya hanya terinspirasi untuk membuat login form yang unik sama halnya dengan login form yang saya pernah saya lihat sebelumnya.

Login form ini saya buatkan repositorinya di GitHub agar kamu dan teman kamu mudah untuk men-download-nya atau berkontribusi.

Saya beri nama “lowin” login form ini, sesungguhnya tidak ada makna apapun dibalik nama tersebut, hanya saja agar mudah diingat dan lebih unique.

Lowin tidak menggunakan framework ataupun library apapun, semisal Bootstrap, jQuery, Foundation atau yang lainnya. Semuanya dibuat dari nol hingga menjadi login form yang utuh dan siap digunakan. Lowin menggunakan CSS3 sebagai efek animasi dan UI, sedangkan functionality-nya menggunakan pure JavaScript dan untuk font-nya menggunakan “Segoe UI”. Semua itu dilakukan agar Lowin bisa digunakan pada setiap project web kamu, selama itu menggunakan HTML, CSS dan JavaScript, menggunakan atau tanpa menggunakan framework atau library apapun. Jadi, untuk menggunakan Lowin kamu tidak perlu men-download apa-apa lagi.

Lowin menggunakan CSS Variables, sehingga kamu dapat dengan mudah mengkostumisasi warna dengan warna yang kamu inginkan. Pada dasarnya, Lowin memiliki 5 varian warna, tentu kamu bisa membuat varian warna sendiri.

Berikut ini adalah tampilan utama dari Lowin, tentu kamu bisa mengujinya langsung dengan link demo yang telah disediakan.

Lowin dirilis di bawah lisensi MIT, berarti kamu bebas menggunakan Lowin dalam penggunaan personal ataupun komersil tanpa harus menyertakan link kepada kami. Namun, jika kamu ingin menyertakan link kepada kami, itu sangat dihargai.

Untuk men-download dan melihat demo, silakan gunakan link di bawah ini. Jangan lupa untuk berkontribusi agar project ini semakin bagus.

Final Words

Semoga dengan project ini dapat membantu mempercepat pengerjaan project yang sedang kamu gunakan ya, Jon!

Digital Ocean baner

Muhamad Nauval Azhar

Code of a down