Html and CSS Product preview card component
Ashwan Lal
![Ashwan Lal]()
Ashwan Lal
projektmanager || projektmanagement || projektplanung || projektabwicklung || projektkoordination || projektsteuerung??
Given below are the HTML and CSS files for a product preview card component. By using these files, you can quickly set up a beautiful product preview card component and customize it to your liking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<main class="container">
<section class="img">
<img
class="chanel-desktop"
src="images/image-product-desktop.jpg"
alt="chanel-perfume"
/>
</section>
<section class="text-sec">
<div class="text">
<h2>PERFUME</h2>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>
A floral, solar and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
</p>
<div class="price">
<p class="green-p">$149.99</p>
<p class="discount">$169.99</p>
</div>
<button>
<img class="icon-cart" src="images/icon-cart.svg" alt="icon-cart" />
Add to Cart
</button>
</div>
</section>
</main>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap");
:root {
--Darkcyan: hsl(158, 36%, 37%);
--Cream: hsl(30, 38%, 92%);
--darkblue: hsl(212, 21%, 14%);
--darkgrayishblue: hsl(228, 12%, 48%);
--white: hsl(0, 0%, 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background-color: var(--Cream);
font-family: "Montserrat", sans-serif;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.container {
display: flex;
background-color: var(--white);
height: 450px;
width: 600px;
}
.chanel-desktop {
height: 450px;
width: 300px;
}
.text {
margin: 2rem;
height: fit-content;
display: flex;
flex-direction: column;
}
h2 {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 5px;
color: var(--darkgrayishblue);
font-weight: 500;
}
h1 {
margin: 1.275rem 0;
font-family: "Fraunces", sans-serif;
font-size: 2rem;
line-height: 2rem;
}
p {
font-size: 14px;
line-height: 1.45rem;
color: var(--darkgrayishblue);
font-weight: 500;
}
.price {
display: flex;
margin: 2.25rem 0 2rem 0;
}
.green-p {
font-size: 2rem;
color: var(--Darkcyan);
font-family: "Fraunces", sans-serif;
margin-right: 1.2rem;
font-weight: 600;
letter-spacing: 1px;
}
button {
display: flex;
justify-content: center;
background-color: var(--Darkcyan);
padding: 0.9rem 3rem;
gap: 14px;
color: var(--white);
border-radius: 8px;
letter-spacing: 1px;
font-size: 0.9rem;
box-shadow: 0;
border: none;
}
button:hover {
cursor: pointer;
}
.add-to-c {
color: var(--white);
letter-spacing: 1px;
}
.discount {
text-decoration: line-through;
}
@media only screen and (max-width: 600px) {
.container {
flex-direction: column;
height: 616px;
width: 345px;
border-radius: 8px 8px 0 0;
}
.img {
min-height: 240px;
min-width: 345px;
background-image: url(images/image-product-mobile.jpg);
background-size: 100%;
border-radius: 8px 8px 0 0;
background-size: cover;
}
.chanel-desktop {
display: none;
}
.text-sec {
height: 372px;
width: 345px;
}
h1,
h2,
h3 {
margin-top: 1rem;
}
.text {
margin: 0.5rem 1.5rem;
}
button {
margin: 0;
}
.price {
margin: 1.5rem 0;
}
}
Assets