Stylish Profile Card UI
Let's Do a Demo Here...!
Step 2 : Create a new post/page or edit a existing Post/Page
Step 3 : Click on the pen button on the top left side and then switch to HTML View
Step 4 : Copy and paste the code given below
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<div class="wrapper">
<div class="img-area">
<div class="inner-area">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yRQRIkEmT81ZzZIYXIejtTCsmg0uJ6Yrmibu0Xqzr_E9EP4o6y4CjkwZxsmH0GQWz6JLI6uyjNRpWnDfYGBWqe7dgvSjkUhL6C88g8_w6-Np_84uqU3Z4czhagbXo9rx_MKaJN7JZY2q4a7bX5CbE-R5Th3T-vvLtqgeRy-6lfSHBGw/s220/Victor_Logo8_Tech_Ankur-removebg-preview.png" />
</div> </div> <div class="icon arrow"><i class="fas fa-arrow-left"></i></div> <div class="icon dots"><i class="fas fa-ellipsis-v"></i></div> <div class="name">ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ</div> <div class="about">Student | Mathematician | Tricker
</div> <div class="social-icons"> <a class="fb" href="#"><i class="fab fa-youtube-square"></i></a> <a class="twitter" href="#"><i class="fab fa-twitter"></i></a> <a class="insta" href="#"><i class="fab fa-instagram"></i></a> <a class="yt" href="#"><i class="fab fa-facebook"></i></a> </div> <div class="buttons"> <button><a href="<a href="#" class="yt">">Message</a></button> <button><a href="<a href="#" class="yt">">Subscribe</a></button> </div> <div class="social-share"> <div class="row"> <i class="far fa-heart"></i> <i class="icon-2 fas fa-heart"></i> <span>20.4k</span> </div> <div class="row"> <i class="far fa-comment"></i> <i class="icon-2 fas fa-comment"></i> <span>14.3k</span> </div> <div class="row"> <i class="fas fa-share"></i> <span>12.8k</span> </div> </div> </div> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}.wrapper,.wrapper .img-area,.social-icons a,.buttons button{background:#ffffff;box-shadow:-3px -3px 7px #ffffff,3px 3px 5px #ceced1}.wrapper{position:relative;width:350px;padding:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}.wrapper .icon{font-size:17px;color:#31344b;position:absolute;cursor:pointer;opacity:0.7;top:15px;height:35px;width:35px;text-align:center;line-height:35px;border-radius:50%;font-size:16px}.wrapper .icon i{position:relative;z-index:9}.wrapper .icon.arrow{left:15px}.wrapper .icon.dots{right:15px}.wrapper .img-area{height:150px;width:150px;border-radius:50%;display:flex;align-items:center;justify-content:center}.img-area .inner-area{height:calc(100% - 25px);width:calc(100% - 25px);border-radius:50%}.inner-area img{height:100%;width:100%;border-radius:50%;object-fit:cover}.wrapper .name{font-size:23px;font-weight:500;color:#31344b;margin:10px 0 5px 0}.wrapper .about{color:#44476a;font-weight:400;font-size:16px}.wrapper .social-icons{margin:15px 0 25px 0}.social-icons a{position:relative;height:40px;width:40px;margin:0 5px;display:inline-flex;text-decoration:none;border-radius:50%}.social-icons a:hover::before,.wrapper .icon:hover::before,.buttons button:hover:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;border-radius:50%;background:#ffffff;box-shadow:inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1}.buttons button:hover:before{z-index:-1;border-radius:5px}.social-icons a i{position:relative;z-index:3;text-align:center;width:100%;height:100%;line-height:40px}.social-icons a.fb i{color:#4267B2}.social-icons a.twitter i{color:#1DA1F2}.social-icons a.insta i{color:#E1306C}.social-icons a.yt i{color:#ff0000}.wrapper .buttons{display:flex;width:100%;justify-content:space-between}.buttons button{position:relative;width:100%;border:none;outline:none;padding:12px 0;color:#31344b;font-size:17px;font-weight:400;border-radius:5px;cursor:pointer;z-index:4}.buttons button:first-child{margin-right:10px}.buttons button:last-child{margin-left:10px}.wrapper .social-share{display:flex;width:100%;margin-top:30px;padding:0 5px;justify-content:space-between}.social-share .row{color:#31344b;font-size:17px;cursor:pointer;position:relative}.social-share .row::before{position:absolute;content:"";height:100%;width:2px;background:#e0e6eb;margin-left:-25px}.row:first-child::before{background:none}.social-share .row i.icon-2{position:absolute;left:0;top:50%;color:#31344b;transform:translateY(-50%);opacity:0;pointer-events:none;transition:all 0.3s ease}.row:nth-child(1):hover i.fa-heart,.row:nth-child(2):hover i.fa-comment{opacity:1;pointer-events:auto} </style>
Step 5 : Edit my name and change my social links to your social links
Step 6 : Also you can change the icons I used with help of Font Awesome
Step 7 : Then Save Post
Conclusion
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
Copyright ©
.png)