1. Buat file dengan nama index.html dengan isi sebagai berikut:
<html>
<head>
<title>LOGO ANDROID - DevMatics</title>
<link rel="stylesheet" href="tema.css" type="text/css"/>
</head>
<body><center>
<div id="kotak">
<h1>LOGO ANDROID</h1>
<div id="kepala">
<div class="antenakiri"></div>
<div class="antenakanan"></div>
<div class="matakiri"></div>
<div class="matakanan"></div>
</div>
<div id="tubuh">
<div class="tangankiri"></div>
<div class="tangankanan"></div>
<div class="kakikiri"></div>
<div class="kakikanan"></div>
</div>
<h1></br></br>www.devmatics.blogspot.com</h1>
</div></center>
</body>
</html>
2. setelah itu buat file dengan nama tema.css dengan isi sebagai berikut:
div {
position: relative;
}
h1 {
font-size: 35px;
color: white;
}
#kotak {
height: 600px;
width: 600px;
background-color: green;
border-radius: 50px;
box-shadow: 0px 0px 20px black;
}
#kepala {
height: 100px;
width: 200px;
background: white;
border-radius: 200px 200px 0 0;
top: 20px;
}
.antenakiri {
height: 50px;
width: 7px;
background-color: white;
left: -50px;
top: -30px;
border-radius: 100px 100px 0 0;
transform: rotate(-30deg);
}
.antenakanan {
height: 50px;
width: 7px;
background-color: white;
right: -50px;
top: -80px;
border-radius: 100px 100px 0 0;
transform: rotate(30deg);
}
.matakiri{
height: 20px;
width: 20px;
border-radius: 200px;
background-color: green;
left: -40px;
top: -50px;
}
.matakanan {
height: 20px;
width: 20px;
border-radius: 200px;
background-color: green;
left: 40px;
top: -70px;
}
#tubuh {
background-color: white;
height: 200px;
width: 200px;
top: 30px;
border-radius: 0 0 30px 30px;
}
.tangankiri {
height: 150px;
width: 40px;
background-color: white;
border-radius: 200px 200px 200px 200px;
left: -130px;
top: 0px;
}
.tangankanan {
height: 150px;
width: 40px;
background-color: white;
border-radius: 200px 200px 200px 200px;
right: -130px;
top: -150px;
}
.kakikiri {
height: 100px;
width: 40px;
background-color: white;
border-radius: 200px 200px 200px 200px;
right: 45px;
top:-140px;
}
.kakikanan {
height: 100px;
width: 40px;
background-color: white;
border-radius: 200px 200px 200px 200px;
right: -45px;
top: -240px;
}
Sekian tutorial dari saya, sampai ketemu dilain kesempatan.
0 komentar