Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 years ago

Frontend Mentor | Product preview card component

bootstrap, django
Samuel Bolarinwa•30
@Sukysam
A solution to the Product preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


The provided code is a basic HTML file that creates a product preview card component. It contains the following elements:

<!DOCTYPE html>: specifies the HTML version and type of document being used <html lang="en">: the opening tag for the HTML file, specifying the language used in the document <head>: contains metadata about the HTML file, including links to stylesheets, scripts, and other resources <meta charset="UTF-8">: specifies the character set used in the document <meta name="viewport" content="width=device-width, initial-scale=1.0">: specifies how the website should render on different devices, based on the width of the device's screen <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">: specifies the favicon and its dimensions <link rel="stylesheet" href="styles.css">: links to the CSS stylesheet used to style the HTML file <title>Frontend Mentor | Product preview card component</title>: sets the title of the HTML file Body tag: contains the main content of the HTML file, including the "container" div that holds the product details such as name, description, and price. The attribution div at the end contains credit for the design and code of the component.

The provided code is a CSS stylesheet file for styling the product preview card component. It includes the following styles:

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');: imports the Google font "DM Serif Text" to be used in the stylesheet

  • {...}: sets the box-sizing property to border-box for all elements on the page HTML {...}: removes default margins and padding for the HTML element body {...}: sets the background colour of the page .attribution {...}: styles the attribution div at the bottom of the page with a smaller font size and centred text .container {...}: styles the main container div that holds the product preview card, including the size, position, border-radius, and box-shadow properties .pef-img {...}: sets the size and background properties for the image of the product .pef-details {...}: styles the product details section, including padding and width .prices {...}: styles the price section of the product card, including display, flex, and justify-content properties button {...}: styles the add-to-cart button, including background color, text color, padding, border, and border-radius button:hover {...}: styles the button when hovered over with the cursor .product, .sales-price, .disc-price {...}: styles the individual product details (product name, sales price, discount price), including font family, color, and margin .product-name {...}: styles the product name with a larger font and serif font family button img {...}: styles the button icon (an image of a cart) with margin right to separate it from the button text .disc-price {...}: styles the discount price with a smaller font size, lighter color, and line-through text-decoration to indicate it is discounted .discription {...}: styles the description of the product with a smaller font size @media (max-width: 414px) {...}: includes responsive styles for smaller screens, changing the display and height properties of the container and setting a different margin for the attribution div. Additionally, the image size is adjusted and border-radius changes to keep the proportions looking good.
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Samuel Bolarinwa's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.