Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
Create a twitter tweet card with HTML and CSS (the steps)
Steps in details to create a tweet looking card in dark mode with HTML and CSS
1 - Initial data - html structure with the he icons needed
2 - Set profile picture position
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
3 - Set good font style to name and date
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
4 - Add missing point between name and date
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
5 - Reduce tweet text margin top
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
6 - Set good color to content
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
7 - Add space to footer elements
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
8 - Put more options at the top left
I used position absolute to put it at the top left
I added position relative to .content div in order to have the same padding between the profile image and the border and between three dots and the border also.
You can see that it changed the icons positions...
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
9 - Set max width to icon list
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
10 - Update images min width and min height
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳
11 - Update margins around icons
There is no need of margin-bottom because there is already the .section padding
Stephane P
@stephane_pop
4 oct.
If you enjoyed this tutorial, share it to your friends🥳