Membuat Logo Android dengan CSS

Membuat Logo Android dengan CSS

Hello semuanya kali ini saya akan memberikan contoh cara membuat Logo Android dengan CC dan HTML
Sebelumnya siapkan text editornya seperti notepad++, ok langsung aja ke source code:
1. Buat file dengan nama index.html dengan isi sebagai berikut:
<html>
<head>
<title>LOGO ANDROID – Jherm4n.com</title>
<link rel=”stylesheet” href=”tema.css” type=”text/css”/>
</head>
<body><center>

LOGO ANDROID

</div>

</div>
<h1></br></br>www.jherm4n.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.
-AWAN-

Leave a Reply

Your email address will not be published. Required fields are marked *