My Profile Card

Developer
Srijon Sarker
Size
5,245 Kb
Views
10,120
  1. My Profile Card Previews
  2. My Profile Card HTML Codes
  3. My Profile Card CSS Codes

How do I make an my profile card?

A Detailed Pen about the the profile card. What is a my profile card? How do you make a my profile card? This script and codes were developed by Srijon Sarker on 28 November 2022, Monday.

My Profile Card Previews
IQ Test

My Profile Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My Profile Card</title> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Hind" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->
<aside class="profile-card">	<header>	<!-- here’s the avatar -->	<a href="http://victory-design.ru/">	<img src="http://victory-design.ru/sandbox/codepen/profile_card/avatar.svg" />	</a>	<!-- the username -->	<h1>Sriijon Sarker</h1>	<!-- and role or location -->	<h2>Web Developer</h2>	</header>	<!-- bit of a bio; who are you? -->	<div class="profile-bio">	<p>Even when everything is perfect, you can always make it better. Break barriers in your head, create something crazy and don't forget Code is Poetry...</p>	</div>	<!-- some social links to show off -->	<ul class="profile-social-links">	<!-- twitter - el clásico -->	<li>	<a href="https://www.facebook.com/v1ctory">	<svg viewBox="0 0 24 24">	<path fill="#3b5998" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />	</svg>	</a>	</li>	<!-- envato – use this one to link to your marketplace profile -->	<li>	<a href="http://themeforest.net/user/Victory-Design">	<svg viewBox="0 0 24 24">	<path fill="#82B541" d="M18.334,1.909c-0.604-0.327-2.313-0.125-4.375,0.503c-3.621,2.464-6.664,6.11-6.89,11.971c-0.05,0.148-0.402-0.025-0.478-0.053c-0.981-1.859-1.358-3.846-0.554-6.688C6.189,7.39,5.686,7.089,5.611,7.165C5.435,7.34,4.681,8.145,4.178,9c-2.464,4.249-0.855,9.733,3.445,12.122c4.299,2.389,9.733,0.855,12.12-3.445C22.533,12.695,19.969,2.814,18.334,1.909z"	/>	</svg>	</a>	</li>	<!-- codepen - your codepen profile-->	<li>	<a href="https://codepen.io/VictoryDesign/">	<svg viewBox="0 0 24 24">	<path fill="#000000" d="M19.45,13.29L17.5,12L19.45,10.71M12.77,18.78V15.17L16.13,12.93L18.83,14.74M12,13.83L9.26,12L12,10.17L14.74,12M11.23,18.78L5.17,14.74L7.87,12.93L11.23,15.17M4.55,10.71L6.5,12L4.55,13.29M11.23,5.22V8.83L7.87,11.07L5.17,9.26M12.77,5.22L18.83,9.26L16.13,11.07L12.77,8.83M21,9.16C21,9.15 21,9.13 21,9.12C21,9.1 21,9.08 20.97,9.06C20.97,9.05 20.97,9.03 20.96,9C20.96,9 20.95,9 20.94,8.96C20.94,8.95 20.93,8.94 20.92,8.93C20.92,8.91 20.91,8.89 20.9,8.88C20.89,8.86 20.88,8.85 20.88,8.84C20.87,8.82 20.85,8.81 20.84,8.79C20.83,8.78 20.83,8.77 20.82,8.76A0.04,0.04 0 0,0 20.78,8.72C20.77,8.71 20.76,8.7 20.75,8.69C20.73,8.67 20.72,8.66 20.7,8.65C20.69,8.64 20.68,8.63 20.67,8.62C20.66,8.62 20.66,8.62 20.66,8.61L12.43,3.13C12.17,2.96 11.83,2.96 11.57,3.13L3.34,8.61C3.34,8.62 3.34,8.62 3.33,8.62C3.32,8.63 3.31,8.64 3.3,8.65C3.28,8.66 3.27,8.67 3.25,8.69C3.24,8.7 3.23,8.71 3.22,8.72C3.21,8.73 3.2,8.74 3.18,8.76C3.17,8.77 3.17,8.78 3.16,8.79C3.15,8.81 3.13,8.82 3.12,8.84C3.12,8.85 3.11,8.86 3.1,8.88C3.09,8.89 3.08,8.91 3.08,8.93C3.07,8.94 3.06,8.95 3.06,8.96C3.05,9 3.05,9 3.04,9C3.03,9.03 3.03,9.05 3.03,9.06C3,9.08 3,9.1 3,9.12C3,9.13 3,9.15 3,9.16C3,9.19 3,9.22 3,9.26V14.74C3,14.78 3,14.81 3,14.84C3,14.85 3,14.87 3,14.88C3,14.9 3,14.92 3.03,14.94C3.03,14.95 3.03,14.97 3.04,15C3.05,15 3.05,15 3.06,15.04C3.06,15.05 3.07,15.06 3.08,15.07C3.08,15.09 3.09,15.11 3.1,15.12C3.11,15.14 3.12,15.15 3.12,15.16C3.13,15.18 3.15,15.19 3.16,15.21C3.17,15.22 3.17,15.23 3.18,15.24C3.2,15.25 3.21,15.27 3.22,15.28C3.23,15.29 3.24,15.3 3.25,15.31C3.27,15.33 3.28,15.34 3.3,15.35C3.31,15.36 3.32,15.37 3.33,15.38C3.34,15.38 3.34,15.38 3.34,15.39L11.57,20.87C11.7,20.96 11.85,21 12,21C12.15,21 12.3,20.96 12.43,20.87L20.66,15.39C20.66,15.38 20.66,15.38 20.67,15.38C20.68,15.37 20.69,15.36 20.7,15.35C20.72,15.34 20.73,15.33 20.75,15.31C20.76,15.3 20.77,15.29 20.78,15.28C20.79,15.27 20.8,15.25 20.82,15.24C20.83,15.23 20.83,15.22 20.84,15.21C20.85,15.19 20.87,15.18 20.88,15.16C20.88,15.15 20.89,15.14 20.9,15.12C20.91,15.11 20.92,15.09 20.92,15.07C20.93,15.06 20.94,15.05 20.94,15.04C20.95,15 20.96,15 20.96,15C20.97,14.97 20.97,14.95 20.97,14.94C21,14.92 21,14.9 21,14.88C21,14.87 21,14.85 21,14.84C21,14.81 21,14.78 21,14.74V9.26C21,9.22 21,9.19 21,9.16Z"	/>	</svg>	</a>	</li>	<!-- add or remove social profiles as you see fit -->	</ul>
</aside>
<!-- that’s all folks! --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

My Profile Card - Script Codes CSS Codes

html { height: 100%;
}
body {	background: #bcdee7 url("http://victory-design.ru/sandbox/codepen/profile_card/bg.png") no-repeat center center fixed; background-size: 120% auto; position: fixed;	padding: 0px;	margin: 0px;	width: 100%;	height: 100%;	font: normal 14px/1.618em "Hind", sans-serif;	-webkit-font-smoothing: antialiased;
}
body:before { content: ""; height: 0px; padding: 0px; border: 110em solid #313440;	position: absolute;	left: 50%;	top: 100%; z-index: 2; display: block; -webkit-border-radius: 50%; border-radius: 50%;	-webkit-transform: translate(-50%, -50%);	transform: translate(-50%, -50%); -webkit-animation: puff_portrait 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards; animation: puff_portrait 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}
h1, h2 { font-weight: 400; margin: 0px 0px 5px 0px;
}
h1 { font-size: 24px;
}
h2 { font-size: 16px;
}
p { margin: 0px;
}
.profile-card {	background: #FFB300;	width: 56px;	height: 56px;	position: absolute;	left: 50%;	top: 50%; z-index: 2;	overflow: hidden; opacity: 0; margin-top: 70px;	-webkit-transform: translate(-50%, -50%);	transform: translate(-50%, -50%);	-webkit-border-radius: 50%;	border-radius: 50%;	-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);	box-shadow: 0px 3px 6px rgba(0 ,0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); -webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_landscape 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards; animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_landscape 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
.profile-card header { width: 179px; height: 280px; padding: 40px 20px 30px 20px; display: inline-block; float: left; border-right: 2px dashed #EEEEEE;	background: #FFFFFF; color: #000000; margin-top: 50px; opacity: 0; text-align: center; -webkit-animation: moveIn 1s 3.1s ease forwards; animation: moveIn 1s 3.1s ease forwards;
}
.profile-card header h1 { color: #FF5722;
}
.profile-card header a { display: inline-block; text-align: center; position: relative; margin: 25px 30px;
}
.profile-card header a:after {	position: absolute; content: "";	bottom: 3px;	right: 3px;	width: 20px;	height: 20px; border: 4px solid #FFFFFF; -webkit-transform: scale(0); transform: scale(0); background: -webkit-linear-gradient(top, #2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%); background: linear-gradient(#2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%); -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-animation: scaleIn 0.3s 3.5s ease forwards; animation: scaleIn 0.3s 3.5s ease forwards;
}
.profile-card header a > img { width: 120px; max-width: 100%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: -webkit-box-shadow 0.3s ease; transition: box-shadow 0.3s ease; -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06); box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
}
.profile-card header a:hover > img { -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
}
.profile-card .profile-bio { width: 175px; height: 180px; display: inline-block; float: right; padding: 50px 20px 30px 20px;	background: #FFFFFF; color: #333333; margin-top: 50px; text-align: center; opacity: 0; -webkit-animation: moveIn 1s 3.1s ease forwards; animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links { width: 218px; display: inline-block; float: right; margin: 0px; padding: 15px 20px;	background: #FFFFFF; margin-top: 50px; text-align: center; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-animation: moveIn 1s 3.1s ease forwards; animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links li { list-style: none; margin: -5px 0px 0px 0px; padding: 0px; float: left; width: 33.3%; text-align: center;
}
.profile-social-links li a { display: inline-block; width: 24px; height: 24px; padding: 6px; position: relative; overflow: hidden!important; -webkit-border-radius: 50%; border-radius: 50%;
}
.profile-social-links li a img { position: relative; z-index: 1;
}
.profile-social-links li a:before { display: block; content: ""; background: rgba(0, 0, 0, 0.3); position: absolute; left: 0px; top: 0px; width: 36px; height: 36px; opacity: 1; -webkit-transition: transform 0.4s ease, opacity 1s ease-out; transition: transform 0.4s ease, opacity 1s ease-out; -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); -webkit-border-radius: 50%; border-radius: 50%;
}
.profile-social-links li a:hover:before { -webkit-animation: ripple 1s ease forwards; animation: ripple 1s ease forwards;
}
.profile-social-links li a img,
.profile-social-links li a svg { width: 24px;
}
@media screen and (min-aspect-ratio: 4/3) { body { background-size: 100% auto; } body:before { width: 0px; } @-webkit-keyframes puff { 0% { top: 100%; width: 0px; padding-bottom: 0px; }	100% { top: 50%; width: 100%; padding-bottom: 100%; } } @keyframes puff { 0% { top: 100%; width: 0px; padding-bottom: 0px; }	100% { top: 50%; width: 100%; padding-bottom: 100%; } }
}
@media screen and (min-height: 480px) {	.profile-card {	-webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_portrait 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;	animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_portrait 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;	}	.profile-card header { width: auto; height: auto; padding: 30px 20px; display: block; float: none; border-right: none; } .profile-card .profile-bio { width: auto; height: auto; padding: 15px 20px 30px 20px; display: block; float: none; } .profile-social-links { width: 100%; display: block; float: none; }
}
@media screen and (min-aspect-ratio: 4/3) { body { background-size: 100% auto; } body:before { width: 0px;	-webkit-animation: puff_landscape 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;	animation: puff_landscape 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;	}
}
@-webkit-keyframes init { 0% {	width: 0px;	height: 0px; }	100% { width: 56px; height: 56px; margin-top: 0px; opacity: 1; }
}
@keyframes init { 0% {	width: 0px;	height: 0px; }	100% { width: 56px; height: 56px; margin-top: 0px; opacity: 1; }
}
@-webkit-keyframes puff_portrait { 0% { top: 100%; height: 0px; padding: 0px; }	100% { top: 50%; height: 100%; padding: 0px 100%; }
}
@keyframes puff_portrait { 0% { top: 100%; height: 0px; padding: 0px; }	100% { top: 50%; height: 100%; padding: 0px 100%; }
}
@-webkit-keyframes puff_landscape {	0% {	top: 100%;	width: 0px;	padding-bottom: 0px;	}	100% {	top: 50%;	width: 100%;	padding-bottom: 100%;	}
}
@keyframes puff_landscape {	0% {	top: 100%;	width: 0px;	padding-bottom: 0px;	}	100% {	top: 50%;	width: 100%;	padding-bottom: 100%;	}
}
@-webkit-keyframes borderRadius { 0% { -webkit-border-radius: 50%; }	100% { -webkit-border-radius: 0px; }
}
@keyframes borderRadius { 0% { -webkit-border-radius: 50%; }	100% { border-radius: 0px; }
}
@-webkit-keyframes moveDown { 0% { top: 50%; }	50% { top: 40%; } 100% { top: 100%; }
}
@keyframes moveDown { 0% { top: 50%; }	50% { top: 40%; } 100% { top: 100%; }
}
@-webkit-keyframes moveUp { 0% { background: #FFB300; top: 100%; }	50% { top: 40%; } 100% { top: 50%; background: #E0E0E0; }
}
@keyframes moveUp { 0% { background: #FFB300; top: 100%; }	50% { top: 40%; } 100% { top: 50%; background: #E0E0E0; }
}
@-webkit-keyframes materia_landscape { 0% { background: #E0E0E0; } 50% { -webkit-border-radius: 4px; } 100% { width: 440px; height: 280px; background: #FFFFFF; -webkit-border-radius: 4px; }
}
@keyframes materia_landscape { 0% { background: #E0E0E0; } 50% { border-radius: 4px; } 100% { width: 440px; height: 280px; background: #FFFFFF; border-radius: 4px; }
}
@-webkit-keyframes materia_portrait {	0% {	background: #E0E0E0;	}	50% {	-webkit-border-radius: 4px;	}	100% {	width: 280px;	height: 440px;	background: #FFFFFF;	-webkit-border-radius: 4px;	}
}
@keyframes materia_portrait {	0% {	background: #E0E0E0;	}	50% {	border-radius: 4px;	}	100% {	width: 280px;	height: 440px;	background: #FFFFFF;	border-radius: 4px;	}
}
@-webkit-keyframes moveIn { 0% { margin-top: 50px; opacity: 0; }	100% { opacity: 1; margin-top: -20px; }
}
@keyframes moveIn { 0% { margin-top: 50px; opacity: 0; }	100% { opacity: 1; margin-top: -20px; }
}
@-webkit-keyframes scaleIn { 0% { -webkit-transform: scale(0); }	100% { -webkit-transform: scale(1); }
}
@keyframes scaleIn { 0% { transform: scale(0); }	100% { transform: scale(1); }
}
@-webkit-keyframes ripple { 0% { transform: scale3d(0, 0, 0); } 50%, 100% { -webkit-transform: scale3d(1, 1, 1); } 100% { opacity: 0; }
}
@keyframes ripple { 0% { transform: scale3d(0, 0, 0); } 50%, 100% { transform: scale3d(1, 1, 1); } 100% { opacity: 0; }
}
My Profile Card - Script Codes
My Profile Card - Script Codes
Home Page Home
Developer Srijon Sarker
Username Creative_Srijon
Uploaded November 28, 2022
Rating 4.5
Size 5,245 Kb
Views 10,120
Do you need developer help for My Profile Card?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Flat Pricing Table
Material Profile UI Hover
Calendar Widget
Image Hover ii
Statics UI
Flat Pricing Table
3D Buttons iii
Material Calendar Concept
Lead Gen Button
Catagory Choosing
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!