Submitted over 1 year ago

Stats preview card component [Responsive design]

George Bleyer•280

@georgebleyer

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello DEVS

I just completed this challenge. It went quite well, though. In this project I tried to make it more semantic using some specific elements for divisions (<main>, <picture> and <section>. I also used @media only screen and (min-width: 900px) to change the layout to mobile for desktop and change the images

I would be grateful if you could give some feedback or show where I made mistakes.

Community feedback

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

The code seems to be well-written and there are no major issues. However, there are some suggestions that can be implemented to improve the code:

Add a doctype declaration at the beginning of the HTML file to indicate the document type and version. For HTML5, use <!DOCTYPE html> at the beginning.
Include a lang attribute in the html tag to indicate the language used in the document. In this case, it is "pt-br" for Portuguese Brazil.
The CSS reset and normalize stylesheet links are commented out. If they are required, they can be uncommented and added to the head section.
The picture tag is not properly formatted with an img tag inside it. It is recommended to use the img tag instead.

Here's the revised code:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="George Bleyer" />
    <title>Frontend Mentor | Stats preview card component</title>
    <link rel="shortcut icon" href="assets/images/favicon-32x32.png" type="image/png" />
<link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <main>
      <img class="imagem" src="assets/images/image-header-desktop.jpg" alt="Header image" />
      <section class="texto">
        <h1>Get <span>insights</span> that help your business grow.</h1>
        <p class="espaco">
          Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
        </p>
        <section class="dados">
          <div class="companies">
            <h2>10k+</h2>
            <p>COMPANIES</p>
          </div>
          <div class="templates">
            <h2>314</h2>
            <p>TEMPLATES</p>
          </div>
          <div class="queries">
            <h2>12m+</h2>
            <p>QUERIES</p>
          </div>
        </section>
      </section>
    </main>
  </body>
</html>

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

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