Implementing the Android Logo with HTML and CSS
Tags: html, css, android
Published: 2019-06-17 11:08:18

In this article, We will implement the android logo with just HTML and CSS. This may seem like a ton of work but we will go through it step by step. I will try to explain as much as I can.

I will share a link to the codebase on Github at the end of this article.

![Android Logo](https://res.cloudinary.com/nedy123/image/upload/v1560565889/Screenshot_2019-06-15_at_3.28.03_AM_hij9sw.png)

Let us start by creating a simple html file called `index.html`, that contains this code.
```html
<!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Android Logo</title>
  </head>

  <body>
    <div class="android">
        <div class="head">
          <div class="left_antenna"></div>
          <div class="right_antenna"></div>
          <div class="left_eye"></div>
          <div class="right_eye"></div>
        </div>
        <div class="body">
          <div class="left_arm"></div>
          <div class="right_arm"></div>
          <div class="left_leg"></div>
          <div class="right_leg"></div>
        </div>
    </div>
  </body>

</html>
```
This markup is pretty self explanatory. It seems weird that the legs are in the body section, but don't worry you will understand the concept as we progress.

Next up: Create an `index.css` file and link it to your `index.html` file.
```html
<link rel="stylesheet" href="index.css">
```
At this point nothing is displayed on the user interface as the markup elements have no contents.

Let us start by centre aligning the android vertically and horizontally. We will achieve this by using flex box.
Do:
  * Give the body of the document a `height` of `100vh`. This sets the height of the body to the height of current device from which the page is being viewed. The height property is also needed to align the logo vertically.
  * Set `display` property of the body of the document to `flex`. This property sets the flexible length on flexible items. This enables us to set other flex properties .
  * Set `justify-content` property of the body to `center`. On default some html elements take up 100% of the width of their parent element. This property sets the position of the element along that horizontal axis.
  * Set `align-items` property of the body to `center`. With the height set, this positions all children element to the center of the view vertically.
  * Set the position of all divs in a div to `relative` and set its background to `#A4CA39`

At this point your `index.css` file should look like this
```css
body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
}

div div {
    background: #a4ca39;
    position: relative;
}

```

We have our layout all set, if you try to access this in your browser you will not see anything just a white space. Without further ado, let us dive into the android styling

We will start by styling the android itself
Do:
  * Set the width and height of android class (`.android`) to `340px` and `400px` respectively.

Then we will style the head of our android logo
Do: 
  * Set the width and height of the head class (`.head`) to `200px` and `100px` respectively.
  * Set the top property to `32px` to make space for the antennas.
  * In order to achieve the semi-circular shape of the android's head, we will set the border-radius property to `220px 220px 0 0`. This sets the border-radius of the top-left, top-right, bottom-right and bottom-left of the head respectively. We used a short hand property here, we could as well use `border-top-left-radius, border-top-right-radius` and so on.

At this point we should have a somewhat semi-circular head of our android logo popping out like this
![Android Logo Head](https://res.cloudinary.com/nedy123/image/upload/v1560622692/Screenshot_2019-06-15_at_7.17.59_PM_meufkk.png)

>Waiting for the css code? No sorry I won't give it to you just yet. Try to follow along and see how much of this you can get correctly, it will make your learning experience better.

Let us proceed

## Next up is the eyes and antennas of our android
### Eyes

For the similarities, do:
  * Set the background color of both eyes to white.
  * Set the width and height to `20px`.
  * Set the position property to absolute, so that we can move it to the position that we want to.
  * Set the top property to `42px`.
  * and the border-radius to a `100%`.

For the differences, do:
  * Set the left eye's left property to `50px`.
  * Set the right eye's right property to `50px`.  

### Antennas

For the similarities, do:
  * Set the width and height to `6px` and `50px`.
  * Set the position property to absolute, so that we can move it to the position that we want to.
  * Set the top property to `-34px`.
  * and the border-radius to a `3px`.

For the differences, do:
  * Set the left antenna's left property to `50px` and rotate it for a degree of -30 
  * Set the right antenna's right property to `50px` and rotate it for a degree of 30 

At this point we should have the head of our android logo looking like this
![Android Logo Full Head](https://res.cloudinary.com/nedy123/image/upload/v1560632862/Screenshot_2019-06-15_at_10.07.26_PM_nhhf6e.png)

## Next up is the body
This is actually the simpler part as it is just a rectangle and we get to manipulate the border-radius property in a similar fashion as we did for the head.
For the body of the android logo, do:
  * Set the width and height to `200px` and `184px` respectively.
  * Set the top property to 42px.
  * Set the border-radius to `0 0 25px 25px`.


At this point we should have the head of our android logo looking like this
![Android Logo Full Head](https://res.cloudinary.com/nedy123/image/upload/v1560635108/Screenshot_2019-06-15_at_10.44.56_PM_uj3xsc.png)

Yeah yeah, let out that wide smile.

## Next up is the arms and legs
The Arms and Legs have some similarities, to see them do:
  * Set the width to the both arms and legs to `50px`.
  * Set the position to absolute.

For the similarities of the arms, do:
  * Set the height to `150px`.
  * Set the border-radius to `25px`.

Differences between the two arms is that they should be pulled away from the body for `58px` on both sides.

For the similarities of the legs, do:
  * Set the height to `100px`, since the legs on the logo are shorter than the arms.
  * Set the border-radius to `0 0 25px 25px`.
  * Set the top property to `192px`. This will pull the legs just below the body and also adding a little space between them.

Differences between the two legs is that they should be pulled into from the body for `40px` on both sides.


## HOOALA behold our android logo
![Android Full Logo](https://res.cloudinary.com/nedy123/image/upload/v1560635852/Screenshot_2019-06-15_at_10.57.19_PM_z9vveg.png)

At this point your `index.css` should look like this:
```css
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div div {
  background: #A4CA39;
  position: relative;
}

.android {
  height: 400px;
  width: 340px;
}

.head {
  width: 200px;
  height: 100px;
  top: 32px;
  border-radius: 220px 220px 0 0;
}

.left_eye,
.right_eye {
  background: #fff;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 42px;
  border-radius: 100%;
}

.left_eye {
  left: 50px;
}

.right_eye {
  right: 50px;
}

.left_antenna,
.right_antenna {
  width: 6px;
  height: 50px;
  position: absolute;
  top: -34px;
  border-radius: 3px;
}

.left_antenna {
  left: 50px;
  transform: rotate(-30deg);
}

.right_antenna {
  right: 50px;
  transform: rotate(30deg);
}

.body {
  width: 200px;
  height: 184px;
  top: 42px;
  border-radius: 0 0 25px 25px;
}


.left_arm,
.right_arm,
.left_leg,
.right_leg {
  width: 50px;
  position: absolute;
}

.left_arm,
.right_arm {
  height: 150px;
  border-radius: 25px;
}

.left_leg,
.right_leg {
  height: 100px;
  top: 192px;
  border-radius: 0 0 25px 25px;
}

.left_arm {
  left: -58px;
}

.right_arm {
  right: -58px;
}

.left_leg {
  left: 40px;
}

.right_leg {
  right: 40px;
}

```

Here is the link to the repository on github {% github NedyUdombat/Android-Logo %} and the full [preview](https://nedyudombat.github.io/Android-Logo/)

Please feel free to share. Comments and corrections are highly welcomed.