Moonlight.io Landing Page

A beautifully designed, responsive landing page built with modern frontend technologies. This project showcases advanced SCSS skills and responsive design principles, featuring a dark/light mode toggle and smooth animations.

./images/preview.jpg 🔺 Preview of the Moonlight.io landing page

🚀 Live Demo

You can view the live project here: https://landingpage-moonlight.netlify.app

📁 Project Structure

moonlight.io/
├── images/               # All project images and assets
├── js/                   # JavaScript functionality
│   └── main.js           # Main JavaScript file
├── scss/                 # SCSS source files
│   └── main.scss         # Main stylesheet
├── .gitignore            # Git ignore file
├── index.html            # Main HTML file
└── readme.md             # Project documentation

🛠️ Tech Stack

· HTML5: Semantic and accessible markup · SCSS/CSS3: Advanced styling with Sass features · JavaScript: Interactive functionality · Responsive Design: Mobile-first approach

✨ Features

· Dark/Light Mode: User-toggleable theme switching · Fully Responsive: Optimized for all device sizes (mobile, tablet, desktop) · Modern Navigation: Responsive navbar with hamburger menu for mobile · Smooth Animations: CSS transitions and hover effects · Clean UI Design: Modern and professional appearance · SCSS Architecture: Organized with variables, mixins, and nesting

🎨 Design Features

· Custom dark/light color schemes · Modern footer design · Interactive hover states · Smooth scrolling navigation · Responsive grid layout · Professional typography

🧠 Learning Objectives

This project was built to master:

· Advanced SCSS features (variables, nesting, mixins) · Responsive web design principles · CSS Flexbox and Grid layouts · JavaScript for interactive elements · Cross-browser compatibility · Performance optimization techniques

📦 Installation & Setup

1. Clone the repository

   git clone https://github.com/ehsanidev/moonlight.io.git
   cd moonlight.io

2. View the project Since this is a static site, you can open the index.html file directly in your browser or use a local server: Using Live Server (VSCode extension): · Right-click on index.html and select "Open with Live Server" Using Python:

   python -m http.server 8000

   Then visit http://localhost:8000

🚀 Deployment

The project is deployed on Netlify and can be easily updated by connecting your GitHub repository for continuous deployment.

---

👩‍💻 Developer

· GitHub: @ehsanidev · LinkedIn: zahraehsani

---