Module 2: CSS Practice Example

byAmurChem -
0

Complete CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <style>
        .profile-card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            text-align: center;
            width: 300px;
            padding: 20px;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: coral;
            font-family: Arial, sans-serif;
            margin: 0;
        }

        .profile-img{
            height:100px;
            width: 100px;
            border-radius: 50%;
        }
        .social-link{
            display: inline-block;
            color: #555;
            text-decoration: none;
            margin: 0 20px;
            transition: color 0.3s;
        }
        .social-link:hover{
            color: #000;
        }

        .contact-btn{
            background-color: #0078FF;
            border: none;
            color: #fff;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 10px;
            margin: 10px;
        }
        .contact-btn:hover{
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="profile-card">
        <img src="C:\Users\Muhammad Rauf\OneDrive\Desktop\12312.png" alt="Profile Picture" class="profile-img">
        <h2 class="profile-name">Muhammad Rauf</h2>
        <p class="profile-bio">Web Developer and Designer. I love creating beautiful and functional web experiences.</p>
        <div class="social-links">
            <a href="#" class="social-link">Twitter</a>
            <a href="#" class="social-link">LinkedIn</a>
            <a href="#" class="social-link">GitHub</a>
        </div>
        <button class="contact-btn">Contact Me</button>
    </div>
</body>
</html>

Explanation of HTML Code

  1. Document Type Declaration (<!DOCTYPE html>): This declaration tells the web browser that the document is written in HTML5.
  2. HTML Element (<html lang="en">): 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 (<head>): 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 (<title>Profile Card</title>): This element sets the title of the HTML document, which is displayed in the browser's title bar or tab.
  6. Style Section (<style>): This section contains CSS styles used to format the profile card and its contents.
  7. Profile Card Container (<div class="profile-card">): This <div> 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 (<img src="..." alt="Profile Picture" class="profile-img">): This <img> 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 (<h2 class="profile-name">Muhammad Rauf</h2>): This <h2> element displays the name of the person, Muhammad Rauf. It has a class name of "profile-name" for styling.
  10. Profile Bio (<p class="profile-bio">Web Developer and Designer...</p>): This <p> 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 (<div class="social-links">): This <div> 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 (<a href="#" class="social-link">Twitter</a>): These <a> 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 (<button class="contact-btn">Contact Me</button>): This <button> 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:

Module 2: CSS Practice Example


Tags

You may like these posts

Post a Comment

Previous Post Next Post