How can I create two lines on top of each other with CSS?

I don’t know how can I create something like this with CSS. Could you please help me?

You could use this. I’ve used a cdn so you can see the icons.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 

<div class="card-container">
    <ul id="contact">
      <li><i class="fas fa-phone"></i>019 207 200</li>
      <li><i class="fas fa-envelope">   </i>info@andonrobotics.com</li>
     
    </ul>
  </div>

CSS

.card-container {
  
  display: flex;
  align-items: center;
  justify-content: center;
}
#contact {
  list-style-type: none;
  padding-left: 0px;
  display: flex;
  flex-direction: column;
}
#contact li {
  padding: 12px 10px;
}

i {
  margin: 0px 20px;
}

I hope that helps.

1 Like

Thank you
What about the lines?

Ah okay the lines, so for the lines you could simply use a div, defines its size and then add a simple border to it like so :

<div class="myDiv"></div>

And for the style :

.myDiv {
border: 1px solid black;
}

You can adjust size/ color of the border according to your liking.
Let me know if this works for you.
Cheers

1 Like

Yes it works.
Thank you Chris

1 Like

Great. Happy Coding !

2 Likes