Complete CSS Example

    

        
Muhammad Rauf
        
Web Developer and Designer. I love creating beautiful and functional web experiences.
        

            Twitter
            LinkedIn
            GitHub
        
        Contact Me
    
Related Articles



    

Explanation of HTML Code

1. Document Type Declaration (): This declaration tells the web browser that the document is written in HTML5.
2. HTML Element (): This is the root element of the HTML document. The lang attribute specifies the language of the document, which is English in this case.
3. Head Section (): This section contains meta-information about the HTML document, such as character encoding, viewport settings, and the document's title.
4. Meta Tags: These meta tags provide metadata about the HTML document. For example, the charset meta tag specifies the character encoding used in the document.
5. Title (): This element sets the title of the HTML document, which is displayed in the browser's title bar or tab.
6. Style Section (): This section contains CSS styles used to format the profile card and its contents.
7. Profile Card Container (
   ): This

   Element serves as a container for the entire Profile card. It has a class name of "profile-card" which is used for styling purposes.
8. Profile Image (): This element displays the profile picture of Muhammad Rauf. The src attribute specifies the image file path, and the alt attribute provides alternative text for accessibility. It also has a class name of "profile-img" for styling.
9. Profile Name (

   Muhammad Rauf

   ): This
   element displays the name of the person, Muhammad Rauf. It has a class name of "profile-name" for styling.
10. Profile Bio (

    Web Developer and Designer...

    ): This element provides a brief description of Muhammad Rauf's profession and interests. It has a class name of "profile-bio" for styling.
11. Social Links Container (
    ): This

    element contains links to Muhammad Rauf's social media profiles (Twitter, LinkedIn, GitHub). It has a class name of "social-links" for styling.
12. Social Links (Twitter): These elements represent links to Muhammad Rauf's social media profiles. Each link has a class name of "social-link" for styling and an href attribute pointing to "#" as a placeholder.
13. Contact Me Button (Contact Me): This element represents a button that users can click to initiate contact with Muhammad Rauf. It has a class name of "contact-btn" for styling.

CSS Explanation:

.profile-card: This class selector is utilized to style the container for the profile card, applying attributes such as background color, border radius for rounded corners, box shadow for depth, overflow handling, text alignment, width, and padding to craft an appealing card layout.

.profile-img: Targets the profile image within the profile card, setting properties like height, width, and border-radius to achieve a rounded appearance.

.social-link: Styles the social media links inside the profile card, arranging them inline, specifying color, removing underlines, adding margin between them, and smoothly transitioning color on hover.

.contact-btn: Styles the contact button within the profile card with attributes like background color, text color, padding, font size, cursor change on hover, rounded corners, and margin.

(.contact-btn

): Targets the contact button specifically when hovered over, altering its background color to provide visual feedback.

Output: