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-

Unit Laboratorium Fakultas Ilmu Terapan

View posts by Unit Laboratorium Fakultas Ilmu Terapan

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>