MinhKhangTran/w52s_8_astro_insure

Astro

Frontend Mentor - Insure landing page solution

This is a solution to the Insure landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview
My process
- Built with
- What I learned
Author

Overview

The challenge

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

Screenshot

Links

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
Astro - static site builder

What I learned

default value for property display is inline 🙈

.selector {
  display: inline;
}

- use figma inspect tool to check css typo or other properties

Using the devtool to toggle between viewports

using css to change color of svgs (see Footer.astro)

a {
  cursor: pointer;
  transition: all 0.35s ease-in;
  &:hover > svg > path {
    fill: var(--very-dark-violet);
  }
}

Author