Shaxboz

@shakhboz-shukhrat

All comments

jrickyrichard•200

@jrickyrichardSubmitted over 1 year ago

Product Preview Card Component (HTML, CSS)

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

Gev Sargsyan•120

@GevSargSubmitted over 1 year ago

Welcome Feedback! No Question.

Order Summary

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

Based on the code provided, there are no syntax errors or logical errors present. However, there are some suggestions that can be made to improve the code's readability and organization:

Group related CSS properties together (e.g. all properties related to the .card class).
Use consistent naming conventions for class names (e.g. use either camelCase or kebab-case, but not both).
Use shorthand properties where possible (e.g. margin: 0 instead of margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;).
Use comments to explain the purpose of each section of code.

Here's a refactored version of the code with these suggestions implemented:

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@500&family=Montserrat:wght@500&family=Red+Hat+Display:wght@500&family=Schibsted+Grotesk&display=swap");

/* Reset styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global styles */
body {
  background-image: url(images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
  background-color: hsl(225, 100%, 94%);
  font-family: "Red Hat Display";
}

/* Card styles */
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  min-height: auto;
  background-color: white;
  border-radius: 15px;
}

.card-background img {
  width: 100%;
}

.card-info {
  text-align: center;
  padding: 30px 45px;
}

.title {
  text-transform: capitalize;
  color: hsl(223, 47%, 23%);
  font-weight: 900;
  font-size: 26px;
}

.desc {
  margin: 20px 0;
  color: hsl(224, 23%, 55%);
}

.card-buy {
  padding: 20px 15px;
  border-radius: 15px;
  width: 100%;
  background-color: hsl(225, 100%, 98%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-music {
  display: flex;
  flex-direction: row;
}

.card-music p {
  margin-left: 20px;
}

.card-plan {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.plan-name {
  color: hsl(223, 47%, 23%);
  font-weight: 900;
  font-size: 16px;
}

.plan-price {
  color: hsl(224, 23%, 55%);
  font-size: 15px;
}

.change {
  text-decoration: underline;
  color: #382ae1;
  font-weight: 900;
  font-size: 15px;
  border: none;
}

.change:hover {
  color: #766cf1;
  text-decoration: none;
  cursor: pointer;
}

.buy {
  background-color: #382ae1;
  color: white;
  border: none;
  margin: 30px 0;
  width: 100%;
  padding: 15px;
  border-radius: 15px;
  font-size: 16px;
  font-weight: 900;
}

.buy:hover {
  background-color: #766cf1;
  cursor: pointer;
}

.cancel {
  border: none;
  color: hsl(224, 23%, 55%);
  background-color: transparent;
  font-weight: 900;
}

.cancel:hover {
  color: hsl(223, 47%, 23%);
  cursor: pointer;
}

/* Mobile styles */
@media (max-width: 450px) {
  body {
    background-image: url(images/pattern-background-mobile.svg);
    background-size: cover;
  }
  
  .card {
    width: 90%;
  }
  
  .card-plan p {
    font-size: 15px;
  }
  
  .change {
    font-size: 14px;
  }
  
  .card-info {
    padding: 30px 25px;
  }
}

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

Marked as helpful

mcurvay•10

@mcurvaySubmitted over 1 year ago

bootstrap css html and coffee

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge! There do not seem to be any problems with the code. However, here it is formatted for better readability:

<!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"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <title>Frontend Mentor | Product preview card component</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Montserrat:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
</head>
  <body>
    <div
      class="container d-flex justify-content-center align-items-center flex-column"
    >
      <div class="row">
        <div class="col">
          <div class="card" style="max-width: 540px\">\n            <div class="row g-0">
              <div class="col-md-6">
                <img
                  src="./images/image-product-desktop.jpg"
                  class="img-fluid rounded-start"
                  alt="..."
                />
              </div>
              <div class="col-md-6">
                <div class="card-body d-flex align-content-between flex-column">
                  <p class="card-text text-uppercase opacity-50">
                    p e r f u m e
                  </p>
                  <h3 class="card-title">Gabrielle Essence Eau De Parfum</h3>
                  <p class="card-text opacity-50">
                    A floral, solar and voluptuous interpretation composed by
                    Olivier Polge, Perfumer-Creator for the House of CHANEL.
                  </p>
                  <div class="row mb-3">
                    <div class="col-auto">
                      <p class="h3">$149.99</p>
                    </div>
                    <div class="col-auto">
                      <p class="small text-decoration-line-through opacity-50">
                        $169.99
                      </p>
                    </div>
                  </div>
                  <div class="row px-3">
                    <a class="card-link btn">
                      <svg
                        class="me-3"
                        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 Chart
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by <a href="#">mcurvay</a>.
      </div>
    </div>
  </body>
</html>

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

Clive Chambers•230

@Clive-ChambersSubmitted over 1 year ago

Responsive Intro section with dropdown navigation using Flexbox

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge! The code seems to be functional and error-free, however, here are some suggestions for improvement:

Use const instead of let when declaring variables that don't need to be reassigned.
Instead of hard-coding media size 991, you can declare it as a constant for better readability.
Use descriptive function names for better code readability.
Avoid single-letter variable names, use descriptive names instead.

Here is the updated code with the above suggestions applied:

(() => {
  const openNavMenu = document.querySelector(".open-nav-menu");
  const closeNavMenu = document.querySelector(".close-nav-menu");
  const navMenu = document.querySelector(".nav-menu");
  const menuOverlay = document.querySelector(".menu-overlay");
  const MEDIA_SIZE = 991;

  openNavMenu.addEventListener("click", toggleNav);
  closeNavMenu.addEventListener("click", toggleNav);
  menuOverlay.addEventListener("click", toggleNav);

  function toggleNav() {
    navMenu.classList.toggle("open");
    menuOverlay.classList.toggle("active");
    document.body.classList.toggle("hidden-scrolling");
  }

  navMenu.addEventListener("click", (event) => {
    if (event.target.hasAttribute("data-toggle") && window.innerWidth <= MEDIA_SIZE) {
      event.preventDefault();
      const clickedMenuItem = event.target.parentElement;
      if (clickedMenuItem.classList.contains("active")) {
        collapseSubMenu();
      } else {
        if (navMenu.querySelector(".menu-item-has-children.active")) {
          collapseSubMenu();
        }
        clickedMenuItem.classList.add("active");
        const subMenu = clickedMenuItem.querySelector(".sub-menu");
        subMenu.style.maxHeight = subMenu.scrollHeight + "px";
      }
   }
  });

  function collapseSubMenu() {
    navMenu.querySelector(".menu-item-has-children.active .sub-menu").removeAttribute("style");
    navMenu.querySelector(".menu-item-has-children.active").classList.remove("active");
  }

  function fixOnResize() {
    if (navMenu.classList.contains("open")) {
      toggleNav();
    }
    if (navMenu.querySelector(".menu-item-has-children.active")) {
      collapseSubMenu();
    }
  }

  window.addEventListener("resize", function () {
    if (this.innerWidth > MEDIA_SIZE) {
      fixOnResize();
    }
  });
})();

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

Mizumura Keiji•130

@Keiji-MizumuraSubmitted over 1 year ago

The most hardest thing about this is deploying this app on Vercel. I just need to fix the app into App. I didn't also used that much components unless this website will grow large in scale.

Responsive News Page React Webpage

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

There doesn't seem to be any syntactical or logical errors in this code. However, if performance is a concern, it might be better to optimize the conditional statement in the JSX. Instead of using a ternary operator to check whether to display the hidden navigation, we can use a simple if-else statement:

import React, { useState } from "react";

const Header = () => {
  const [showNav, setShowNav] = useState(false);

  const toggleNav = () => {
    setShowNav(!showNav);
  };

  let hiddenNav = null;
  if (showNav) {
      hiddenNav = (
          <div className="hidden-nav">
              <div className="hidden-nav-content">
                  <button onClick={toggleNav}>
                      <img src="/assets/images/icon-menu-close.svg" alt="close"></img>
                  </button>
                  <ul>
                      <li><a href="#">Home</a></li>
                      <li><a href="#">New</a></li>
                      <li><a href="#">Popular</a></li>
                      <li><a href="#">Trending</a></li>
                      <li><a href="#">Categories</a></li>
                  </ul>
              </div>
          </div>
      );
  }

  return (
    <header>
      <div className="logo">
        <img src="assets/images/logo.svg" alt="logo" />
      </div>
      <nav>
        <ul className="desktop-nav">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">New</a>
          </li>
          <li>
            <a href="#">Popular</a>
          </li>
          <li>
            <a href="#">Trending</a>
          </li>
          <li>
            <a href="#">Categories</a>
          </li>
        </ul>
        <button onClick={toggleNav}>
          <img src="assets/images/icon-menu.svg" alt="icon" />
        </button>
      </nav>
      {hiddenNav}
    </header>
  );
};

export default Header;

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

Marked as helpful

Roma•230

@roma-nikolaichukSubmitted over 1 year ago

Any feedback/thoughts are greatly appreciated!

Responsive "Single price grid component" using SCSS, BEM

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge! There doesn't appear to be any obvious problems with the code. However, there are some suggested improvements:

Use double quotes consistently for HTML attributes: In the link tag, the href attribute uses double quotes while the rel and type attributes use single quotes. It's better to be consistent and use double quotes for all attributes.
Add alt attributes to image links: The link tag with the favicon image doesn't have an alt attribute. It's recommended to add one to improve accessibility.
Use semantic HTML: The section and article elements are used correctly to structure the content, but it might be more appropriate to use header and footer elements instead of h2 and p for the headings and attribution text respectively.

Here is the revised code with the suggested improvements:

<!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" alt="Site favicon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
    <title>Frontend Mentor | Single Price Grid Component</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body>
    <main>
      <section class="single-price-grid">
        <header class="single-price-grid__join">
          <h1 class="single-price-grid__join-title">Join our community</h1>
          <h2 class="single-price-grid__join-subtitle">30-day, hassle-free money back guarantee</h2>
          <p class="single-price-grid__join-text">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.</p>
        </header>

        <article class="single-price-grid__subscription">
          <h2 class="single-price-grid__subscription-subtitle">Monthly Subscription</h2>

          <div class="single-price-grid__price">
            <span class="single-price-grid__amount">$29</span>
            <span class="single-price-grid__period">per month</span>
          </div>

          <p class="single-price-grid__subscription-text">Full access for less than $1 a day</p>

          <button class="single-price-grid__signup-btn" type="button">Sign Up</button>
        </article>

        <article class="single-price-grid__why-choose-us">
          <h2 class="single-price-grid__why-choose-us-subtitle\">Why Us</h2>

          <ul class="single-price-grid__list">
            <li class="single-price-grid__item">Tutorials by industry experts</li>
            <li class="single-price-grid__item">Peer & expert code review</li>
            <li class="single-price-grid__item">Coding exercises</li>
            <li class="single-price-grid__item">Access to our GitHub repos</li>
            <li class="single-price-grid__item">Community forum</li>
            <li class="single-price-grid__item">Flashcard decks</li>
            <li class="single-price-grid__item">New videos every week</li>
          </ul>
        </article>

        <footer>
          <p class="attribution">Challenge by <a href="https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc" target="_blank">Frontend Mentor</a>. 
            Coded by <a href="https://github.com/roma-nikolaichuk/single-price-grid-component" target="_blank">Roman Nikolaichuk</a>.
          </p>
        </footer>
      </section>
    </main>
  </body>
</html>

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

Marked as helpful

Semil Khedawala•30

@semil338Submitted over 1 year ago

Media query and margin auto

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

There are no major issues with the code you provided. However, I have a few suggestions to make it more efficient and readable:

Move the import statement for fonts to the top of the CSS file.
Use shorthand properties for margin and padding.
Use consistent units for font size and line height.
Add comments to the code to make it easier to understand and maintain.

Here's the rewritten code with my suggestions:

/* Import Fonts */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");

/* Reset Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Main Styles */
body {
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
}

.qr-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px;
  border-radius: 15px;
  background-color: hsl(0, 0%, 100%);
}

.img-container img {
  width: 100%;
  height: 200px;
  object-fit: fill;
  border-radius: 10px;
}

.qr-heading {
  font-size: 1rem;
  font-weight: 700;
  color: hsl(218, 44%, 22%);
  text-align: center;
  margin: 16px 0;
}

.sub-heading-qr {
  font-size: 0.75rem;
  font-weight: 400;
  color: hsl(220, 15%, 55%);
  text-align: center;
  margin-bottom: 10px;
}

/* Media Query */
@media screen and (max-width: 375px) {
  .img-container img {
    width: 250px;
    height: 250px;
  }
}

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

Marked as helpful

kingacygan•10

@kingacyganSubmitted over 1 year ago

QR-challenge

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

The code looks good and there are no obvious issues. However, here are a few suggestions to consider:

Use consistent indentation for better readability.
Use double quotes consistently for HTML attributes.
Add a doctype declaration at the beginning of the HTML document.
Consider adding a language attribute to the HTML element.

With these suggestions, the updated code would look like this:

<!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 | QR code component</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
  </head>
  <body>
<div class="container position-relative d-flex justify-content-center">
      <div class="row">
        <div class="col">
          <img class="img-fluid" src="images/image-qr-code.png" alt="Responsive image">
          <h1>Improve your front-end skills by building projects</h1>
          <h2>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</h2>
        </div>
      </div>
    </div>
<div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Kinga</a>.
    </div>
  </body>
</html>

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

klass1cal•90

@Niksona0Submitted over 1 year ago

NFT preview project.

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

There are a few issues with the provided code:

The closing h1 tag should be </h1>, not </h3>.
It's recommended to keep all CSS in an external stylesheet rather than inline styles. Moving the styles from the style element to an external file would be better.
The span tag in the footer is not closed properly. It should be </span> instead of <span>.

Here's the corrected code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | NFT preview card component</title>
</head>
<body>
  <main>
    <section>
      <div class="hero-img\"><img src=\"images/bg.jpg"></div>
      <h1>Equilibrium #3429</h1>
      <p>Our Equilibrium collection promotes balance and calm.</p>
      <div class="details">
        <p class="ETH"><img src="images/icon-ethereum.svg"> 0.041 ETH</p>
        <p class="time\"><img src="images/icon-clock.svg"> 3 days left</p>
      </div>
      <hr>
      <footer>
        <p><img src="images/image-avatar.png"><span class="txt">Creation of <span class="name">Jules Wyvern</span></span></p>
      </footer>
    </section>
  </main>
</body>
</html>

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

Marked as helpful

George Bleyer•280

@georgebleyerSubmitted over 1 year ago

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.

Stats preview card component [Responsive design]

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!

Sam•10

@HunknowowSubmitted over 1 year ago

QR Code Challenge Solution (HTML/CSS)

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

There are no syntax errors in the given HTML code. However, there is an empty <p> tag in the code that can be removed.

Here is the updated code without the empty <p> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
<link rel="stylesheet" href="css/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap"
      rel="stylesheet"
    />
<title>Frontend Mentor | QR code component</title>
  </head>
  <body>
    <section id="qr-code">
      <div class="main-block">
        <img alt="QR-CODE" src="images/image-qr-code.png" />

        <h3>Improve your front-end skills by building projects</h3>

        <p>
          Scan the QR code to visit Frontend Mentor and take your coding skills
          to the next level
        </p>
      </div>
    </section>

    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Your Name Here</a>.
    </div>
  </body>
</html>

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

Dilip Kumar•350
@curiousdilipSubmitted over 1 year ago
open to any suggestions
Using Vanilla HTML/CSS for NFT preview card component
1
Shaxboz•1,230
@shakhboz-shukhratPosted over 1 year ago
Hello there👋! Congratulations on completing this challenge!

There are no syntax errors in the code. However, there are some issues with the CSS that could be fixed:

The font family in the link href is incorrect. It should be "Outfit:wght@300;400;600" instead of just "Outfit".

The ".box .img-container" selector is repeated twice. The second one should be renamed to ".img-hover".

The ".box h1:hover" selector is missing a closing curly brace.

Corrected CSS:

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

Shaxboz

All comments

Product Preview Card Component (HTML, CSS)

Order Summary

bootstrap css html and coffee

Responsive Intro section with dropdown navigation using Flexbox

Responsive News Page React Webpage

Responsive "Single price grid component" using SCSS, BEM

Media query and margin auto

QR-challenge

NFT preview project.

Stats preview card component [Responsive design]

QR Code Challenge Solution (HTML/CSS)

Using Vanilla HTML/CSS for NFT preview card component