Readme

This HTML code is for a personal profile page. Here's a breakdown of its structure and functionality:

Structure

1. Navigation Bar: The page starts with a navigation bar that contains a link to the "Courses" page.

2. Profile Section: This section contains two images - a background image and a profile picture. It also includes the name of the profile owner, follower count, and following count.

3. Bio Section: This section contains a brief bio of the profile owner and a link to their Instagram page.

4. Content Section: This section contains multiple posts. Each post includes a title, a like button, and some text content.

Styling

The page uses an external CSS file (style.css) for styling. Each HTML element is assigned a class for targeted styling.

1. Navigation Bar: The .nav-bar class is used to style the navigation bar with a black background color and padding.

2. Navigation Link: The .a-nav class styles the navigation link with a background color, text color, border radius, padding, and margin.

3. Images: The .img1 and .img2 classes are used to style two images on the page. They control the display, margin, width, border radius, and position of the images.

4. Profile Name: The .profile-name class is used to make the profile name bold.

5. Profile Section: The .div2 class is used to style the profile section with a specific margin.

6. Followers and Following Buttons: The .button-followers and .button-following classes are used to style the followers and following buttons with border, margin, padding, border radius, and color.

7. Text: The .text class is used to style the text content with a specific margin.

8. Instagram Link: The .a-text class is used to style the Instagram link with a specific text decoration and color.

9. Horizontal Line: The .hr class is used to style the horizontal line with a specific color.

10. Like Button: The .like-button class is used to style the like button with a specific margin. It also includes a hover effect that changes the color of the like button when the mouse pointer is over it.

Images

The page uses several images, including a profile picture, a background image, and a like button image. The sources of these images are specified in the src attribute of the img tag.

Links

The page contains hyperlinks. The href attribute of the a tag is used to specify the destination URL of the hyperlink.

this is a static HTML page and does not include any dynamic content or functionality. For any changes, you would need to manually update the HTML code. Also, ensure that all the images and the CSS file are correctly located in your project directory for the page to display as intended.

This is a simple and clean personal profile page layout.

Note

Open the website in "Mobile View" for the proper output