A Facebook mobile profile page clone built using HTML and CSS. This project recreates Facebook's mobile profile layout, including the cover photo, profile picture, personal information, friends section, posts section, and bottom navigation bar.
- Cover photo with overlay icons
- Profile picture overlapping the cover photo
- User information section
- Add Story and Edit Profile buttons
- Personal details and education section
- Friends section with active indicators
- Post creation area
- Sample feed post with reactions
- Fixed bottom navigation bar
- HTML5
- CSS3
- Google Fonts (Roboto)
This project was designed for mobile screens.
- Open the project in your browser.
- Right-click and select Inspect.
- Enable Device Toolbar.
- Choose Samsung Galaxy S8+.
- Refresh the page if needed.
- Flexbox
- CSS Grid
- Relative & Absolute Positioning
- Fixed Navigation
- Z-Index
- Mobile-First Layout Design
The goal of this project was to improve my HTML and CSS skills by recreating a real-world social media interface without using JavaScript or any frameworks.
