Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
16
Comments
4

Luis Olivero

@Luis-OliveroLas Vegas, Nevada, United States170 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • huddle-landing-page-with-single-introductory-section


    Luis Olivero•170
    Submitted almost 3 years ago

    1 comment
  • profile-card-component-main


    Luis Olivero•170
    Submitted almost 3 years ago

    0 comments
  • profile-card-component-main


    Luis Olivero•170
    Submitted almost 3 years ago

    2 comments
  • single-price-grid-component


    Luis Olivero•170
    Submitted almost 3 years ago

    0 comments
  • Frontend Mentor - 3-column preview card component


    Luis Olivero•170
    Submitted almost 3 years ago

    2 comments
  • profile-card-component-main


    Luis Olivero•170
    Submitted almost 3 years ago

    3 comments
View more solutions

Latest comments

  • CHAKIRI•70
    @mouad-chakiri
    Submitted almost 3 years ago

    QR code component

    2
    Luis Olivero•170
    @Luis-Olivero
    Posted almost 3 years ago

    Hello Chakiri, congratulations on completing this challenge! Looking at the report it seems you have a few accessibility issues and only one issue with your HTML.

    To start, I would suggest adding this to your <html> tag. <html lang="en">

    Also I would add a < main> tag around your <div>

    <body>
      <main>
        <div class="card">
        </div>
      </main>
    </body> 
    

    Another thing to keep in mind is that it is best practice to always have at least one <h1> tag on each page. I would change your <h2> line to an <h1>.

    <h1 class="header">Improve your front-end skills by building projects</h1>

    Hope this helps and keep at it!

    Marked as helpful
  • Akshat Sharma•30
    @AkshatSharma078
    Submitted almost 3 years ago

    Responsive QR Scanner using HTML CSS

    1
    Luis Olivero•170
    @Luis-Olivero
    Posted almost 3 years ago

    Hello Akshat Sharma, congratulations on completing this challenge! Looking at the report it seems you have a few accessibility issues that I would like to help you with.

    I would recommend adding a <main> tag around your div.div for better accessibility. Also possibly changing your div.div to div.card since you would be using a <main> tag now.

    <body>
      <main>
        <div class="card">
        </div>
      </main>
    </body>
    

    Another accessibility issue you have is that you need at least one <h1> tag on your page. I would suggest you replace your <h4> tags with <h1> tags instead.

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

    To help with your <footer>, I would recommend adding this to your code.

    footer {
      width: 100%;
      margin-top: 2rem;
      font-size: 1rem;
      text-align: center;
      color: white;
    }
    

    Hope this helps and keep at it!

    Marked as helpful
  • Kalani Prabodha•30
    @kalani9uggalle
    Submitted almost 3 years ago

    Product-preview-card-component

    1
    Luis Olivero•170
    @Luis-Olivero
    Posted almost 3 years ago

    Hello Kalani Prabodha, congratulations on completing this challenge! Looking at the report it seems you have a few accessibility issues and only one issue with your HTML.

    For the HTML issue, I would replace your <strike> tag with a <span> tag instead. You can still get the strike through effect with your CSS.

    .prev{
        margin-right: 12px;
        text-decoration: line-through;
    }
    

    I would also recommend adding a <main> tag around your div.card for better accessibility.

    <body>
      <main>
        <div class="card">
        </div>
      </main>
    </body>
    

    Another accessibility issue you have is that you need at least one <h1> tag on your page. You can either replace your <h2> with an <h1> and your <h3> with an <h2>.

    <h2 class="title-type">PERFUME</h2>
    <h1 class="title-preview"> Gabrielle Essence Eau De Parfum</h1>
    

    Or you can you add an <h1> that will be hidden by adding a class of sr-only.

    <h1 class="sr-only"></h1>

    Hope this helps and keep at it!

    Marked as helpful
  • Mostafa Hosseini•10
    @smostafa80
    Submitted almost 3 years ago

    Positioning, Responsive Design

    1
    Luis Olivero•170
    @Luis-Olivero
    Posted almost 3 years ago

    Hey Mostafa Hosseini,

    I would put background-color: hsl(30, 38%, 92%); on the body instead of .super-container so the whole page gets the Cream color.

    Marked as helpful
Frontend Mentor logo

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

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

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

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

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

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

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

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

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

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

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

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

Oops! 😬

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

Log in with GitHub