Test Tasks for Svitla Systems
Navigation
Tasks
For each task, use the attached JPEG file (no Figma) as a reference and create SvelteKit + Tailwind CSS implementation.
Overall instructions
- Please use SvelteKit for each project
- Use Tailwind CSS for styling. Consider using best practices: avoid magic numbers p-[11px] and class names. 5 best practices for preventing chaos in Tailwind CSS
- Make considerations for Accessibility and Responsiveness
- Use images when only necessary. SVG's are preferred
- If you don't have a font, choose a similar one using Google Fonts
- If you don't have images, you are welcome to swap them out for similar images from pexels.com
- Bonus: if you are able to add tasteful CSS animations to elements
Specific instructions
1. Navigation hover
Recreate a centered navigation similar to this with hover/active animations changing color and underlining the text.
2. Gradient background logo
Recreate this gradient background with a centered logo.
3. Website
Recreate this web design as close as possible. Responsive is a bonus.
4. To-do application
Recreate this web design and add a to-do list functionality.
