Create contact card with html css

Hello
What do you think about the best way to create a contact card like this:

I tried to use https://iconify.design/ for icones and it works. But I don’t know why icones are like this in my version:

My whole codes:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  display: flex;
  flex-direction: row;
}

.container {
  padding-left: 100px;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  background-color: black;
}
</style>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
</head>
<body>

<h2>Card</h2>

<div class="card">
  <img src="CEO2.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4 style="color: white; width: 200px; font-size: 20px;"><b>John Doe</b></h4> 
    <p style="color: rgb(163, 150, 150); margin-top: 0; font-size: 15px;">VD</p>
    <div style="display: flex; flex-direction: row;">
    <span class="iconify" data-icon="fluent:call-16-filled" data-inline="false" 
    style="color: #ffa31a;"></span>
    <p style="color: white;">123456789</p>
    </div>
    <div style="display: flex; flex-direction: row; ">
        <span class="iconify" data-icon="fluent:mail-28-filled" data-inline="false" 
        style="color: #ffa31a;"></span>
        <p style="color: white;">test@test.com</p>
        </div>
  </div>
</div>

</body>
</html> 

New <p> elements come with a built in margin, however the SVG elements do not, therefore they are not perfectly inline. I would add a style to remove this like so;

p {
  margin: 0;
}

And then I would add a margin to your flex container’s so that the margin is applied to both the icon and the text.

2 Likes