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
Latest comments
- @SharmarkeAhmed12@Ratified
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 - @SymonMuchemi@Ratified
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@Ratified
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 - @semihyildirim57@Ratified
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@Ratified
Hello @legend-sabbir
How do you achieve pixel-perfect design?
What tools do you use? All your solutions are pixel-perfect!
- @SymonMuchemi@Ratified
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