💻 Clipboard Landing Page

ℹ️ A Responsive Landing Page for Clipboard Company

Mobile Preview (375x812)	Desktop Preview (1440x960)

This landing page promotes Clipboard, a tool for synchronizing clipboard content across devices and highlights features like cross-platform support, cloud syncing, and app integration.

Created as part of the building challenges from Frontend Mentor.

---

🔍 Overview

This project showcases a modern responsive landing page built using semantic HTML, custom CSS, and minimal JavaScript. The design is fully responsive, mobile-first, and offers a theme toggle with accessible SVG icons. The project includes proper HTML structure, WCAG-compliant contrast, and is optimized using a Lighthouse audit.

---

✨ Features

• Light/Dark Theme Toggle with JavaScript
• Accessible SVG Icons
• Responsive Layout (Mobile → Desktop)
• Semantic HTML Structure
• WCAG Color Contrast Compliance
• Pixel-perfect layout using PerfectPixel extension
• Performance-tested with Google Lighthouse

---

🧠 What I Learned

• Strengthened my structuring skills in building semantic HTML for screen readers
• Creating responsive layouts with clamp() leveraging The Clamp Calculator
• Improving my pixel-perfect design to code translation with PerfectPixel
• Practiced more on using position for special layouts
• Designing consistent visuals with CSS custom properties

---

🛠️ Tech Used

• HTML5
• CSS3
• JavaScript (minimal)
• Git
• GitHub
• Netlify

---

🎨 Design Reference & Tools

• JPG design image
• PerfectPixel

---

🚀 How to Run

1. Clone the repository
2. Open index.html in your browser

---

🌐 Live Demo

Or you can check out the 👉 live website here

---

📊 Performance Report

A Google Lighthouse audit was conducted on the final version of this project. You can view the full report here.

---

🧑‍💻 Author

Created by Elmar Chavez

🗓️ Month/Year: July 2025

📚 Journey: 4^th month of learning frontend web development.