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
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’, ‘
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-
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
So, that’s how we can create a logo using HTML and CSS only. That’s all for today, I will be back