Membuat Tampilan Whatsapp Web Menggunakan CSS

Hai teman-teman, kembali lagi di website Dumetschool , tempat kursus website terbaik dan nomor satu. Artikel kali ini, saya akan Membuat Tampilan Whatsapp Web Menggunakan CSS. Mungkin temen-temen sudah ada beberapa yang tahu tentang whatsapp yang bisa di buka di website. Nah saya akan coba membuat tampilan layout saat kita akan scan code melalui handphone.

Langkah pertama untuk Membuat Tampilan Whatsapp Web Menggunakan CSS , teman-teman buat struktur html seperti seperti pada script dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>WhatSapp</title>
	<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
	<div class=”green”>
	</div>
	<div class=”container putih”>
		<div class=”atas”>
			<div class=”kiri”>
				<img src=”../images/barcode.png”>
			</div>
			<div class=”kanan”>
				<h1>Whatsapp</h1>
				<h3>Use Whatsapp on your phone to scan the code</h3>
				<input type=”checkbox” name=””> Keep me signed in
				<p>To reduce mobile data usage, connect your phone to Wi-fi</p>
			</div>
		</div>
		<div class=”bawah”>
			<div class=”kiri”>
				<ul>
					<li>
						<img src=”../images/android.jpg”>
						<h4>Android</h4>
						<p>Open WhatsApp – Menu – WhatsApp Web</p>
					</li>
					<li>
						<img src=”../images/windows.jpg”>
						<h4>Windows Phone</h4>
						<p>Open WhatsApp – Menu – WhatsApp Web</p>
					</li>
				</ul>
			</div>
			<div class=”kanan”>
				<ul>
					<li>
						<img src=”../images/iphone.jpg”>
						<h4>iPhone</h4>
						<p>Open WhatsApp – Setting – WhatsApp Web</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

Nah setelah selesai kita buat style css untuk mengatur layout htmlnya ya teman-teman, seperti pada script di bawah ini.

*{
	padding:0;
	margin:0;
}
body{
	background: #D6DBD8;
}
.green{
	background: #009688;
	height: 200px;
}
.container{
	margin: auto;
	width: 800px;
	margin-top: -170px;
	box-shadow: 0px 4px 8px grey;
}
.atas{
	overflow: hidden;
	padding: 50px;
	color:grey;
	background: white;
	border-radius: 5px 5px 0 0;
}
.bawah{
	overflow: hidden;
	padding: 20px 50px;
	background: #F6F8F8;
	border-radius: 0 0 5px 5px;
}
.kiri{
	float: left;
	width: 300px;
}
.kanan{
	float: right;
	width: 400px;
}
h1{
	margin:20px 0;
	font-weight: normal;
}
h3{
	margin-bottom: 30px;
	font-size: 24px;
	font-weight: normal;
}
input{
	margin-bottom: 15px;
}
ul{
	list-style: none;
}
ul li{
	height: 50px;
	margin: 10px 0;
}
ul img{
	float: left;
	margin-right: 10px;
}
ul li p{
	font-size: 13px;
	color:grey;
}

Jika sudah selesai, maka tampilan akan seperti pada gambar di bawah ini.

Disini saya pakai margin top dengan nilai minus untuk membuat container putih terlihat menimpah warna hijau. Demikian tutorial cara Membuat Tampilan Whatsapp Web Menggunakan CSS. Semoga Bermanfaat dan selamat mencoba.