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: https://www.frontendmentor.io/solutions/sunnyside-agency-landing-page-svelte-css-grid-keyframes-B1UGumXV5
- Live Site URL: https://fm-sunnyside-landing-page.vercel.app/
- Svelte
- CSS Grid
- Keyframes animation
I utilized a local variable in conjunction with a svelte variable to determine the color of the "underline" in the Update: Now using the method found in this Svelte REPL to implement a CSS variable for the LinksUnderlined
component. Not sure if this is best practice as it feels there should be a simpler way to do this, but it works!LinksUnderlined
color.
This was my first time using the svelte:window
property, which I used to bind the innerWidth value to a variable. This was handy in passing another condition to the Svelte if
statement that determines whether the menu in the Nav
component is shown or not.
<svelte:window bind:innerWidth={width}/>
...
{#if active || width >= 800}
<ul class="menu" ...
- "px to rem" VSCode extension - an absolute time saver.
- Svelte CSS Variables REPL