Membuat logo whattsap dengan HTML dan CSS
Whattapps HTML dan CSS
Halo teman temna kali ini akan belajar pengetahuan tentang HTML 5 dan CSS untuk itu simak baik baik ya materi nya supaya teman teman paham dan mengerti , yuk jangan laman langsung saja kita ke komputer kita masing kemudian buka text editor yang biasa kali pake buat ngoding,
1. Buka text editor anda
2. Siapa broswe anda seperti google,safari,firefoox dll
3. Buat Folder baru
4. buka folder baru tadi dengan mengunakan text editor
5. Kemudian buat file dengan dalam folder tadi dengan nama index.html
6. masukan code program berikut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Membuat Logo Whattaps</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
<div class="white">
<div>
<i class="fas fa-phone"></i>
</div>
</div>
</body>
</html>
7. buat file lagi di folder yang sama dengan nama style.css
8. Jika sudah masukan program berikut
<style type="text/css">
body{
margin: 0;
padding: 0;
background: lightblue;
}
div{
width: 70px;
height: 70px;
border-radius: 35px;
background: #3AC371;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.white{
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #fff;
box-shadow: 2px 2px 3px 2px rgba(0,0,0,.3);
}
.white::before{
content: "";
top: 65px;
left: -15px;
border-width: 20px;
border-style: solid;
border-color: transparent #fff transparent transparent;
position: absolute;
transform: rotate(-50deg) rotateX(-55deg);
}
.white::after{
content: "";
top: 63px;
left: -4px;
border-width: 15px;
border-style: solid;
border-color: transparent #3AC371 transparent transparent;
position: absolute;
transform: rotate(-51deg) rotateX(-50deg);
}
.fas{
left: 17px;
top: 18px;
position: absolute;
font-size: 35px;
color: #fff;
transform: rotate(90deg);
}
</style>
9. Jika sudah mari bukan hasil dengan mengunakan google firefox, safari
