In this post, we will learn how to create a business card in Html and CSS. In the last post, we discussed Login form template in HTML CSS. Let’s create a business card.
Business card in HTML and CSS:
Customers take the business card of the company and contact the company for the services of the company. Business cards have all the contact details of the company so that anyone can contact the company and purchase its services of the company. It helps the company to grow itself and market its products in the market.
First, it shows a screen with a beautiful background. At the center, it has a box and in that box, it has text. When you click on the box then it shows transition and opens a new screen. On the new screen, it has a business card on the screen.
It has a unique design and it is designed using CSS. This business card has some heading, text, and icons. We will also design it using Html and CSS and the procedure is given below. Therefore, we have some designs given below:
You can also like it:
- Unique Coming Soon page template
- Product detail page design HTML CSS
- Landing page HTML template free download
How to create a business card in HTML and CSS:
We will create a business card in Html and CSS for our company with all contact us details. So, let’s start with a complete procedure for creating it.
Download code editor for a business card in HTML CSS:
Download any editor from below.
VS CODE
Brackets
Sublime text 3
Source code of Html:
The business card has text, icons and heading, etc. This is achieved through Html. So, its code is given below for copy-paste into your editor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> </head> <body> <div class="business-card middle"> <div class="front"> <h2>JD Khan</h2> <span>Web Develpor</span> <ul class="contact-info"> <li> <i class="fas fa-mobile-alt"></i> +92330000000 </li> <li> <i class="far fa-envelope"></i> fantacydesignss@gmail.com </li> <li> <i class="fas fa-map-marker-alt"></i> kpk, Pakistan </li> </ul> </div> <div class="back"> <span>Deep MooD</span> </div> </div> <script> $(".business-card").click(function(){ $(".business-card").toggleClass("business-card-active"); }); </script> </body> </html> |
Source code of CSS:
It is also a markup language used to design the business card in different ways. It includes color, design, icons, heading size, box radius, background image, and transition. So, this is done using CSS in our business card and its code is given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
*{ margin: 0; padding: 0; font-family: "montserrat",sans-serif; box-sizing: border-box; list-style: none; } body{ background: url(bg.jpg) no-repeat; background-repeat: no-repeat; background-size: cover; } .business-card{ width: 500px; height: 280px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .middle{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .front,.back{ width: 100%; height: 100%; overflow: hidden; position: absolute; backface-visibility: hidden; transition: transform 0.5s linear; } .front{ background: rgba(255,255,255,.7); padding: 40px; transform: perspective(600px) rotateX(180deg); } .front::before,.front::after{ content: ""; position: absolute; right: 0; } .front::before{ background: #FF9671; width: 80px; height: 120px; bottom: 0; clip-path:polygon(0 100%,40% 0,100% 100%); } .front::after{ background: #FFC75F; width: 100px; height: 100%; top: 0; clip-path:polygon(0 0,100% 0,100% 100%,80% 100%); } .front h2{ text-transform: uppercase; } .front span{ background: #FF9671; color: #fff; padding: 4px 10px; display: inline-block; margin-bottom: 20px; font-size: 14px; } .front .contact-info li{ margin: 10px 0; display: flex; align-items: center; } .front .contact-info li i{ width: 26px; height: 26px; background: #FF9671; color: #fff; display: flex; justify-content: center; align-items: center; margin-right: 6px; } .back{ background: #FF9671; display: flex; align-items: center; justify-content: center; color: #fff; text-transform: uppercase; letter-spacing: 8px; font-size: 24px; transform: perspective(600px) rotateX(0deg); } .business-card-active .front{ transform: perspective(600px) rotateX(0deg); } .business-card-active .back{ transform: perspective(600px) rotateX(-180deg); } |
In this way, you can create a business card for your company without any difficulty. But if you have any type of error in code or failed to link the files with each other then we have created a .zip file for you.
Download source code:
Therefore, the source code of the business card is given below and you can download it from the download button. It has a .zip file that contains all the files for a business card.
Task:
We have created a simple and unique business card using HTML and CSS languages. Now it’s modification time. Change the right side design to the left side design. Then change the text and other information from left to right. The heading is added using <h1> and changed it to <h3>. The icons are used from font-awesome. Now you have to change all these icons and import other new icons. Also, change the background color to the image.
I hope it was a very helpful post for you. If you have any type of query then you can comment below and we will try our best to solve your problem.
Thanks for reading this article.
Download Source CodeClick to Download