Responsive Interactive Profile Card "Type 1"

In this example below you will see how to do a Responsive Interactive Profile Card "Type 1" with some HTML / CSS and Javascript

Creating a simple "Responsive Profile Card" with an "Animation" by using CSS and JavaScript.

Thumbnail
This awesome code was written by uzcho_, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright uzcho_ ©
  • HTML
  • CSS
  • JavaScript
    <div class="container-small" id="Profile_Card">
	<div class="profile-header">
		<h1>Amli Sihombing</h1>
	</div>
	<div class="photo" id="Photo">
		<button id="Btn" onclick="click_me()"></button>
	</div>
	<div class="country">
		<p>Indonesia</p>
	</div>
	<div class="info">
		<p>I'm learned about the code in 2017 by self-taught via online sites, such as :<br>
			<strong><a class="w3s" href="https://www.w3schools.com/" target="blank_">W3Schools</a></strong>,
			<strong><a class="mdn" href="https://developer.mozilla.org/id/" target="blank_">MDN</a></strong>,
			<strong><a class="ct" href="https://css-tricks.com/" target="blank_">CSS-Tricks</a></strong>
			<br>and many more.
		</p>
	</div>
	<div class="social-media">
		<div class="col_1">
			<a href="https://codepen.io/uzcho_/" target="blank_"></a>
		</div>
		<div class="col_2">
			<a href="https://twitter.com/uzcho_" target="blank_"></a>
		</div>
		<div class="col_3">
			<a href="https://web.facebook.com/uzcho" target="blank_"></a>
		</div>
	</div>
</div>

/*Downloaded from https://www.codeseek.co/uzcho_/responsive-interactive-profile-card-andquottype-1andquot-rvRNrX */
    @charset "utf8";


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Root */
*,
*:after,
*:before,
html
	{box-sizing:border-box}

body{
	background:#d4d4d4;
	font-family:'Arial',Helvetica,sans-serif;
	font-style:normal;
	font-weight:400
	}

body,
h1,
p
	{margin:0;padding:0}

button
	{border:none;outline:none;cursor:pointer}

div
	{display:block;position:absolute}

p
	{font-size:14px}

.container-small,
.photo{
	top:50%;
	left:50%;
	transition:all .5s ease;
	transform:translate(-50%,-50%)
	}

.photo button,
.social-media div,
.social-media div a
	{display:block;position:relative}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Root */


/*                             ! Responsive Interactive Profile Card "Type 1" Start Here ...
=======================================================================================================================*/
.container-small{
	background:#D2B48C;
	width:64px;
	height:64px;
	border-radius:10px;
	box-shadow:0 8px 6px -6px #595959
	}

.profile-header{
	background:#000;
	width:100%;
	top:0;
	border-radius:10px 10px 0 0
	}

h1{
	width:auto;
	bottom:0;
	left:120px;
	display:none;
	position:absolute;
	color:#fff;
	font-size:18px
	}

.photo
	{width:32px;height:32px;border-radius:50%}

.photo button{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAzFBMVEUAAABVYIBUX4FdZZvS2N1WYIBVYIBUX4FVYIBVYIDm6+1VYIDo7O1VYIBVX4BdaIdfaYe6wcxVYIB3gJlVYIDK0NdjbYpqdJCjrLt1f5hVYIBjborW2uDO1Nrn6+3n7O22vcnn7O1VYIBVYIB4gpvn7O5UYIBWYIHn7e7o6+3n7O5XY4BWX4Tp6elVVY5JbZLr6//h5unZ3uPP1tzGzdTFzNRcZoWnr76aorOao7OGj6SEjqPo7O3k6utVX4BWYYBWX4Cep7lVYIDn7O3D3DEUAAAAQnRSTlMA8xcE5JaQRu7X/vjz6N3V0dDMweLbzsfFxb0f5t/e2s7HxMK9koJ9dE1JLBwLCQcG9Orf19fVxcPAv7+5tbN0bh0OaDdmAAABOklEQVQ4y32S55aCQAyFg6iANBVcENuqa6/bewvv/067SmYywjl8/+bmJpnMBJiDUZ9apu0lNUOHIpW6hhKzVsmF9TmFBdpif5E+wQJtpcjG5UyuFG5kfkhSEA8ajUHcpaNLNfZtEl5T4oWESTbNQuSnkoCk+bmB6NpiQ0vc6NSkhkSVDVWh1QF0s8ygHcDAMgMa3AH7bOgj90iQaKYKvlCn4CFxoxq6QrXALjeYIId4aqTMlVBtsFDwzPF35BYJFm/ZQcmXMiZ2hCFCZUyDD5EswBigu3x65BsSrs6fxf/pKx3ou4mHfAWtB//8IOHTS8Qo+M5Wvp25327lvjRpsXVaWgvRDu5SheuTxdsCsfWie4qwxQ97IPn9SAt8UpxYjS7DozXkOC4dDjvLIxTZrWbjoeMMx7P1jtU/oRm8waHeQaEAAAAASUVORK5CYII=)no-repeat center / cover;
	width:100%;
	height:100%;
	border-radius:50%
	}

.country
	{width:auto;left:120px}

.country p
	{display:none}

.info{
	width:100%;
	top:50%;
	padding:8px;
	text-align:center;
	transform:translate(0,-50%) scale(0,0);
	}

.info a
	{background:transparent}

.w3s
	{color:#4caf50}

.mdn
	{color:#88d1f1}

.ct
	{color:#ff9800}

.social-media
	{width:100%;bottom:10px;z-index:-1}

.social-media div
	{width:33.33333%;float:left}

.social-media div a{
	width:0;
	height:32px;
	margin:auto;
	text-decoration:none;
	transition:all .5s ease;
	}

.social-media .col_1 a
	{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAnFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4jUzeAAAAM3RSTlMAmOgTyFLBiPdMBPrz4GEhnnVp5M+oopNYDwnv7NuvpX9xPda2j0cnGhjiyr2MhXswLStCcuSfAAABbElEQVQ4y3VS55qCMBAcQfAEBcQCYsF+lrPm/d/tdrPARz5kfqRsZmdbYOAcWW4f7UiXijCzW57nuRJYDr5hd1UV8qZIduSHyKIIq28irz1Zlw6GSm2zDnOnhsjIJ9PhAk0A+pYpErp0/4kBTRjRZq/rIsGALrdfVITKuEz5GNHJf3gwCSKrIiBl+R0EF+rUAwV6zEiR8NbVASQ51fNqlwRUE2uQsJTH9JDaOpNzB5XVWfE25GWRnsaqRujdVYFBgGBRXhaBWxA22GlvNQk50bW8H86oCFS1CMQ81KhB6Ggfnxc3PA0bIQSJfdfliJJjKbMK6wSUmag/SsU2y1zLWLJEEpFGjaVRW9atJtuloiHw9BeKYe/LyZqE10RHyyjaVD6qQfA2Phe2kbE4VilSEt7a/fZGATsXkYLgPdn95ynu9ZRzmwkf7d79wIDUbVGwvXYfle6miEA+UBMyJXbfQtAi4oZoxfx4ncSm6R+owVah47K85gAAAABJRU5ErkJggg==)no-repeat center / cover}

.social-media .col_2 a
	{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAADqfQDqfQA//8DqfQDqfQDqfQCqvQFqfQAqPcAq/8DqfQDqfQDqfQEqPQDqfMFqPUAqvUDqfQCqfQDqfQEqfQCqfUCqfUDqfQEqfQEqvMCqfMArfEDqfQDqPQDqvQDqvQDqfQDqfMCqvQDqvUAq/UAsf8DqfUDqvUEqPQCqfQDqfUEqfMAn/8DqfQSQ7OaAAAALnRSTlMA+/QB1rqAci0dA+3jpIVXMxfpz56Ke2ZeRD4oEd/cwa6omXZSJAbcxZBsSkEICS6ZUQAAAPFJREFUOMvFkVmygjAQAMdAEvYdlcVd36pz/+MZI+gE4Vf7g0pNdw2VCnyG5W7tc9Gqk1db6vtnapejJjifouD3NsCI+ouNT4JUTRaIJQlK4u04WgLs1Ym7vfcYCWZYWHoDIltYoHGQEnpq1HTrZKpvQH2uvGLVL9zK/9ORBrzb6hu/JYTaz8WBTinlPcBJpA6q6SABDZ/yWXf1JpsIQuhw8/Gg7oO2OfgjfgM9KcMxKnggxvwWnlj7Vx+0QIv4e+BnNQxwcsMfB/pL+tSzypBOHK2QYidEJ8XwLZn0wCDZ0cQWKbzgxvPiJ2PrTSgceD9XbjlVYQuJ8JsAAAAASUVORK5CYII=)no-repeat center / cover}

.social-media .col_3 a
	{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUZdtIZdtIdds4AAAAZdtL6+vpyq+Lk7fbC2fC30+4ie9Tv9PjN4PKgxepppeBGkNowg9Y4gxcGAAAABHRSTlPophoAzYDURAAAAG5JREFUOMvN0DkOgDAMRNHxkkDCev/TYtEgCtsSEoJp/0sRQ5igzkAsYGgwy6ThCIiB9WSPQG1DsXlgHy1GwHoIaklAy8BwxrW7v7hefwPKbXMGagKmnoBFE7D99FAvAcQAoBgQGBGwLEzwAIjlAIj+EM/81i8yAAAAAElFTkSuQmCC)no-repeat center / cover}

.container-big,
.top
	{transition:all .5s ease}

.container-big .profile-header h1,
.container-big .country p
	{display:block}

.container-big .info:before,
.container-big .social-media div a:before
	{content:"";display:block;position:absolute}

.container-big
	{width:300px;height:400px}

.container-big .profile-header
	{animation:height .5s .5s ease both}

@keyframes height{
	from{height:0;opacity:0}
	to{height:55px;opacity:1}
	}

.top{
	width:100px;
	top:10px;
	left:10px;
	transform:translate(0,0);
	border:4px solid #fff;
	animation:fade-down .5s .5s ease both
	}

@keyframes fade-down{
	from{height:0;opacity:0}
	to{height:100px;opacity:1}
	}

.top button
	{background:url(data:image/jpeg;base64,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)no-repeat center / cover}

.container-big .country
	{animation:fade-up .5s .5s ease both}

@keyframes fade-up{
	from{top:110px;opacity:0}
	to{top:55px;opacity:1}
	}

.container-big .info
	{transition:all .5s 1s ease;transform:translate(0,-50%) scale(1,1)}

.container-big .info:before{
	background:#fff;
	width:100%;
	height:200%;
	top:-50%;
	left:0;
	z-index:-1;
	transform:skewY(-15deg)
	}

.container-big .social-media .col_1 a
	{animation:width .5s 1.5s ease both}

.container-big .social-media .col_2 a
	{animation:width .5s 2s ease both}

.container-big .social-media .col_3 a
	{animation:width .5s 2.5s ease both}

@keyframes width{
	from{width:0;opacity:0}
	to{width:32px;opacity:1}
	}

.container-big .social-media div a:hover
	{transform:translateY(-4px) rotateY(360deg)}

.container-big .social-media div a:before{
	width:0;
	height:2px;
	bottom:-8px;
	left:50%;
	transform:translate(-50%,0);
	transition:all .5s ease
	}

.container-big .social-media div a:hover:before
	{background:#000;width:100%}

@media (max-width:300px){
	.container-big
		{width:90%}
	}


/*Downloaded from https://www.codeseek.co/uzcho_/responsive-interactive-profile-card-andquottype-1andquot-rvRNrX */
    function click_me(){
   if(document.getElementById("Btn")){
      document.getElementById("Profile_Card").classList.toggle("container-big");
      document.getElementById("Photo").classList.toggle("top")
   }
}

Comments