Product Card

How to create fully responsive product card using pure HTML, CSS.

Hello, Today we’ll see how to make fully responsive product page using only pure HTML and CSS. Our product card has awesome minimalist animations which makes amazing user experience. To see demo or you want coding tutorial. You can watch the tutorial below.

Video Tutorial

Code

For this project, we have index.html and style.css file only. And img folder which contains 3 three images, which you can download from here. So let’s start coding this.
Start by writing basic HTML5 structure and link style.css file to the page. Then create product card structure like this.

 class="product">  class="product-img">  src="img/bag.png" alt="">  class="tag">new   class="product-listing">   

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&family=Roboto:wght@300;400;500;700;900&display=swap'); * margin: 0; padding: 0; box-sizing: border-box; > body width: 100%; min-height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; background: #966e4f; font-family: 'roboto', sans-serif; > body::before content: ''; position: absolute; left: 0%; transform: translateX(-50%) skewX(-15deg); width: 20px; height: 100%; background: #966e4f; border-left: 60px solid #eae3d2; border-right: 30px solid #eae3d2; opacity: 0; animation: slide-in 2s 1.5s forwards 1; > @keyframes slide-in 100% opacity: 1; left: 50%; > > .product position: relative; width: 1000px; min-width: 350px; min-height: 500px; height: auto; display: flex; justify-content: center; align-items: center; > .product-img width: 40%; height: 500px; background: #fff; position: relative; opacity: 0; transform: translateY(-50px); animation: fade-in 1s forwards 1; > .product-img img width: 100%; height: 100%; object-fit: contain; user-select: none; > .tag position: absolute; top: 20px; left: -10px; transform-origin: left; opacity: 0; transform: rotate(-90deg); text-transform: capitalize; color: #eae3d2; padding: 5px 10px; width: 100px; font-size: 18px; text-align: center; background: #292929; user-select: none; animation: tag .5s 1s forwards 1; > @keyframes tag 100% opacity: 1; transform: rotate(-20deg); > > .product-listing width: 60%; min-height: 500px; height: auto; background: #292929; padding: 40px; display: flex; justify-content: center; color: #eae3d2; opacity: 0; transform: translateY(50px); animation: fade-in 1s forwards 1; > @keyframes fade-in 100% opacity: 1; transform: translateY(0); > > 

Output

 class="product-listing">  class="content">  class="name">leather bag  class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque laborum optio natus quibusdam ea nam odit vitae id unde officia.  class="price">$ 299  class="btn-and-rating-box">  class="rating">  src="img/star.png" alt="">  src="img/star.png" alt="">  src="img/star.png" alt="">  src="img/star.png" alt="">  src="img/star stroke.png" alt="">   class="btn">buy now    

.name font-family: 'dosis'; font-size: 70px; text-transform: capitalize; > .info font-size: 18px; line-height: 30px; margin: 50px 0; > .price font-size: 70px; font-weight: 100; margin-bottom: 20px; > .btn-and-rating-box width: 100%; display: flex; justify-content: space-between; > .rating width: fit-content; display: flex; justify-content: center; align-items: center; > .rating img width: 20px; height: 20px; margin: 0 2px; > .btn background: #eae3d2; color: #292929; border: none; text-transform: capitalize; font-size: 16px; padding: 10px 20px; cursor: pointer; > .btn:hover background-color: #eedbaf; > 

Output

Our product card is done. Now, let’s make it responsive.

@media (max-width: 1100px) body::before transform: translateX(-50%) skewX(-5deg); > .product flex-direction: column; width: 90%; margin: 5vh 0; > .product-img width: 100%; height: 300px; > .product-listing width: 100%; min-height: auto; > .name,.price font-size: 50px; > .info font: 16px; > > 

Output

So that’s it. I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.

Tutorials you may find Useful

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

Источник

26 CSS Product Cards

Collection of free HTML and CSS product card code examples from Codepen, GitHub and other resources. Update of November 2021 collection. 4 new items.

Related Articles

1. CSS Cards
2. CSS Blog Cards
3. CSS Card Hover Effects
4. CSS Card Layouts
5. CSS Flip Cards
6. CSS Material Design Cards
7. CSS Movie Cards
8. CSS Credit Cards
9. CSS Profile Cards
10. CSS Recipe Cards
11. CSS Business Cards
12. Bootstrap Product Cards

Author

Links

Made with

About a code

Pure CSS Product Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Simple Product Card UI Design

Simple product card UI design using HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Card UI Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Responsive Product Card

Responsive product card view with change color/image functionality.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

Responsive Product Card Using HTML & CSS

Hello, We’ll demonstrate today how to create a fully Responsive Product Card page using simply HTML and CSS. A product’s image or photo that is connected in some way to the associated products is displayed on the Product Card. It provides information on the product’s specifications. The product card on this blog is divided into two sections: the left section features a product image, and the right section includes the product name, price, and buy now button. You can copy the source code of this application if you wish it; it is provided below with the product card design. This product card design code, along with your creativity, can be used to elevate this product card.

Step1: Adding HTML Markup

          
 
 
 
 
 
Wirless Headphone
 
$255.3
 Buy now 
 
 
   

We will create two separate HTML and CSS files in our code editor to ensure optimal code organisation. HTML and CSS will be used to construct our login form. Add the CSS link to our HTML now.

Adding the Structure for our Product Card: We’ll make a section with the class «section-card» using the tag, then we’ll make the container for the card using the div tag.
We’ll make a container for the image inside our card container and, using the img tag, we’ll add an image of the item inside our card.
The h3 tag will now be used to include the product details. The product’s name will be added, and the price will be added with the h2 tag. We’ll also include a buy now button inside our product card utilising the button tag.

Step2: Adding CSS Code

@import url("https://fonts.googleapis.com/css2?family=Radio+Canada:wght@700&display=swap"); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: "Radio Canada", sans-serif; background-color: #f2f2f2; >img < width: 100%; display: block; >.section-card < padding: 0 30px; height: 100vh; display: flex; align-items: center; >.section-card .card < margin: 20px auto; max-width: 300px; border-radius: 10px; overflow: hidden; background-image: linear-gradient( 140deg, #132936, #132936 20%, #2196f3 20.5%, #2196f3 ); box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); >.section-card .card .img-container < padding: 10px 0 0 0; >.section-card .card .img-container img < filter: drop-shadow(0px -5px 25px rgba(0, 0, 0, 0.7)); transform: scale(1.15); >.section-card .card .infos < padding: 30px 15px; text-align: center; >.section-card .card .infos .name, .section-card .card .infos .price < color: #fff; >.section-card .card .infos .name < font-size: 1.1rem; >.section-card .card .infos .price < margin: 10px 0 15px 0; font-size: 2rem; >.section-card .card .infos .btn < font-family: "Radio Canada", sans-serif; padding: 0.8rem 1.6rem; border-radius: 50px; border: 1px solid #f2f2f2; font-size: 1rem; font-weight: 300; min-width: 150px; cursor: pointer; box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2); background-color: #f2f2f2; transition: all 0.2s ease-in; >.section-card .card .infos .btn:hover < background-color: transparent; color: #fff; box-shadow: none; >@media screen and (min-width: 700px) < .section-card .card < display: flex; align-items: center; min-width: 550px; padding: 15px 20px; >.section-card .card .img-container < padding-top: 0; width: 60%; >> 

Basic Styling: The Google fonts will first be imported using the Google font import link, after which the padding and margin will be set to «zero» using the universal selector, and the box-sizing property will be used to change the box’s size to «border-box.» Now, inside the body, we will use the body tag selector to set the font family to «Radio Canada» and the background colour property to gray. The image’s width is set to 100%, and its display is set to «block.»

@import url("https://fonts.googleapis.com/css2?family=Radio+Canada:wght@700&display=swap"); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: "Radio Canada", sans-serif; background-color: #f2f2f2; >img

Styling Card: We will give our card a padding of 30px using the class selector (.section-card), a height of 100vh using the height property, and the display setting of «flex.» We will align the objects using the align-item attribute. The border radius will now be set to 10px using the child selector (.card), the overflow property will be set to «hidden,» and the background image will be used to establish the background as a linear gradient of «black and blue.»

.section-card < padding: 0 30px; height: 100vh; display: flex; align-items: center; >.section-card .card

Styling Information: For that, we will add padding of 30 px from the top and bottom and 15 px from the left and right using the class selector (.infos), and the font colour will change to «grey.» We will set the font size to «2 rem» using the font-size attribute. Our button will have a 1 pixel solid grey border when styling is applied. Using the background colour property, we will give our button a grey background and an order-radius of 50px to create a curvature to the edges. We will use the hover property to give our button a hover property so that when the user hovers over it, the background colour turns transparent and the button’s font colour is set to white.

.section-card .card .infos < padding: 30px 15px; text-align: center; >.section-card .card .infos .name, .section-card .card .infos .price < color: #fff; >.section-card .card .infos .name < font-size: 1.1rem; >.section-card .card .infos .price < margin: 10px 0 15px 0; font-size: 2rem; >.section-card .card .infos .btn < font-family: "Radio Canada", sans-serif; padding: 0.8rem 1.6rem; border-radius: 50px; border: 1px solid #f2f2f2; font-size: 1rem; font-weight: 300; min-width: 150px; cursor: pointer; box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2); background-color: #f2f2f2; transition: all 0.2s ease-in; >.section-card .card .infos .btn:hover

We will now use the media query to add responsiveness to our product. If the screen size is equal to or more than the stated width, we shall set a minimum width. When the screen size changes, our card display will switch to flex and our product card will be given a minimum width of 550 pixels. Additionally, we will add padding that is 20 pixels on the left and right and 15 pixels from the top.

@media screen and (min-width: 700px) < .section-card .card < display: flex; align-items: center; min-width: 550px; padding: 15px 20px; >.section-card .card .img-container < padding-top: 0; width: 60%; >> 

Now we’ve completed our product card using html & css. I hope you understood the whole project. Let’s take a look at our Live Preview. Now We have Successfully created our Product Card using html & css. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page. follow : codewithrandom Written By : Arun Code By: Ayoub Makira

Источник

Tailored Jeans

Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

How To Create a Product Card

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

.card <
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
>

.price color: grey;
font-size: 22px;
>

.card button border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
>

.card button:hover opacity: 0.7;
>

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник