Last active
December 20, 2015 21:18
-
-
Save ryanfitton/6196475 to your computer and use it in GitHub Desktop.
Android Bot using CSS3. Created: 09/08/2013. Requires a modern browser such as Google Chrome, Mozilla FireFox or Apple Safari. Tested on Google Chrome Version 28.0.1500.95 m
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>ryanfitton.co.uk - Android robot using CSS3</title> | |
<meta name="description" content="ryanfitton.co.uk - Android robot using CSS3"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> | |
<style type="text/css"> | |
body { | |
font-family: 'Droid Sans', sans-serif; | |
color:#ffffff; | |
} | |
#android-bot { | |
width: 700px; | |
margin:0 auto; | |
} | |
.antenna, #head, #android-torso, .arm, .leg { | |
background:#a4c739; | |
} | |
#antennas { | |
width: 400px; | |
height: 100px; | |
margin: 0 auto; | |
} | |
.antenna { | |
width: 10px; | |
height: 100px; | |
border-radius: 10px; | |
-webkit-border-radius: 10px; | |
-moz-border-radius: 10px; | |
-ms-border-radius: 10px; | |
-o-border-radius: 10px; | |
float: left; | |
position: relative; | |
top: 40px; | |
} | |
#antenna-left { | |
left: 70px; | |
transform:rotate(-33deg); | |
-webkit-transform: rotate(-33deg); | |
-moz-transform: rotate(-33deg); | |
-ms-transform: rotate(-33deg); | |
-o-transform: rotate(-33deg); | |
} | |
#antenna-right { | |
left: 310px; | |
transform:rotate(33deg); | |
-webkit-transform: rotate(33deg); | |
-moz-transform: rotate(33deg); | |
-ms-transform: rotate(33deg); | |
-o-transform: rotate(33deg); | |
} | |
#head { | |
width: 400px; | |
margin: 0 auto; | |
height: 200px; | |
border-radius: 200px 200px 0 0; | |
-webkit-border-radius: 200px 200px 0 0; | |
-moz-border-radius: 200px 200px 0 0; | |
-ms-border-radius: 200px 200px 0 0; | |
-o-border-radius: 200px 200px 0 0; | |
margin-bottom: 10px; | |
} | |
.eye { | |
width: 30px; | |
height: 30px; | |
border-radius: 15px; | |
-webkit-border-radius: 15px; | |
-moz-border-radius: 15px; | |
-ms-border-radius: 15px; | |
-o-border-radius: 15px; | |
background-color: white; | |
float: left; | |
position: relative; | |
top: 100px; | |
} | |
#eye-left { | |
left: 90px; | |
} | |
#eye-right { | |
left: 250px; | |
} | |
.android-body { | |
width: 620px; | |
height: 400px; | |
margin: 0 auto; | |
text-align: center; | |
} | |
#android-torso { | |
position: relative; | |
width: 400px; | |
height: 400px; | |
float: left; | |
border-radius: 0 0 50px 50px; | |
-webkit-border-radius: 0 0 50px 50px; | |
-moz-border-radius: 0 0 50px 50px; | |
-ms-border-radius: 0 0 50px 50px; | |
-o-border-radius: 0 0 50px 50px; | |
margin:0 10px; | |
} | |
#android-text p { | |
position: absolute; | |
margin: 0; | |
} | |
.bottom#android-text p { | |
font-size: 95px; | |
bottom:20px; | |
left: 30px; | |
} | |
.right#android-text p { | |
font-size: 80px; | |
bottom:140px; | |
right: -90px; | |
transform:rotate(-90deg); | |
-webkit-transform: rotate(-90deg); | |
-moz-transform: rotate(-90deg); | |
-ms-transform: rotate(-90deg); | |
-o-transform: rotate(-90deg); | |
} | |
.arm { | |
width: 100px; | |
height: 325px; | |
float: left; | |
border-radius: 100px; | |
-webkit-border-radius: 100px; | |
-moz-border-radius: 100px; | |
-ms-border-radius: 100px; | |
-o-border-radius: 100px; | |
} | |
#lower.android-body { | |
width: 400px; | |
height: 200px; | |
margin: 0 auto; | |
} | |
.leg { | |
width: 100px; | |
height: 200px; | |
float: left; | |
border-radius: 0 0 100px 100px; | |
-webkit-border-radius: 0 0 100px 100px; | |
-moz-border-radius: 0 0 100px 100px; | |
-ms-border-radius: 0 0 100px 100px; | |
-o-border-radius: 0 0 100px 100px; | |
} | |
#leg-left { | |
margin-left: 75px; | |
} | |
#leg-right { | |
margin-left: 50px; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Created: 09/08/2013. Requires a modern browser such as Google Chrome, Mozilla FireFox or Apple Safari. Tested on Google Chrome Version 28.0.1500.95 m --> | |
<div id="android-bot"><!-- Start Android Bot --> | |
<div id="antennas"><!-- Antennas --> | |
<div id="antenna-left" class="antenna"></div> | |
<div id="antenna-right" class="antenna"></div> | |
</div> | |
<div id="head"><!-- Head and Eyes --> | |
<div id="eye-left" class="eye"></div> | |
<div id="eye-right" class="eye"></div> | |
</div> | |
<div id="upper" class="android-body"><!-- Upper Body, Text and Arms --> | |
<div id="arm-left" class="arm"></div> | |
<div id="android-torso"> | |
<div id="android-text" class="bottom"><!-- class="bottom" or class="top" Info: To change text position, alter class from 'bottom' to 'right' --> | |
<p>Android</p> | |
</div> | |
</div> | |
<div id="arm-right" class="arm"> | |
</div> | |
</div> | |
<div id="lower" class="android-body"><!-- Legs --> | |
<div id="leg-left" class="leg"></div> | |
<div id="leg-right" class="leg"></div> | |
</div> | |
</div><!-- End Android Bot --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment