How we can design a contact or profile card for a website? Solution: See this CSS Contact Card UI Design With HTML, Profile Card For Website.
Previously I have shared contact vCard, but this is a contact card UI design with phone no and email which you can use on websites. The online contact card is a kind of business card, but it is for an online platform like a website. Most of the website shows their members info using this type of profile card.
Today you will learn to create Profile Card For Website. Basically, there is a profile card which contains a profile photo, a cover photo, name, email, phone number, and some social media links. And some basic HTML features available here like mail and call function, you have to click on the mail address to directly send mail.
So, Today I am sharing CSS Contact Card UI Design With HTML. I have used pure HTML and CSS to create this contact or profile card, also I have used a third-party icon library for placing social media icons. If you are a beginner in HTML CSS then this will be best practise for you, also you can use this UI design on your website.
If you are thinking now how this profile contact card actually is, then see the preview given below.
Preview Of Profile Card For Website
See this video preview to getting an idea of how this card UI looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
CSS Contact Card UI Design With HTML Source Code
Before sharing source code, let’s talk about it. First I have created the main div with class name card and placed all other content inside it. I have placed two divs for placing the cover and avatar images, a heading for the name, two hyperlinks for email and phone number. After that, I have created a list using HTML <ul> & <li> tags for icons and placed list items inside hyperlinks.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. For putting the banner and avatar or profile image I have used CSS background-image property (info). And I have used font-awesome library for placing social icons, there is an animation effect on the icons when you will hover on it.
To create the social icon animation I have used CSS transform: scale() property. And many more things I have done using CSS like size, position, color, etc. Left all other things you will understand after getting the codes, I can’t explain all in writing. For Creating this program you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes 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 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Contact Cards | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="banner"> <div class="avatar"></div> </div> <h3>Shaan Rajput</h3> <a href="mailto:contact@webdevtrick.com">📧 contact@webdevtrick.com</a> <a href="">📱 +91 123-456-7890</a> <ul> <a href="#" target="_blank"><i class="fa fa-twitter" style="font-size:16px"></i></a> <a href="#" target="_blank"><i class="fa fa-linkedin" style="font-size:16px"></i></a> <a href="#" target="_blank"><i class="fa fa-instagram" style="font-size:16px"></i></a> <a href="#" target="_blank"><i class="fa fa-facebook" style="font-size:16px"></i></a> </ul> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
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 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; background: #FFF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .card{ width: 200px; overflow: hidden; background-color: #FFFFFF; border-radius: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); text-align: center; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } .card:first-of-type{ margin-right: 25px; } .card:hover{ margin-top: -10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .banner{ height: 100px; width: 100%; padding-top: 30px; background-color: #FAFAFA; background-size: cover; background-position: center; } .card .banner{ background-image: url("https://webdevtrick.com/wp-content/uploads/logo-fb-1.png"); } .avatar{ height: 100px; width: 100px; margin: auto; background-size: cover; background-position: center; background-color: #F1F1F1; border-radius: 100%; } .card .avatar{ background-image: url("https://webdevtrick.com/wp-content/uploads/shaan.jpg"); } h3, a, i{ font-family: 'Roboto', sans-serif; font-weight: lighter; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } h3{ margin-top: 45px; margin-bottom: 5px; font-size: 18px; color: #212121; } a { display: block; padding: 5px 0px; font-size: 14px; color: #9E9E9E; text-decoration: none; } a:hover{ background-color: #FAFAFA; color: inherit; } ul { margin-top: 10px; padding: 15px 0px; background-color: #FAFAFA; } ul a{ display: inline; margin-right: 10px; } ul a i:hover{ transform: scale(1.5); color: #2ab1ce; } |
That’s It. Now you have successfully created CSS Contact Card UI Design With HTML, Profile Card For Website. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
