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

Mengenal Sejarah Bahasa Pemrograman C++

C++ merupakan bahasa pemrograman tingkat menengah yang banyak dijadikan sebagai dasar pembelajaran dalam dunia pemrograman. Bahasa ini bisa dibilang mudah dipelajari sebab sudah menggunakan bahasa yang mirip dengan bahasa manusia dibandingkan dengan bahasa Assemble yang merupakan bahasa tingkat rendah. Salah satu keunggulan dari bahasa ini adalah kecepatannya dalam melakukan kompilasi kedalam bahasa mesin, selain itu bahasa c++ banyak dijadikan sebagai acuan untuk bahasa-bahasa pemrograman baru. Sejarah Awal Pembuatan Bahasa Pemrograman C++ Bahasa C++ dibuat oleh Bjarne Stroustrup yaitu seorang ilmuwan komputer dan profesor di bidang ilmu komputer di Texas A&M University. Profesor yang berasal dari Denmark ini dulunya tergabung dalam Computer Research Institute of Cambridge University dimana dia menghabiskan hari-harinya mengabdikan diri untuk meneliti perangkat lunak yang berjalan pada sistem terdistribusi. Sistem terdistribusi merupakan sistem dimana banyak komputer yang terhubu...
Posting Komentar
Baca selengkapnya

Panduan Rinci Cara Membuat Website

Website adalah suatu kumpulan halaman berbentuk digital yang dapat diakses menggunakan perangkat lunak yang disebut Browser, dengan bantuan jaringan Internet. Penjelasan mengenai apa itu website telah dijelaskan sebelumnya di dalam postingan : Mengenal Apa Itu Web dan Hal yang Perlu di Perhatikan dalam Membangun Web . Didalam postingan tersebut sudah dijelaskan apa saja yang perlu diperhatikan dalam pembuatan web atau website. Selanjutnya pada postingan ini akan dijelaskan secara rinci bagaimana cara membuat sebuah website. Sebelum membuat sebuah website anda harus memutuskan terlebih dahulu akan membuat website seperti apa. Jika anda sudah menentukan tema web anda sekarang anda perlu menentukan aplikasi apa yang ingin anda gunakan. Apakah anda akan membuatnya secara native, menggunakan framework, atau menggunakan CMS. Pada postingan ini yang dijelaskan adalah langkah-langkah membuat sebuah website baik secara native, framework, ataupun menggunkan CMS. Silahkan anda simak langkah demi ...
Posting Komentar
Baca selengkapnya

Cara Membuat QRCode Mengunakan PHPQRCode

QRCode merupakan sebuah code yang dibuat menjadi sebuah gambar, sehingga untuk membaca kode yang ada pada gambar tersebut dibutuhkan scan khusus QRCode. Teman-teman yang masih bingung apa itu QRCode bisa melihat contohnya pada gambar di bawah ini : Pada gambar tersebut berisikan kata "codingrakitan.blogspot.com". Jika kalian hendak membuat kode QRCode anda bisa menggunakan bantuan library PHP yaitu PHPQRCode. Diakhir postingan saya akan memagikan hasil project yang telah dibuat beserta library PHPQRCode. Untuk membuat sebuah QRCode dengan bantuan library ini anda perlu mendeklarasikan kode seperti : buat_code.php <?php include 'include/phpqrcode/qrlib.php'; $tmp = "asset/gambar_kode/"; $isi = $_POST['isi']; $kualitas = "H"; $ukuran = 10; $padding = 2; $nama = "nama_gambar".".png"; QRCode::png($isi, $tmp.$nama, $kualitas, $ukuran, $padding); ?> "QRCode::png($isi, $tmp.$nama, $kualitas, $ukuran, $padding);...
Posting Komentar
Baca selengkapnya