Submitted over 1 year ago

Product Preview Card Component (HTML, CSS)

jrickyrichard•200

@jrickyrichard

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

The code seems to be valid and properly formatted. However, a few suggestions could be:

Add comments to the code to describe the purpose of each section.
Organize the CSS styles in a way that is easier to read and maintain.
Use semantic HTML5 tags instead of generic tags (e.g. use <header> instead of <section id="header">).
Specify the alt attribute for the <img> tag to improve accessibility for visually impaired users.

Here's an updated version of the code with these suggestions included:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Product preview card component</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
<section id="image-container">
<img src="./images/perfume.jpg" alt="A bottle of Gabrielle Essence Eau De Parfum">
    </section>

    <section id="text-price-container">
<article id="text-container">
<span>Perfume</span>
        <h1>Gabrielle Essence Eau De Parfum</h1>
        <p>A floral, solar and voluptuous interpretation composed by Oliver Polge, Perfumer-Creator for the House of CHANEL.</p>
      </article>
    
      <article id="price-container">
<section>
<h2>$149.99</h2>
          <small>RRP $169.99</small>
        </section>
        
        <button>
<span><svg width="15" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg> Add to Cart</span>
        </button>
      </article>
    </section>
  </main>
</body>
</html>

Anyway, your solution is great. Hope you will find this helpful. Happy coding!

Marked as helpful

jrickyrichard•200

@jrickyrichardPosted over 1 year ago

@Trueboss thank you for your feedback, i will remember and apply your suggestion.

Please log in to post a comment

Join 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