Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
23
Comments
20

RatifiedGeorge

@Ratified670 points

Hi! I’m George Kamunge, a passionate Full-Stack Developer with a keen interest in crafting exceptional web experiences. With expertise in HTML, CSS, TailwindCSS, JavaScript, Typescript, React, PHP, Express JS and Laravel. I thrive on turning ideas into functional, user-friendly applications.

I’m currently learning...

Next JS

Latest solutions

  • Multi-Step Form Project

    #sass/scss#typescript#react

    RatifiedGeorge•670
    Submitted 10 months ago

    0 comments
  • Room Homepage Master

    #sass/scss

    RatifiedGeorge•670
    Submitted 11 months ago

    0 comments
  • SunnySide Landing Page

    #sass/scss

    RatifiedGeorge•670
    Submitted over 1 year ago

    0 comments
  • To-Do-App

    #sass/scss

    RatifiedGeorge•670
    Submitted almost 2 years ago

    0 comments
  • Fylo Data Storage Component

    #sass/scss

    RatifiedGeorge•670
    Submitted about 2 years ago

    1 comment
  • Rest Countries API With Color Theme Switcher

    #fetch#sass/scss

    RatifiedGeorge•670
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • SharmarkeAhmed12•10
    @SharmarkeAhmed12
    Submitted over 1 year ago

    Qr Component using HTML and CSS

    2
    RatifiedGeorge•670
    @Ratified
    Posted over 1 year ago

    Great work on completing your first project. However, there's something I noticed, when specifying the custom variables at the root, you made a mistake. Each of the colors should have a unique name, and the variables should also have no spacing between them.

    Something like this:

    :root {
        --white-color: hsl(0, 0%, 100%);
        --lightgray-color: hsl(212, 45%, 89%);
        --blue-color: hsl(220, 15%, 55%);
        --darkblue-color: hsl(218, 44%, 22%);
    }
    

    And then when using the variable in the elements, you should implement it like this:

    body {
        color: var(--white-color);
        background-color: var(--lightgray-color);
    }
    

    You also made a typo on fontface, that's why the fonts aren't showing up:

    @font-face {
        font-family: "Outfit";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
    }
    
    @font-face {
        font-family: "Outfit";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
    }
    

    Generally good work. Best of luck in you other projects.

    Marked as helpful
  • Simon_Muchemi•80
    @SymonMuchemi
    Submitted about 2 years ago

    Newsletter sign-up form with success message with HTML CSS and JS

    2
    RatifiedGeorge•670
    @Ratified
    Posted about 2 years ago

    Hello

    I think you missed on part in this section of your javascript code: if (checkEmail(email)){ window.location.href = 'success-message.html'; }

    To replace the placeholder email, ash@loremcompany.com, with the email the user entered, you can give the email a span class, e.g:

    <p>A confirmation email has been sent to <span class="display-email"> ash@loremcompany.com</span>. Please open it and click the button inside to confirm your subscription.</p>

    Get the class in your javascript code, then add this to the section: if (checkEmail(email)){ window.location.href = 'success-message.html'; displayEmail.innerText = email' }

    I hope this helps

    Marked as helpful
  • muuo-maker•60
    @muuo-maker
    Submitted about 2 years ago

    Profile Card Component

    1
    RatifiedGeorge•670
    @Ratified
    Posted about 2 years ago

    Hello @muuo-maker

    Very good job on completing the challenge

    I'd suggest you adjust the width of the container to 100% instead of 90%, that way the container will be properly centered in smaller screens.

    Marked as helpful
  • Semih Yıldırım•40
    @semihyildirim57
    Submitted about 2 years ago

    QR CODE COMPONENT

    1
    RatifiedGeorge•670
    @Ratified
    Posted about 2 years ago

    Hello @semihyildirim57

    Good job on completing the challenge

    I love how you approached this challenge, you can also try using CSS variables to make your code more readable and easily replace properties in case of a mistake.

    All the best in your coding journey here. You've done well.

  • legend-sabbir•300
    @legend-sabbir
    Submitted over 2 years ago

    Sunnyside agency landing page | scroll Animation | No figma

    5
    RatifiedGeorge•670
    @Ratified
    Posted about 2 years ago

    Hello @legend-sabbir

    How do you achieve pixel-perfect design?

    What tools do you use? All your solutions are pixel-perfect!

  • Simon_Muchemi•80
    @SymonMuchemi
    Submitted about 2 years ago

    QR code component using HTML and CSS

    3
    RatifiedGeorge•670
    @Ratified
    Posted about 2 years ago

    Hello @Simon-Muchemi

    Good job on completing the challenge.

    I'd also advise using CSS variables to avoid repetition and make editing your code easy. For example: :root{ --main-font: 'Outfit', sans-serif; }

    Then because we only have one font to be used here, set the font in your body: body{ font-family: var(--main-font); }

    You can now comfortably remove this: #message{ font-family: Outfit, sans-serif; }

    and

    #title{ font-family: Outfit, sans-serif; }

    You'll have minimized repetition. I hope this helps.

    Happy coding lad.

    Marked as helpful
View more comments

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

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