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.
إرسال تعليق
Thank you
Learning robo team