Hey Steemit Friends !
First I want to thank you , Today we will design the Posts of Steemit by HTML5 & CSS3 I want to give you my experience in web design just follow my courses and my works you will take some ideas will help you to build your first template .
This is what we will do today :
I want to clarify something , I don't want to do like Steemit or to build some template like Steemit but just to give you some tricks to help you in your life and to create your templates easily ..
It's not exactly but I want to share you just the way and to encourage you to do some works like it ..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 .
This is the simple syntax of HTML language , now we will add the first post and we will give it style then just I will copy and post 3 other posts , So let's start :
I have added the container div with class called ' posts ' is the container that will Hold all posts , each post will be into this container .
I have written the div with class named ' post ' is the post that we will see , it has two sections the first is the image as have you seen div with class image inside the tag of img < img src='here the source of image ' /> I will control the width and height of this image in Css .
The second section the informations as we have on Steemit : the title of the post I have added heading h3 to make the title and the discription in paragraph .
I have added list items to create the list of upvote and comment ..etc as you see with span to give the number of dollars or the counter of upvotes ..etc
Also the date when this post has created and the person also the section , this is the Css proprieties :
I have selected the classes the first :
Posts has :
- Margin-Top & Left : 80 pixels to further to the top with 80 pixels and left 100 pixels .
Post : overflow : Hidden to hide all element outside this container .
Post > div : To divide the div into to sections the first will be in the left .
The div image has 10% for all the width of post div and margin top 10 pixels to be more beauty.
The image of this post has 150 pixels of width and 90 of height .
This is the result look at the picture :
We must do some effects to be as the posts on Steemit so follow me , look at those proprieties in CSS ..
I will just talk about the new proprieties :
For the heading of post h3 we have :
- Color : #777 is the code of color near then the gray
- Font-family : Tahoma it's nice font I love it you can chose any type as ' Time New Roman , Arial ..etc '
- font-size : 22 pixels the size of this title is 22 pixels you have many unity but I want to use this unity
For the description ' p' we have almost the same proprieties the color and font-family , the font size and we have margin top to be attached with the title ..
For the list ' ul ' we have :
- list-style : none is the black circle we do not want to appear in the list
- padding : 0 to be attached in the same line of title and description
- margin-top : -5 pixels to be more attached ..
The items into the list ' li ' :
- display : inline-block to appear in the same line it will not take the full width .
- border-right : 1 pixel bold and solid not dashed the color is #888
- padding-right : to give space between the border and the element .
I have selected the last item by : li:last-of-type to remove the border right by ' border-right : none ' ..
The small images in this list will have 20 pixels width and height , the links ' a ' :
- text-decoration : none to remove the line under the link
- font-weight : bold to be bold not normal text
Now I will to do the circle that has the 'Reputation ' I gave it id called #circle and this is the proprieties :
- The background of this circle is
#f8f8f8 - border-radius : 50% to be circle
- padding : 3 pixels
- border & font-size : is simple propriety , I have explained it .
this is the result :
You can just copy and past the same div post 3 or 4 times to be like Steemit but you must add it into the container < div class='posts' > Here </div> to be with the previous posts ..
This is the Posts of Steemit , 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
This is a good post, I really like it :)
very good aymenz
@originalworks
The @OriginalWorks bot has determined this post by @aymenz to be original material and upvoted it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!
To nominate this post for the daily RESTEEM contest, upvote this comment! The user with the most upvotes on their @OriginalWorks comment will win!
For more information, Click Here!
thank you bro ^_^
A lesson needed by each researcher for the programming language
Special language HTML 5
Greetings from your brother Amin Ahmed from S P A
this is my accountf@gostar
thank you bor ^_^
You got some great tutorials. Are there any upcoming tutorials for web frameworks?
yes I will do some frameworks to build and create templates and applications , just follow my tutorials !
Alright, looking forward to your upcoming posts
html .....
very nice
thank you
Good post
thank's