How to create a E-commerce Product Card using HTML CSS .[Source Code]
To make this website, you would like to make 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.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
.container {
width: 100%;
height: 80vh;
justify-content: center;
align-items: center;
display: flex;
}
.card {
width: 300px;
height: 420px;
border-radius: 5px;
margin:10px 20px;
background-color: #fff;
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
.card > *:not(img) {
padding: 5px 10px;
}
.card img {
width: 90%;
height: 180px;
position: relative;
margin:-50px 5% 0 5%;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.card-body {
padding: 5px;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
}
.card-body p {
color: #3d3d3d;
margin-bottom: 20px;
font-size: 14px;
}
.view-btn a {
padding: 5px 15px;
border: 1.5px solid #007bff;
border-radius: 3px;
text-decoration: none;
color: #007bff;
}
.view-btn a:hover{
color: #fff;
background-color: #007bff;
}
.btn-group {
display: flex;
}
.button-29 {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
width: 100%;
}
.button-29:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}
.button-29:hover {
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
transform: translateY(-2px);
}
.button-29:active {
box-shadow: #3c4fe0 0 3px 7px inset;
transform: translateY(2px);
}
.credit a {
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
color: #000;
text-align: center;
margin-top: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
Thank you for reading our blog. If you face any problem in Creating a E-commerce Product Card using HTML CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.
Explore
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
In Our older post it doesnot work we working on that.
Post a Comment
Thank you
Learning robo team