Glassmorphism Product Card using HTML & CSS

Glassmorphism Product Card using HTML & CSS
Hello developers, today in this, blog you will learn to create a Glassmorphism Product Card using HTML & CSS.

The Glassmorphism will describe the UI button, this effect is based on the combination of shadow, transparency, and background blur. The glassmorphism effect is made by using the backdrop-filter effect in the CSS code.

In this blog (Glassmorphism Product Card), there is a card that contains some brief details of the product like a picture or photo of the product, brand name, the specific name of the product, cost, and some description of the product. There is also a product size that we can as the size we need. It mainly depends on the product. There are two buttons one is named "add to cart" where you add your product and the other one is with a heart shape where you can like the product.

The source code of this Glassmorphism Product Card is given below, if you want the source code of this program, you can copy it. You can use this Glassmorphism Product Card code with your creativity and can take this project to the next level.

Glassmorphism Product Card [Source Code]

To make this website (Glassmorphism Product Card), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script> <title>Glassmrphism Product Card using HTML & CSS || Learning robo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="images"> <img src="https://cdn.pixabay.com/photo/2020/07/07/04/31/shoes-5379215__340.jpg"/> </div> <div class="slideshow-buttons"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> <p class="pick">choose size</p> <div class="sizes"> <div class="size">5</div> <div class="size">6</div> <div class="size">7</div> <div class="size">8</div> <div class="size">9</div> <div class="size">10</div> <div class="size">11</div> <div class="size">12</div> </div> <div class="product"> <p>Brand New Shoes</p> <h1>Puma Charles Shoes</h1> <h2>$250</h2> <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eveniet veniam tempora fuga tenetur placeat sapiente architecto illum soluta consequuntur, aspernatur quidem at sequi ipsa.</p> <div class="buttons"> <button class="add">Add to Cart</button> <button class="like"><span>❤</span></button> </div> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page.To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

html {
  display: grid;
  min-height: 100%;
}

body {
  display: grid;
  font-family: 'Lato',sans-serif;
  text-transform: uppercase;
  background: #8cd3ff;  
}

.container {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 520px;
  height: 350px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.52);
}
p {
  font-size: 0.6em;
  color: #1663be;
  letter-spacing: 1px;
}

h1 {
  font-size: 1.2em;
  color: #4E4E4E;
  margin-top: -5px;
}

h2 {
  color: #1663be;
  margin-top: -5px;
}

img {
  width: 290px;
  margin-top: 47px;
  border-radius: 10px;
}
.images{
  margin: 10px;
  width: 100px;
}
.slideshow-buttons {
  top: 70%;
  display: none;
}

.one, .two, .three, .four {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E0C9CB;
}

.one {
  left: 22%;
}
.two {
  left: 27%;
}
.three {
  left: 32%;
}
.four {
  left: 37%;
}

.product {
  position: absolute;
  width: 40%;
  height: 100%;
  top: 10%;
  left: 60%;
}

.desc {
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 17px;
  color: #4E4E4E;
  font-size: .7em;
  line-height: 1.6em;
  margin-right: 25px;
  text-align: justify;
}

button {
  background: #072f5f;
  display: inline-block;
  outline: 0;
  border: 0;
  margin: -1px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #F5F5F5;
  cursor: pointer;
}
  button:hover {
    background: #1663be;
    transition: all .4s ease-in-out;
  }


.add {
  width: 67%;
  padding: 10px;
}

.like {
  width: 22%;
  padding: 9px;
}

.sizes {
  display: grid;
  color: #072f5f;
  grid-template-columns: repeat(auto-fill, 30px);
  width: 60%;
  grid-gap: 4px;
  margin-left: 20px;
  margin-top: 5px;
}
  .sizes:hover {
    cursor: pointer;
  }


.pick {
  margin-top: 11px;
  margin-bottom:0;
  margin-left: 20px;
}

.size {
  padding: 9px;
  border: 1px solid #1b7ced;
  font-size: 0.7em;
  text-align: center;
}
  .size:hover{
    background: #1663be;
    color: #F5F5F5;
    transition: all .4s ease-in-out;
  }
.credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  
  .credit a{
    text-decoration: none;
    color:#072f5f;
    font-weight: bold;
  } 
We hope you would like this Glassmorphism Product Card using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Glassmorphism Product Card using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome