This code utilizes CSS gradients to create a visually appealing background for the product card section, and includes CSS transitions and hover effects to create an interactive user experience. The JavaScript code adds a simple alert function to the "Add to Cart" button to notify users that the product has been added to their cart.
This code was created by Learning Robo, a website that provides resources for developers to learn and improve their coding skills. Learning Robo is a great resource for beginner and intermediate developers, and offers a wide range of tutorials and courses to help individuals advance their skills.
In conclusion, if you are a developer looking to create a visually stunning product card section on your webpage, the code above can be a great starting point. Additionally, if you are looking to improve your coding skills, be sure to check out Learning Robo for more resources and tutorials. Happy coding!
Responsive Product Card Slider [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #41295a;
background: -webkit-linear-gradient(to right, #2F0743, #41295a);
background: linear-gradient(to right, #2F0743, #41295a);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
html, body {
height: 100%;
}
.product-card {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 30px;
border-radius: 30px;
background: #FDC830;
background: -webkit-linear-gradient(to right, #F37335, #FDC830);
background: linear-gradient(to right, #F37335, #FDC830);
height:400px
}
.product-image {
flex: 1 1 50%;
margin-right: 30px;
}
.product-image img {
max-width: 100%;
border-radius: 20px;
transition: transform 0.3s ease-in-out;
}
.product-image img:hover{
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
}
.product-details {
flex: 1 1 50%;
padding: 20px;
}
.product-details h3 {
font-size: 24px;
margin: 0 0 10px 0;
text-shadow:#000 ;
}
.product-details p {
font-size: 18px;
line-height: 1.5;
margin: 0 0 20px 0;
}
.product-details .price {
font-size: 24px;
margin: 0 0 20px 0;
}
.product-details .buttons {
display: flex;
}
.product-details .buttons button {
background-color: #FFf;
color: #2F0743;
font-size: 18px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
transition: transform 0.3s ease-in-out;
}
.product-details .buttons button:hover{
box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.25);
transform: scale(.9);
transition: transform 0.3s ease-in-out;
}
.product-details .buttons button:last-child {
color: #FDC830;
background-color: #333;
}
.product-details .buttons button:last-child:hover {
color: #FDC830;
background-color: #000;
}
.credit a {
text-decoration: none;
color: #fff;
font-weight: 800;
}
.credit {
color: #fff;
text-align: center;
margin-top: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
const addToCartButtons = document.querySelectorAll(".add-to-cart");
addToCartButtons.forEach(button => {
button.addEventListener("click", () => {
window.alert("Product added to cart!");
});
});
Thank you for reading our blog. If you face any problem in creating this Product Card using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team