Langsung ke konten utama

Membuat Tampilan Seperti WhatsApp Web dengan HTML dan CSS


WhatsApp merupakan salah satu aplikasi chat yang sngat populer di Indonesia. Selain bisa digunakan di Smartphone, WhatsApp juga dapat dinikmati via WEB. Alamat resminya adalah https://web.whatsapp.com/.

Pada postingan kali ini saya akan membagikan tutorial tentang cara membuat tampilan web seperti pada halaman WhatsApp Web. Disini saya hanya akan membuat tampilan saja, untuk web dengan aksinya akan saya ajarkan pada postingan selanjutnya. Hasilnya nanti akan tampak seperti gambar dibawah :


Langsung saja dua code yang harus anda perhatikan adalah "index.html" dan "css.css" yang ada pada folder "asset/css/css.css".

index.html



<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat QR Code</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="co">
<div class="content">
<div class="bc">
<div class="kiri">
<div class="title">Untuk menggunakan CodingRakitan di komputer Anda:</div>
<ol class="_1TxZR"><li class="_1Fl07">Buka CodingRakitan di telepon Anda</li><li class="_1Fl07"><span dir="ltr" class="selectable-text invisible-space copyable-text">Ketuk <strong><span dir="ltr" class="selectable-text invisible-space copyable-text">Menu <span class="_3PxOr"><svg height="24px" viewBox="0 0 24 24" width="24px"><rect fill="#f2f2f2" height="24" rx="3" width="24"></rect><path d="m12 15.5c.825 0 1.5.675 1.5 1.5s-.675 1.5-1.5 1.5-1.5-.675-1.5-1.5.675-1.5 1.5-1.5zm0-2c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5zm0-5c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5z" fill="#818b90"></path></svg></span></span></strong> atau <strong><span dir="ltr" class="selectable-text invisible-space copyable-text">Pengaturan <span class="_3PxOr"><svg width="24" height="24" viewBox="0 0 24 24"><rect fill="#F2F2F2" width="24" height="24" rx="3"></rect><path d="M9.34 8.694a4.164 4.164 0 0 0-1.606 3.289c0 1.338.63 2.528 1.61 3.292l-1.46 2.527a7.065 7.065 0 0 1-3.052-5.82c0-2.41 1.206-4.54 3.048-5.816l1.46 2.528zm6.713 2.859c-.217-2.079-1.992-3.739-4.148-3.739-.578 0-1.128.116-1.628.329L8.819 5.617a7.042 7.042 0 0 1 3.086-.704c3.76 0 6.834 2.958 7.059 6.64h-2.91zm-1.065.43a3.083 3.083 0 1 1-6.166 0 3.083 3.083 0 0 1 6.166 0zm-6.164 6.364l1.458-2.523a4.153 4.153 0 0 0 1.623.322 4.154 4.154 0 0 0 4.12-3.524h2.922a7.062 7.062 0 0 1-7.042 6.426c-1.105 0-2.15-.25-3.081-.7zm11.197-7.21a7.88 7.88 0 0 0-.404-1.824l.286-.12a.527.527 0 0 0-.403-.973l-.29.12a8.176 8.176 0 0 0-1.197-1.77l.231-.23a.526.526 0 1 0-.744-.744l-.234.234a8.17 8.17 0 0 0-1.775-1.18l.13-.31a.526.526 0 1 0-.972-.403l-.12.313a8.463 8.463 0 0 0-1.995-.405v-.35A.533.533 0 0 0 12 2.97a.533.533 0 0 0-.535.526v.338a8.02 8.02 0 0 0-2.173.416l-.13-.313a.526.526 0 0 0-.972.402l.129.311a8.171 8.171 0 0 0-1.775 1.18l-.235-.235a.526.526 0 0 0-.743.744l.23.231A8.175 8.175 0 0 0 4.6 8.34l-.29-.12a.526.526 0 0 0-.403.971l.285.122a7.882 7.882 0 0 0-.404 1.824h-.322a.533.533 0 0 0-.526.534c0 .29.235.535.526.535h.28c.02.831.166 1.624.418 2.378l-.257.1a.523.523 0 1 0 .402.968l.252-.105a8.17 8.17 0 0 0 1.191 1.797l-.187.187a.526.526 0 1 0 .744.743l.184-.183a8.173 8.173 0 0 0 1.792 1.208l-.096.231a.526.526 0 1 0 .972.403l.096-.23c.698.24 1.436.387 2.208.428v.243c0 .29.244.526.535.526.29 0 .534-.235.534-.526v-.253a8.012 8.012 0 0 0 2.03-.417l.09.229a.523.523 0 1 0 .967-.403l-.096-.231a8.172 8.172 0 0 0 1.792-1.208l.184.183a.526.526 0 1 0 .743-.744l-.187-.186a8.174 8.174 0 0 0 1.191-1.798l.252.104a.526.526 0 1 0 .403-.971l-.257-.095a8.074 8.074 0 0 0 .417-2.378h.281c.29 0 .526-.244.526-.535a.533.533 0 0 0-.526-.534h-.323z" fill="#818B90"></path></svg></span></span></strong> dan pilih <strong>CodingRakitan Web</strong></span></li><li class="_1Fl07">Arahkan telepon Anda ke layar ini untuk memindai kode tersebut</li></ol>
</div>
<div class="kanan">
<img src="asset/gambar_kode/qrkode.png">
</div>
</div>

</div>
</div>
<div class="back">
<div class="logo">
<div class="l">
<img src="asset/icon/logo.png">
</div>
<div class="j">
<a href="">CODINGRAKITAN.BLOGSPOT.COM</a>
</div>


</div>
</div>


</body>
</html>

Kode di atas berfungsi sebagai kerangka.

css.css

body{
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
background: #d3dbda;
}.content{
margin: auto;
width: 65%;
text-align: center;
background: white;
margin-top: 100px;
padding: 64px 60px 110px;
box-shadow: 0 17px 50px 0 rgba(0,0,0,.19),0 12px 15px 0 rgba(0,0,0,.24);
border-radius: 4px;
}.content img{
width: 100%;
/*box-shadow: 2px 1px 4px 1px;*/

}.back{
background: #bd1e1e;
width: 100%;
height: 222px;
}.co{
width: 100%;
position: absolute;
}.bc{
display: flex;
}
.kiri{
max-width: 556px;
/*float: left;*/
}.kanan{
max-width: 264px;
margin-left: 60px;
/*float: left;*/
}.title{
color: #55636b;
font-size: 28px;
font-weight: 300;
line-height: normal;
vertical-align: baseline;
text-align: left;
margin-bottom: 52px;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
}._1TxZR{
text-align: left;
padding: 0 0 0 24px;
margin: 0;

list-style: none;
list-style-type: decimal;
font: inherit;
    font-size: inherit;
font-size: 100%;
vertical-align: baseline;
outline: none;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
color: #4b4b4b;
text-rendering: optimizeLegibility;
font-size: 18px;
line-height: 28px;

}li{
margin-top: 18px;
}.logo img{
width: 50px;
height: 50px;

}.logo{
width: 78%;
margin: auto;
padding-top: 25px;
}.logo a{
text-decoration: none;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
color: white;
font-size: 12px;
}.l{
float: left;
}.j{
float: left;
padding: 13px;
}
File ini berfungsi untuk mengatur tampilan kerangka yang telah dibuat, seperti warna, ukuran, font, dll.

Silahkan download project file disini.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Blank Hitam Pada Photoshop

Saat ini mungkin anda sedang mengalami hal yang pernah saya alami, dimana ketika mengedit gambar di Photoshop tiba-tiba screen layer project berubah menjadi hitam. Apalagi pas menambahkan atau mengedit tulisan, blank ini kerap kali muncul. Kurang lebih akan tampak seperti gambar berikut. Teman-teman jangan khawatir karena saya telah menemukan solusinya dan berhasil saya terapkan. Berikut Cara Mengatasi Blank Hitam Pada Photoshop. 1. Masuk ke menu preferences dengan menekan menu Edit -> Preferences -> Performance . 2. Pada layar Preferences klik tombol Advanced Settings 3. Pada layar Advanced Graphics Processor Settings pada pilihan Drawing Mode silahkan ganti menjadi basic kemudian klik Ok , anda akan kembali ke layar Preferences silahkan klik lagi OK . 4. Selanjutnya tutup Photoshop anda dengan klik menu File -> exit . 5. Terakhir buka kembali Photoshop dan lihat hasilnya.
Posting Komentar
Baca selengkapnya

Inilah Kelebihan dan Kekurangan Ruby

Ruby merupakan salah satu bahasa pemrograman berorientasi objek berbasis skrip yang dikembangkan oleh Yukihiro Matsumoto yaitu seorang programer asal Jepang. Untuk mengetahui lebih jauh tentang bahasa Ruby silahkan baca postingan sebelumnya : Mengenal Bahasa Pemrograman Ruby  Sesuai judul postingan kali ini kita hanya akan membahas mengenai Kelebihan serta Kekurangan Bahasa Pemrograman Ruby. Berikut beberapa point yang telah kami jabarkan. Kelebihan Bahasa Pemrograman Ruby 1. Kode sederhana  Dibandingkan dengan bahasa pemrograman lainnya, yang kebanyakan untuk menulis kode dibutuhkan sekitar 10 baris, pada Ruby hanya butuh 1 atau 2 baris. Inilah kenapa Ruby dikatakan memiliki kode yang sederhana. Karena kesederhanaan dalam kodenya, akan mengurangi jam kerja programmer. 2. Multi-platform Ruby dapat berjalan di berbagai sistem operasi seperti Mac, Windows, hingga Linux. 3. Tingkat kebebasan yang tinggi Salah satu bentuk kebebasan programer dalam menuliska kode Ruby seperti tidak...
Posting Komentar
Baca selengkapnya

Mengenal Sejarah JavaScript

Para programer berbasis web tentunya sangat ingin mengetehui lebih dalam tentang JavaScript. Hal ini tidak lepas dari fitur yang disediakan oleh JavaScript yang memudahkan dalam mengontrol, memanipulasi sebuah website. Selain itu bahasa pemrograman ini juga digunakan di hampir 90% web diseluruh dunia. Sejarah Bahasa Pemrograman JavaScript JavaScript merupakan salah satu bahasa pemrograman berbasis website yang dikembangkan oleh Netscape, sebuah perusahaan telekomunikasi yang juga mengembangkan browser Netscape Navigator. JavaScript sendiri mulai dibuat pada tahun 1995 yang mana ditangani oleh programer Netscape bernama Brendan Eich. Pada awal kemunculannya bahasa pemrograman ini bernama LiveScript. Nama ini kemudian dirubah menjadi JavaScript dikarenakan pada saat itu Java yang dirilis oleh Sun Microsystem (sekarang Oracle)sedang menjadi sorotan. Bisa dikatakan bahwa tujuan penamaan JavaScript tidak lain untuk menarik perhatian para programan pada waktu itu, jadi JavaScript tidak ada...
Posting Komentar
Baca selengkapnya