Insure landing page developed with HTML, CSS, JavaScript, and the Sass preprocessor. This project is part of the free Frontend Mentor codding challenges. It features custom animations, responsive design, and a dark mode.
- Clone this repo:
git clone https://github.com/GracilianoOG/fem-insure-landing-page.git- Enter the directory:
cd fem-insure-landing-page/- Init Visual Studio Code (or any other IDE):
code .- Install the dependencies:
npm install- Run the project:
npm run dev| Script | Description |
|---|---|
npm run dev |
Runs the development server. |
npm run build |
Builds the project. |
npm run preview |
Previews the production build locally. |
📁 design -> Design files (provided by Frontend Mentor)
📁 public -> Public assets
📁 src/ -> Source code.
📁 assets/ -> Project images and other resources.
📁 js/ -> JavaScript files.
📁 styles/ -> Sass stylesheets.
📄 index.html -> Main page.
- Semantic HTML
- Sass preprocessor
- JavaScript
- BEM naming convention
- Mobile-first development
- Responsive design
- Vite build tool
- Frontend Mentor
- CSS Custom Properties & SASS variables
- @mixin and @include
- Breakpoints (reference)
- prefers-color-scheme
- Dark Mode in CSS Guide
- 10+ Hamburger Menu Examples [CSS Only]
- How to Create CSS Animations on Scroll [With Examples]
- backdrop-filter
- color-mix()
- Theme toggles
- Dark Mode in CSS
- Placeholder Selectors
- Accessibility testing using Linux
 GracilianoOG |
|---|