Langsung ke konten utama

Cara Membuat Tampilan Login seperti Facebook


Kali ini kita akan membuat sebuah tampilan website sosial media yaitu facebook. Tampilan yang akan dibuat adalah tampilan pertama yang akan muncul ketika membuka facebook (tampilan login dan daftar). Dalam pembuatan kali ini bahasa pemrograman web yang digunakan adalah HTML, dan CSS. Tampilan akhirnya akan tampak seperti berikut :



Berikut adalah kode dalam file utama "index.html" dan "css.css".

index.html



<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tampilan Login seperti Facebook</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png">
</head>
<body >
<div class="atas">
<div class="bungkus">
<div class="kiri">
<h3>codingrakitan</h3>
</div>
<div class="kanan">
<div class="user">
<div class="judul">
Email atau Telepon
</div>
<div class="input">
<input type="text" name="username">
</div>
</div>
<div class="user" style="margin-right: 2px;">
<div class="judul">
Kata Sandi
</div>
<div class="input">
<input type="password" name="password">
</div>
<div class="lupa">
<a href="#">Lupa akun?</a>
</div>
</div>
<div class="user" >
<div class="judul" style="color: transparent;">
|
</div>
<div class="input">
<button>Masuk</button>
</div>
</div>
</div>
</div>

</div>
<div class="content">
<div class="bc">
<div class="kr">
<div class="jd">
Codingrakitan.blogspot.com membantu anda dalam belajar pemrograman android, hingga web.
</div>
<div class="gm">
<img src="asset/icon/bc.png">
</div>
</div>
<div class="kn">
<div class="at">
<h2>Daftar</h2>
<a>Gratis, sampai kapan pun.</a>
</div>
<div class="it" style="display: flex;margin-top: 20px;">
<div class="it1" style="margin-right: 7px;">
<input type="text" name="nd" placeholder="Nama depan">
</div>
<div class="it1">
<input type="text" name="nb" placeholder="Nama belakang">
</div>
</div>
<div class="it">
<div class="it1">
<input type="text" name="nr" placeholder="Nomor seluler atau email">
</div>
</div>
<div class="it">
<div class="it1">
<input type="text" name="kt" placeholder="Kata sandi baru">
</div>
</div>
<div class="it" style="margin-top: 30px;">
<div class="jd2">
<h5>Tanggal Lahir</h5>
</div>
</div>
<div class="it" style="display: flex;">
<div class="sl">
<select>
<option>Tanggal</option>
</select>
</div>
<div class="sl">
<select>
<option>Bulan</option>
</select>
</div>
<div class="sl">
<select>
<option>Tahun</option>
</select>
</div>
</div>
<div class="it">
<div class="jd2">
<h5>Jenis Kelamin</h5>
</div>
</div>
<div class="it" style="display: flex;margin-bottom: 20px;">
<div class="rd">
<input type="radio" name="jk">
Perempuan
</div>
<div class="rd">
<input type="radio" name="jk">
Laki-laki
</div>
<div class="rd">
<input type="radio" name="jk">
Khusus
</div>
</div>
<div class="it">
<p>Dengan mengklik Daftar, Anda menyetujui Ketentuan, Kebijakan Data dan Kebijakan Cookie kami. Anda akan menerima Notifikasi SMS dari Facebook dan dapat menolaknya kapan saja.</p>
</div>
<div class="it">
<button>Daftar</button>
</div>
</div>
</div>
</div>
</body>
</html>


css.css

body{
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
background: #d3dbda;
}.atas{
width: 100%;
height: 80px;
background:#983b45;

}.bungkus{
width: 73%;
height: 100%;
margin: auto;
display: flex;
font-family: Helvetica, Arial, sans-serif;
}.kiri{
width: 59%;
height: 100%;


}.kiri h3{

margin: 0px;
margin-top: 20px;
color: white;
font-size: 30px;
}.kanan{
height: 100%;
}.user{
float: left;
padding: 10px;
font-size: 12px;
padding-top: 15px;
}.judul{
margin-bottom: 5px;
color: white;
}.input input{
padding: 2px;
border:1px solid #1d2a5b;
}.lupa a{
text-decoration: none;
color: #8fb4cc;
}.lupa{
margin-top: 5px;
}.input button{
background: #b24242;
border: 1px solid #7d2929;
padding: 3px;
color: white;
padding-left: 5px;
padding-right: 5px;
cursor: pointer;
}.content{
background: url(../icon/aa.png) 0 bottom repeat-x;
background: linear-gradient(white, #E8D3D3);
width: 100%;
padding-bottom: 200px;
}.bc{
margin: 0 auto;
width: 980px;
display: flex;
}.kr{
width: 565px;
}.kn{
width: 400px;
}.jd{
color: #0e385f;
font-size: 20px;
font-weight: bold;
line-height: 29px;
margin-top: 40px;
width: 450px;
word-spacing: -1px;
font-family: Helvetica, Arial, sans-serif;
}.it{
margin-top: 10px;
}.it1{
width: 100%;
background: white;
border-radius: 7px;
border: 1px solid #bdc7d8;
overflow: hidden;
}.it1 input{
font-size: 18px;
padding: 7px;
width: -moz-available;
border:unset;
}.at{
font-family: Helvetica, Arial, sans-serif;
}.at h2{
font-weight: 600;
color: #333;
margin-bottom: 5px;
font-size: 36px;
}.at a{
color: #1d2129;
font-size: 19px;
}.sl select{
border: 1px solid #ccd0d5;
font-size: 13px;
background-color: #fff;
color: #1c1e21;
height: 30px;
padding: 5px;
}.jd2 h5{
margin: unset;
color: #90949c;
}.jd2{
color: #0e385f;
font-size: 20px;
font-weight: bold;
width: 450px;
word-spacing: -1px;
font-family: Helvetica, Arial, sans-serif;
}.it button{
font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
font-weight: bold !important;
font-size: 19px;
letter-spacing: normal;
text-rendering: optimizelegibility;
/*box-shadow: inset 0 1px 1px #a4e388;*/
border:1px solid;
border-color: #3b6e22 #3b6e22 #2c5115;
background: linear-gradient(#67ae55, #578843);
background-color: #69a74e;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
letter-spacing: 1px;
position: relative;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
min-width: 194px;
padding: 7px 20px;
text-align: center;
}.it p{
color: #777;
font-size: 11px;
width: 316px;
}.rd{
font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
color: #1d2129;
font-size: 18px;
font-weight: normal;
line-height: 18px;
padding: 0 10px 0 3px;
}


Untuk melihat atau mendownload project lengkapnya silahkan klik disini
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)   Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita. Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba.  Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini. Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/ ). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi ( Curriculum Director di Hacktiv8 Indonesia ). Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka ( user interface) yang dibuat oleh Rich Harris . Namun menurut penulisn...
Posting Komentar
Baca selengkapnya

Mengenal Apa itu Android Studio

Android Studio merupakan tools IDE ( Integrated Development Environment ) yang digunakan untuk membuat aplikasi android. Fungsi utamanya adalah sebagai editor yang menyediakan berbagai kebutuhan dalam membangun aplikasi android seperti widget, library, dll. Android Studio versi terbaru telah mendukung 2 bahasa pemrograman yaitu Java dan Kotlin. Sebelumnya hanya mendukung bahasa Java. Android Studio hadir sebagai pengganti Eclipse ADT ( Android Development Tools ) yaitu tools utama sebelumnya. Tools Android Studio ini dibangun di atas aplikasi yang sudah populer sebagai editor programer yaitu JetBrains IntelliJ IDE. Selain itu Android Studio di lengkapi dengan Emulator sendiri. Sama halnya seperti Eclipse, Android Studio juga memerlukan SDK ( Software Development Kit ) untuk membangun aplikasi android. Bedanya Android Studio didukung penuh oleh Google sebagai pengembangnya serta menggunakan grandle dalam melakukan build. Baca juga : Perbedaan Membuat Aplikasi Android Menggunakan Ecli...
Posting Komentar
Baca selengkapnya

Cara Membuat Project Baru dengan Ruby on Rails

    Pada postingan sebelumnya Mengenal dan Menginstall Ruby on Rails kita telah menginstall bahan-bahan yang diperlukan untuk menjalankan Rails atau Ruby on Rails. Tentunya membuat project baru adalah langkah yang perlu di ketahui sebagai dasar membuat web menggunakan Rails ini. Membuat Project baru di Rails Sebagai contoh disini kita akan membuat project baru bernama " hello_world ". Cara membuatnya sangat mudah anda tinggal buka CMD dengan menekan Windows + R kemudian ketikkan CMD. Setelah CMD terbuka, arahkan ke folder tempat anda ingin menyimpan file Rails anda. Disini saya mengarahkannya pada "E:\ruby_on_rails", anda bisa menentukan sesuka hati tempat penyimpanannya. Untuk mengarahkan ketikkan perintah " cd E: " kemudian masuk ke folder " cd ruby_on_rails ", seperti pada gambar.     Setelah berada di folder atau directory yang di inginkan, ketikkan perintah rails new hello_world . Intruksi tersebut mengisyaratkan untuk membuat project ba...
Posting Komentar
Baca selengkapnya