punkfairie/frontend-mentor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 feat: Write HTML markup

Browse source
This commit is contained in:
marleyrae 2023-05-28 19:22:47 -07:00
parent 787e4fc4c7
commit 7a1e20f07d
2 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
product-preview-card-component/index.html
View file

@ -26,22 +26,34 @@
</head> </head>
<body> <body>
Preview <main class="ProductCard">
<picture class="ProductCard-picture">
<source media="(max-width: 999px)" srcset="images/image-product-mobile.jpg">
<source media="(min-width: 1000px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-desktop.jpg" alt="Gabrielle Essence perfume bottle">
</picture>
Gabrielle Essence Eau De Parfum <div class="ProductCard-category">Perfume</div>
A floral, solar and voluptuous interpretation composed by Olivier Polge, <h1 class="ProductCard-title">Gabrielle Essence Eau De Parfum</h1>
Perfumer-Creator for the House of CHANEL.
$149.99 <p class="ProductCard-description">
$169.99 A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for
the House of CHANEL.
</p>
Add to Cart <div class="ProductCard-priceContainer">
<span class="ProductCard-price">$149.99</span>
<span class="ProductCard-price--discounted">$169.99</span>
</div>
<button class="ProductCard-addToCart">Add to Cart</button>
</main>
<div class="attribution"> <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend
Mentor</a>. Mentor</a>.
Coded by <a href="#">Your Name Here</a>. Coded by <a href="https://punkfairie.net">Marley Rae</a>.
</div> </div>
</body> </body>
</html> </html>

2
product-preview-card-component/src/style.css
View file

@ -1,7 +1,5 @@
/* ----------------------------------------------------------------------------------- &root ---- */ /* ----------------------------------------------------------------------------------- &root ---- */
/* desktop width: 1440px */
:root { :root {
--c-dark-cyan: 158, 36%, 37%; --c-dark-cyan: 158, 36%, 37%;
--c-cream: 30, 38%, 92%; --c-cream: 30, 38%, 92%;