Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
6
Kerby
@KeremBakan

All comments

  • Tad Atkinson•160
    @palmettophoto
    Submitted over 2 years ago

    3 Column Preview Card using HTML & CSS

    1
    Kerby•200
    @KeremBakan
    Posted over 2 years ago

    You can use transition on button hovers.

    You can use mix-blend-mode: screen in button class to make same color with background even you change background color it will be same color.

    The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

    The alt attribute should explain the purpose of the image.

    If you want to learn more about the alt attribute, you can read this article. 📘.

    Happy Coding 😁

  • Eneyee•60
    @Eneyee
    Submitted over 2 years ago

    QR code component solution with basic HTML/CSS

    2
    Kerby•200
    @KeremBakan
    Posted over 2 years ago

    Your <img> tags should have alt attribute.

    The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io.

    If you want to learn more about the alt attribute, you can read this article 📘.

    Every page should have <h1> tag because it is important for screen readers. If you want to add <h1> tag but making it only visible for screen readers, you can use something like this.

     .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
          }
    

    Your page should have <footer> tag.

    You can use reset.css or normalize.css to reset default styling.

    Happy Coding 😁

    Marked as helpful
  • Mateo Rinland•210
    @mateorinland
    Submitted over 2 years ago

    Profile card component

    #accessibility#semantic-ui
    1
    Kerby•200
    @KeremBakan
    Posted over 2 years ago

    You don't have to reset default styling manually just use reset.css or normalize.css to reset default styling.

    Your background is fine you don't have to worry about it.

    Your font is not same with design I assume default styling causing it.Just reset styling and try again.

    Sorry for bad english.

    Other than that God Job.

    Happy Coding 😁

    Marked as helpful
  • melisguclu•120
    @melisguclu
    Submitted over 2 years ago

    Profile Card Component

    1
    Kerby•200
    @KeremBakan
    Posted over 2 years ago

    Your page should have <footer> tag. Every page should have <h1> tag because it is important for screen readers. If you want to add <h1> tag but making it only visible for screen readers you can use something like this.

     .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
          }
    
    
  • mbongoelvis•540
    @mbongoelvis
    Submitted over 2 years ago

    the page was builded using css and html

    #bootstrap#angular
    1
    Kerby•200
    @KeremBakan
    Posted over 2 years ago

    You should use <main> tag it is semanticly important. Every page should have <h1> tag because it is important for screen readers. If you want to add <h1> tag but making it only visible for screen readers you can use something like this.

     .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
          }
    
    

    Happy Coding 😊

    Marked as helpful
  • brspkts•470
    @brspkts
    Submitted over 2 years ago

    Order Summary View Component

    2
    Kerby•200
    @KeremBakan
    Posted over 2 years ago

    You have to use header tags in order <h1> <h2> <h3> go on like this. You should use reset.css or normalize.css to reset browsers default styling. To center .container on the page you can also use this code snippet.

    .container {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
    }
    

    Other than that good job.

    Happy Coding

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