Membuat logo sublime dengan HTML & CSS
Sublime HTML & 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. Siapakan webroswer anda
3. Buat folder baru
4. bukua folder baru tadi di text editor tadi
5. Kemudian buat file dengan nama index.hmtl
6. masuk code program berikut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Membuat Logo Sublime</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<div class="Sublime">
<div class="satu"></div>
<div class="dua"></div>
<div class="tiga"></div>
</div>
</div>
</body>
</html>
7. buat file lagi di folder yang sama dengan nama style.css
8. masukan code program berikut
body{
background-color: blue;
}
.Sublime{
background: #2e2e2f;
padding: 40px 30px 40px 40px;
width: 120px;
height: 120px;
border-radius: 7px;
}
.satu{
background: #f89820;
height: 40px ;
width: 100px;
border-radius: 4px;
transform: skew(-20deg);
transform: skewY(-20deg);
}
.dua {
background: #f89820;
height: 40px ;
width: 100px;
border-radius: 4px;
transform: skew(20deg);
transform: skewY(20deg);
margin-top: 3px;
margin-bottom: 3px;
}
.tiga {
background: #f89820;
height: 40px ;
width: 100px;
border-radius: 4px;
transform: skew(-20deg);
transform: skewY(-20deg);
}
9. Selesai selamat mencoba
10. Hasil
