Back to Projects
Frontend Web2025

Figma to CSS – Responsive Home Page

Responsive landing page built from Figma design

Duration

2 days

Team

Solo Project

Status

Completed

Figma to CSS – Responsive Home Page

Project Demo

Watch the project in action

Watch Demo

See the project in action

Project Gallery

Auto-changing slideshow • Changes every 5 seconds

Figma to CSS – Responsive Home Page screenshot 1
1 / 4

About This Project

This project involved building a pixel-perfect, responsive **Home Page** from a given Figma design. The focus was on layout accuracy, typography matching, and responsiveness across devices. Key tasks included: • Navbar with centered logo and responsive hamburger menu for mobile • Banner, content sections, and CTA blocks exactly as per design • Responsive layout using media queries for mobile and tablet • Clean and maintainable HTML & CSS code structure This project demonstrates the ability to translate UI designs into frontend code while keeping responsiveness and design accuracy in mind. It was part of personal practice and job preparation.

Key Features

Responsive Home Page from Figma design
Pixel-perfect navbar with logo and hamburger menu
Optimized layout for desktop, tablet, and mobile
Clean, well-structured HTML & CSS code
No external libraries used for layout – pure CSS

Technical Challenges

1Creating accurate layout from Figma for all screen sizes
2Building responsive navbar with hamburger functionality
3Aligning typography and spacing as per design
4Maintaining responsiveness without using frameworks

Technologies Used

HTML5CSS3Responsive DesignMedia QueriesFigma

Project Details

Duration

2 days

Team Size

Solo Project

Status

Completed

Year

2025