Design a Professional Visiting Card using HTML and CSS

A visiting card, also known as a business card, is a small card typically containing the giver’s name, contact information, job title, company name, and logo. They are exchanged in both social and professional settings as a convenient way to provide contact details and make a memorable impression.

Here’s why visiting cards are significant and how they can be useful:

1. Professionalism: Offering a well-designed and informative visiting card reflects professionalism and preparedness. It shows that you take your work seriously and are organized.
2. Networking: Visiting cards are a fundamental tool for networking. They facilitate the exchange of contact information in a quick and efficient manner, allowing individuals to stay connected for potential collaborations, partnerships, or opportunities in the future.
3. Memorability: A creatively designed visiting card can leave a lasting impression on the recipient. It serves as a tangible reminder of the encounter and helps the giver stand out among others who may not have left such a token.
4. Branding: Visiting cards often include a company logo, colors, and other branding elements. They serve as a subtle yet effective marketing tool, reinforcing brand identity and leaving a visual reminder of the company or individual’s services or products.
5. Accessibility: Unlike digital contact information, which may get lost in a sea of emails or forgotten in a phone’s contacts, a physical card is easily accessible. It can be kept in a wallet, pinned to a noticeboard, or placed on a desk for quick reference.
6. Cultural Significance: In many cultures, exchanging visiting cards is a customary gesture of respect and formality. It’s seen as a polite way to initiate or conclude a conversation and demonstrates a willingness to maintain contact.
7. Convenience: Visiting cards are compact and portable, making them easy to carry around. Whether attending conferences, meetings, or social gatherings, having a stack of cards on hand ensures you’re always ready to share your contact details.

In this tutorial, we will be creating a beautiful and professional looking visiting card using HTML and CSS.

Follow this video for complete guidance :

The image used in the code are provided below

card.png

face.png

logo.png

Full Source Code

<style>
  body{
    background: aliceblue;
  }
  .card-wrap{
    box-shadow: 1px 5px 15px #ddd;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
  }
  .company-logo{
    position: absolute;
    top:40px;
    left:40px;
    height:40px;
  }
  .person-name{
      position: absolute;
      top: 180px;
      color: #fff;
      font-size: 55px;
      text-transform: uppercase;
      font-family: sans-serif;
      left: 40px;
      letter-spacing: 1.2;
  }
  .designation{
      position: absolute;
      top: 260px;
      color: #fff;
      font-size: 22px;
      text-transform: uppercase;
      font-family: sans-serif;
      left: 40px;
      letter-spacing: 2px;
  }
  .person-photo{
    width: 320px;
      height: 320px;
      overflow: hidden;
      position: absolute;
      right: 35px;
      top: 142px;
      border-radius: 50%;
  }
  .phone-number {
      position: absolute;
      top: 358px;
      color: #fff;
      font-size: 25px;
      font-family: sans-serif;
      left: 122px;
  }
  .website {
      position: absolute;
      top: 408px;
      color: #fff;
      font-size: 25px;
      font-family: sans-serif;
      left: 122px;
  }
  .email{
    position: absolute;
      top: 460px;
      color: #fff;
      font-size: 25px;
      font-family: sans-serif;
      left: 122px;
  }
  .address{
    position: absolute;
      top: 512px;
      color: #fff;
      font-size: 25px;
      font-family: sans-serif;
      left: 122px;
  }
</style>


<div class="card-wrap">
  <img src="card.png">
  <img class="company-logo" src="logo.png">
  <div class="person-name">Maria Taylor</div>
  <div class="designation">Digital Marketer</div>
  <div class="phone-number">123-456-7890</div>
  <div class="website">youthsforum.com</div>
  <div class="email">[email protected]</div>
  <div class="address">145 Street, City Country</div>
  <figure class="person-photo">
    <img src="face.png">
  </figure>
</div>