Skip to content

Latest commit

 

History

History
32 lines (20 loc) · 1.6 KB

Readme.md

File metadata and controls

32 lines (20 loc) · 1.6 KB
Raw

User Profile Page

This project implements a user profile page with a centered circular user photo, the user’s name, and a list of options in a dropdown menu. The profile page also features a fixed navbar at the top.

Features

  • Responsive Design: The page is responsive and adjusts to various screen sizes.
  • Navbar: The navbar contains the page title and a profile icon that triggers a dropdown.
  • Dropdown Menu: The dropdown includes user options such as Settings, Friends, New Group, Support, Share, and About Us.
  • Profile Photo: The profile photo is displayed in a circular format.
  • Edit Button: An "Edit Profile" button is included within the dropdown for user interaction.

Preview

![Profile Page Screenshot](C:\Users\Nittya Kanse\Pictures\ss.png)

Technologies Used

  • HTML5: For the structure of the page.
  • CSS3: For styling the layout, navbar, and dropdown functionality.
  • JavaScript: For toggling the profile dropdown and closing it when clicking outside.
  • Font Awesome: For icons next to profile menu items.

How to Use

  1. Navbar: The top navbar contains a profile icon on the right. Clicking the profile icon will open a dropdown with profile options.
  2. Profile Dropdown: When the dropdown is open, it displays the user’s profile photo, name, and several actions like "Settings," "Friends," and "Support."
  3. Edit Button: Inside the dropdown, there's a button labeled "Edit Profile" for profile modification.
  4. Click Outside to Close: Clicking outside the profile dropdown will automatically close the menu.