Geeky Geeky - 1 month ago 13
HTML Question

Difficulty in Designing Business card using CSS

I am trying to make a business card
with name and title in the center and email and phone to be on extreme left and right on the card

Here is my following code



.business-card{
position:relative;
border:1px solid black;
width:200px;
}
.business-card section {
display:flex;
flex-flow:column;
align-items:center;
}


.email{
position:absolute;
right:0;
}

<div class="business-card">
<section>
<span>
name:abc
</span>
<span>
title:xyz
</span>
</section>
<footer>
<span class="phone">
123-123-123
</span>
<span class="email">
abc@abc.com
</span>
</footer>
</div>




I am trying to get the name/title wrapped but it extends out of the div.



.business-card{
position:relative;
border:1px solid black;
width:200px;
}
.business-card section {
display:flex;
flex-flow:column;
align-items:center;

}


.email{
position:absolute;
right:0;
}

<div class="business-card">
<section>
<span>
name:abcsfsdfjsdflkjsdjflssfsdfds
</span>
<span>
title:xyz
</span>
</section>
<footer>
<span class="phone">
123-123-123
</span>
<span class="email">
abc@abc.com
</span>
</footer>
</div>





Can some one please help on this
PS:Attached is the sample screen shot of the business card im looking to developenter image description here

Answer

.card {
  border: 1px solid lightgray;
}
.title {
  display: flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
  text-align: center;
  word-break: break-all;
}
.title > div {
  width: 50%;
}
.info {
  display: flex;
  padding: 2em;
}
.info > div {
  flex: 1;
}
.info > div:nth-child(2) {
  text-align: right;
}
<div class="card">
  <div class="title">
    <div>Name: eDesignary</div>
    <div>Title: Source code platform!</div>
  </div>
  <div class="info">
    <div>Hyderabad</div>
    <div>edesignary@gmail.com</div>
  </div>
</div>

Please let me know if your problem is solved.

Comments