Create Product Display Card Using HTML And CSS

1
Jane

Heading

Here you can write some text that is related to your website.

Put your email adress here.

2
Jane

Heading

Here you can write some text that is related to your website.

Put your email adress here.

3
Jane

Heading

Here you can write some text that is related to your website.

Put your email adress here.

4
Jane

Heading

Here you can write some text that is related to your website.

Put your email adress here.

5
Jane

Heading

Here you can write some text that is related to your website.

Put your email adress here.

6
Jane

Heading

Here you can write some text that is related to your website.

Put your email adress here.

7
Jane

Heading

Here you can write some text that is related to your website.

Put your email adress here.

8
Jane

Heading

Here you can write some text that is related to your website.

Put your email adress here.




Its features:

  • It is completely responsive.

  • The back image has a length of 1280 pixels and a width of 720 pixels.

    You can use the image as you wish .

  • It can be used as a product display card.

  • Write a brief description of your product inside the text.

Try to create like yourself by following the codes below :

Step 1) Add to folder : First make one folder and put one image that you like.
Step 2) Add to html : <h2>Create Product Display Card With HTML And CSS</h2> <div class="row"> <div class="column"> <center> <span class="dot"> <div class="two">1</div> </span> </center> <div class="card"> <img src="v.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Heading</h2> <p>Here you can write some text that is related to your website.</p> <p>Put your email adress here.</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <center> <span class="dot"> <div class="two">2</div> </span> </center> <div class="card"> <img src="v.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Heading</h2> <p>Here you can write some text that is related to your website.</p> <p>Put your email adress here.</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <center> <span class="dot"> <div class="two">3</div> </span> </center> <div class="card"> <img src="v.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Heading</h2> <p>Here you can write some text that is related to your website.</p> <p>Put your email adress here.</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <center> <span class="dot"> <div class="two">4</div> </span> </center> <div class="card"> <img src="v.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Heading</h2> <p>Here you can write some text that is related to your website.</p> <p>Put your email adress here.</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <center> <span class="dot"> <div class="two">5</div> </span> </center> <div class="card"> <img src="v.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Heading</h2> <p>Here you can write some text that is related to your website.</p> <p>Put your email adress here.</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <center> <span class="dot"> <div class="two">6</div> </span> </center> <div class="card"> <img src="v.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Heading</h2> <p>Here you can write some text that is related to your website.</p> <p>Put your email adress here.</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <center> <span class="dot"> <div class="two">7</div> </span> </center> <div class="card"> <img src="v.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Heading</h2> <p>Here you can write some text that is related to your website.</p> <p>Put your email adress here.</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <center> <span class="dot"> <div class="two">8</div> </span> </center> <div class="card"> <img src="v.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Heading</h2> <p>Here you can write some text that is related to your website.</p> <p>Put your email adress here.</p> <p><button class="button">Contact</button></p> </div> </div> </div> </div>
Step 3) Add to css : html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .column { float: left; width: 25%; margin-bottom: 16px; padding: 0 8px; } @media screen and (max-width: 650px) { .column { width: 100%; display: block; } } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); border-top:5px solid green; border-left:1px solid green; border-right:1px solid green; border-bottom:2px solid green; margin-top:5px; } .container { padding: 0 16px; } .container::after, .row::after { content: ""; clear: both; display: table; } .title { color: grey; } .button { border: none; outline: 0; display: inline-block; padding: 8px; color: black; background-image: linear-gradient(#bbb, #ddd, #bbb); text-align: center; cursor: pointer; width: 100%; } .button:hover { background-image: linear-gradient(#000, #000, #000); color:white; } .dot { height: 50px; width: 50px; background-image: linear-gradient(#bbb, #ddd, #bbb); border:5px solid green; border-radius: 50%; display: inline-block; } .two{ margin-top:8px; font-size:22px; font-weight:bold; }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.