Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/Andriod Robot CSS

Last active August 29, 2015 14:07
Show Gist options
  • Save javedbaloch4/21c52a12418f44397bde to your computer and use it in GitHub Desktop.
Save javedbaloch4/21c52a12418f44397bde to your computer and use it in GitHub Desktop.
Download ZIP
Andriod Robot Model CSS
Raw
Andriod Robot CSS
<!Copy and Paste the Text into Notepad save Name.htm>
<html>
<head>
<title>Android Robot</title>
<style>
.android {
position: absolute;
left: 320px;
top: 230px;
}
/*body*/
.body {
width: 336px;
height: 285px;
background-color: #A5C63B;
border-radius: 0px 0px 30px 30px;
position: absolute;
}
.body:before,
.body:after {
background-color: #A5C63B;
content: '';
width: 75px;
height: 122px;
bottom: -122px;
position: absolute;
border-radius: 0px 0px 50px 50px;
}
.body:before { left: 68px; }
.body:after{ right: 68px; }
/*head*/
.head {
width: 336px;
height: 155px;
background-color: #A5C63B;
border-radius: 200px 200px 0px 0px;
position: absolute;
top: -170px;
}
.head:before,
.head:after {
background-color: #A5C63B;
content: '';
width: 10px;
height: 53px;
position: absolute;
top: -30px;
border-radius: 20px 20px 0px 0px;
}
.head:after { -webkit-transform: translate(100px, 0px) rotate(-30deg); -moz-transform:translate(63px, 0px) rotate(-30deg); -o-transform:translate(63px, 0px) rotate(-30deg); }
.head:before{ -webkit-transform: translate(255px, 0px) rotate(30deg); -moz-transform:translate(255px, 0px) rotate(30deg); -o-transform:translate(255px, 0px) rotate(30deg); }
/*Arms*/
.arms:before,
.arms:after {
background-color: #A5C63B;
content: '';
width: 75px;
height: 233px;
top: -8px;
position: absolute;
border-radius: 40px 40px 40px 40px;
}
p
{
color:#FFFFFF;
font-family:open sans light;
font-size:30px;
font-weight:bold;
transform:rotate(-36deg);
text-align:center;
margin-top:100px;
}
a:link
{
text-decoration:none;
}
.arms:before { left: -90px; }
.arms:after{ right: -90px; }
/*Eyes*/
.eyes:before,
.eyes:after {
background-color: #FFFFFF;
content: '';
width: 27px;
height: 27px;
top: 68px;
position: absolute;
border-radius: 20px;
}
.eyes:before { left: 78px; }
.eyes:after{ right: 78px; }
</style>
<body>
</head>
<a href="https://www.facebook.com/jb.bangulzai1">
<div class="android">
<div class="head">
<div class="eyes"></div>
</div>
<div class="body">
<p>By Javed Baloch</p>
<div class="arms"></div>
</div>
</div>
</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment