Create a Visiting Card Using HTML & CSS | Beginner-Friendly Project with Source Code



Introduction

In today’s digital world, having a professional identity is important—not just offline but online as well. One of the simplest ways to start building your design skills is by creating a visiting card using HTML and CSS.

In this article, we will guide you step by step to design a clean and modern visiting card layout. This project is perfect for beginners who want to understand how structure and styling work together to create visually appealing UI components.

By the end of this tutorial, we will have a fully designed visiting card that looks professional and can even be used as part of a portfolio project. Along the way, you will also learn basic layout techniques, font styling, color combinations, and how to make your design responsive for better viewing across different screen sizes and devices.


Why Should We Build This Project?

Before jumping into the code, let’s understand why this project is useful.

When we work on a small project like a visiting card design, we learn:

  • How to structure content using HTML
  • How to apply styling using CSS
  • How to align elements properly
  • How to use colors, spacing, and typography effectively

Even though it is a simple project, it gives us a strong foundation for building real-world applications like profile cards, dashboards, and portfolio sections.


What Will We Learn?

In this project, we will cover the following concepts:

  • Structuring a layout using HTML
  • Using CSS Grid for alignment
  • Applying modern styling techniques
  • Working with fonts and colors
  • Creating a responsive and clean UI design

 Project Overview

We are going to design a visiting card that contains:

  • Profile image
  • Name and designation
  • Short description
  • Contact details

The card will be divided into two sections:

  • Left side: Profile image with background color
  • Right side: Text information

This layout is commonly used in professional designs and portfolios.


Complete Source Code

Now let’s start building our project step by step.

HTML Code

We begin by creating the structure of our visiting card using HTML.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Visting card</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="container">
      <div class="card-box">
        <div class="card-left">
          <img src="./profile.jpeg" class="profile-img" />
        </div>
        <div class="card-right">
          <h3>Keerthi</h3>
          <div>Senior Software Developer</div>
          <div>
            Having knowledge in both frontend and backend technologies and
            worked on many real time projects
          </div>
          <div>Contact :</div>
          <div>keerthi@gmail.com</div>
          <div>+91 784xxxxxxx</div>
          <div>Chennai, India</div>
        </div>
      </div>
    </div>
  </body>
</html>

Explanation

Here, we created a simple structure:

  • A main container to center the card
  • A card-box that holds two sections
  • Left section for the image
  • Right section for content

This clean structure helps us easily apply styles using CSS.


CSS Code

Now let’s style our visiting card and make it visually appealing.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: linear-gradient(to right, #eef2f3, #dfe9f3);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 550px;
  border-radius: 15px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-left {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.profile-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: cover;
}

.card-right {
  padding: 20px;
}

.card-right h3 {
  margin: 0;
  font-size: 22px;
  color: #333;
}

.card-right div:nth-child(2) {
  font-weight: 600;
  color: #4facfe;
  margin-bottom: 8px;
}

.card-right div:nth-child(3) {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}


.card-right div:nth-child(4) {
  font-weight: bold;
  margin-top: 10px;
}

.card-right div:nth-child(n+5){
  font-size: 14px;
  color: #444;
  margin-top: 2px;
}

Note :  In this project, we used Google Fonts through CSS import. This helps us maintain consistency in typography and improves the overall design quality

Key Concepts We Used

1. CSS Grid Layout

We used CSS Grid to divide the card into two sections:

  • Image section
  • Content section

This makes the layout flexible and easy to manage.

2. Flexbox for Centering

We used Flexbox in the container to center the card both horizontally and vertically.

3. Google Fonts

We imported the Poppins font from Google Fonts to improve typography and make the design modern.

4. Gradients and Shadows

  • Background gradients add a soft modern look
  • Box shadows give a card-like appearance


Final Output





The final output is a clean, modern visiting card that looks professional and well-structured.

Tips to Improve This Project

Once we complete this basic design, we can enhance it further by:

  • Making it responsive for mobile devices
  • Adding hover effects
  • Using icons for contact details
  • Adding social media links
  • Converting it into a reusable React component

These improvements will make the project more advanced and portfolio-ready.


Conclusion

In this tutorial, we successfully created a visiting card using HTML and CSS. This beginner-friendly project helped us understand how to structure content, apply styling, and design a clean layout.

By practicing projects like this, we gradually build confidence in frontend development. Small projects play a big role in strengthening our fundamentals and preparing us for real-world applications.

📚 Explore Full Series

Continue learning step by step from our complete roadmap click the link below:
👉 HTML & CSS Learning Series


What’s Coming Next?

In the next article, we will explore commonly used HTML tags in real-world projects. This will help us understand how HTML elements are used practically while building websites and applications.


Follow for More

If you’re interested in learning HTML, CSS, React, and MERN Stack,

stay connected for more beginner-friendly tutorials and real-world projects.






Comments

Post a Comment

Popular posts from this blog

Complete HTML Layout Tutorial for Beginners (With Examples & Explanation)

Image
Introduction to HTML Layout If you are starting your web development journey, understanding the HTML layout structure is the first and most important step. Every website you see on the internet is built using HTML as its foundation, and learning how the layout works will help you build structured and professional web pages. HTML layout defines how content is arranged on a webpage. It helps developers organize text, images, links, and other elements in a meaningful way so that users can easily navigate and understand the content. In this tutorial, we will learn: What HTML is Basic HTML structure Explanation of each element Important meta tags What is HTML? HTML (Hyper Text Markup Language) is the standard language used to create web pages. It provides the basic structure of a website, which is then styled using CSS and made interactive using JavaScript. 🔹 HyperText HyperText refers to text that contains links. These links allow users to move from one webpage to another or nav...
Read more

HTML Tags and Attributes Explained (Beginner Guide with Form Examples)

Image
Introduction to HTML Tags and Attributes If you are starting your journey in web development, understanding HTML tags and attributes is the first and most important step. These are the core building blocks of every webpage, especially when creating forms like registration forms, login forms, and signup forms. Every website you see on the internet is made using HTML elements, and tags are used to define those elements. Attributes enhance those elements by providing additional functionality and information. Without understanding tags and attributes, it becomes difficult to build structured and interactive web pages. In this tutorial, we will learn: What HTML tags are What HTML attributes are Types of HTML tags Essential HTML tags used in forms What Is an HTML Tag? An HTML tag is a keyword enclosed in angle brackets ( < > ) used to define the structure and content of a webpage. Tags tell the browser how to display content such as headings, paragraphs, images, links, and mo...
Read more

Most Commonly Used HTML Tags (Beginner-Friendly Guide)

Image
HTML (HyperText Markup Language) is the foundation of every website we see on the internet. Whether we are building a simple webpage or a complex web application, HTML is the starting point that helps us structure content effectively. In this article, we will explore the most commonly used HTML tags, understand how they work, and learn the difference between block-level elements and inline elements. This guide is designed especially for beginners who want to build a strong foundation in web development. By learning these essential concepts, we can improve our coding skills, write cleaner and more organized code, and create well-structured, professional-looking web pages. It also helps us understand how browsers render content and how different elements behave in real-world projects. Why Should We Learn HTML Tags? Before diving into the types of elements, let’s understand why learning HTML tags is important. When we understand HTML properly: We can create well-structured web pages ...
Read more