hello and welcome to red stapler channel in this tutorial I'm going to show you
how to create a card design to show each post statistic for your website in just
a few minutes with CSS ready let's check it out here is the example page that we
are going to work on I already set the suitable background image and flex
layout for center alignment so let's start with a card structure the card
will have three sections image text and stats
I will put some content into the text section
now let's use the grid layout to allocate the space for each section
also set the font background color by the radius and box-shadow
then assign each section into the grid that we have just defined
now let's add image I'm going to set this one as a background of the image section
I'm going to set the top left and right border
radius and set the background size to cover to fit the image
also add a small margin to the text section for spacing
now let's adjust the font styles of the section
next let's work on the stats section we will show the number of views and comment
here. let's add some dummy content
I will place the value and type on a separate div
now we will use grid layout again to equally allocate the space for each
number notice that I use fraction unit
also set the bottom border radius and background color
next let's use flex layout to vertically center the text
also add some padding and adjust the font styles
now I'm going to superscript this letter so add a line to separate the numbers
cover the letter of its sup tag
then for border I'm going to add a body class to the middle box
then add left and right border
also adjust the font size for a superscript as well
alright the design is finished next we will work on a hover effect to zoom out
a card it's really easy just add transform scale to the wrapper using
pseudo-class
I will reduced box-shadow intensity when a card is floating
the add transition property
and set the cursor to pointer
you can find a source code at a video description box below if you love this
video and want to see more dev tips and tutorials don't forget to subscribe
this channel to stay tuned thanks for watching see you next time bye