All solutions

Haven't implemented drag & drop (yet). Have some weird movements with list item transition (via vue <transition-group>, but hey, really wanted to animate list updates). Had much trouble with setting background-image dynamically vie Vue, so I ended up doing some workarounds.

Haven't managed to get those close icons to show on mobile, while only appearing on hover on desktop. I tried with listening on window resize event, but already using it for background change (and to me that doesn't seem as the best thing performance wise). Let me know if there is some better solution to do that

First of all, screenshot looks wrong, no spaces between title and text below, it's because I used the new flex gap property, so it isn't supported on whatever frontend mentor uses for showing screenshots.

Spent way too much time making it responsive on all possible displays. Haven't been able to animate hero panel change. Added dark theme.

Let me know what you think and if you have any tips or criticism 🐪

All these validation/html errors are all for the same element, back and forward buttons, don't be alarmed, forgot to validate it before submitting 😂 It looks like many because I ended up giving each panel its own sets of buttons, instead of all panels reusing the same, couldn't find a way to absolutely position them if they were outside of the panels. So each error produces 3. Mistake on my part.

I spent quite a lot of time on this, let me know what I could've improved. Haven't been able to animate faq and features section, as animating auto height and display:none is quite hard, I think. If there's an easy solution, I'd be happy to hear it.

My JS is still quite messy.

Feel free to comment my javascript code, I'm not the best with fetching data, promises and catching errors. Probably could've organized the code better. I appreciate any tips.

I know about the visible key, I don't know how I can hide it while still keeping the api working correctly for anyone trying out my solution.

Haven't implemented searching by domain name. I added a cute error video just because.

How could I animate the mobile menu open/close? (tried transform: scale(1,0) to (1,1), but it leaves empty space when closed) Also have a bug that mobile-nav menu stays on desktop layout if it's left open on mobile and you resize the window.

Code for mobile nav is a little messy, ain't too experinced with creating responsive/mobile nav menus.

Let me know how I did, first time doing 'mobile first'

Also interested if there was a better way of adding previous border colors apart from setting them individualy all over again (I wanted to remove red border for invalid input and revert to old border colors when the placholder is shown, feel like there may be some revert-like property I'm not familiar with). For reference, I haven't actually started learning JS yet.

Let me know how I did