Create contact card using HTML CSS

Step 1: index.html

In your index.html, you're adding different routes to create a page layout with user cards, utilizing Bootstrap for responsiveness. You’ve also added a profile section for each user with a distinct color. Here’s a revised version based on your request:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>bs4 Contacts cards</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Add custom style -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="container page-container">
        <div class="row gutters">
            <!-- Start of User Cards -->
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
                <figure class="user-card green">
                    <figcaption>
                        <img src="image/logo.png" alt="Soeng Souy" class="profile">
                        <h5>Soeng Souy</h5>
                        <h6>@movies</h6>
                        <p>On the 28th of October 2020 we completed a 3-part transaction with the contractor.</p>
                        <ul class="contacts">
                            <li><a href="#">user@soengsouy.com</a></li>
                            <li><a href="#">www.soengsouy.com</a></li>
                        </ul>
                        <div class="clearfix">
                            <span class="badge badge-pill badge-info">#HTML5</span>
                            <span class="badge badge-pill badge-success">#CSS3</span>
                            <span class="badge badge-pill badge-orange">#Angular JS</span>
                        </div>
                    </figcaption>
                </figure>
            </div>

            <!-- Repeat the structure for other users -->
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
                <figure class="user-card blue">
                    <figcaption>
                        <img src="image/logo.png" alt="Cong Ly" class="profile">
                        <h5>Cong Ly</h5>
                        <h6>@hollywood</h6>
                        <p>On the 28th of October 2019 we completed a 3-part transaction with the contractor.</p>
                        <ul class="contacts">
                            <li><a href="#">user@soengsouy.com</a></li>
                            <li><a href="#">www.soengsouy.com</a></li>
                        </ul>
                        <div class="clearfix">
                            <span class="badge badge-pill badge-info">#HTML5</span>
                            <span class="badge badge-pill badge-success">#CSS3</span>
                            <span class="badge badge-pill badge-orange">#Angular JS</span>
                        </div>
                    </figcaption>
                </figure>
            </div>

            <!-- Repeat for other users (similar structure for other user-card sections) -->
        </div>
    </div>
    
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript"></script>
</body>
</html>

Step 2: assets/css/style.css

Your style.css contains the custom styles to style the user cards. You are defining colors for each user card with specific borders, customizing the profile images, and adding styles for text and badges. Here's the complete style.css based on your code:

body {
    background: #eee;
}

.page-container {
    margin-top: 40px;
}

figure.user-card {
    background: #ffffff;
    padding: 20px;
    border-top: 3px solid #f2f2f2;
    border: 1px solid #e1e5f1;
    text-align: center;
}

figure.user-card.red {
    border-top: 3px solid #fc6d4c;
}

figure.user-card.green {
    border-top: 3px solid #3ecfac;
}

figure.user-card.blue {
    border-top: 3px solid #5a99ee;
}

figure.user-card.yellow {
    border-top: 3px solid #ffc139;
}

figure.user-card.orange {
    border-top: 3px solid #ff5000;
}

figure.user-card.teal {
    border-top: 3px solid #47BCC7;
}

figure.user-card.pink {
    border-top: 3px solid #ff9fd0;
}

figure.user-card.brown {
    border-top: 3px solid #79574b;
}

figure.user-card.purple {
    border-top: 3px solid #904e95;
}

figure.user-card.fb {
    border-top: 3px solid #3B5998;
}

figure.user-card.gp {
    border-top: 3px solid #E02F2F;
}

figure.user-card .profile {
    border-radius: 5px;
    max-width: 72px;
    margin-bottom: 20px;
}

figure.user-card h5 {
    margin: 0 0 5px 0;
}

figure.user-card h6 {
    margin: 0 0 15px 0;
    color: #8796af;
    font-size: 14px;
}

figure.user-card p {
    margin: 0;
    padding: 0 0 15px 0;
    color: #8796af;
    line-height: 150%;
    font-size: 0.85rem;
}

figure.user-card ul.contacts {
    margin: 0;
    padding: 0 0 15px 0;
    line-height: 150%;
    font-size: 0.85rem;
}

figure.user-card ul.contacts li {
    padding: 0.2rem 0;
}

figure.user-card ul.contacts li a {
    color: #5a99ee;
}

figure.user-card ul.contacts li a i {
    min-width: 36px;
    float: left;
    font-size: 1rem;
}

figure.user-card ul.contacts li:last-child a {
    color: #ff5000;
}

ul li {
    list-style-type: none;
}

Explanation:

HTML Structure: The structure of index.html includes a container div, which holds the user cards, and the layout is responsive, thanks to Bootstrap. Each user is represented with a figure.user-card element, which has different styles for background color based on the class (green, blue, etc.).
CSS Styling: The style.css applies various background colors, borders, padding, and text styles to each user card. The .profile class ensures that the images are rounded, while the badges give each user a set of tags (like #HTML5, #CSS3, etc.).

Souy Soeng

Create contact card using HTML CSS

Step 1: index.html

Step 2: assets/css/style.css

Explanation:

Post a Comment

Souy Soeng