Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Module 2: CSS Practice Example

Complete CSS Example

    Profile Card

Muhammad Rauf

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

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 (Profile Card): 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


    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 (
  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 (): 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.
  14. 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.

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


This post first appeared on AmurChem-The Knowledge Tree, please read the originial post: here

Share the post

Module 2: CSS Practice Example


Subscribe to Amurchem-the Knowledge Tree

Get updates delivered right to your inbox!

Thank you for your subscription