How to create a Profile Card Design using HTML & CSS – Solution: Profile Card Design with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow
Live Demo
Also Helpful –
Profile Card Design using HTML & CSS
Firstly, How do you need it? Here we post a simple but interesting profile card that also looks nice as well. More profile card designs coming soon.
For designing, you have to understand the CSS part. Here we use some CSS class ".card" for design the card format, ".line" for drow the line on the card, ".user-img" to set the image on the profile card, ".user-img:hover" for image hover, ".user-name, .user-profession, .user-description" to view those values on the needed position, and ".btn" for changing the button design.
Back to coding, To complete this program with debugging free code you have to create three files. The first file is to HTML and the second file gonna be CSS for design part and the third file JavaScript for function-related,
index.html
Create an HTML file named ‘index.html‘ and put those 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 31 32 33 34 35 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html> <head> <title>Profile Card - Coding Debugging</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- My Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="clip-top-1"></div> <div class="line"></div> <img class="user-img" src="https://rajib.codingdebugging.com/images/rajib.jpg" alt="Coding Debugging - Rajib" border="0"> <div class="user-name">Rajib Biswas</div> <div class="user-profession">Web Developer</div> <div class="user-description"> Enter Your Description!!! </div> <a class="btn" href="https://codingdebugging.com/contact-us/">Contact Us</a> <div class="clip-bottom"></div> </div> <!-- Profile Card Script --> <script src="https://unpkg.com/scrollreveal"></script> <!-- Our Custom JS --> <script src="function.js"></script> </body> </html> |
style.css
Create a CSS file named ‘style.css‘ and put those 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 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 114 115 116 |
//Google Font API @import url('https://fonts.googleapis.com/css?family=Krona+One|Montserrat|Raleway&display=swap'); html{ visibility:hidden ; } body { background-color:#2F363F; margin:0; padding:0; } .card{ width:92%; height:480px; background-color:#fefcf6; position:absolute ; left:50%; transform:translate(-50%, -50%); top:50%; } .clip-top-1{ width:100%; height:175px; position:relative; background:linear-gradient(-45deg, #E8290B, #EC4849 ); clip-path: polygon(100% 0%, 100% 50%, 0% 100%, 0% 0%); } .line{ position:relative ; width:80px; height:2px; border-radius:10px; background-color:#fff; top:-25px; left:10px; transform:rotate(-15deg); box-shadow:240px 0px #fff, 20px 20px #e8290b, 230px 20px #e8290b; } .user-img{ width:115px; height:auto ; border-radius:50%; position:absolute ; top:110px; left:50%; transform:translate(-50%, -50%); border:3.5px solid #fff; background-position:0px 0px; transition:0.3s; } .user-img:hover{ width:140px; height:auto ; border-radius:50%; position:absolute; top:110px; left:50%; transform:translate(-50%, -50%); z-index:100; background-position:0px 0px; } .user-name{ position:absolute ; font-size:20px; font-family: 'Montserrat' ; top:220px; font-weight:bolder ; left:50%; transform:translate(-50%, -50%); } .user-profession{ position:absolute ; font-size:13.5px; font-family: 'Montserrat' ; top:245px; color:#616C6F; left:50%; transform:translate(-50%, -50%); } .user-description{ position:absolute ; font-size:11px; font-family: 'Montserrat' ; top:300px; line-height:15px; left:50%; word-spacing:3px; text-align:center ; width:90%; transform:translate(-50%, -50%); } .btn{ position:absolute ; font-size:15px; font-family: 'Montserrat' ; top:390px; background-color:#E44236; left:50%; align-items:center ; padding:15px 15px 15px 15px; word-spacing:3px; text-align:center ; color:#fff; text-decoration:none ; width:70%; transition:0.2s; transform:translate(-50%, -50%); } .clip-bottom{ width:100%; height:6px; position:absolute ; bottom:0; background-color:#E44236; } |
function.js
Create a JavaScript file named ‘function.js‘ and put those codes given below.
|
1 2 |
//WAIT FOR POPUP ScrollReveal().reveal('.card', {delay: 1000}); |
Thank you for visiting!
We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.
Keep coding, Keep debugging!