This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Astro - Static files framework
- SASS - For styles
I'm happy with the final result, my objective was to learn more about grid and in this project, I could apply it in various sections, furthermore, I learned how to apply animations and give good-looking micro-interactions to the users, and I learned how to import SVG inline in Astro I will put the code bellow how I achieved it.
---
import logo from '/assets/images/logo.svg?raw'
---
<div class="logo">
<Fragment set:html="{logo}" />
</div>
.logo {
svg path {
fill: #fff;
}
}
By doing that I could modify css properties of the SVG imported as color.
Areas to improve
- Stimating time
- Using SVGs as Astro components and inline CSS - This helped me beacuse I was having troubles modifying the svg's properties.
- Website - elian-dev
- Frontend Mentor - @elian-dev
This template is a boilerplate that we have created with the awesome team of JDK.