@Abdurehman420
Posted
Great job !!! keep it up
P.S : I was wondering if you use Instagram
@catherineisonline
Posted
@Abdurehman420 Thank you! Yes I am, it's @catherineisonline
Looking to hire developers?
Hello, Frontend Mentor community! This is my solution to the Fylo dark theme landing page.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@Abdurehman420
Posted
Great job !!! keep it up
P.S : I was wondering if you use Instagram
@catherineisonline
Posted
@Abdurehman420 Thank you! Yes I am, it's @catherineisonline
@christopher-adolphe
Posted
Hi Catherine!
I had a look at the code from your github repo for this challenge. Your markup and styles are neat.👌 Even if you are using plain css
you have added comments which makes it easy to access rules sections.
On the overall, you did a great job for this challenge. Below are a few things that I have noticed you could improve in your solution.
Desktop:
<header>
and that of the <article class="intro-text">
are chopped on wide viewports (starting at around 1200px) and the two column layout of <article class="section-two">
also looks too far appart. You could easily solve this by applying a max-with
to the <article>
that define the sections of your content and this will rectify the overall spacing on wider viewports.<article class="section-two">
, the link "See how Fylo works" is not picking the right font-family. I think a class="rale"
is missing on that anchor element.<article class="section-three">
, the decorative quote is missing.<article class="section-four,">
, the form control error message alignment is a bit off on wide viewports and it is also not picking the right font-family. Maybe you should consider adding a wrapper to the form control so that the error message stays align with the it, like this:<div class="input-section flex-container">
<form>
<div class="input-group">
<input class="input-field" type="text" placeholder="[email protected]">
<p class="rale error-msg">err</p>
</div>
<div class="input-group">
<button class="rale email-btn">Get Started For Free</button>
</div>
</form>
</div>
Mobile:
50px
on each side. In your solution it is kind of the opposite. 😉I am curious to know how you managed to get the screenshot preview of your solution so close to the design ? 🤔 When I submitted my first solution on FrontendMentor a few days ago, I literally got a blank preview because I added an animation in the hero section. I fixed that but the next preview still different from the design preview. 😝
Keep it up! 👍
@catherineisonline
Posted
@christopher-adolphe Thanks for the feedback, I will go through it. As for the design, I am using Figma and Chrome extension Perfect Pixel
@christopher-adolphe
Posted
Hi @catherineisonline,
I'm happy to help 🙂.
Yeah, I started using the Perfect Pixel Chrome extension. It's indeed a great tool to get as close as possible to the design. 👍
Cheers
@Phalcin
Posted
Wow, good job. i want to ask what you use to make your design exactly like the original one, I mean in measurements and everything?
@catherineisonline
Posted
@Phalcin Thank you. I am using Figma and Chrome extension called Pixel Perfect
@AndyAshley
Posted
Awesome Job on the challenge! It looks/functions great! One thing you might want to do is add a max width on sections 2 and 3 after 1440px. On 2K screens and up the content inside looks a little farther apart. Everything else flows nicely and is spaced perfectly. Overall great job and happy coding!
@catherineisonline
Posted
@AndyAshley Thanks for the feedback!
@Muralidhar22
Posted
Hey catherine,
background-size: 90%
and background-position: top 50% center
class=intro-text
and set the "curvy bg" in the intro-text
class and keep adjusting with media queriesfont-size
with max
function example:max(1.6rem,2.6vw)@catherineisonline
Posted
@Muralidhar22 Thanks for the advice. Quick question, why do I need copyright text here?
@Muralidhar22
Posted
@catherineisonline nvm, guess i confused this with other challenge
@Patilsahil821
Posted
Wow very perfect and crystal clear good job mam...
@catherineisonline
Posted
@Patilsahil821 Thank you!
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord