Membuat Cloud Menggunakan HTML dan CSS – Pada tutorial kali ini, kita akan membahas bagaimana membuat cloud menggunakan HTML dan CSS. Pembuatan gambar cloud atau awan dapat dilakukan hanya menggunakan HTML dan CSS. Apakah sulit? tentunya tidak. Apakah membutuhkan kode yang panjang? Sedikit kok. Disini kamu hanya perlu menyiapkan dua buah file dengan nama index.html dan style.css. Simak artikel dibawah ini untuk mengetahui bagaimana cara membuat cloud menggunakan HTML dan CSS.

Daftar Isi

Membuat Cloud Menggunakan HTML dan CSS

Kode CSS

Berikut ini kode CSS yang dapat kamu salin dan gunakan pada perangkat yang dimiliki.

*{
	margin: 0;
	padding: 0;
}

.main{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: black;
}

.box{
	width: 200px;
	height: 40px;
	background: #0779e4;
	border-radius: 50px;
	position: relative;
}

.box1,.box2,.box3{
	position: absolute;
	top: -70px;
	left: 30px;
	width: 100px;
	height: 100px;
	border-radius: 50px;
	background: #0779e4;
}

.box2{
	width: 65px;
	height: 65px;
	top: -25px;
	left: -15px;
}

.box3{
	width: 80px;
	height: 80px;
	top: -40px;
	left: 100px;
}

.text-bottom{
	width: 200px;
	height: 40px;
	color: white;
	position: absolute;
}

Kode HTML

Dibawah ini adalah kode HTML yang dapat kamu salin dan gunakan.

<!DOCTYPE html>
<html>
<head>
	<TITLE>Cloud</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="main">
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
		<div class="text-bottom">Inpows</div>
	</div>
</body>
</html>

Hasil yang diperoleh

Berikut adalah hasil yang diperoleh saat menjalankannya pada browser yang anda jalankan.

Membuat Cloud Menggunakan HTML dan CSS - Inpows — Membuat Cloud Menggunakan HTML dan CSS – Inpows

Sekian artikel mengenai cara membuat cloud menggunakan HTML dan CSS. Kalian dapat mencari artikel mengenai source code lainnya hanya di Inpows.