android-codingsutra

welcome to my first post on CodingSutra, In every post of this blog we will together challenge the limits of programming languages and will learn their basics too. This post of mine is one of such blog posts, Here we will see how can we create an exact replica of the Android logo, by only using HTML and CSS.


This post of mine is one of such blog posts, Here we will see how can we create an exact replica of the Android logo, by only using HTML and CSS.

Things we need to create our Logo

To create our very own logo firstly we will need some coding playground where we can code our android logo. I am using CodePen.io, there are many other options you can choose from, for example, code sandbox, JSFiddle etc, therefore you can choose any from a wide range of options.

Next, we will determine the color of our logo, the original android logo uses green color with a hex value equivalent #A4C639

With these steps complete, we can now move on to create our logo. For your reference, here is the link to complete code.

Note:- What we are going to make here is not a responsive logo, so it may look distorted when seen through smaller devices, so you must open this link in a desktop or laptop for getting better results.

Coding our logo

Now, here it comes, the best part. Here we will actually code our Logo

HTML

In HTML, as you can see, all the code is embedded inside a single class named ‘android’. ‘android’ class has three parts namely ‘ahead’, ‘main’ and ‘legs’.

Class ‘ahead’ has a subclass ‘eyes’, here ‘eyeone’ and ‘eyetwo’ are subclasses of ‘eyes’ class. This part makes the eyes of the logo head.

Similarly, class ‘main’ has subclasses ‘handone’, ‘handtwo‘ and ‘abody‘, whereas class ‘legs’ is made up of subclasses ‘legone’ and ‘legtwo’.

CSS

So you can easily understand how the styling is done here, The only thing to notice here is that to make borders look rounded, how have I used border-radious property. 

Conclusion

Throughout, this post we did some basic level coding to make something extraordinary. After finishing this work the end product will look something just like this

android-result-codingsutra

So, that’s how we can create a logo using HTML and CSS only. That’s all for today, I will be back wit another amazing post, till then you can follow CodingSutra on social media.

Thankyou

One Reply to “Creating Android Logo using HTML and CSS”

Leave a Reply

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