Design comparison
SolutionDesign
Community feedback
- @James-aldersonPosted over 2 years ago
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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord