Search code examples
htmlcssfont-awesome

How to crate a card with circle image and some text with HTML and CSS?

I am beginner. I am practicing HTML and CSS. In a practice project the below card is given. enter image description here

How can I create this type of card with only HTML and CSS?

Please help me.

Solution

  • You can use the following code.

    .card {
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 350px;
    text-align: center;
    margin-top: 60px;
}
.card_img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 100%;
    margin: -60px auto 0;
}
.card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card_info {
    padding-bottom: 20px;
}
a {
  text-decoration: none;
  color: red;
}
a:hover{
  color: black;
}
    <div class="card"> <!-- Here I create a New Div with class name card -->
    <div class="card_img"> <!-- Here I create a New Div for image with class name card_img -->
        <img src="https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg" alt="user-image">
    </div>
    <div class="card_info"> <!-- Here I create a New Div for user info with class name card_info -->
        <h2>USER NAME</h2>
        <a href="#!">loremIpsum.com</a>
    </div>
</div>