James• 340
@James-alderson
Posted
Hi Brenda, Replace these codes with your own code, this way your design will be very similar to the challenge.
** HTML:
<!DOCTYPE html>
<html lang="en">
<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">
<meta name="author" content="Brenda Daroz">
<meta name="description" content="Product preview card component">
<title>Product preview card component</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
</head>
<body>
<body>
<main>
<div class="card">
<div class="card__img">
<picture>
<source srcset="./image-product-mobile.jpg" media="(max-width: 660px)">
<img src="./images/image-product-desktop.jpg" alt="product image">
</picture>
</div>
<div class="text__content">
<h2>Perfume</h2>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p class="text__description">A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.</p>
<p class="text__price">$149.99<span><del>$169.99</del></span></p>
<button>
<img src="./images/icon-cart.svg"width="16" height="16" aria-label="hidden">
Add to Cart
</button>
</div>
</div>
</main>
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Brenda Daroz</a>.
</footer>
</body>
</html>
** CSS:
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap");
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
font-family: "Montserrat", sans-serif;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: hsl(30, 38%, 92%);
}
h1 {
font-family: "Fraunces", sans-serif;
font-size: 2.5rem;
}
h2 {
color: hsl(228, 12%, 48%);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.2rem;
text-transform: uppercase;
}
del {
font-family: "Montserrat", sans-serif;
}
.card {
display: flex;
max-width: 620px;
}
.card__img,
.text__content {
flex: 1 1 50%;
}
.card__img img {
display: block;
width: 100%;
height: 100%;
border-radius: 1rem 0 0 1rem;
}
.text__content {
padding: 2em;
border-radius: 0 1rem 1rem 0;
background-color: hsl(0, 0%, 100%);
}
h1,
.text__description,
.text__price {
margin: 1rem 0;
}
button {
display: flex;
width: 100%;
color: white;
font-size: 1rem;
font-family: inherit;
font-weight: 700;
text-align: center;
padding: 1rem;
column-gap: 0.5rem;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
border-radius: 0.5rem;
background-color: hsl(160, 43%, 31%);
}
button:hover {
background-color: hsl(161, 45%, 14%)
}
.text__description {
color: hsl(228, 12%, 48%);
font-weight: 500;
font-size: 1rem;
}
.text__price {
color: hsl(160, 43%, 31%);
font-family: "Fraunces", sans-serif;
font-size: 2.5em;
}
.text__price span {
display: inline-block;
color: hsl(228, 12%, 48%);
font-size: 1rem;
text-align:center;
font-weight:lighter;
margin-left: 1rem;
}
.attribution {
position: absolute;
bottom: 0;
width: 100%;
color: hsl(228, 12%, 48%);
text-align: left;
}
.attribution a {
color: hsl(160, 43%, 31%);
}
@media (max-width: 660px) {
.card {
max-width: 350px;
flex-direction: column;
}
.card__img img {
height: 230px;
object-fit: cover;
border-radius: 1rem 1rem 0 0;
}
.text__content {
height: 25rem;
padding: 2rem 1rem;
border-bottom-left-radius: 1rem;
border-top-right-radius: 0;
}
h1 {
font-size: 1.5rem;
}
.attribution {
font-size: 0.7rem;
}
}
With a lot of practice, you can overcome design problems So
keep practicing and learning 💪 and happy coding 🚀.
0
