Profile Card

rohitwushu
Jan 12, 2026 3
Live Preview

Live Editor

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- External CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Profile Card | Rohit Goyal</title>
</head>
<body class="flex-center fonts">
<div class="container flex-center">
<div class="main flex-center">
<div class="intro flex-center y-margin">
<div class="imgBx flex-center">
<img src="https://i.imgur.com/WJAy2Oq.png" alt="user">
</div>
<h2 class="top-margin">Rohit Goyal </h2>
<p class="top-margin">Developer and Designer</p>
</div>
<div class="links y-margin">
<a href="javascript:void(0)" target="_blank" class="x-margin">
<img src="https://i.imgur.com/AFIBfx0.png" alt="facebook">
</a>
<a href="javascript:void(0" target="_blank" class="x-margin">
<img src="https://i.imgur.com/KpmBrfd.png" alt="twitter">
</a>
<a href="javascript:void(0" target="_blank" class="x-margin">
<img src="https://i.imgur.com/kEE5CHL.png" alt="github">
</a>
<a href="javascript:void(0" target="_blank" class="x-margin">
<img src="https://i.imgur.com/MU3VtJv.png" alt="youtube">
</a>
</div>
<button type="button" class="contact-btn y-margin fonts" title="Just for show, actually">Contact Me</button>
</div>
<div class="stats flex-center">
<div class="stat flex-center">
<h2>120</h2>
<p>
<small>POSTS</small>
</p>
</div>
<div class="stat flex-center">
<h2>127</h2>
<p>
<small>FOLLOWING</small>
</p>
</div>
<div class="stat flex-center">
<h2>120K</h2>
<p>
<small>FOLLOWERS</small>
</p>
</div>
</div>
</div>
<span id="credit"> Photo by <a href="https://unsplash.com/@eugene_ga?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Eugene Ga</a> on <a href="https://unsplash.com/photos/the-night-sky-over-a-snowy-mountain-range-7Co7kvggX9c?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
</span>
</body>
/* css reset */ * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}
/* Variables */ :root {
	--theme-color: rgba(255, 51, 0, 0.911);
	--theme-on: rgb(255, 51, 0);
	
}
/* Background */ body {
	width: 100%;
	height: 100vh;
	background: url("https://i.imgur.com/It2UuVm.jpeg") no-repeat center center/cover;
	
}
/* Credit to the Image */ #credit {
	position: absolute;
	bottom: 3px;
	right: 3px;
	font-size: 5px;
	color: white;
	
}
/* Container */ .container {
	flex-direction: column;
	width: 350px;
	height: 550px;
	margin: 10px;
	border-radius: 10px;
	overflow: hidden;
	background: rgb(28, 24, 48);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
}
/* Profile */ .container .main .intro .imgBx {
	width: 100px;
	height: 100px;
	background: white;
	overflow: hidden;
	border: 4px solid var(--theme-color);
	border-radius: 50%;
	animation: borders 10s infinite;
	
}
@keyframes borders {
	0% {
	border: 4px solid var(--theme-color);
	
}
25% {
	border: 4px solid rgb(255, 230, 0);
	
}
50% {
	border: 4px solid rgb(0, 238, 255);
	
}
75% {
	border: 4px solid rgb(136, 255, 0);
	
}
100% {
	border: 4px solid var(--theme-color);
	
}

}
.container .main .intro .imgBx img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}
.container .main .intro h2 {
	color: white;
	
}
.container .main .intro p {
	color: var(--theme-color);
	
}
.container .main .intro {
	flex-direction: column;
	
}
/* Links */ .container .main .links a {
	text-decoration: none;
	
}
.container .main .links a img {
	transition: 0.55s;
	width: 24px;
	
}
/* Contact Me button */ .container .main .contact-btn {
	padding: 10px 50px;
	color: var(--theme-on);
	background: transparent;
	border: 1px solid var(--theme-on);
	border-radius: 5px;
	cursor: pointer;
	transition: 0.55s;
	
}
.container .main .contact-btn:hover {
	color: white;
	background: var(--theme-on);
	
}
/* Main */ .container .main {
	flex-direction: column;
	width: 100%;
	height: 70%;
	
}
/* Stats */ .stats {
	background: white;
	width: 100%;
	height: 30%;
	
}
.stats .stat {
	width: 33%;
	height: 30px;
	flex-direction: column;
	background: white;
	border-right: 1px solid rgb(175, 175, 175);
	
}
.stat:last-child {
	border: none;
	
}
.stats .stat p small {
	color: var(--theme-color);
	
}
/* Utility classes */ .flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.y-margin {
	margin: 10px 0;
	
}
.top-margin {
	margin-top: 7px;
	
}
.x-margin {
	margin: 0 10px;
	
}
.fonts {
	font-family: 'Poppins', sans-serif;
	
}
Categories

Profile Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
