Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Officelite coming soon site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! πŸŽ‰

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

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

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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! 😁

1

karenefereyanβ€’ 375

@karenefereyan

Posted

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

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@karenefereyan

Thanks! πŸ˜€ That's actually good idea that I missed! πŸ˜… Thanks for pointing that out! πŸ‘

1

@areklaz

Posted

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

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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! πŸ‘

1

P
Matt Studdertβ€’ 13,591

@mattstuddert

Posted

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 πŸ™‚

3


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@mattstuddert

Thanks, as usual, Matt! πŸ˜€

1

Al Nahianβ€’ 775

@alnahian2003

Posted

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!

3


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@alnahian2003

Thanks so much, alnahian2003! πŸ˜† Happy coding you, too! πŸ˜€

2

Al Nahianβ€’ 775

@alnahian2003

Posted

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

2

P
Emmilie Estabilloβ€’ 5,420

@emestabillo

Posted

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!

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@emestabillo

TY, emestabillo! πŸ˜€

2

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!