Create Business Card Using HTML and CSS - Step-by-Step Guide

Faraz

By Faraz -

Learn how to create a stylish business card using HTML and CSS. Follow our easy step-by-step guide to design and code your own business card in just a few minutes!

Join us on Telegram
create-business-card-using-html-and-css.webp
Read Alsocreate-meme-generator-using-html-css-and-javascript.webpCreate Meme Generator Using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Creating a business card is an essential task for professionals who want to make a lasting impression. But did you know you can design your own business card using just HTML and CSS? It's a simple process that lets you customize every detail according to your needs. In this blog, we'll guide you through each step to create a stylish business card with HTML and CSS. Whether you're a beginner or an experienced coder, this tutorial will help you craft a business card that stands out.

Source Code

Step 1 (HTML Code):

First, you'll need to create the basic structure of your business card in HTML. Open your text editor and paste the below codes into your HTML file.

Here's an explanation of each part:

1. <!DOCTYPE html>

This line defines the document type and version of HTML. It tells the browser that this is an HTML5 document.

2. <html lang="en">

This is the root element of the HTML document. The lang="en" attribute specifies that the content is in English.

3. <head>

The <head> section contains metadata and links to external resources like stylesheets.

  • <meta charset="UTF-8">: This sets the character encoding for the document to UTF-8, which is a standard character set that supports many languages and symbols.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This ensures the webpage is responsive by setting the width of the page to match the screen's width.
  • <title>Pure CSS Business Card</title>: This sets the title of the webpage, which appears on the browser tab.
  • <link rel="stylesheet" href="https://fonts.googleapis.com/....">: This links to the Google Fonts library to use the "Poppins" font family with various font weights.
  • <link rel="stylesheet" href="styles.css">: This links to an external CSS file named styles.css that contains custom styles for the page.
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/..">: This links to the Font Awesome library, which provides icons like the social media icons used later in the code.

4. <body>

The <body> tag contains the content of the webpage. Here, it includes the structure of the business card.

5. <div class="business-card">

This div element is a container for the entire business card. The class="business-card" attribute assigns a class that can be styled with CSS.

6. <div class="card-content">

This div is a child of the business-card div and contains the actual content of the business card.

7. <div class="profile-image">

This div contains the profile image.

  • <img src="https://www.codewithfaraz.com/favicon.ico" alt="Profile Picture">: The <img> tag displays an image using the specified src URL. The alt attribute provides alternative text in case the image fails to load.

8. <h1>Faraz</h1>

This is a heading element that displays the name "Faraz" as the main title of the business card.

9. <p>Web Developer</p>

This paragraph (<p>) describes the job title or role, which is "Web Developer."

10. <div class="social-icons">

This div contains social media links.

  • <a href="https://www.linkedin.com/in/farazc60"><i class="fab fa-linkedin-in"></i></a>: This is a link (<a>) to a LinkedIn profile. Inside the link, the <i> tag is used to insert a LinkedIn icon from Font Awesome.
  • <a href="https://x.com/codewithfaraz"><i class="fab fa-twitter"></i></a>: This is a link to a Twitter profile with a Twitter icon.
  • <a href="https://github.com/farazc60"><i class="fab fa-github"></i></a>: This is a link to a GitHub profile with a GitHub icon.

11. <div class="contact-info">

This div contains contact information, such as email, phone number, and website.

  • <p><strong>Email</strong>: <i>[email protected]</i></p>: This paragraph shows the email address with "Email" in bold (<strong>) and the actual email in italics (<i>).
  • <p><strong>Phone</strong>: <i>+123 456 7890</i></p>: This paragraph shows the phone number.
  • <p><strong>Website</strong>: <i>www.codewithfaraz.com</i></p>: This paragraph shows the website URL.

12. Closing Tags

  • </div></div></div></body></html>: These tags close the various divs, the body, and the HTML document.
Read Alsocreate-hourglass-timer-loader-using-html-and-css.webpCreate an Hourglass Timer Loader using HTML and CSS

Step 2 (CSS Code):

Now that you have the HTML structure, it's time to add some CSS to style your business card. Create a file named style.css and include the below code into your CSS file. Let's break it down:

Universal Selector (*)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • * Selector: Targets all elements on the page.
  • margin: 0; padding: 0;: Removes default spacing around all elements, ensuring consistent layout.
  • box-sizing: border-box;: Ensures padding and border widths are included within the element's width and height.

Body Styling (body)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #EDEDED;
  font-family: 'Poppins', sans-serif;
}
  • display: flex; justify-content: center; align-items: center;: Centers content both horizontally and vertically within the viewport.
  • height: 100vh;: Sets the body's height to 100% of the viewport height.
  • background-color: #EDEDED;: Gives a light gray background color.
  • font-family: 'Poppins', sans-serif;: Sets the font family for text.

Business Card Styling (.business-card)

.business-card {
  position: relative;
  border: 4px solid transparent;
  border-radius: 20px;
  background-clip: padding-box;
  z-index: 1;
  animation: floating 3s ease-in-out infinite;
}
  • position: relative;: Positions the card relative to its normal position, allowing absolute positioning of child elements.
  • border: 4px solid transparent;: Creates a transparent border that ensures the background gradient effect in the ::before pseudo-element.
  • border-radius: 20px;: Rounds the corners of the card.
  • background-clip: padding-box;: Clips the background to the padding area, allowing the transparent border to be visible.
  • z-index: 1;: Ensures the card is above other elements with a lower z-index.
  • animation: floating 3s ease-in-out infinite;: Applies a smooth floating animation to the card.

Business Card Border Animation (.business-card::before)

.business-card::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, #000 10.01%);
  background-size: 10px 10px;
  border-radius: 20px;
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
}
  • ::before Pseudo-element: Creates an element before the .business-card content.
  • position: absolute; top: -4px; ...: Positions the element slightly outside the .business-card to create an outer border effect.
  • background: radial-gradient(circle, ...: Applies a circular gradient background for a dotted border effect.
  • background-size: 10px 10px;: Sets the size of the gradient pattern.
  • z-index: -1;: Places the pseudo-element behind the card.
  • animation: rotateBorder 4s linear infinite;: Rotates the border around the card.

Rotate Border Keyframes (@keyframes rotateBorder)

@keyframes rotateBorder {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
  • Defines a smooth rotation animation that rotates the border 360 degrees continuously.

Floating Animation Keyframes (@keyframes floating)

@keyframes floating {
  0% {
      transform: translateY(0px);
  }
  50% {
      transform: translateY(-10px);
  }
  100% {
      transform: translateY(0px);
  }
}
  • Creates a vertical floating effect, moving the card up by 10px and then back to its original position.

Card Content Styling (.card-content)

.card-content {
  background: linear-gradient(315deg, #9FA5D5, #E8F5C8);
  border-radius: 20px;
  padding: 20px;
  color: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  transform: rotateY(0deg);
  transition: transform 0.5s ease, box-shadow 0.3s ease;;
}
  • background: linear-gradient(315deg, ...: Sets a diagonal gradient background for the card content.
  • padding: 20px;: Adds space inside the card content.
  • box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);: Applies a shadow effect for a 3D look.
  • transform: rotateY(0deg);: Sets the initial rotation of the content (can be animated later).
  • transition: transform 0.5s ease, ...: Smoothly animates the transformation and shadow changes.

Profile Image Styling (.profile-image img)

.profile-image img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
  transition: transform 0.5s ease;
}
  • border-radius: 50%;: Makes the image circular.
  • transition: transform 0.5s ease;: Adds a smooth transition when the image is transformed (e.g., scaled).

Text Styling (h1, p)

h1 {
  font-size: 25px;
  margin-bottom: 7px;
  color: #606060;
}

p {
  font-size: 15px;
  margin-bottom: 5px;
  color: #606060;
}
  • h1 and p: Styles the heading and paragraph text, adjusting size, spacing, and color.

Social Icons Styling (.social-icons)

.social-icons {
  display: flex;
  gap: 15px;
  justify-content: center; 
  margin-top: 20px;
}

.social-icons a {
  text-decoration: none;
  font-size: 24px; 
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.2);
}
  • display: flex; gap: 15px; justify-content: center;: Aligns the social icons in a row with spacing between them.
  • transition: transform 0.3s ease, ...: Smoothly scales and changes color when hovering over icons.
  • transform: scale(1.2);: Enlarges the icon slightly on hover.

Contact Info Styling (.contact-info)

.contact-info {
  margin-top: 20px;
}

.contact-info p {
  font-size: 14px;
}
  • Adds top margin to separate contact info from other content and styles the font size of the contact details.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #EDEDED;
  font-family: 'Poppins', sans-serif;
}

.business-card {
  position: relative;
  border: 4px solid transparent;
  border-radius: 20px;
  background-clip: padding-box;
  z-index: 1;
  animation: floating 3s ease-in-out infinite;
}

.business-card::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, #000 10.01%);
  background-size: 10px 10px;
  border-radius: 20px;
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
}

@keyframes rotateBorder {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@keyframes floating {
  0% {
      transform: translateY(0px);
  }
  50% {
      transform: translateY(-10px);
  }
  100% {
      transform: translateY(0px);
  }
}

.card-content {
  background: linear-gradient(315deg, #9FA5D5, #E8F5C8);
  border-radius: 20px;
  padding: 20px;
  color: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  transform: rotateY(0deg);
  transition: transform 0.5s ease, box-shadow 0.3s ease;;
}

.profile-image img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
  transition: transform 0.5s ease;
}

h1 {
  font-size: 25px;
  margin-bottom: 7px;
  color: #606060;
}

p {
  font-size: 15px;
  margin-bottom: 5px;
  color: #606060;
}

.social-icons {
  display: flex;
  gap: 15px;
  justify-content: center; 
  margin-top: 20px;
}

.social-icons a {
  text-decoration: none;
  font-size: 24px; 
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.2);
}

.social-icons a:nth-child(1) {
  color: #0077b5;
}

.social-icons a:nth-child(2) {
  color: #1DA1F2; 
}

.social-icons a:nth-child(3) {
  color: #333;
}

.contact-info {
  margin-top: 20px;
}

.contact-info p {
  font-size: 14px;
}

Final Output:

create-business-card-using-html-and-css.gif
Read Alsocss magic how to create stunning animated checkbox using svg and html.jpgCSS Magic: How to Create Stunning Animated Checkbox Using SVG and HTML

Conclusion:

Creating a business card using HTML and CSS is not only a fun project but also a valuable skill for web developers and designers. With this step-by-step guide, you now have the knowledge to design and code your own business card. This simple yet effective approach allows you to fully customize the card to match your personal or professional brand. So why wait? Start creating your business card today and make a lasting impression!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a business card using html and css, step-by-step guide to creating a business card with html and css, simple business card design using html and css, create a personal business card using html and css, visiting card online, business card online, business card html css, create business card, html css business card, business card design
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺