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.

Sunday, June 30, 2019