🔴 Animated Profile Card UI Design using Html & CSS | devhubspot
Hey friends, today in this blog, you’ll learn how to create a complete Animated Profile Card UI Design using HTML & CSS. If you’re an absolute beginner, this Animated Profile Card UI will be a little bit difficult for you to create.
Steps For Creating Animated Profile Card UI
To create a To-Do using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.html
file. The file name must be index and its extension .html - Create a
style.css
file. The file name must be style and its extension .css
To start, add the following HTML codes to your index.html
file to create a basic layout for the To-Do.
<!DOCTYPE html> <html> <head> <title> Devhubspot Css Card </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="lines"></div> <div class="imgbox"> <img src="profile.png" /> </div> <div class="content"> <div class="details"> <h2>DevhubSpot <br /> <span>Youtuber</span> </h2> <div class="data"> <h3>100 <br> <span>Videos</span> </h3> <h3>150K <br> <span>Likes</span> </h3> <h3>15K <br> <span>Subscriber</span> </h3> </div> <div class="actionBtn"> <button>Subscribe</button> <button>Like</button> </div> </div> </div> </div> </body> </html>
Next, add the following CSS codes to your style.css
file to style the captcha generator and make it interactive and beautiful.
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins' sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #999; } .card{ position: relative; width: 350px; height: 190px; background: #111; transition: 0.5s; border-radius: 10px; } .card:hover{ height: 460px; } .card .lines{ position: absolute; inset: 0; background: #333; overflow: hidden; border-radius: 10px; } .card .lines::before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 120px; background: linear-gradient(transparent, #45f3ff, #45f3ff, #45f3ff, transparent); animation: animate 4s linear infinite; border-radius: 10px; } @keyframes animate{ 0%{ transform: translate(-50%, -50%) rotate(0deg); } 100%{ transform: translate(-50%, -50%) rotate(360deg); } } .card .lines::after{ content: ''; position: absolute; inset: 3px; background: #fff; border-radius: 10px; } .card .imgbox{ position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 150px; height: 150px; background: #fff; transition: 0.5s; z-index: 10; overflow: hidden; border-radius: 10px; } .card:hover .imgbox{ width: 250px; height: 250px; border-radius: 10px; } .card .imgbox::before{ content: ''; position: absolute; top: 50%; left: 50%; width: 500px; height: 150px; transform: translate(-50%, -50%); background: linear-gradient(transparent, #ff3c7b, #ff3c7b, #ff3c7b, transparent); animation: animate1 4s linear infinite; border-radius: 10px; } @keyframes animate1{ 0%{ transform: translate(-50%, -50%) rotate(360deg); } 100%{ transform: translate(-50%, -50%) rotate(0deg); } } .card .imgbox::after{ content: ''; position: absolute; background: #777; inset: 3px; border-radius: 10px; } .card .imgbox img{ position: absolute; z-index: 1; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); filter: grayscale(1); } .card .content{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center ; align-items: flex-end; overflow: hidden; } .card .content .details{ padding: 40px; text-align: center; width: 100%; transition: 0.5s; transform: translateY(145px); } .card:hover .content .details{ transform: translateY(0px); } .card .content .details h2{ font-size: 1.25em; font-weight: 600; color: #ff3c7b; line-height: 1.2em; } .card .content .details h2 span{ font-size: 0.75em; font-weight: 500; color: #111; } .card .content .details .data{ display: flex; justify-content: space-between; margin: 30px 0; } .card .content .details .data h3{ font-size: 1em; color: #ff3c7b; line-height: 1.2em; font-weight: 600; } .card .content .details .data h3 span{ font-size: 0.85em; font-weight: 400; color: #111; } .card .content .details .actionBtn{ display: flex; justify-content: space-between; gap: 20px; } .card .content .details .actionBtn button{ padding: 10px 30px; border: none; outline: none; width: 150px; border-radius: 5px; font-size: 1em; font-weight: 500; background: #45f3ff; color: #111; cursor: pointer; opacity: 0.9; } .card .content .details .actionBtn button:nth-child(2){ background: #ff3c7b; } .card .content .details .actionBtn button:hover{ opacity: 1; }
Conclusion
With HTML and CSS, I aim to show you how to create your own Animated Profile Card UI. You may modify your generator to suit your demands because the coding procedure is straightforward and simple to grasp.