Logo Steemit with HTML5 & CSS3 by Aymenz Become Web Designer

Hey Steemit Friends !

I have seen an article by Mihael , it's  Steemit logo in 3D [Full Tutorial!] Really it's great he has used the C++ to do 3D logo and I really liked this post and liked the idea , So my plan today I want to do the logo of Steemit with HTML5 and CSS3 just for your to learn and know what we can do by those languages .

Firstly I want to thank all friends who follow me and upvote all my posts I love you really and that's you that encourage me and for you I do all this post for me the first reason is to give the benefit to my followers .

This is what I will do today , the logo with HTML and CSS , it's from my browser : 

It's not exactly but I want to share you just the way and to encourage you to do some works like it so let's start ..

Open your text editor and new file save as index.html or any name you want , write the syntax of HTML and put the < style>< > ;tag into the head .

Now we add the first , second and third div with span before and after each div and give Id to each one of them ..

I have written a comment then the first span , the div and the second span or the end I gave each one of them id to select this element in Css .

• span 1 start = id first-span 
• div 1  = class first
• span 1 end = id first-spane
• span 2 start = id second-span 
• div 2  = class second
• span 2 end = id second-spane
• span 3 start = id third-span 
• div 3  = class third
• span 3 end = id third-spane

Now we will give the format we must use CSS , so we write the classes and ids in Css ..

We have written the classes and Ids we can start with the first div is the blue at left look at the picture :

So let's explain what I wrote : 

First : 

I have added for the first span : 

• Background-color : this propriety means that I will give a color to the background and this is the color that I have used : #1a5199 The blue color .
• Min-height : The minimum of height that can this span take is 90 pixels .
• Width : The width of this span is 80 pixels .
• Position : I gave the position absolute to be free in the document it has not position it's free .
• Top & Left : I want to be far on the top 110px and on the left 340px 
• Skew : I have rotated this span -15 deg so it will appear at the right side by 15 deg .
• border-radius : 90 pixels top and right 7 pixels to be in the form of triangle .

The same proprieties to the div but :

• Skew : 30 deg to rotate 30 deg to the left 
• top & left :More top than span to down more .
• Without borders .

For the Second span :

• border-radius : in the left and down to be more beauty .
• Top&Left : I have increased the top to down more .

This is the result : 

Third :

If you look that the first div is like the third div you can copy and past the same proprieties just we will modify the Top and Left :

I have modified the top and left for :

• Third-span : Top:110 pixels , Left : 840 pixels
• Third Div : Top : 200 , Left 900 pixels
• Third Spane : Top : 450 pixels , Left : 960 pixels 

You can find a problem with the dimensions you can increase and decrease until arrive at the best form , and this is the result : 

Second : 

In the second div we have just the dimensions and the background color , the height of first and second span follow me ..

I have modified this proprieties :

• Second-span : background-color I have chosen this color #4aa3f0 , Top & Left : 70 , 595 pixels , the height : 130 pixels .
• Second Div : background-color I have chosen the same color #4aa3f0 ,left and top as you see in the picture .
• Second-spane : The background and the dimensions as in the picture .

And this is the result : 

May be the dimensions that I have mentioned is not standard for all , you can increase and decrease until you get the best form that you see or you want .

This is the logo , If you find this post benefit and you get more informations from it don't forget to upvote and follow me just to encourage me to know that there are peoples follow my courses ..

You can also follow my courses of HTML and Excel , I will do other tutorial of Css for the beginners .

Thank you for reading my article , I love you all ♥ By @aymenz