Tự tạo một Profile Card với HTML và CSS

14

Tự tạo một Profile Card với HTML và CSS – Chào các bạn, trong khuôn khổ bài viết này chúng ta sẽ cùng nhau tạo ra một hồ sơ cá nhân (Profile Card) bằng CSS và HTML. Cùng với những thông tin cơ bản mà bạn muốn hiển thị. Bạn có thể đặt Profile Card này ở bất cứ nơi nào trên website của bạn và bạn có thể sửa cho phù hợp với bản thân.

Tự tạo một Profile Card với HTML và CSS

Tự tạo một Profile Card với HTML và CSS html và css - Tự tạo một Profile Card với HTML và CSS

Đầu tiên các bạn hãy sử dụng HTML:

Đoạn HTML này sẽ hiển thị ra bên ngoài website. Chính vì vậy, bạn muốn Profile Card hiển thị chỗ nào thì hãy dán đoạn HTML này vào chỗ đó. Ví dụ: Nếu bạn sử dụng WordPress và muốn hiển thị ngoài Sitebar thì bạn vào Widget và cho vào Widget Text.

<!-- Trong đoạn Code này, bạn có thể thay đổi các chi tiết (tên riêng của bạn, của riêng bạn avatar vv), nhưng không làm thay đổi cấu trúc cơ bản! -->

<aside class="profile-card">

  <header>

    <!-- Hình của bạn -->
    <a href="http://www.laivanduc.com">
      <img src="http://farm5.staticflickr.com/4175/34651231232_b1a413839f_o.jpg">
    </a>

    <!-- Tên của bạn -->
    <h1>Lại Văn Đức</h1>

    <!-- Công việc hay nghề của bạn -->
    <h2>- Web Developer -</h2>

  </header>

  <!-- Thêm thông tin của bạn -->
  <div class="profile-bio">

    <p>Chào mừng các bạn</p>
    <p>Tôi là một nhà phát triển web. Tôi chủ yếu làm việc với PHP, HTML, CSS, JS và WordPress.
      <br />Tôi cũng làm việc tốt với Photoshop, Corel Draw, After Effects và vài thứ khác.</p>

  </div>

  <!-- Liên kết mạng xã hội -->
  <ul class="profile-social-links">

    <!-- twitter - el clásico  -->
    <li>
      <a href="http://twitter.com/">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
      </a>
    </li>

    <!-- envato – use this one to link to your marketplace profile -->
    <li>
      <a href="http://facebook.com">
        <img src="http://farm5.staticflickr.com/4221/34651248062_73641b1a80_o.png">
      </a>
    </li>

    <!-- Tài khoản Google +-->
    <li>
      <a href="https://plus.google.com/u/0/118260931574775251745/posts">
        <img src="http://farm5.staticflickr.com/4186/34004419773_ed97040ef5_o.png">
      </a>
    </li>

    <!--Bạn có thể thêm hoặc xóa mạng xã hội tại đây-->

  </ul>

</aside>
<!-- Chỉ có vậy thôi ! -->

Tiếp theo, chúng ta sẽ làm đẹp bằng CSS.

Ai cũng biết CSS là link hồn của tất cả Website và đoạn CSS bên dưới này cũng vậy. Nếu bạn sử dụng WordPress, bạn hãy dán đoạn CSS này vào file style.css của Theme. Hoặc đơn giản hơn, bạn hãy truy cập Appearance > Customize > và dán đoạn CCS này vào phần Additional CSS

/* Bắt đầu viết code CSS nào ! */

@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
  padding: 20px;
  box-sizing: border-box;
  font-family: Roboto, Helvetica, Arial, serif;
  background: url(http://farm5.staticflickr.com/4180/34813900975_be65f5a553_o.jpg);
  background-size: cover;
}

header img {
  border-radius: 50%;
  margin: 20px auto;
  display: block;
  width: 200px;
  border: 5px solid #fff;
}

aside {
  border-top: 0px solid #26A69A;
  border-bottom: 0px solid #00695C;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  height: 250px;
  width: 250px;
  background: url(http://farm5.staticflickr.com/4180/34813900975_be65f5a553_o.jpg);
  background-size: cover;
  overflow: hidden;
  box-shadow: 0 0 100px 10px #fff;
  transition: all ease 0.3s;
}

aside:hover {
  border-top: 4px solid #26A69A;
  border-bottom: 4px solid #00695C;
  border-radius: 5px;
  height: 480px;
  width: 350px;
  box-shadow: 0 0 70px 10px #fff;
}

aside:hover header img {
  animation: profile_image 2000ms linear both;
  animation-delay: 0.5s;
}

header {
  text-align: center;
}

header h1 {
  position: relative;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 25px;
  line-height: 25px;
  display: inline-block;
  padding: 10px;
  transition: all ease 0.250s;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

aside:hover header h1 {
  margin-top: 0px;
  outline: 0 solid #fff;
  border-top: 0px solid #fff;
  border-bottom: 1px solid #fff;
}

header h2 {
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 17px;
  font-weight: normal;
  line-height: 0px;
  margin: 0;
}

.profile-bio {
  margin-top: 20px;
  padding: 1px 20px 10px 20px !important;
  transition: all linear 1.5s;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 49%, rgba(0, 0, 0, 0.61) 100%);
}

aside:hover .profile-bio {
  opacity: 1;
}

.profile-bio p:first-child {
  text-align: center;
  font-size: 16px;
}

.profile-social-links {
  position: relative;
  margin-top: -440px;
  margin-left: -100px;
  list-style-type: none;
  opacity: 0;
  transition: all ease 0.5s;
}

aside:hover .profile-social-links {
  margin-left: -30px;
  opacity: 1;
}

.profile-social-links li img {
  width: 30px;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
}
/*PROFILE IMAGE ANIMATE */

@keyframes profile_image {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.7% {
    transform: matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.81% {
    transform: matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.41% {
    transform: matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.21% {
    transform: matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.61% {
    transform: matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.11% {
    transform: matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.52% {
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.72% {
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  21.32% {
    transform: matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  24.32% {
    transform: matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    transform: matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    transform: matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.93% {
    transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  35.54% {
    transform: matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.74% {
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.04% {
    transform: matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  44.44% {
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  52.15% {
    transform: matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  59.86% {
    transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.26% {
    transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  75.28% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.49% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  90.69% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
/*NAME ANIMATE */

aside:hover header h1 {
  animation: name_and_job 1500ms linear both;
  animation-delay: 0.4s;
}

@keyframes name_and_job {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1);
  }
  1.3% {
    transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1);
  }
  2.55% {
    transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1);
  }
  4.1% {
    transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1);
  }
  5.71% {
    transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1);
  }
  8.11% {
    transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1);
  }
  8.81% {
    transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1);
  }
  11.96% {
    transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1);
  }
  12.11% {
    transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1);
  }
  15.07% {
    transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1);
  }
  16.12% {
    transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1);
  }
  27.23% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1);
  }
  27.58% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1);
  }
  38.34% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1);
  }
  40.09% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1);
  }
  50% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1);
  }
  60.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1);
  }
  82.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

aside:hover ul li:first-child {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 0.75s;
}

aside:hover ul li:nth-child(2) {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 1s;
}

aside:hover ul li:nth-child(3) {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 1.25s;
}

@keyframes social_animation {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1);
  }
  1.3% {
    transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1);
  }
  2.55% {
    transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1);
  }
  4.1% {
    transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1);
  }
  5.71% {
    transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1);
  }
  8.11% {
    transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1);
  }
  8.81% {
    transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1);
  }
  11.96% {
    transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1);
  }
  12.11% {
    transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1);
  }
  15.07% {
    transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1);
  }
  16.12% {
    transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1);
  }
  27.23% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1);
  }
  27.58% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1);
  }
  38.34% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1);
  }
  40.09% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1);
  }
  50% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1);
  }
  60.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1);
  }
  82.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

Update: 20/04/2016

Đoạn CSS bên trên dành cho các bạn muốn tự chỉnh sửa Code cho phù hợp với nơi các bạn đặt khung HTML. Bên cạnh đó có khá nhiều bạn sử dụng Theme Sahifa và cũng muốn sử dụng. Vì vậy, dưới đây là Code CSS các bạn sử dụng cho Sahifa Theme. Các bạn bỏ qua Code CSS bên trên và sử dụng Code này nhé.

/* Bắt đầu viết code CSS nào ! */
.profile-card header img {
	border-radius: 50%;
	margin: 20px auto;
	display: block;
	width: 200px;
	border: 5px solid #fff;
}

aside.profile-card {
	border-top: 0 solid #26A69A;
	border-bottom: 0 solid #00695C;
	border-radius: 50%;
	margin: 0 auto;
	display: block;
	height: 250px;
	width: 250px;
	background: url(http://farm5.staticflickr.com/4180/34813900975_be65f5a553_o.jpg);
	background-size: cover;
	overflow: hidden;
	box-shadow: 0 0 100px 10px #fff;
	transition: all ease .3s;
}

aside.profile-card:hover {
	border-top: 4px solid #26A69A;
	border-bottom: 4px solid #00695C;
	border-radius: 5px;
	height: 480px;
	width: 100%;
	box-shadow: 0 0 70px 10px #fff;
}

aside.profile-card:hover header img {
	animation: profile_image 2000ms linear both;
	animation-delay: .5s;
}

.profile-card header {
	text-align: center;
}

.profile-card header h1 {
	position: relative;
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px rgba(0,0,0,0.5);
	font-size: 25px;
	line-height: 25px;
	display: inline-block;
	padding: 10px;
	transition: all ease .25s;
}

aside.profile-card:hover header h1 {
	margin-top: 0;
	outline: 0 solid #fff;
	border-top: 0 solid #fff;
}

.profile-card header h2 {
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px rgba(0,0,0,0.5);
	font-size: 17px;
	font-weight: normal;
	line-height: 0;
	margin: 0;
}

.profile-card .profile-bio {
	margin-top: 20px;
	padding: 1px 20px 10px !important;
	transition: all linear 1.5s;
	color: #fff;
	font-size: 14px;
	opacity: 0;
	background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.42) 49%,rgba(0,0,0,0.61) 100%);
}

aside.profile-card:hover .profile-bio {
	opacity: 1;
}

.profile-card .profile-bio p:first-child {
	text-align: center;
	font-size: 16px;
}

.profile-card .profile-social-links {
	position: relative;
	margin-top: -440px;
	margin-left: -100px;
	list-style-type: none;
	opacity: 0;
	transition: all ease .5s;
}

aside.profile-card:hover .profile-social-links {
	margin-left: -30px;
	opacity: 1;
}

.profile-card .profile-social-links li img {
	width: 30px;
	background: #fff;
	border-radius: 50%;
	padding: 5px;
}

/*PROFILE IMAGE ANIMATE */
@keyframes profile_image {
	0% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
	
	3.4% {
		transform: matrix3d(1.032,0,0,0,0,1.041,0,0,0,0,1,0,0,0,0,1);
	}
	
	4.7% {
		transform: matrix3d(1.045,0,0,0,0,1.06,0,0,0,0,1,0,0,0,0,1);
	}
	
	6.81% {
		transform: matrix3d(1.066,0,0,0,0,1.089,0,0,0,0,1,0,0,0,0,1);
	}
	
	9.41% {
		transform: matrix3d(1.088,0,0,0,0,1.117,0,0,0,0,1,0,0,0,0,1);
	}
	
	10.21% {
		transform: matrix3d(1.094,0,0,0,0,1.123,0,0,0,0,1,0,0,0,0,1);
	}
	
	13.61% {
		transform: matrix3d(1.112,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1);
	}
	
	14.11% {
		transform: matrix3d(1.114,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1);
	}
	
	17.52% {
		transform: matrix3d(1.121,0,0,0,0,1.124,0,0,0,0,1,0,0,0,0,1);
	}
	
	18.72% {
		transform: matrix3d(1.121,0,0,0,0,1.119,0,0,0,0,1,0,0,0,0,1);
	}
	
	21.32% {
		transform: matrix3d(1.12,0,0,0,0,1.107,0,0,0,0,1,0,0,0,0,1);
	}
	
	24.32% {
		transform: matrix3d(1.115,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1);
	}
	
	25.23% {
		transform: matrix3d(1.113,0,0,0,0,1.094,0,0,0,0,1,0,0,0,0,1);
	}
	
	29.03% {
		transform: matrix3d(1.106,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1);
	}
	
	29.93% {
		transform: matrix3d(1.105,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1);
	}
	
	35.54% {
		transform: matrix3d(1.098,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1);
	}
	
	36.74% {
		transform: matrix3d(1.097,0,0,0,0,1.098,0,0,0,0,1,0,0,0,0,1);
	}
	
	41.04% {
		transform: matrix3d(1.096,0,0,0,0,1.102,0,0,0,0,1,0,0,0,0,1);
	}
	
	44.44% {
		transform: matrix3d(1.097,0,0,0,0,1.103,0,0,0,0,1,0,0,0,0,1);
	}
	
	52.15% {
		transform: matrix3d(1.099,0,0,0,0,1.101,0,0,0,0,1,0,0,0,0,1);
	}
	
	59.86% {
		transform: matrix3d(1.101,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1);
	}
	
	63.26% {
		transform: matrix3d(1.101,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1);
	}
	
	75.28% {
		transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
	}
	
	85.49% {
		transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
	}
	
	90.69% {
		transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
	}
	
	100% {
		transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
	}
}

/*NAME ANIMATE */
aside.profile-card:hover header h1 {
	animation: name_and_job 1500ms linear both;
	animation-delay: .4s;
}

@keyframes name_and_job {
	0% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-300,0,0,1);
	}
	
	1.3% {
		transform: matrix3d(3.905,0,0,0,0,1,0,0,0,0,1,0,-237.02,0,0,1);
	}
	
	2.55% {
		transform: matrix3d(4.554,0,0,0,0,1,0,0,0,0,1,0,-182.798,0,0,1);
	}
	
	4.1% {
		transform: matrix3d(4.025,0,0,0,0,1,0,0,0,0,1,0,-125.912,0,0,1);
	}
	
	5.71% {
		transform: matrix3d(3.039,0,0,0,0,1,0,0,0,0,1,0,-79.596,0,0,1);
	}
	
	8.11% {
		transform: matrix3d(1.82,0,0,0,0,1,0,0,0,0,1,0,-31.647,0,0,1);
	}
	
	8.81% {
		transform: matrix3d(1.581,0,0,0,0,1,0,0,0,0,1,0,-21.84,0,0,1);
	}
	
	11.96% {
		transform: matrix3d(1.034,0,0,0,0,1,0,0,0,0,1,0,4.825,0,0,1);
	}
	
	12.11% {
		transform: matrix3d(1.023,0,0,0,0,1,0,0,0,0,1,0,5.53,0,0,1);
	}
	
	15.07% {
		transform: matrix3d(0.947,0,0,0,0,1,0,0,0,0,1,0,12.662,0,0,1);
	}
	
	16.12% {
		transform: matrix3d(0.951,0,0,0,0,1,0,0,0,0,1,0,13.007,0,0,1);
	}
	
	27.23% {
		transform: matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.352,0,0,1);
	}
	
	27.58% {
		transform: matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.121,0,0,1);
	}
	
	38.34% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.311,0,0,1);
	}
	
	40.09% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.291,0,0,1);
	}
	
	50% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.048,0,0,1);
	}
	
	60.56% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0.007,0,0,1);
	}
	
	82.78% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
	
	100% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
}

aside.profile-card:hover ul li:first-child {
	animation: social_animation 2000ms ease-in-out both;
	animation-delay: .75s;
}

aside.profile-card:hover ul li:nth-child(2) {
	animation: social_animation 2000ms ease-in-out both;
	animation-delay: 1s;
}

aside.profile-card:hover ul li:nth-child(3) {
	animation: social_animation 2000ms ease-in-out both;
	animation-delay: 1.25s;
}

@keyframes social_animation {
	0% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-300,0,0,1);
	}
	
	1.3% {
		transform: matrix3d(3.905,0,0,0,0,1,0,0,0,0,1,0,-237.02,0,0,1);
	}
	
	2.55% {
		transform: matrix3d(4.554,0,0,0,0,1,0,0,0,0,1,0,-182.798,0,0,1);
	}
	
	4.1% {
		transform: matrix3d(4.025,0,0,0,0,1,0,0,0,0,1,0,-125.912,0,0,1);
	}
	
	5.71% {
		transform: matrix3d(3.039,0,0,0,0,1,0,0,0,0,1,0,-79.596,0,0,1);
	}
	
	8.11% {
		transform: matrix3d(1.82,0,0,0,0,1,0,0,0,0,1,0,-31.647,0,0,1);
	}
	
	8.81% {
		transform: matrix3d(1.581,0,0,0,0,1,0,0,0,0,1,0,-21.84,0,0,1);
	}
	
	11.96% {
		transform: matrix3d(1.034,0,0,0,0,1,0,0,0,0,1,0,4.825,0,0,1);
	}
	
	12.11% {
		transform: matrix3d(1.023,0,0,0,0,1,0,0,0,0,1,0,5.53,0,0,1);
	}
	
	15.07% {
		transform: matrix3d(0.947,0,0,0,0,1,0,0,0,0,1,0,12.662,0,0,1);
	}
	
	16.12% {
		transform: matrix3d(0.951,0,0,0,0,1,0,0,0,0,1,0,13.007,0,0,1);
	}
	
	27.23% {
		transform: matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.352,0,0,1);
	}
	
	27.58% {
		transform: matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.121,0,0,1);
	}
	
	38.34% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.311,0,0,1);
	}
	
	40.09% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.291,0,0,1);
	}
	
	50% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.048,0,0,1);
	}
	
	60.56% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0.007,0,0,1);
	}
	
	82.78% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
	
	100% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
}

aside.profile-card:hover .profile-social-links {
	margin-left: 4px;
    margin-top: -390px;
	opacity: 1;
}

Ngoài mẫu này, các bạn có thể tham khảo và sử dụng một mẫu khác cũng được giới thiệu trên Blog Lại Văn Đức tại đây:

Thế Thôi

Đơn giản thế thôi là chúng ta đã có một Profile Card tuyệt đẹp hiển thị trên chính Blog/Website của mình. Mỗi người đều có sự sáng tạo riêng và bạn hoàn toàn có thể chỉnh sửa bộ code này để phù hợp với phong cách của bạn. Và đừng quên cho mọi người biết để tham khảo nhé. Bên dưới là demo của mình.