Nowadays, most modern websites and web applications have product cards. Product cards enable developers to put some related informations neatly in sections that are appealing to users. You can add some cool animations for great user experience.
Today we will be create such cards with HTML and CSS, here is what we will create
.
First of all, we will create a parent container (appropriately, a div 😊) that will nest all of our three product cards, so that we can use flex box and place our product cards side by side. Remember that you can name your div any name you want but always give it a meaningful name, at least a name you can understand.
Now we will have to create the cards itself, we will start with the first one.
Let's create another div for the cards itself, this div will carry another div that will enable us to apply padding easily, don't worry we are not creating a div soup 😊. It is usually nice to put our image inside a div or container, so that we can give our image a width of 100%.
After that, we also need another div for our text contents for clarity. Inside this div, we will have an h4 that will contain a text "Fragment" <h4>Fragment</h4>.
After that, we will create a p tag and give it a class name, it will contain a text "0.080 ETH 1 of 56". Here is a trick, if you look at our design you will notice that our 0.080 ETH has a different color from our 1 of 56 right? For us to achieve this easily, we have to put our 0.080 ETH in a span tag so that we can give it a different color and give the other text, that is not inside the span tag a different color, which is white.
We will use the same trick on the second p tag and give it a different class name for easy styling. Here is what we have done so far
THE STYLING (although we will still add some HTML later)
We have to remove the default styling that comes with HTML for smooth experience. Here is the code for it *{
padding:0;
margin:0;
box-sizing:border-box;
}
Now we will have to give our card itself a width, you can choose any width you like, but I will go for 30 rem. Don't worry you can still use your regular px, you just have to divide this 30 rem by 16 for you to get the value in pixels. I love using rem for some good reasons(don't worry I will write about it later). I will give this cards a background color of red so that I can easily see what I am doing (I will remove it later).
Will give our image a width of 100% .
Let's preview our work on the browser
Wow 😊, we are getting there.
Now will add some padding to the top and the bottom of our h4 tag, we will also increase the font-size to 25px and change it's color to white. We will then add some padding bottom of 1rem, font size of 20px and a color of white to our first p tag. Now we will have to the give the span element inside our first p tag a different color (the color code is in the code) and give it a margin-left of 0.5rem. Let's give our second p tag a font size of 20px and a different color (check the code for the color). Now we will have to give the span tag inside our second p tag a white color and a margin-left of 0.5rem
. If you check very well, you can see that I have changed the background color of our card to something else. Now let's preview our work
, Wow, we are getting there.
Let's create an HR tag under our second p tag, we will give it a border, color and a margin top of 1rem. This will create that white horizontal line you are seeing on the design. Here is the HTML code
Here is the CSS as well
, now let's preview our work
it's nice right 😀?
Now let's create the last part of our card. We will create a parent container or div that will nest two other divs. The first div will have a p tag that will have a span tag with a clock like icon (we will get it from fontawesome.com),the 6 hours. We will then put our ago text inside a span so that we can give it some margin left.We will also give our clock like icon some margin right.
We will create a p tag in our other div as well, we will put the heart icon in a span tag and give it a margin right, then our 674. Here is the code
And here is the result
Now let's style this last part. We will give some padding top to that our parent container that nests our two other div, so that we can create some space between our horizontal line and the div itself. We will also make it a flex container, space the other two divs inside and align them at the center,so that they can be on the same line.
We will then give our p tags that are inside two separate divs a color of white, font size of 20px. You remember the clock icon we put inside a span tag? We will give it some margin right and also give our ago that is inside another span tag some margin left.
You remember that heart icon we put in a span tag in the other p tag? We will give it some margin right and a pink color. This should be your result
this should be your css as well
.
Now let's copy our card div, yes the one we nested all of our card informations in. Paste it two times within that same products-cards-con because we will make them a flex items. Change the src of the omg of the two cards you copied and paste so that they can have different images. Here is how your HTML should look like
And this should be your current result
We will make our product-cards-con a flex, give it a column gap, some padding and a background color of black. This is the CSS code
And this should be your result
. If you can notice, I changed the last image because it's not of the same size as others, so you images that have the same size to avoid issues.
And that's it guys, I hope you learnt something from this. Please leave a comment if you have any questions I will be glad to answer you.
Happy coding 😀👨💻!
Top comments (10)
No matter how great your article maybe, if you decide to post your code using pictures and photos, it's going to discourage a lot of people from reading it.
Try and learn how to use either the rich markdown or the basic markdown option provided on DEV to post your code. If you have any challenge doing that, feel free to ask. Cheers!
Ok bro, i really appreciate this. I will start using it... Although i don`t know about it before now....
You're welcome, bro It's fine.
If you want to decide on the Markdown type to use for writing, click on your profile picture, select settings, on the right sidebar you'll see customization. If you scroll down, you'll see Editor Version, select the one you prefer (Rich+markdown, or Basic markdown).
If you are on Windows you can use Postimage which is completely free. It's better to use a screenshot. Also, you add the code as a code block, not a screenshot.
You can add code blocks using this
Cheers
Ok, thanks...
windows+shift+s to open the screenshot tool
Ok bro...
bro don't take screenshot use this one for code snippet
snappify.com/editor
Ok bro, thanks a lot...