Submitted almost 3 years ago

(Almost) Pixel-perfect Landing Page With Svelte, Sapper

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Preview site View code

This is a solution for...

Officelite coming soon site

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

ApplePieGiraffe’s questions for the community

Yeah, kind-of-almost pixel-perfect—some of the text is slightly misaligned and the progress bar in the hero image is rotated the opposite way in my solution, for some reason. 😅

Anyway, this was such a beautiful design and I learned a lot from creating it! I ended up having to use Sapper and to learn about things like routing and server-side rendering—which spun around my head a little, but I'm hanging in there! 😄

I added some pretty micro-interactions to the buttons and the form as an extra touch! 😉

Of course, feedback is both welcome and appreciated. 😊

And as usual, keep on coding (and happy coding, too)! 😁

BTW, one quirk I'm aware of is that the countdown timer resets when you go back-and-forth between the home and signup pages.

Community feedback

Nam HaÏ• 820

@Nam-Hai

Posted almost 2 years ago

The only thing that could be improved (beside the clock reseting at each reload) would be that when clicking on "Try for free" links for Pro Pack or Ultimate Pack, the subscription page selection automatically the right Pack in the form. Here it is by default on Free Pack. In real world use this would be misleading for the user and might lead to confusion.

Anyway, your work is sick, I never saw a webpage THIS close to the OG disign, this is truly pixel perfect

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted almost 2 years ago

@Nam-Hai

Hey, there! 👋

Sorry for my late reply! 😅

Thank you very much for your comments! I probably took a little too long trying to get this solution reasonably close to being "pixel-perfect." Anyways, it was fun! 😆

Thanks for your suggestion, as well! 😉

Happy coding! 😁

karenefereyan• 375

@karenefereyan

Posted over 2 years ago

Superb work. Was just wondering, If I attempt to sign up for the free, pro or ultimate plans by clicking their respective buttons, shouldn't the sign up form automatically update to show the chosen plan? Cos right now no matter what button I click, the free plan is chosen by default

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 2 years ago

@karenefereyan

Thanks! 😀 That's actually good idea that I missed! 😅 Thanks for pointing that out! 👍

jack fikolson aka frontfliper• 145

@areklaz

Posted over 2 years ago

Wow. I wish i could have such skills and become senior master extra developer like you.

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 2 years ago

@archi1397

Haha, I believe I still have much to learn, archi1397! 😄 Just keep practicing (such as by doing pretty challenges like these) and I'm sure you'll learn lots and become better! 👍

Matt Studdert• 13,571

@mattstuddert

Posted almost 3 years ago

Another awesome project APG, and I'm loving the ripple effect on the call-to-actions! 😉

You seem to be loving Svelte and it's awesome that you dived into Sapper for this project. Sounds like you're learning a lot!

Keep up the amazing work 🙂

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted almost 3 years ago

@mattstuddert

Thanks, as usual, Matt! 😀

Al Nahian• 775

@alnahian2003

Posted almost 3 years ago

Hey, Apple Pie Giraffe!

WOW !!! You did an excellent job and your submitted project looks totally perfect on my screen! I also checked the responsiveness and it's really cool.

You know what, I'm thinking like, I should take the same challenge and I should follow your style :D

You got my ♥ on this project :)

Happy Coding, Mate!

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted almost 3 years ago

@alnahian2003

Thanks so much, alnahian2003! 😆 Happy coding you, too! 😀

Al Nahian• 775

@alnahian2003

Posted almost 3 years ago

It's my pleasure @ApplePieGiraffe ! Happy Coding <3

Emmilie Estabillo• 5,500

@emestabillo

Posted almost 3 years ago

Hey APG! My favorite is the click interactions on the buttons. Svelte seems like an efficient way to get a site up and running and your projects are inspiring me to look into it 😃 This one looks pretty much pixel perfect to me!

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted almost 3 years ago

@emestabillo

TY, emestabillo! 😀

Please log in to post a comment

Join our Discord community

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