20+ CSS Business Card Examples

This post contains a total of 20+ CSS Business Card Examples with Source Code. All these Business Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Business Card Examples

1. CSS Animated Business Card

Made by Jake Giles-Phillips. Business card with hover effects, hover your mouse over it to flip the card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<style>
body {
  background: #1d1f20;
}

#card-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
}

.card {
  position: fixed;
  width: 100%;
  height: 100%;
  transition: 0.6s ease-in-out;
  border-radius: 10px;
  box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.3);
  backface-visibility: hidden;
}

#card-front {
  background: white;
  z-index: 2;
}

#card-back {
  transform: rotateY(180deg);
  background: #8bd7d3;
  z-index: 1;
}

#cube {
  position: absolute;
  left: 50%;
  top: 50%;
}

.face {
  transform-origin: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
}

.cube-top {
  background: #cbefe8;
  transform: rotate(210deg) skew(-30deg) scaleY(0.864);
}

.cube-left {
  background: #52aca2;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.864);
}

.cube-right {
  background: #8bd7d3;
  transform: rotate(-30deg) skewX(-30deg) scaleY(0.864);
}

#card-wrapper:hover #card-front {
  transform: rotateY(180deg);
}

#card-wrapper:hover #card-back {
  transform: rotateY(0deg);
  z-index: 3;
}

.details {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  transform: translate(-50%, -50%);
}

.details h3 {
  font-family: "Cabin", sans-serif;
  color: white;
  font-size: 14pt;
  letter-spacing: 0.3rem;
  text-align: center;
}

.details p {
  font-family: "Cabin", sans-serif;
  color: white;
  font-size: 8pt;
  letter-spacing: 0.3rem;
  text-align: center;
}

.details span {
  position: relative;
  top: 70px;
  font-family: "Cabin", sans-serif;
  color: white;
  font-size: 8pt;
  letter-spacing: 0.3rem;
  text-align: center;
}

#tip {
  position: fixed;
  top: calc(50% + 190px);
  left: 50%;
  transform: translate(-50%, -50%);
}

#tip .arrow {
  position: relative;
  width: 0;
  left: 50%;
  margin-bottom: -1px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0px 15px 10px 15px;
  border-color: transparent transparent #8bd7d3 transparent;
}

#tip .section {
  padding: 10px;
  background: #8bd7d3;
  border-radius: 10px;
}

#tip .section p {
  margin: 0;
  text-align: center;
  font-family: "Cabin";
  font-size: 8pt;
  font-weight: bold;
  letter-spacing: 0.1rem;
  color: white;
}
</style>
</head>
<body>
  <div id="card-wrapper">
	<div id="card-front" class="card">
		<div id="cube">
			<div class="face cube-top"></div>
			<div class="face cube-left"></div>
			<div class="face cube-right"></div>
		</div>
	</div>
	<div id="card-back" class="card">
		<div class="details">
			<h3>JAKE GILES-PHILLIPS</h3>
			<p>FRONT END DEVELOPMENT & WEB DESIGN</p>
			<span>WWW.JAKEGILESPHILLIPS.CO.UK</span>
		</div>
	</div>
</div>
<div id="tip">
	<div class="arrow"></div>
	<div class="section">
		<p>HOVER TO ROTATE</p>
	</div>
</div>
</body>
</html>

2. Reddit Business Card Challenge

Made by Dylan. Cool looking css business card. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Flamenco);
body {
  background: #3c3837;
}

.containhair {
  padding: 50px 0;
}

.business-card {
  width: 400px;
  height: 230px;
  margin: auto;
  background: #e1dac8;
  box-shadow: 0 7px 7px -3px #1a1a1a;
  position: relative;
}
.business-card .business-card__front {
  box-sizing: border-box;
  height: 230px;
  /*border: 4px solid $border-color;*/
  background-image: url(http://www.transparenttextures.com/patterns/cardboard.png);
}
.business-card .business-card__front .business-card__img {
  width: 50px;
  padding-top: 60px;
  display: block;
  margin: auto;
}
.business-card .business-card__front h1 {
  color: #57514f;
  font-family: "Flamenco";
  text-transform: uppercase;
  text-align: center;
  font-size: 1.5em;
  margin-top: 5px;
}
.business-card .business-card__front h1 span {
  border-bottom: 2px solid #d07a5f;
  padding-bottom: 4px;
}
.business-card .business-card__front h2 {
  text-align: center;
  font-family: "Flamenco";
  color: #57514f;
  font-size: 1em;
  margin-top: -5px;
}
.business-card .business-card__front .business-card__link {
  display: none;
  color: #c35a39;
  font-family: "Flamenco";
  transition: .2s linear;
  font-size: 1.2em;
  text-align: center;
  position: absolute;
  top: 110px;
  left: 127px;
  transition: .2s linear;
}
.business-card .business-card__front .business-card__link:hover {
  color: #d07a5f;
}
.business-card .business-card__back {
  box-sizing: border-box;
  height: 230px;
  /*border: 4px solid $border-color;*/
  background-image: url(http://www.transparenttextures.com/patterns/cardboard.png);
  display: none;
}
.business-card:hover .business-card__front .hide {
  display: none;
}
.business-card:hover .business-card__front .business-card__link {
  display: block;
}
.business-card:hover .business-card__back {
  display: block;
}

.credits p {
  color: #d07a5f;
  font-family: "Flamenco";
  text-align: center;
}
</style>
</head>
<body>
  <div class="containhair">
  <div class="business-card">
    <div class="business-card__front">
      <img src="https://i.imgur.com/qiKuPs8.gif" alt="" class="business-card__img hide"/>
      <h1 class="business-card__front-name hide"><span>Dylan McGowan</span></h1>
      <h2 class="business-card__front-title hide">Witty One Liner</h2>
      <a href="http://dylanmcgowan.com" class="business-card__link">dylanmcgowan.com</a
    </div>
  </div><!--END container-->
      
  <div class="credits">
    <p>/r/web_design Community Challenge One</p>
  </div>
</div>
  
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

3. CSS Business card with floating effect

Made by Thomas Hanson. Business card with floating effect on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/*
  Hover and click on the card for animations!
*/

@import url(https://fonts.googleapis.com/css?family=Cormorant+Garamond);

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  box-sizing: inherit;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5),
                -1px -1px 1px rgba(179, 179, 179, .5),
                1px 1px 0 rgba(255, 255, 255, 0.55),
                0 1px 3px white;
  overflow: hidden;
  color: #191919;
  background-color: azure;
}

button {
  display: block;
  position: relative;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
  cursor: pointer;
  outline: inherit;
  z-index: 10;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.big {
  font-size: 150%;
}

.med {
  font-size: 100%;
  letter-spacing: .5px;
}

.small {
  font-size: 65%;
  letter-spacing: .5px;
}

.no-space {
  letter-spacing: 0px;
}

.card {
  background-color: #f4f1eb;
  background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
  height: 200px;
  width: 350px;
  margin: 20vh auto 0 auto;
  padding: 20px 10px 10px 10px;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg);
  /*transform-origin: 50% 100%;*/
  box-shadow: 0;
  transition: transform .4s ease,
              box-shadow .4s ease;
}

.card:hover {
  cursor: pointer;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translateZ(10px);
  box-shadow: 20px 20px 20px rgba(0, 0, 0, .4);
}

.card:focus {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(10px);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, .4);
}

.card:focus::before {
  transform: skewX(0deg) translateX(0px) translateY(0px);
  height: 0px;
}

.card:focus::after {
  transform: skewY(0deg) translateX(0px) translateY(0px);
  width: 0px;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  display: block;
  background-color: grey;
  transition: transform .4s ease,
              height .4s ease,
              width .4s ease;
}

.card::before {
  width: 100%;
  height: 6px;
  bottom: 0;
  left: 0;
  transform: skewX(45deg) translateX(-3px) translateY(6px);
}

.card::after {
  height: 100%;
  width: 6px;
  top: 0;
  right: 0;
  transform: skewY(45deg) translateX(6px) translateY(-3px);
}

.row {
  display: block;
  text-align: center;
}

.row:nth-child(2) {
  margin: 35px 0 50px 0;
}

.left {
  float: left;
}

.right {
  float: right;
}

p {
  margin: 0;
}
</style>
</head>
<body>
  <button class="card">
  <div class="row clearfix">
    <div class="left big">212 555 6342</div>
    <div class="right"><p><span class="big">P</span>ierce &amp; <span class="big">P</span>ierce</p><p><span class="med no-space">M</span><span class="small no-space">ergers and </span><span class="med no-space">A</span><span class="small no-space">cquisitions</span></p></div>
  </div>
  <div class="row">
    <p><span class="big">P</span>atrick <span class="big">Bateman</span></p>
    <p><span class="big">V</span>ice <span class="big">P</span>resident</p>
  </div>
  <div class="row">
    <p><span class="med">358 E</span><span class="small">xchange </span><span class="med">P</span><span class="small">lace </span><span class="med">N</span><span class="small">ew </span><span class="med">Y</span><span class="small">ork</span><span class="med">, N. Y. 10099 F</span><span class="small">ax </span><span class="med">212 555 6390 T</span><span class="small">elex </span><span class="med">10 4534</span>
    </p>
  </div>
</button>
</body>
</html>

4. Flipping Business Card

Made by Sabine Robart. Flipping Business Card with cool animations. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<style>
@import url("https://fonts.googleapis.com/css?family=Nunito|Satisfy");
body {
  background: #643a7a;
  font-family: "nunito", sans-serif;
}

.frame {
  position: absolute;
  background-color: #201c29;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 0.5rem 1rem 1rem rgba(0, 0, 0, 0.6);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.frame, .card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-me {
  position: absolute;
  top: 30%;
  left: 77%;
  font-size: 1.3rem;
  transform: rotate(-90deg);
}

.card {
  width: 80%;
  height: 40%;
  padding: 1rem;
  background: linear-gradient(178deg, #ef2f96, #ad2fed, #ad2fed, #d53070);
  background-size: 600% 600%;
  -webkit-animation: background 7s ease infinite;
          animation: background 7s ease infinite;
  perspective: 800px;
}

.front h1 {
  font-family: Satisfy, cursive;
  font-size: 8rem;
  margin: 1rem 5rem;
  text-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}

h1, h2, .fa-heart {
  background: linear-gradient(178deg, #ef2f96, #ad2fed, #ad2fed, #d53070);
  background-size: 600% 600%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: background 7s ease infinite;
          animation: background 7s ease infinite;
}

@-webkit-keyframes background {
  0%, 100% {
    background-position: 0% 13%;
  }
  50% {
    background-position: 100% 88%;
  }
}

@keyframes background {
  0%, 100% {
    background-position: 0% 13%;
  }
  50% {
    background-position: 100% 88%;
  }
}
p {
  position: absolute;
  top: 60%;
  left: 10%;
  color: rgba(255, 255, 255, 0.2);
  padding: 0.8rem 0 0.2rem 0.5rem;
}

p:nth-of-type(2) {
  opacity: 0;
  transform: translate(-2rem);
}

.hvr-outline-in {
  position: relative;
}

.hvr-outline-in:before {
  content: "";
  position: absolute;
  border: 1px solid #ad2fed;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
}

.hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
  transform: rotate(135deg) scale(3);
  transition: 0.3s;
}

.card:hover .flip {
  transform: rotateX(180deg) translate3d(0, 0, 0);
  box-shadow: 8px -10px 15px 0 rgba(0, 0, 0, 0.5);
}

.flip {
  transform-style: preserve-3d;
  transition: all 0.7s ease-in-out;
  perspective: 1000px;
}

.front, .back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #201c29;
}

.card .back {
  transform: rotateX(-180deg);
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  letter-spacing: 2px;
  text-align: center;
}
.back h2 {
  font-size: 2.3rem;
  margin: 0.5rem;
}
.back h3 {
  color: rgba(255, 255, 255, 0.7);
  font-family: satisfy, cursive;
  font-weight: 300;
  font-size: 1.9rem;
  margin: 1.8rem;
}

.front i {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 2rem;
  transform: rotate(45deg);
}

.back .fa-heart {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2rem;
  transform: rotate(135deg);
}

.line {
  width: 2rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
}

.line-1 {
  top: 85%;
}

.line-2 {
  top: 13%;
}

.line-1, .line-2 {
  left: 82.5%;
  transform: rotate(-90deg);
  background: purple;
  width: 3rem;
}

.line-3 {
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.4);
}
.social i {
  padding: 0 0.5rem;
}
.social i:hover {
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
</style>
</head>
<body>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="frame">
	<div class="card">
		<div class="flip hvr-outline-in">
			
			<div class="front">
				<h1>hey.</h1>
				<p class="flip-me">Flip Me</p>
				<div class="line line-1"></div>
				<div class="line line-2"></div>
				<i class="fa fa-heart"></i>
			</div>
			
			<div class="back">
				<i class="fa fa-heart"></i>
				<h3>Hermione</h3>
				<div class="line line-3"></div>
				<h2>Web Developer</h2>
				<div class="social">
					<i class="fab fa-codepen"></i>
					<i class="fab fa-twitter"></i>
					<i class="fab fa-linkedin-in"></i>
					<i class="fab fa-github"></i>
				</div>
			</div>
		</div>
	</div>
</div>
  <script src='https://100dayscss.com/codepen/js/jquery.min.js'></script>
</body>
</html>

5. Business card with floating animation

Made by weeeeb. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  height: 100%;
  background: #3C5160;
}

html {
  margin: 0px;
  padding: 0px;
}

.card {
  width: 380px;
  height: 230px;
  border-radius: 10px;
  margin: 80px auto 0 auto;
  background-color: #202C3F;
  color: #91807C;
  position: relative;
  overflow: hidden;
}

.curve {
  position: absolute;
  left: 0px;
  bottom: 20px;
  transition: 3s;
}
.curve .st0 {
  fill: #91807C;
}

.detail {
  padding-top: 130px;
  padding-left: 265px;
  line-height: 1.3em;
  font-size: 0.8em;
}

.brand-name {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 280px;
}
.brand-name .st0 {
  fill: none;
  stroke: #91807c;
  stroke-width: 2;
  stroke-miterlimimit: 10;
}
.brand-name .st1 {
  fill: none;
  stroke: #91807c;
  stroke-width: 1.6;
  stroke-miterlimimit: 10;
}
.brand-name .st2 {
  fill: #91807C;
}

.curve-2 {
  position: absolute;
  bottom: -20px;
  width: 120px;
}
.curve-2 .st0 {
  fill: none;
  stroke: #91807C;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.card:hover .curve-2 .st0, .card:hover .brand-name .st0 {
  fill: rgba(145, 128, 124, 0.2);
  animation: hideshow 6s ease infinite;
}
.card:hover .curve {
  left: -60px;
}

.card-w {
  background: #fff;
  color: #202C3F;
}
.card-w .curve .st0 {
  fill: #202C3F;
}
.card-w .curve-2 .st0 {
  stroke: #202C3F;
}
.card-w .brand-name .st0 {
  stroke: #202C3F;
}
.card-w .brand-name .st1 {
  stroke: #202C3F;
  fill: #202C3F;
}
.card-w .brand-name .st2 {
  fill: #202C3F;
}
</style>
</head>
<body>
  <div id="parallxWrapper">
  <div class="parallxBackground" data-bind="attr: { style:'-webkit-transform:perspective(1000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg);transform:perspective(1000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg)' }">

  <div class="card">
    <div class="detail">
      <div class="phone">
        09123456789
      </div>
      <div>
        ๆฑๅŒ—่ง’ๆŸๅ€‹ๅœฐๆ–น
      </div>
    </div>
    <svg class="brand-name" x="0px" y="0px"
     viewBox="0 0 600 119" style="enable-background:new 0 0 600 119;">
       <g>
    <path class="st0" d="M98.2,26.1c-2-1-2.7,1.6-5.7,6.8c-2.1,3.7-7,3.4-10.6,2.6c-4.2-1-7.3-3.7-10.3-6.7c0,0-0.1-0.1-0.1-0.1
      C62.5,20.7,35.8,10,26.5,41.4c-2,9.1,4.3,6,9.9-1.7c3.6-4.8,11.2-3.3,12.9,2.5C55,62.9,61,89.8,83,99.1c3,1.3,6.1,2,9.2,2.6
      c14,2.2,21.4-2.7,32.1-10.7c10.2-7.7,18.4-26.1,19.8-43.1c1.1-6.8,0-21.8,23.5-10.8c3.1,2,7.1,4,7.7,3.1c0-8.5-16.2-21.3-16.2-21.3
      S143.1,7.6,128,25.8c-3.2,3.8-7,7.3-11.7,9.1c-2.9,1.1-6,1.5-9,1c-1.4-0.3-3.3-0.8-4.5-1.6c-0.7-0.5-1-1.3-1.2-2.1
      c-0.3-0.9-0.6-1.9-1-2.7C100,28.4,99.4,26.7,98.2,26.1z"/>
    <path class="st1" d="M101,23.5c-1.9-1-2.6,1.6-5.5,6.5c-2,3.5-6.8,3.3-10.2,2.5c-4-1-7-3.6-9.9-6.4c0,0-0.1-0.1-0.1-0.1
      C66.6,18.3,41,8,32,38.3c-1.9,8.7,4.1,5.7,9.5-1.6c3.4-4.6,10.8-3.2,12.4,2.4c5.6,19.9,11.2,45.8,32.4,54.7
      c2.9,1.2,5.8,1.9,8.9,2.5c13.5,2.2,20.6-2.6,30.9-10.3c9.8-7.4,17.7-25.1,19.1-41.5c1.1-6.5,0-21,22.6-10.4c3,1.9,6.8,3.8,7.4,3
      c0-8.2-15.5-20.5-15.5-20.5s-15.5-11-30,6.5c-3,3.7-6.8,7-11.3,8.8c-2.8,1.1-5.8,1.5-8.7,0.9c-1.4-0.2-3.2-0.7-4.3-1.6
      c-0.7-0.5-0.9-1.3-1.2-2c-0.3-0.9-0.6-1.8-1-2.6C102.7,25.7,102.1,24.1,101,23.5z"/>
  </g>
  <g>
    <g>
      <path class="st2" d="M219.4,21c-1.2,0.6-3.8,1.9-6.7,2.2c-2.7,0.2-4,0.3-4.6,0.2c-0.3-0.1-1-0.3-1.2,0c-0.1,0.1-0.2,0.3,0.2,1.1
        c0.2,0.3,0.9,1.7,2.4,2.5c2.2,1.2,4.9,0.7,7.8,0.2c3.5-0.7,5.9-1.1,7.8-3.1c0,0,1.4-1.4,2-4.1c0.1-0.3,0.2-0.8-0.1-1.1
        c-0.4-0.5-1.4-0.3-1.9-0.2C222.7,19.2,220.6,20.4,219.4,21z"/>
      <path class="st2" d="M213.1,18.3c1-0.1,2,1.5,3.2,3.4c2.4,3.6,3.5,4.3,4.5,7c0.5,1.4,0.6,2.3,0.1,2.9c-0.4,0.5-1.1,0.7-1.7,0.7
        c-0.9-0.1-1.5-0.9-2-1.8c-2.5-4.1-2.4-7-3.9-8.8c-0.6-0.7-0.7-1-1-1.7c-0.3-0.8-0.2-1.2-0.1-1.4C212.5,18.4,213,18.3,213.1,18.3z"
        />
      <path class="st2" d="M237.2,19.7c-1.1-0.1-1.7,0-2.1,0.4c-0.7,0.6-0.7,1.5-0.7,1.7c0,1,0.5,1.7,0.7,1.9c0.6,0.8,1.5,1.2,2.1,1.4
        c4.9,1.6,13.9-0.3,15.7-0.9c0.2-0.1,0.6-0.2,1.1-0.5c0.4-0.3,0.7-0.5,1.3-1.1c0.8-0.7,0.9-0.7,1.2-1c0.6-0.6,1-1,0.9-1.4
        c-0.1-0.6-1.5-0.7-1.9-0.7c-2-0.1-2.9,0.5-5,1c-1.6,0.4-2.8,0.4-4.8,0.5c-2.2,0.1-3.3,0.1-4.3-0.1
        C239.8,20.5,239.1,19.9,237.2,19.7z"/>
      <path class="st2" d="M242.5,28.2c-0.8,1.2-1.3,1.2-1.6,1.9c-0.2,0.6-0.3,1.4,0.2,1.9c0.5,0.5,1.4,0.3,1.6,0.3
        c0.6-0.1,1.1-0.5,2-1.7c0.9-1.2,1.3-1.8,1.9-3.2c1.9-4.2,4.8-5.5,5.2-8.5c0.1-0.6,0.1-1.2-0.3-1.7c-0.6-0.8-1.8-0.8-2-0.8
        c-1.1,0-1.9,0.7-2.5,1.1c-0.8,0.7-1.3,1.4-1.7,2.1c-1.5,2.7-1.2,5.4-2.4,7.7C242.7,27.8,242.5,28.2,242.5,28.2z"/>
      <path class="st2" d="M213.6,47.8c-1.1,0.3-2.3,1.3-2.7,2.6c-0.5,1.8,0.7,3.5,1.7,4.3c1.8,1.5,4.1,0.9,7.5,0.5
        c4.9-0.5,3,0.3,11.1-0.2c8.8-0.5,8.1-1.3,14.9-2c0.1,0,2.1-0.2,4.2-1.4c0.9-0.5,2.1-1.2,2.2-2.2c0.1-1-0.9-1.9-1.2-2.2
        c-3.7-3.1-11-0.8-11.9-0.5c-3.8,1.3-3.6,2.3-6.6,2.8c-1.7,0.3-1.5-0.1-8.4-0.5c-5.6-0.3-5.7-0.1-7.2-0.6
        C215.9,48,214.9,47.5,213.6,47.8z"/>
      <path class="st2" d="M222.2,39.6c-0.7,0-1.6,0-2.1,0.7c-0.6,0.7-0.1,1.9-0.1,2c0.4,1.2,1.6,1.6,1.8,1.7c1,0.4,1.7,0.1,3.4-0.2
        c1-0.2,3.2-0.7,5.1-0.9c1.4-0.1,1.3,0,4.3-0.2c2.4-0.1,3.4-0.3,4.3-1c0.1,0,1.4-1.2,1.2-2c-0.2-0.5-0.8-0.7-1.5-0.8
        c-2.2-0.5-4.1-0.2-5.4,0c-0.9,0.1-2.5,0.2-5.9,0.2C225.7,39.2,224,39.5,222.2,39.6z"/>
      <path class="st2" d="M229.6,35.7c0.2-0.9,0.6-2,1.6-2.7c0.6-0.4,1.2-0.5,2.1-0.6c1-0.1,1.5-0.2,1.8,0c0.9,0.5,0.6,2.5,0.5,3.3
        c-1,6.6-1.4,9.9-1.7,10.8c-1,2.8-3.3,8.3-4.4,8c-0.9-0.2,0.7-4-0.2-11C229.2,43.3,228.8,39.3,229.6,35.7z"/>
      <path class="st2" d="M221.9,60.4c-0.9-0.8-3.3,0.7-3.9,1.1c-3,1.9-2.7,3.7-5.1,4.7c-1.7,0.8-3.7,0.7-4.6,0.6c-2.1-0.1-3.1-0.7-4,0
        c-1,0.8-0.8,2.4-0.7,2.6c0.2,1.7,1.8,3,3.2,3.4c1.2,0.3,2.3,0,3.2-0.4c1.2-0.4,1.9-1,4.1-2.9c5.7-4.9,4.9-4.5,5.7-5
        c0.7-0.4,1.7-0.8,2.1-1.9C222.4,62,222.4,60.8,221.9,60.4z"/>
      <path class="st2" d="M239.9,62c-0.6,0.7-0.4,1.7-0.2,2.9c0.2,1.4,0.7,2.4,0.9,2.6c0.4,0.8,3.5,6.4,8.6,6.6
        c3.1,0.1,6.3-1.8,6.2-3.1c-0.1-1.4-3.7-2.6-5.5-3c-2.2-0.5-3-0.1-4.2-1c-0.6-0.4-1.9-1.6-2.4-3.4c-0.3-1.1,0-1.7-0.5-2.1
        C242.1,60.9,240.6,61.2,239.9,62z"/>
      <path class="st2" d="M219.3,78.8c1.7-2.3,0.9-4,2.5-6.8c0.8-1.4,1.5-1.8,1.9-2c0.7-0.3,1.9-0.6,2.7,0c1.4,1,0.7,4.1,0.1,5.7
        c-0.2,0.5-0.5,1.2-3.2,4.5c-2,2.4-3,3.6-4.2,4.7c-1.9,1.7-3.5,2.8-3.9,3c-3.2,2-4.8,3-5.5,2.6c-0.5-0.3-0.5-1.1-0.5-1.4
        c0-0.7,0.4-1.3,0.9-1.9c1.2-1.5,2.3-2.6,2.5-2.7c1.6-1.6,2.4-2.3,2.9-2.6c1-0.7,1.7-0.9,2.7-1.9C218.3,80,218.8,79.4,219.3,78.8z"
        />
      <path class="st2" d="M223,85c-1.3,0.2-2.4,1.8-2.5,3.2c0,0.8,0.2,2.1,3.7,5.1c3.3,2.8,6.3,4.3,6.6,4.5c3.3,1.7,7.6,4,12.3,4.2
        c0.2,0,2.3,0.1,4.6-0.9c0.9-0.4,2.3-1,2.4-1.9c0-0.6-0.6-1.1-0.7-1.2c-1.1-0.9-2.5-0.7-4-0.6c-2.9,0.2-5.3-0.2-6.6-0.5
        c-2.1-0.5-3.6-1.5-4.7-2.4c-2.9-2.1-3.4-3.8-7.8-7.8C224.9,85.6,224,84.9,223,85z"/>
      <path class="st2" d="M230.4,81c4.9-0.9,6.3-0.7,6.7,0c0.2,0.4,0.1,0.9-0.1,1.4c-0.5,1.3-1.8,1.8-3.5,2.7c0,0-0.1,0.1-3.1,2.4
        c-2.4,1.8-2,3.9-5.8,8.2c-2,2.2-2.4,1.8-7,6c-0.9,0.8-1.4,1.3-2.5,1.9c-1.9,1-3.3,0.7-3.6,1.5c-0.3,0.7,0.4,2,1.4,2.6
        c2.6,1.6,7.4-1.9,10.5-4.1c2.1-1.5,3.4-2.8,5.6-4.9c5-4.7,7.4-8.2,8.6-10c0.4-0.6,1.3-2,2.2-4c1.4-3,2.1-4.5,1.7-5.8
        c-0.8-2.9-5.7-3.9-8.3-4c-1.2,0-3.3-0.1-5.5,1c-3.2,1.7-5.3,5.2-4.6,6.2C223.5,82.8,224.8,82,230.4,81z"/>
    </g>
    <path class="st2" d="M389.8,53.6c0.2-0.5,1.2-0.2,9-1.2c6.5-0.8,7.7-1.5,8.6-0.9c1.1,0.6,1.6,1.7,1,2.5c-0.6,0.7-1.9,0.8-8.3,1.4
      c-5.5,0.5-7.1,0.7-8.7,0C391.3,55.3,389.5,54.5,389.8,53.6z"/>
    <path class="st2" d="M410.4,71.6c-0.1,0.7-1.1,1.4-9.6,3.4c-7,1.7-8.4,1.7-9.5,1.1c-1.3-0.7-2-2.1-1.4-3.1c0.6-1,2-1.2,9-2.6
      c6-1.2,7.8-1.6,9.5-0.9C408.5,69.5,410.6,70.4,410.4,71.6z"/>
    <g>
      <path class="st2" d="M298.2,21.7c1.9-2.1,3.7-4.4,5-6.8c1.9-3.4,6.2-11.3,9.4-4.9c0.7,1.4,0.2,2.9-0.3,4c-1.7,4.4-4.7,7.6-8.2,11
        c-2.2,2.2-4.4,4.5-7,6.2c-1.8,1.2-4,1.9-6.1,1.7c-4.9-0.4,1.3-5.2,2.4-6.3C294.9,25.1,296.6,23.5,298.2,21.7z"/>
      <path class="st2" d="M286.4,54.6c0.2-2.5,0.8-4.8,2.4-5.9c1.2-0.8,2.6-0.1,2.8,0c5.8,3.1,2.2,16.4,1.4,21.9c-1,6.6-2,13.3-3,19.9
        c-0.5,3.4-1,6.8-1.5,10.3c-0.9,5.8-6.6,10.2-6.1,1.3c0.4-7.6,2.4-14.8,3-22.4c0.4-6,0.8-12,1-18C286.4,59.8,286.2,57.1,286.4,54.6
        z"/>
      <path class="st2" d="M314.9,22c4.5-1.3,8.1-1.1,15.1-0.8c2.8,0.1,4.3,0.3,4.8,1.3c0.3,0.6,0.3,1.6-2.1,5.3
        c-1.9,2.8-3.4,4.5-5.6,6.9c-5,5.6-6,7-7.7,6.9c-1.3-0.1-2.8-1.2-2.9-2.4c-0.2-1.9,3.6-2.6,6.4-6.9c0.2-0.4,2.1-3.3,1.3-4.2
        c-0.8-0.8-3.2,1-7.1,1.6c-2.9,0.4-4.9,0.9-6.6-0.3c-1.1-0.8-2.1-2.3-1.9-3.7C309,23.8,311.7,22.9,314.9,22z"/>
      <path class="st2" d="M310.2,47.7c4.4,0.3,7.8-0.4,10.1-1.1c4.2-1.2,5.3-2.7,9.9-3.7c3.6-0.8,4.7-1.4,7.2,0
        c4.1,2.2,4.8,7.2,4.9,8.3c0.4,4.1-1.2,8.2-2.1,12.2c-1,4.3-2,8.6-3.2,12.9c-2.8,9.8-5.4,18.7-10.1,27.6c-0.3,0.6-0.8,1.2-1.4,1.1
        c-0.3-0.1-0.5-0.3-0.7-0.6c-1.4-2-0.4-4.7,0.6-7c5.7-13.7,6.9-29.8,8.5-44.5c0.6-5.5-7.8-2.2-10.6-1.5c-5.5,1.3-6.3,1.7-10.1,2.5
        c-7.3,1.5-10,1.3-12.2,0.2c-0.7-0.3-2.1-1.2-3.2-2.8c-0.5-0.7-1.7-2-1.1-3.2c0.3-0.6,1.2-1.1,5.3-1.1
        C304,47,306.8,47.1,310.2,47.7z"/>
      <path class="st2" d="M302.2,69.6c0.1-0.7,0.9-1.3,7.4-2.6c5.3-1.1,6.4-1,7.1-0.3c0.9,0.8,1.3,2.4,0.8,3.4c-0.5,1-1.6,1.1-6.9,1.9
        c-4.6,0.7-5.9,0.9-7.1,0C303.5,71.9,302,70.8,302.2,69.6z"/>
      <path class="st2" d="M299.6,84.2c3.6-2.6,6.9,1.3,12.2-0.8c3.4-1.3,4.1-3.7,7.4-3.7c1.5,0,3.5,0.5,3.7,1.6c0.3,1.2-2,2.7-3.4,3.7
        c-1.4,0.9-3.3,2-7.1,3.2c-2,0.6-5.8,1.7-10.6,1.9c-3.6,0.1-4.2-0.3-4.5-0.8C296.5,88,297.7,85.5,299.6,84.2z"/>
      <path class="st2" d="M312.7,59.6c-0.4,0.3-0.7,0.6-1,1c-3.6,4.8-3.7,12.2-4,18.6c-0.1,2.7-0.7,5,0,5.6c0.6,0.5,1.6-0.3,2.1-0.9
        c1.1-1.4,1.4-3.4,1.5-4c1.1-8.6,5.6-17,3.6-19.9C313.9,58.7,313.7,58.9,312.7,59.6z"/>
    </g>
    <path class="st2" d="M376.7,17.6c-2.5-1.6-6.6,7.3-7.8,9c-0.3,0.4-0.6,0.9-0.8,1.4c-0.1,0.5-0.1,1.1,0.3,1.5c0.9,0.9,3-0.8,3.7-1.3
      c0.6-0.4,2.7-2.1,4-5.5C376.6,21.2,377.5,18.1,376.7,17.6z"/>
    <path class="st2" d="M378.7,23.5c-0.6,1.3-3.2,7.3-8.2,9.9c-1.4,0.7-2.7,1.1-3.3,2.5c-0.5,1.1-0.3,2.5,0.3,3.5c0.7,1.2,1.9,2,3.2,2
      c1.9-0.1,2.6-2.4,6-7.5c2.9-4.5,4.4-6.7,6-8c2.1-1.8,4.2-2.7,4.6-5c0-0.2,0.3-1.6-0.5-2.5c-1.2-1.3-4.1-0.7-5.8,0.8
      C379.6,20.3,379.7,21.3,378.7,23.5z"/>
    <path class="st2" d="M374,46.7c-1.8,5-2,11.6-2.3,17c-0.4,6.8-0.9,14-1.5,21c-0.6,6.6-2.2,13.3-1.7,20c0.3,3.6,2.4,2.5,3.7,0.4
      c5.2-9,5-20.9,4.7-31.7c-0.2-8.5-0.2-17-0.4-25.6c0-0.8-0.1-1.6-0.4-2.2C375.2,44.3,374.3,45.7,374,46.7z"/>
    <path class="st2" d="M406.7,12.4c2.5,0.1,2.8,0.5,2.9,0.8c0.6,1.2-1.7,3.4-2,3.7c-1.5,1.5-2.7,1.8-5.4,3c-5.3,2.4-6.1,3.8-8.4,3.4
      c-1.7-0.3-3.5-1.2-3.5-1.9c0-0.5,0.9-0.6,2.1-1.3c1.1-0.7,1.5-1.2,3.5-3.1c2.3-2.3,3.5-3.4,3.9-3.7
      C401.9,12.2,403.9,12.3,406.7,12.4z"/>
    <path class="st2" d="M386.2,34.1c5.4-6.2,16-7.6,24-8.5c1-0.1,2.1-0.2,3.1,0.2c1.7,0.7,2,2.5,0.1,3c-4.5,1.2-9.5,1.1-13.7,3.1
      c-3.8,1.8-6.6,4.4-11,5.2c-0.8,0.2-1.7,0.3-2.4-0.1C385,36.2,385.3,35.2,386.2,34.1z"/>
    <path class="st2" d="M385.1,85.3c0.1-1.9,3.4-3,9.1-5c4.5-1.6,6.2-1.7,6.9-1.7c1.6,0,2.1,0.2,3.9,0c0.5-0.1,2.5-0.3,5.4-1.3
      c4.3-1.6,5.2-3.2,6.6-2.7c1.7,0.6,3.1,3.3,2.5,5c-0.9,2.8-6.2,0.1-14.5,2.8c-2.3,0.7-10,3.6-15,5.2c-0.7,0.2-2.5,0.8-3.8-0.2
      C385.9,87.1,385.1,86.3,385.1,85.3z"/>
    <path class="st2" d="M422.5,17.5c-2.3,2.5-3.4,3.2-3.2,3.7c0.2,0.5,1.7,0.1,4.7-0.5c4-0.9,3.9-1.2,5.4-1.2c2.3,0,3.2,0.8,4.3,0
      c0.8-0.6,1.3-1.9,1.1-3c-0.2-1-0.9-1.7-1.3-2c-2-1.8-5.6-1.9-8-0.3C424.6,14.7,425,14.8,422.5,17.5z"/>
    <path class="st2" d="M418.4,32.6c0.3-1.5,2.2-1.6,8.7-3.7c2.6-0.8,4.8-1.7,8-1.7c1.9,0,3.1,0.3,3.6,1.2c0.4,0.7,0.4,1.8,0,2.5
      c-0.9,1.6-3.2,0.4-6.5,1.3c-3.7,1.1-3.7,3.4-7.6,4.2c-1.2,0.3-3.3,0.7-4.9-0.7C419.1,35.1,418.1,33.8,418.4,32.6z"/>
    <path class="st2" d="M398.9,18.7c1.2-1.1,3.2-1.8,4.1-1.1c1,0.9,0.3,3.5,0,4.7c-1.4,5.3-0.9,11-1.4,16.5c-0.2,2.2-1.7,17,1.2,29.2
      c0.3,1.3,1.6,8.5-0.2,12.3c-0.9,1.9-2.7,0.9-3.7,0.5c-1.2-0.4-0.4-4.2-0.8-11.4c-0.3-6-1-5.6-1.4-12.4c-0.1-1.4-0.1-5.1-0.2-12.6
      c0-1,0-4.7,0-9.4c0-3.3,0.1-4.9,0.2-6.9C397.1,20.8,398.1,19.4,398.9,18.7z"/>
    <path class="st2" d="M426.9,43.3c-3.2,2.5-0.7,8.9,0,19.1c0.5,7.2,0.9,26.1-2.2,36.6c-0.3,1.1-1.3,4.3,0,5.7c1,1.1,3.3,1,4.7,0
      c2.5-1.7,2.1-5.8,2.2-13c0.1-5,0.2,2.3,0.9-14.7c0.3-6.3,0.4-12.7,0.2-19c-0.1-3,1.4-13.2-1.5-15.1
      C430.1,41.9,428.1,42.3,426.9,43.3z"/>
    <path class="st2" d="M413.7,46.6c-2.1-5.5-9.4-3.1-13.4-2.3c-3.4,0.6-7.1,0.3-10.3,1.4c-0.6,0.2-1.1,0.5-1.6,0.8
      c-1.4,1-1,3.4-0.9,4.9c0.1,2.3,0.2,4.5,0.2,6.8c0.1,2,0.1,4.4,1.9,5.6c1.2,0.8,2.5,0.3,3.9,0c2.9-0.7,5.8-0.7,8.8-0.5
      c2.8,0.2,5.6,0.8,8.4,0.9c0.6,0,1.1,0,1.6-0.3c1.7-1,1.2-3.4,1.1-5.1c0-2.1,0-4.3,0.4-6.4C413.9,50.5,414.4,48.5,413.7,46.6z
       M409.6,53.9c0,1.7,0.1,3.4,0,5c-0.1,0.9-0.6,1.4-1.4,1.3c-4.4-0.3-8.9-0.6-13.4,0.4c-1,0.2-1.9,0.6-2.8,0c-1.3-0.9-1.3-2.6-1.3-4
      c-0.1-1.6-0.1-3.2-0.2-4.8c0-1.1-0.3-2.8,0.7-3.5c0.3-0.2,0.7-0.4,1.1-0.6c2.3-0.8,5-0.6,7.4-1c2.9-0.5,8.1-2.2,9.6,1.7
      c0.6,1.5,0.5,3,0.3,4.4C409.7,53.2,409.6,53.5,409.6,53.9z"/>
    <path class="st2" d="M472.6,25.3c-1.8-2.7-4.6-4.6-7.3-2c-1.5,1.4-1.6,3.9-0.1,5.4c1.1,1.2,2.7,1.3,4.1,2c1.9,1,6.3,4.5,5.6-0.4
      C474.7,28.5,473.6,26.8,472.6,25.3z"/>
    <path class="st2" d="M471.8,49.6c-6.4,1.9-9.3,1.2-10,2.7c-0.6,1.4,1.2,3.4,3.1,4.4c2.6,1.3,5.5,0.6,7.9,0c1.2-0.3,8.3-2,8.6-5.5
      c0.1-1.2-0.7-2.7-2.1-3.3C477.6,47.2,476,48.3,471.8,49.6z"/>
    <path class="st2" d="M474.4,70.9c-1.8-0.2-3.7,5.6-7.4,17.4c-1.6,5.2-3.7,12.2,2.5,13.1c1.7,0.3,3.7-0.2,4.8-2.1
      c0.8-1.5,0.9-3.5,0.7-5.3c-0.4-4.5-0.6-9,0.9-13.3c0.4-1,0.8-2,1-3.1C477.4,75.4,476.5,71.2,474.4,70.9z"/>
    <path class="st2" d="M500.1,15.5c-1,0.5-2.2,1.1-2.9,2.5c-1,2.1-0.2,4.9,1.4,6.2c1,0.7,1.6,0.5,5.4,0.7c5.4,0.3,6.3,0.9,7.2,0
      c1.6-1.4,1.4-4.5,0.4-6.5c-0.9-1.7-2.3-2.5-2.9-2.9C504.8,13.2,500.5,15.3,500.1,15.5z"/>
    <path class="st2" d="M514.6,53.2c-0.2,0.4-0.5,0.7-0.8,0.9c-0.9,0.6-2.1,0.3-3.2,0.3c-4.9,0-8.8,0.5-13.5,2.6
      c-2.1,0.9-4.2,4.7-0.2,3.7c5.3-1.3,10.7-2.1,16.2-2.3c1.7-0.1,3.6-0.1,4.9-1.3c0.6-0.6,0.9-1.3,1.3-2c1.8-3.9,3.3-7.9,4.4-12
      c1.2-4.5,3.9-11.5-1.7-14.2c-2.9-1.4-6-0.9-9-0.1c-5.1,1.4-10.7,3-15.2,6c-2,1.3-3.7,2.3-3.9,4.7c-0.1,0.6,0,1.3,0.5,1.6
      c0.5,0.3,1.2,0.1,1.8-0.1c0.5-0.2,1.1-0.4,1.6-0.7c2.9-1.3,5.8-3,8.7-4.3c2-0.9,4.2-1.7,6.3-2.2c2.2-0.5,6.1-1.9,6,1.6
      c-0.1,3.4-0.7,6.8-1.6,10.2c-0.5,1.7-1,3.3-1.5,4.9C515.3,51.3,515.1,52.4,514.6,53.2z"/>
    <path class="st2" d="M488.5,39.8c0.1,0,0.1,0,0.2,0c0.4,0.1,0.8,0.4,1.1,0.8c1.8,2.1,2.6,5.4,3.1,8c0.6,3.4,0.7,6.9,0.3,10.3
      c-1.6,12.8-3.7,28.7,0.5,30.6c1.1,0.5,2.5,0.5,3.6,0.4c2.1-0.3,4.6-0.2,6.6,0.6c3.8,1.6,2.3,5.8-0.4,7.7c-4,2.7-10,0.3-13-2.8
      c-0.7-0.7-2.1-2.2-3.6-10.5c-1.2-6.4-1.8-13-2.1-19.5c-0.2-3.3-0.3-6.5-0.4-9.8c-0.1-3-0.5-6.1-0.1-9.1
      C484.5,44.7,485.8,39.5,488.5,39.8z"/>
    <path class="st2" d="M498.5,70.4c0.6-0.6,2.3-1.2,13.6,4.7c8.9,4.6,11.4,6.8,13,8.5c2.2,2.2,6.1,6.3,4.9,8.9
      c-0.9,1.8-4,2.4-6.3,1.8c-2.4-0.6-3-2.7-5.3-5.8c-1.1-1.5-4.2-5.8-8.5-8.3c-5.6-3.4-9.9-1.9-11.6-5.3
      C497.6,73.5,497.4,71.3,498.5,70.4z"/>
    <path class="st2" d="M517.7,69.4C517.7,69.4,517.7,69.4,517.7,69.4c1.6-1.5,3.2-3,4.7-4.5c1.6-1.5,3.2-3.1,5.5-3.9
      c2.1-0.7,2.9,1.8,2.3,3.1c-0.3,0.5-0.7,1-1.2,1.3c-1.1,1-2.5,1.7-3.7,2.6c-1.2,1-2.3,2.2-3.2,3.4c-0.8,1.1-1.7,2.7-3.4,2.7
      c-1,0-2.2-0.4-2.5-1.1C515.6,71.6,516.8,70.3,517.7,69.4z"/>
    <path class="st2" d="M495,48c0.8-0.3,1.6-0.5,1.9-0.6c3.4-1,6.8-1.9,10.2-3c1.1-0.4,4.6-2.2,5.7-1c1,1.1-0.3,4.8-2.9,6.5
      c-1.7,1.2-3.1,0.9-7.2,1.1c-7.6,0.3-11,1.6-11.4,0.5C490.6,50,493,48.8,495,48z"/>
  </g>
    </svg>
    <svg class="curve" x="0px" y="0px"
     viewBox="100 0 1040 142" style="enable-background:new 0 0 1031 142;" width="500px",height="144px",viewBox="0 0 1440 1440">
    <path class="st0" d="M702.5,140c-125.6,0-249.7-42-315.3-68.5c-26.6-10.7-48.9-21.1-68.5-30.3C267.8,17.4,234.2,1.7,182.4,5.6
      C122.3,10.1,63.6,39.7,8,93.6l-2.4-2.5c56.2-54.5,115.7-84.4,176.6-89c52.7-3.9,88.4,12.8,137.9,35.9c19.6,9.2,41.8,19.5,68.4,30.2
      c70.7,28.5,209.4,75.1,344.3,67.4c101.2-5.8,201.3-43,297.6-110.7l2,2.9c-96.9,68-197.6,105.5-299.4,111.3
      C722.8,139.7,712.6,140,702.5,140z"/>
  </svg>
    <svg class="curve-2" x="0px" y="0px"
     viewBox="0 0 248 264.9" style="enable-background:new 0 0 248 264.9;" >
  <path class="st0" d="M230.6,265c-10.8-15.4-23.8-38.6-30.2-69.7c-17.2-83.5,27.3-156.6,7.3-179.9c-9.3-10.8-26.7-3.8-41.8,2.6
    C124.3,35.6,68.5,61.3-0.5,97.1V265L230.6,265z"/>
    </svg>
  </div>
<!--   </div>
</div>

<div id="parallxWrapper">
  <div class="parallxBackground" data-bind="attr: { style:'-webkit-transform:perspective(1000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg);transform:perspective(1000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg)' }"> -->

  <div class="card card-w">
    <div class="detail">
      <div class="phone">
        09123456789
      </div>
      <div>
        ๆฑๅŒ—่ง’ๆŸๅ€‹ๅœฐๆ–น
      </div>
    </div>
    <svg class="brand-name" x="0px" y="0px"
     viewBox="0 0 600 119" style="enable-background:new 0 0 600 119;">
       <g>
    <path class="st0" d="M98.2,26.1c-2-1-2.7,1.6-5.7,6.8c-2.1,3.7-7,3.4-10.6,2.6c-4.2-1-7.3-3.7-10.3-6.7c0,0-0.1-0.1-0.1-0.1
      C62.5,20.7,35.8,10,26.5,41.4c-2,9.1,4.3,6,9.9-1.7c3.6-4.8,11.2-3.3,12.9,2.5C55,62.9,61,89.8,83,99.1c3,1.3,6.1,2,9.2,2.6
      c14,2.2,21.4-2.7,32.1-10.7c10.2-7.7,18.4-26.1,19.8-43.1c1.1-6.8,0-21.8,23.5-10.8c3.1,2,7.1,4,7.7,3.1c0-8.5-16.2-21.3-16.2-21.3
      S143.1,7.6,128,25.8c-3.2,3.8-7,7.3-11.7,9.1c-2.9,1.1-6,1.5-9,1c-1.4-0.3-3.3-0.8-4.5-1.6c-0.7-0.5-1-1.3-1.2-2.1
      c-0.3-0.9-0.6-1.9-1-2.7C100,28.4,99.4,26.7,98.2,26.1z"/>
    <path class="st1" d="M101,23.5c-1.9-1-2.6,1.6-5.5,6.5c-2,3.5-6.8,3.3-10.2,2.5c-4-1-7-3.6-9.9-6.4c0,0-0.1-0.1-0.1-0.1
      C66.6,18.3,41,8,32,38.3c-1.9,8.7,4.1,5.7,9.5-1.6c3.4-4.6,10.8-3.2,12.4,2.4c5.6,19.9,11.2,45.8,32.4,54.7
      c2.9,1.2,5.8,1.9,8.9,2.5c13.5,2.2,20.6-2.6,30.9-10.3c9.8-7.4,17.7-25.1,19.1-41.5c1.1-6.5,0-21,22.6-10.4c3,1.9,6.8,3.8,7.4,3
      c0-8.2-15.5-20.5-15.5-20.5s-15.5-11-30,6.5c-3,3.7-6.8,7-11.3,8.8c-2.8,1.1-5.8,1.5-8.7,0.9c-1.4-0.2-3.2-0.7-4.3-1.6
      c-0.7-0.5-0.9-1.3-1.2-2c-0.3-0.9-0.6-1.8-1-2.6C102.7,25.7,102.1,24.1,101,23.5z"/>
  </g>
  <g>
    <g>
      <path class="st2" d="M219.4,21c-1.2,0.6-3.8,1.9-6.7,2.2c-2.7,0.2-4,0.3-4.6,0.2c-0.3-0.1-1-0.3-1.2,0c-0.1,0.1-0.2,0.3,0.2,1.1
        c0.2,0.3,0.9,1.7,2.4,2.5c2.2,1.2,4.9,0.7,7.8,0.2c3.5-0.7,5.9-1.1,7.8-3.1c0,0,1.4-1.4,2-4.1c0.1-0.3,0.2-0.8-0.1-1.1
        c-0.4-0.5-1.4-0.3-1.9-0.2C222.7,19.2,220.6,20.4,219.4,21z"/>
      <path class="st2" d="M213.1,18.3c1-0.1,2,1.5,3.2,3.4c2.4,3.6,3.5,4.3,4.5,7c0.5,1.4,0.6,2.3,0.1,2.9c-0.4,0.5-1.1,0.7-1.7,0.7
        c-0.9-0.1-1.5-0.9-2-1.8c-2.5-4.1-2.4-7-3.9-8.8c-0.6-0.7-0.7-1-1-1.7c-0.3-0.8-0.2-1.2-0.1-1.4C212.5,18.4,213,18.3,213.1,18.3z"
        />
      <path class="st2" d="M237.2,19.7c-1.1-0.1-1.7,0-2.1,0.4c-0.7,0.6-0.7,1.5-0.7,1.7c0,1,0.5,1.7,0.7,1.9c0.6,0.8,1.5,1.2,2.1,1.4
        c4.9,1.6,13.9-0.3,15.7-0.9c0.2-0.1,0.6-0.2,1.1-0.5c0.4-0.3,0.7-0.5,1.3-1.1c0.8-0.7,0.9-0.7,1.2-1c0.6-0.6,1-1,0.9-1.4
        c-0.1-0.6-1.5-0.7-1.9-0.7c-2-0.1-2.9,0.5-5,1c-1.6,0.4-2.8,0.4-4.8,0.5c-2.2,0.1-3.3,0.1-4.3-0.1
        C239.8,20.5,239.1,19.9,237.2,19.7z"/>
      <path class="st2" d="M242.5,28.2c-0.8,1.2-1.3,1.2-1.6,1.9c-0.2,0.6-0.3,1.4,0.2,1.9c0.5,0.5,1.4,0.3,1.6,0.3
        c0.6-0.1,1.1-0.5,2-1.7c0.9-1.2,1.3-1.8,1.9-3.2c1.9-4.2,4.8-5.5,5.2-8.5c0.1-0.6,0.1-1.2-0.3-1.7c-0.6-0.8-1.8-0.8-2-0.8
        c-1.1,0-1.9,0.7-2.5,1.1c-0.8,0.7-1.3,1.4-1.7,2.1c-1.5,2.7-1.2,5.4-2.4,7.7C242.7,27.8,242.5,28.2,242.5,28.2z"/>
      <path class="st2" d="M213.6,47.8c-1.1,0.3-2.3,1.3-2.7,2.6c-0.5,1.8,0.7,3.5,1.7,4.3c1.8,1.5,4.1,0.9,7.5,0.5
        c4.9-0.5,3,0.3,11.1-0.2c8.8-0.5,8.1-1.3,14.9-2c0.1,0,2.1-0.2,4.2-1.4c0.9-0.5,2.1-1.2,2.2-2.2c0.1-1-0.9-1.9-1.2-2.2
        c-3.7-3.1-11-0.8-11.9-0.5c-3.8,1.3-3.6,2.3-6.6,2.8c-1.7,0.3-1.5-0.1-8.4-0.5c-5.6-0.3-5.7-0.1-7.2-0.6
        C215.9,48,214.9,47.5,213.6,47.8z"/>
      <path class="st2" d="M222.2,39.6c-0.7,0-1.6,0-2.1,0.7c-0.6,0.7-0.1,1.9-0.1,2c0.4,1.2,1.6,1.6,1.8,1.7c1,0.4,1.7,0.1,3.4-0.2
        c1-0.2,3.2-0.7,5.1-0.9c1.4-0.1,1.3,0,4.3-0.2c2.4-0.1,3.4-0.3,4.3-1c0.1,0,1.4-1.2,1.2-2c-0.2-0.5-0.8-0.7-1.5-0.8
        c-2.2-0.5-4.1-0.2-5.4,0c-0.9,0.1-2.5,0.2-5.9,0.2C225.7,39.2,224,39.5,222.2,39.6z"/>
      <path class="st2" d="M229.6,35.7c0.2-0.9,0.6-2,1.6-2.7c0.6-0.4,1.2-0.5,2.1-0.6c1-0.1,1.5-0.2,1.8,0c0.9,0.5,0.6,2.5,0.5,3.3
        c-1,6.6-1.4,9.9-1.7,10.8c-1,2.8-3.3,8.3-4.4,8c-0.9-0.2,0.7-4-0.2-11C229.2,43.3,228.8,39.3,229.6,35.7z"/>
      <path class="st2" d="M221.9,60.4c-0.9-0.8-3.3,0.7-3.9,1.1c-3,1.9-2.7,3.7-5.1,4.7c-1.7,0.8-3.7,0.7-4.6,0.6c-2.1-0.1-3.1-0.7-4,0
        c-1,0.8-0.8,2.4-0.7,2.6c0.2,1.7,1.8,3,3.2,3.4c1.2,0.3,2.3,0,3.2-0.4c1.2-0.4,1.9-1,4.1-2.9c5.7-4.9,4.9-4.5,5.7-5
        c0.7-0.4,1.7-0.8,2.1-1.9C222.4,62,222.4,60.8,221.9,60.4z"/>
      <path class="st2" d="M239.9,62c-0.6,0.7-0.4,1.7-0.2,2.9c0.2,1.4,0.7,2.4,0.9,2.6c0.4,0.8,3.5,6.4,8.6,6.6
        c3.1,0.1,6.3-1.8,6.2-3.1c-0.1-1.4-3.7-2.6-5.5-3c-2.2-0.5-3-0.1-4.2-1c-0.6-0.4-1.9-1.6-2.4-3.4c-0.3-1.1,0-1.7-0.5-2.1
        C242.1,60.9,240.6,61.2,239.9,62z"/>
      <path class="st2" d="M219.3,78.8c1.7-2.3,0.9-4,2.5-6.8c0.8-1.4,1.5-1.8,1.9-2c0.7-0.3,1.9-0.6,2.7,0c1.4,1,0.7,4.1,0.1,5.7
        c-0.2,0.5-0.5,1.2-3.2,4.5c-2,2.4-3,3.6-4.2,4.7c-1.9,1.7-3.5,2.8-3.9,3c-3.2,2-4.8,3-5.5,2.6c-0.5-0.3-0.5-1.1-0.5-1.4
        c0-0.7,0.4-1.3,0.9-1.9c1.2-1.5,2.3-2.6,2.5-2.7c1.6-1.6,2.4-2.3,2.9-2.6c1-0.7,1.7-0.9,2.7-1.9C218.3,80,218.8,79.4,219.3,78.8z"
        />
      <path class="st2" d="M223,85c-1.3,0.2-2.4,1.8-2.5,3.2c0,0.8,0.2,2.1,3.7,5.1c3.3,2.8,6.3,4.3,6.6,4.5c3.3,1.7,7.6,4,12.3,4.2
        c0.2,0,2.3,0.1,4.6-0.9c0.9-0.4,2.3-1,2.4-1.9c0-0.6-0.6-1.1-0.7-1.2c-1.1-0.9-2.5-0.7-4-0.6c-2.9,0.2-5.3-0.2-6.6-0.5
        c-2.1-0.5-3.6-1.5-4.7-2.4c-2.9-2.1-3.4-3.8-7.8-7.8C224.9,85.6,224,84.9,223,85z"/>
      <path class="st2" d="M230.4,81c4.9-0.9,6.3-0.7,6.7,0c0.2,0.4,0.1,0.9-0.1,1.4c-0.5,1.3-1.8,1.8-3.5,2.7c0,0-0.1,0.1-3.1,2.4
        c-2.4,1.8-2,3.9-5.8,8.2c-2,2.2-2.4,1.8-7,6c-0.9,0.8-1.4,1.3-2.5,1.9c-1.9,1-3.3,0.7-3.6,1.5c-0.3,0.7,0.4,2,1.4,2.6
        c2.6,1.6,7.4-1.9,10.5-4.1c2.1-1.5,3.4-2.8,5.6-4.9c5-4.7,7.4-8.2,8.6-10c0.4-0.6,1.3-2,2.2-4c1.4-3,2.1-4.5,1.7-5.8
        c-0.8-2.9-5.7-3.9-8.3-4c-1.2,0-3.3-0.1-5.5,1c-3.2,1.7-5.3,5.2-4.6,6.2C223.5,82.8,224.8,82,230.4,81z"/>
    </g>
    <path class="st2" d="M389.8,53.6c0.2-0.5,1.2-0.2,9-1.2c6.5-0.8,7.7-1.5,8.6-0.9c1.1,0.6,1.6,1.7,1,2.5c-0.6,0.7-1.9,0.8-8.3,1.4
      c-5.5,0.5-7.1,0.7-8.7,0C391.3,55.3,389.5,54.5,389.8,53.6z"/>
    <path class="st2" d="M410.4,71.6c-0.1,0.7-1.1,1.4-9.6,3.4c-7,1.7-8.4,1.7-9.5,1.1c-1.3-0.7-2-2.1-1.4-3.1c0.6-1,2-1.2,9-2.6
      c6-1.2,7.8-1.6,9.5-0.9C408.5,69.5,410.6,70.4,410.4,71.6z"/>
    <g>
      <path class="st2" d="M298.2,21.7c1.9-2.1,3.7-4.4,5-6.8c1.9-3.4,6.2-11.3,9.4-4.9c0.7,1.4,0.2,2.9-0.3,4c-1.7,4.4-4.7,7.6-8.2,11
        c-2.2,2.2-4.4,4.5-7,6.2c-1.8,1.2-4,1.9-6.1,1.7c-4.9-0.4,1.3-5.2,2.4-6.3C294.9,25.1,296.6,23.5,298.2,21.7z"/>
      <path class="st2" d="M286.4,54.6c0.2-2.5,0.8-4.8,2.4-5.9c1.2-0.8,2.6-0.1,2.8,0c5.8,3.1,2.2,16.4,1.4,21.9c-1,6.6-2,13.3-3,19.9
        c-0.5,3.4-1,6.8-1.5,10.3c-0.9,5.8-6.6,10.2-6.1,1.3c0.4-7.6,2.4-14.8,3-22.4c0.4-6,0.8-12,1-18C286.4,59.8,286.2,57.1,286.4,54.6
        z"/>
      <path class="st2" d="M314.9,22c4.5-1.3,8.1-1.1,15.1-0.8c2.8,0.1,4.3,0.3,4.8,1.3c0.3,0.6,0.3,1.6-2.1,5.3
        c-1.9,2.8-3.4,4.5-5.6,6.9c-5,5.6-6,7-7.7,6.9c-1.3-0.1-2.8-1.2-2.9-2.4c-0.2-1.9,3.6-2.6,6.4-6.9c0.2-0.4,2.1-3.3,1.3-4.2
        c-0.8-0.8-3.2,1-7.1,1.6c-2.9,0.4-4.9,0.9-6.6-0.3c-1.1-0.8-2.1-2.3-1.9-3.7C309,23.8,311.7,22.9,314.9,22z"/>
      <path class="st2" d="M310.2,47.7c4.4,0.3,7.8-0.4,10.1-1.1c4.2-1.2,5.3-2.7,9.9-3.7c3.6-0.8,4.7-1.4,7.2,0
        c4.1,2.2,4.8,7.2,4.9,8.3c0.4,4.1-1.2,8.2-2.1,12.2c-1,4.3-2,8.6-3.2,12.9c-2.8,9.8-5.4,18.7-10.1,27.6c-0.3,0.6-0.8,1.2-1.4,1.1
        c-0.3-0.1-0.5-0.3-0.7-0.6c-1.4-2-0.4-4.7,0.6-7c5.7-13.7,6.9-29.8,8.5-44.5c0.6-5.5-7.8-2.2-10.6-1.5c-5.5,1.3-6.3,1.7-10.1,2.5
        c-7.3,1.5-10,1.3-12.2,0.2c-0.7-0.3-2.1-1.2-3.2-2.8c-0.5-0.7-1.7-2-1.1-3.2c0.3-0.6,1.2-1.1,5.3-1.1
        C304,47,306.8,47.1,310.2,47.7z"/>
      <path class="st2" d="M302.2,69.6c0.1-0.7,0.9-1.3,7.4-2.6c5.3-1.1,6.4-1,7.1-0.3c0.9,0.8,1.3,2.4,0.8,3.4c-0.5,1-1.6,1.1-6.9,1.9
        c-4.6,0.7-5.9,0.9-7.1,0C303.5,71.9,302,70.8,302.2,69.6z"/>
      <path class="st2" d="M299.6,84.2c3.6-2.6,6.9,1.3,12.2-0.8c3.4-1.3,4.1-3.7,7.4-3.7c1.5,0,3.5,0.5,3.7,1.6c0.3,1.2-2,2.7-3.4,3.7
        c-1.4,0.9-3.3,2-7.1,3.2c-2,0.6-5.8,1.7-10.6,1.9c-3.6,0.1-4.2-0.3-4.5-0.8C296.5,88,297.7,85.5,299.6,84.2z"/>
      <path class="st2" d="M312.7,59.6c-0.4,0.3-0.7,0.6-1,1c-3.6,4.8-3.7,12.2-4,18.6c-0.1,2.7-0.7,5,0,5.6c0.6,0.5,1.6-0.3,2.1-0.9
        c1.1-1.4,1.4-3.4,1.5-4c1.1-8.6,5.6-17,3.6-19.9C313.9,58.7,313.7,58.9,312.7,59.6z"/>
    </g>
    <path class="st2" d="M376.7,17.6c-2.5-1.6-6.6,7.3-7.8,9c-0.3,0.4-0.6,0.9-0.8,1.4c-0.1,0.5-0.1,1.1,0.3,1.5c0.9,0.9,3-0.8,3.7-1.3
      c0.6-0.4,2.7-2.1,4-5.5C376.6,21.2,377.5,18.1,376.7,17.6z"/>
    <path class="st2" d="M378.7,23.5c-0.6,1.3-3.2,7.3-8.2,9.9c-1.4,0.7-2.7,1.1-3.3,2.5c-0.5,1.1-0.3,2.5,0.3,3.5c0.7,1.2,1.9,2,3.2,2
      c1.9-0.1,2.6-2.4,6-7.5c2.9-4.5,4.4-6.7,6-8c2.1-1.8,4.2-2.7,4.6-5c0-0.2,0.3-1.6-0.5-2.5c-1.2-1.3-4.1-0.7-5.8,0.8
      C379.6,20.3,379.7,21.3,378.7,23.5z"/>
    <path class="st2" d="M374,46.7c-1.8,5-2,11.6-2.3,17c-0.4,6.8-0.9,14-1.5,21c-0.6,6.6-2.2,13.3-1.7,20c0.3,3.6,2.4,2.5,3.7,0.4
      c5.2-9,5-20.9,4.7-31.7c-0.2-8.5-0.2-17-0.4-25.6c0-0.8-0.1-1.6-0.4-2.2C375.2,44.3,374.3,45.7,374,46.7z"/>
    <path class="st2" d="M406.7,12.4c2.5,0.1,2.8,0.5,2.9,0.8c0.6,1.2-1.7,3.4-2,3.7c-1.5,1.5-2.7,1.8-5.4,3c-5.3,2.4-6.1,3.8-8.4,3.4
      c-1.7-0.3-3.5-1.2-3.5-1.9c0-0.5,0.9-0.6,2.1-1.3c1.1-0.7,1.5-1.2,3.5-3.1c2.3-2.3,3.5-3.4,3.9-3.7
      C401.9,12.2,403.9,12.3,406.7,12.4z"/>
    <path class="st2" d="M386.2,34.1c5.4-6.2,16-7.6,24-8.5c1-0.1,2.1-0.2,3.1,0.2c1.7,0.7,2,2.5,0.1,3c-4.5,1.2-9.5,1.1-13.7,3.1
      c-3.8,1.8-6.6,4.4-11,5.2c-0.8,0.2-1.7,0.3-2.4-0.1C385,36.2,385.3,35.2,386.2,34.1z"/>
    <path class="st2" d="M385.1,85.3c0.1-1.9,3.4-3,9.1-5c4.5-1.6,6.2-1.7,6.9-1.7c1.6,0,2.1,0.2,3.9,0c0.5-0.1,2.5-0.3,5.4-1.3
      c4.3-1.6,5.2-3.2,6.6-2.7c1.7,0.6,3.1,3.3,2.5,5c-0.9,2.8-6.2,0.1-14.5,2.8c-2.3,0.7-10,3.6-15,5.2c-0.7,0.2-2.5,0.8-3.8-0.2
      C385.9,87.1,385.1,86.3,385.1,85.3z"/>
    <path class="st2" d="M422.5,17.5c-2.3,2.5-3.4,3.2-3.2,3.7c0.2,0.5,1.7,0.1,4.7-0.5c4-0.9,3.9-1.2,5.4-1.2c2.3,0,3.2,0.8,4.3,0
      c0.8-0.6,1.3-1.9,1.1-3c-0.2-1-0.9-1.7-1.3-2c-2-1.8-5.6-1.9-8-0.3C424.6,14.7,425,14.8,422.5,17.5z"/>
    <path class="st2" d="M418.4,32.6c0.3-1.5,2.2-1.6,8.7-3.7c2.6-0.8,4.8-1.7,8-1.7c1.9,0,3.1,0.3,3.6,1.2c0.4,0.7,0.4,1.8,0,2.5
      c-0.9,1.6-3.2,0.4-6.5,1.3c-3.7,1.1-3.7,3.4-7.6,4.2c-1.2,0.3-3.3,0.7-4.9-0.7C419.1,35.1,418.1,33.8,418.4,32.6z"/>
    <path class="st2" d="M398.9,18.7c1.2-1.1,3.2-1.8,4.1-1.1c1,0.9,0.3,3.5,0,4.7c-1.4,5.3-0.9,11-1.4,16.5c-0.2,2.2-1.7,17,1.2,29.2
      c0.3,1.3,1.6,8.5-0.2,12.3c-0.9,1.9-2.7,0.9-3.7,0.5c-1.2-0.4-0.4-4.2-0.8-11.4c-0.3-6-1-5.6-1.4-12.4c-0.1-1.4-0.1-5.1-0.2-12.6
      c0-1,0-4.7,0-9.4c0-3.3,0.1-4.9,0.2-6.9C397.1,20.8,398.1,19.4,398.9,18.7z"/>
    <path class="st2" d="M426.9,43.3c-3.2,2.5-0.7,8.9,0,19.1c0.5,7.2,0.9,26.1-2.2,36.6c-0.3,1.1-1.3,4.3,0,5.7c1,1.1,3.3,1,4.7,0
      c2.5-1.7,2.1-5.8,2.2-13c0.1-5,0.2,2.3,0.9-14.7c0.3-6.3,0.4-12.7,0.2-19c-0.1-3,1.4-13.2-1.5-15.1
      C430.1,41.9,428.1,42.3,426.9,43.3z"/>
    <path class="st2" d="M413.7,46.6c-2.1-5.5-9.4-3.1-13.4-2.3c-3.4,0.6-7.1,0.3-10.3,1.4c-0.6,0.2-1.1,0.5-1.6,0.8
      c-1.4,1-1,3.4-0.9,4.9c0.1,2.3,0.2,4.5,0.2,6.8c0.1,2,0.1,4.4,1.9,5.6c1.2,0.8,2.5,0.3,3.9,0c2.9-0.7,5.8-0.7,8.8-0.5
      c2.8,0.2,5.6,0.8,8.4,0.9c0.6,0,1.1,0,1.6-0.3c1.7-1,1.2-3.4,1.1-5.1c0-2.1,0-4.3,0.4-6.4C413.9,50.5,414.4,48.5,413.7,46.6z
       M409.6,53.9c0,1.7,0.1,3.4,0,5c-0.1,0.9-0.6,1.4-1.4,1.3c-4.4-0.3-8.9-0.6-13.4,0.4c-1,0.2-1.9,0.6-2.8,0c-1.3-0.9-1.3-2.6-1.3-4
      c-0.1-1.6-0.1-3.2-0.2-4.8c0-1.1-0.3-2.8,0.7-3.5c0.3-0.2,0.7-0.4,1.1-0.6c2.3-0.8,5-0.6,7.4-1c2.9-0.5,8.1-2.2,9.6,1.7
      c0.6,1.5,0.5,3,0.3,4.4C409.7,53.2,409.6,53.5,409.6,53.9z"/>
    <path class="st2" d="M472.6,25.3c-1.8-2.7-4.6-4.6-7.3-2c-1.5,1.4-1.6,3.9-0.1,5.4c1.1,1.2,2.7,1.3,4.1,2c1.9,1,6.3,4.5,5.6-0.4
      C474.7,28.5,473.6,26.8,472.6,25.3z"/>
    <path class="st2" d="M471.8,49.6c-6.4,1.9-9.3,1.2-10,2.7c-0.6,1.4,1.2,3.4,3.1,4.4c2.6,1.3,5.5,0.6,7.9,0c1.2-0.3,8.3-2,8.6-5.5
      c0.1-1.2-0.7-2.7-2.1-3.3C477.6,47.2,476,48.3,471.8,49.6z"/>
    <path class="st2" d="M474.4,70.9c-1.8-0.2-3.7,5.6-7.4,17.4c-1.6,5.2-3.7,12.2,2.5,13.1c1.7,0.3,3.7-0.2,4.8-2.1
      c0.8-1.5,0.9-3.5,0.7-5.3c-0.4-4.5-0.6-9,0.9-13.3c0.4-1,0.8-2,1-3.1C477.4,75.4,476.5,71.2,474.4,70.9z"/>
    <path class="st2" d="M500.1,15.5c-1,0.5-2.2,1.1-2.9,2.5c-1,2.1-0.2,4.9,1.4,6.2c1,0.7,1.6,0.5,5.4,0.7c5.4,0.3,6.3,0.9,7.2,0
      c1.6-1.4,1.4-4.5,0.4-6.5c-0.9-1.7-2.3-2.5-2.9-2.9C504.8,13.2,500.5,15.3,500.1,15.5z"/>
    <path class="st2" d="M514.6,53.2c-0.2,0.4-0.5,0.7-0.8,0.9c-0.9,0.6-2.1,0.3-3.2,0.3c-4.9,0-8.8,0.5-13.5,2.6
      c-2.1,0.9-4.2,4.7-0.2,3.7c5.3-1.3,10.7-2.1,16.2-2.3c1.7-0.1,3.6-0.1,4.9-1.3c0.6-0.6,0.9-1.3,1.3-2c1.8-3.9,3.3-7.9,4.4-12
      c1.2-4.5,3.9-11.5-1.7-14.2c-2.9-1.4-6-0.9-9-0.1c-5.1,1.4-10.7,3-15.2,6c-2,1.3-3.7,2.3-3.9,4.7c-0.1,0.6,0,1.3,0.5,1.6
      c0.5,0.3,1.2,0.1,1.8-0.1c0.5-0.2,1.1-0.4,1.6-0.7c2.9-1.3,5.8-3,8.7-4.3c2-0.9,4.2-1.7,6.3-2.2c2.2-0.5,6.1-1.9,6,1.6
      c-0.1,3.4-0.7,6.8-1.6,10.2c-0.5,1.7-1,3.3-1.5,4.9C515.3,51.3,515.1,52.4,514.6,53.2z"/>
    <path class="st2" d="M488.5,39.8c0.1,0,0.1,0,0.2,0c0.4,0.1,0.8,0.4,1.1,0.8c1.8,2.1,2.6,5.4,3.1,8c0.6,3.4,0.7,6.9,0.3,10.3
      c-1.6,12.8-3.7,28.7,0.5,30.6c1.1,0.5,2.5,0.5,3.6,0.4c2.1-0.3,4.6-0.2,6.6,0.6c3.8,1.6,2.3,5.8-0.4,7.7c-4,2.7-10,0.3-13-2.8
      c-0.7-0.7-2.1-2.2-3.6-10.5c-1.2-6.4-1.8-13-2.1-19.5c-0.2-3.3-0.3-6.5-0.4-9.8c-0.1-3-0.5-6.1-0.1-9.1
      C484.5,44.7,485.8,39.5,488.5,39.8z"/>
    <path class="st2" d="M498.5,70.4c0.6-0.6,2.3-1.2,13.6,4.7c8.9,4.6,11.4,6.8,13,8.5c2.2,2.2,6.1,6.3,4.9,8.9
      c-0.9,1.8-4,2.4-6.3,1.8c-2.4-0.6-3-2.7-5.3-5.8c-1.1-1.5-4.2-5.8-8.5-8.3c-5.6-3.4-9.9-1.9-11.6-5.3
      C497.6,73.5,497.4,71.3,498.5,70.4z"/>
    <path class="st2" d="M517.7,69.4C517.7,69.4,517.7,69.4,517.7,69.4c1.6-1.5,3.2-3,4.7-4.5c1.6-1.5,3.2-3.1,5.5-3.9
      c2.1-0.7,2.9,1.8,2.3,3.1c-0.3,0.5-0.7,1-1.2,1.3c-1.1,1-2.5,1.7-3.7,2.6c-1.2,1-2.3,2.2-3.2,3.4c-0.8,1.1-1.7,2.7-3.4,2.7
      c-1,0-2.2-0.4-2.5-1.1C515.6,71.6,516.8,70.3,517.7,69.4z"/>
    <path class="st2" d="M495,48c0.8-0.3,1.6-0.5,1.9-0.6c3.4-1,6.8-1.9,10.2-3c1.1-0.4,4.6-2.2,5.7-1c1,1.1-0.3,4.8-2.9,6.5
      c-1.7,1.2-3.1,0.9-7.2,1.1c-7.6,0.3-11,1.6-11.4,0.5C490.6,50,493,48.8,495,48z"/>
  </g>
    </svg>
    <svg class="curve" x="0px" y="0px"
     viewBox="100 0 1040 142" style="enable-background:new 0 0 1031 142;" width="500px",height="144px",viewBox="0 0 1440 1440">
    <path class="st0" d="M702.5,140c-125.6,0-249.7-42-315.3-68.5c-26.6-10.7-48.9-21.1-68.5-30.3C267.8,17.4,234.2,1.7,182.4,5.6
      C122.3,10.1,63.6,39.7,8,93.6l-2.4-2.5c56.2-54.5,115.7-84.4,176.6-89c52.7-3.9,88.4,12.8,137.9,35.9c19.6,9.2,41.8,19.5,68.4,30.2
      c70.7,28.5,209.4,75.1,344.3,67.4c101.2-5.8,201.3-43,297.6-110.7l2,2.9c-96.9,68-197.6,105.5-299.4,111.3
      C722.8,139.7,712.6,140,702.5,140z"/>
  </svg>
    <svg class="curve-2 curve-white" x="0px" y="0px"
     viewBox="0 0 248 264.9" style="enable-background:new 0 0 248 264.9;" >
  <path class="st0" d="M230.6,265c-10.8-15.4-23.8-38.6-30.2-69.7c-17.2-83.5,27.3-156.6,7.3-179.9c-9.3-10.8-26.7-3.8-41.8,2.6
    C124.3,35.6,68.5,61.3-0.5,97.1V265L230.6,265z"/>
    </svg>
  </div>
  </div>
</div>
<style>
@keyframes hideshow {
  0% { opacity: 1; }
  10% { opacity: 0.8; }
  35% { opacity: 1; }
  75% { opacity: 0.6; }
  100% { opacity: 1; }
} 
</style>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js'></script>
      <script id="rendered-js" >
var parallx = null;
var demoCount = 0;
function Parallx() {
  var self = this;
  $("body").mousemove(function (e) {

    parallax.mouseX(e.pageX);
    parallax.mouseY(e.pageY);

  });


  self.sensitivityMultiplier = ko.observable(0.03);
  self.wrapperOffset = $('#parallxWrapper').offset();
  self.wrapperCenter = {
    x: ko.computed(function () {return self.wrapperOffset.left + $('#parallxWrapper').width() / 2;}, this),
    y: ko.computed(function () {return self.wrapperOffset.top + $('#parallxWrapper').height() / 2;}, this) };

  self.mouseX = ko.observable(0);
  self.mouseY = ko.observable(0);
  self.relativeMouse = {
    x: ko.computed(function () {return (self.mouseX() - self.wrapperCenter.x()) * self.sensitivityMultiplier();}, this),
    y: ko.computed(function () {return (self.mouseY() - self.wrapperCenter.y()) * -1 * self.sensitivityMultiplier();}, this) };

  self.origin = {
    x: ko.computed(function () {return self.mouseX() / $(window).width() * 100;}, this),
    y: ko.computed(function () {return self.mouseY() / $(window).height() * 100;}, this) };

};

$(document).ready(function () {
  parallax = new Parallx();
  ko.applyBindings(parallax);

  setInterval(function () {
    if (demoCount < 130) {
      parallax.mouseX(parallax.mouseX() + 10);
      demoCount += 1;
    }
  }, 40);


});
    </script>
</body>
</html>

6. Letterpress Business Card

Made by Bobby Showalter. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400);
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
html {
  background-color: #4a4036;
  font-size: 62.5%;
}

.card {
  background: url("https://i.imgur.com/94AlaBk.png");
  box-shadow: 0px 4px 6px #181818;
  height: 36rem;
  margin: 10rem auto;
  position: relative;
  width: 72rem;
}
.card:before, .card:after {
  background-color: rgba(242, 88, 22, 0.8);
  box-shadow: 1px 2px 1px #fff, inset 0px 1px 2px #993409, 1px 2px 1px #fff;
  content: "";
  height: 0.5rem;
  position: absolute;
  width: 67rem;
}
.card:before {
  top: 2.5rem;
  left: 2.5rem;
}
.card:after {
  top: 33rem;
  left: 2.5rem;
}

h1 {
  color: rgba(24, 24, 24, 0.8);
  font-family: "Oswald", "Helvetica", "Arial", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  letter-spacing: 0.25rem;
  line-height: 10.8rem;
  padding-top: 10.5rem;
  position: relative;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: uppercase;
}

h2 {
  color: rgba(242, 88, 22, 0.8);
  font-family: "Raleway", "Helvetica", "Arial", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 4.5rem;
  margin-top: -2rem;
  text-align: center;
  text-shadow: 1px 2px 3px #fff, 0px 0px 0px #000, 2px 3px 4px #fff;
  text-transform: lowercase;
}
</style>
</head>
<body>
  <div class='card'>
  <h1>bobby showalter</h1>
  <h2>html&nbsp;&bull;&nbsp;css&nbsp;&bull;&nbsp;wordpress&nbsp;&bull;&nbsp;responsive design</h2>
</div>
  
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

7. Business card with wave animation

Made by Brian Shao. CSS Business card with wave animation and hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway'>
  
<style>
@charset "UTF-8";
* {
  font-family: "Raleway", sans-serif, ๅพฎ่ปŸๆญฃ้ป‘้ซ”;
  text-decoration: none;
}

html, body {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: auto;
  padding: 40px;
  margin: 0;
  background-color: #e0e0e2;
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  letter-spacing: 1px;
  line-height: 22px;
  padding: 0;
  margin: 0;
  color: #666;
  font-size: 10px;
}

.namecard {
  width: 350px;
  height: 180px;
  padding: 25px;
  margin: auto;
  position: relative;
  background: linear-gradient(#f2f2f2, #eee);
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  font-weight: bold;
  transition: all 0.5s;
}
.namecard.front:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #36b9c1, rgba(116, 211, 216, 0) 50%, rgba(255, 255, 255, 0.5));
  transform: translate3d(0, 0, 0);
}
.namecard.front:hover .wave.left {
  left: 80px;
}
.namecard.back {
  letter-spacing: 1px;
  line-height: unset;
  color: #383d3b;
  font-size: 10px;
}
.namecard.back .name {
  font-size: 30px;
  font-weight: bold;
  margin-left: -3px;
}
.namecard.back .position {
  color: #36b9c1;
}
.namecard.back .intro {
  padding-right: 150px;
}
.namecard.back:hover .wave.right {
  left: 80px;
}
.namecard:hover {
  transform: translate3d(-5px, -5px, 0);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
}

.wave {
  width: 700px;
  height: 700px;
  opacity: 0.4;
  position: absolute;
  left: 0;
  background: #36b9c1;
  border-radius: 40%;
  transform-origin: 50% 48%;
  transition: left 2s;
  animation: drift 3000ms infinite linear;
}
.wave.-three {
  animation: drift 3500ms infinite linear;
}
.wave.-two {
  animation: drift 5000ms infinite linear;
  background-color: yellow;
  opacity: 0.1;
}
.wave.left {
  margin-top: -50px;
  margin-left: -400px;
}
.wave.right {
  margin-top: -250px;
  margin-left: 270px;
}

.title {
  position: absolute;
  top: 0;
  left: 10%;
  width: 100%;
  z-index: 1;
  line-height: 230px;
  transform: translate3d(0, 0, 0);
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: 12px;
  font-size: 30px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  text-indent: 0.3em;
}

@keyframes drift {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
  <a href="#">
  <div class="namecard front">
    <div class="wave -one left"></div>
    <div class="wave -two left"></div>
    <div class="wave -three left"></div>
    <div class="title">Wave</div>
  </div><br/><br/>
  <div class="namecard back">
    <div class="wave -one right"></div>
    <div class="wave -two right"></div>
    <div class="wave -three right"></div>
    <div class="name">Shao Weifu</div>
    <p>Brian Shao</p>
    <p class="position">Good News English - Web Designer</p>
    <div class="intro">
      <hr/>
      <p>
        Graduated from the Department of Information Management, Fu Jen Catholic University, loves web and graphic design, is committed to making interesting and interactive web pages, and aims to set up his own design studio.</p>
    </div>
  </div></a>
 
</body>
</html>

8. Static and Flappable business cards

Made by Marc Ferrold. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

body {
  background-color: #e6e6e6;
  display: flex;
  height: 100vh;
  width: 100vw;
  font-family: "Montserrat";
}

.container {
  width: 1200px;
  max-width: 100%;
  margin: auto;
}

.display {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.display .display-item {
  flex-grow: 1;
  padding: 15px;
}
.display .display-item > span {
  display: block;
  text-align: center;
  padding: 15px;
  font-size: 2em;
}

.business-card, .flippable-business-card {
  width: 550px;
  height: 300px;
  max-width: 100%;
  border-radius: 4px;
  margin: 0 auto;
}

.business-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #fff 0%, #fff 50%, rgba(0, 200, 200, 0.4) 50.5%, rgba(0, 200, 200, 0.6) 100%);
  color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.business-card .profile {
  display: flex;
  flex-basis: 150px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 15px;
}
.business-card .profile .profile-image {
  background-image: url(https://images.unsplash.com/photo-1507120878965-54b2d3939100?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=57f3676a7820564424855d5e5c6b09e7);
  background-position: center;
  background-size: cover;
  width: 120px;
  height: 120px;
  border-radius: 100%;
}
.business-card .profile .profile-title {
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.business-card .profile .profile-title h2 {
  font-size: 1.4em;
}
.business-card .info {
  display: flex;
  flex-grow: 1;
}
.business-card .info .info-contact {
  padding: 15px;
  display: flex;
  flex-shrink: 1;
  flex-direction: column;
  justify-content: space-around;
}
.business-card .info .info-contact a {
  color: rgba(0, 0, 0, 0.8);
}
.business-card .info .info-contact i {
  font-size: 1.2em;
  width: 25px;
}
.business-card .info .info-bio {
  display: flex;
  flex-grow: 1;
  flex-basis: 50%;
  flex-direction: column;
  justify-content: space-around;
  padding: 15px;
  text-align: center;
}

.flippable-business-card {
  perspective: 1000px;
}
.flippable-business-card .front, .flippable-business-card .back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease-in-out;
  transform-style: preserve-3d;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
}
.flippable-business-card .front {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.flippable-business-card .front .front-top {
  height: 150px;
  background-image: url(https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=b0aa3fbba9c018e93499effa49dd8e83);
  background-size: cover;
  background-position: center;
  position: relative;
}
.flippable-business-card .front .front-top h2, .flippable-business-card .front .front-top h3 {
  display: block;
  padding: 15px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4), -1px -1px 1px rgba(0, 0, 0, 0.4);
}
.flippable-business-card .front .front-top .profile-image {
  position: absolute;
  height: 120px;
  width: 120px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%) translateY(50%) rotate(45deg);
  border-radius: 4px;
  overflow: hidden;
  border: 4px solid white;
}
.flippable-business-card .front .front-top .profile-image:before {
  content: "";
  width: 140%;
  height: 140%;
  position: absolute;
  transform: rotate(-45deg);
  top: -20%;
  left: -20%;
  background-image: url(https://images.unsplash.com/photo-1498529605908-f357a9af7bf5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=4a38e7f0743e48e6ae32b23d36aa6ff7);
  background-size: cover;
  background-position: center;
}
.flippable-business-card .front .front-bottom {
  height: 150px;
  display: flex;
  color: rgba(255, 255, 255, 0.8);
  background-color: darkslategray;
}
.flippable-business-card .front .front-bottom > div {
  flex-grow: 1;
  flex-basis: 50%;
  padding-top: 30px;
  padding-bottom: 15px;
}
.flippable-business-card .front .front-bottom > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-right: 40px;
  padding-left: 15px;
}
.flippable-business-card .front .front-bottom > div:first-child h2 {
  font-size: 1.4em;
}
.flippable-business-card .front .front-bottom > div:last-child {
  display: flex;
  justify-content: space-around;
  padding-left: 40px;
  padding-right: 15px;
}
.flippable-business-card .front .front-bottom > div:last-child a {
  color: rgba(0, 0, 0, 0.8);
}
.flippable-business-card .front .front-bottom > div:last-child i {
  font-size: 1.2em;
  width: 25px;
}
.flippable-business-card .front .front-bottom > div:last-child > div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.flippable-business-card .back {
  transform: rotateX(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: none;
  background-color: darkslategray;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.flippable-business-card .back .title {
  height: 75px;
  padding: 15px;
}
.flippable-business-card .back .bio {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 15px;
  height: 150px;
  display: flex;
  flex-direction: column;
  font-style: italic;
  justify-content: space-around;
}
.flippable-business-card .back .social {
  height: 75px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.flippable-business-card .back .social .sms {
  display: flex;
  justify-content: space-around;
  font-size: 2em;
}
.flippable-business-card:hover .back {
  transform: rotateX(360deg);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.flippable-business-card:hover .front {
  transform: rotateX(180deg);
  box-shadow: none;
}
</style>
</head>
<body>
  <div class="container">
	<div class="display">
		<div class="display-item">
			<span>Static</span>
			<div class="business-card">
				<div class="profile">
					<div class="profile-image"></div>
					<div class="profile-title">
						<h2>Walter Habadasher</h2>
						<h3>Simzo Entertainment</h3>
						<span>Laundry Massager</span>
					</div>
				</div>
				<div class="info">
					<div class="info-contact">
						<span><i class="fa fa-phone"></i> +45 58 58 58 58</span>
						<span><i class="fa fa-at"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33445b525173405a5e495c1d505c5e">[email&#160;protected]</a></span>
						<span><i class="fa fa-facebook"></i> <a href="#">Walter Habadasher</a></span>
					</div>
					<div class="info-bio">
						<p>Nulla facilisi. Morbi in mauris ipsum. Etiam ut justo vel elit eleifend mattis eget eget arcu.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="display-item">
			<span>Flippable (Hover)</span>
			<div class="flippable-business-card">
				<div class="front">
					<div class="front-top">
						<div class="profile-image"></div>
					</div>
					<div class="front-bottom">						
						<div>
							<h2>Simone Lickbait</h2>
							<h3>Philistine Productions</h3>
							<span>Fascism Foiler</span>
						</div>
						<div>
							<div>
								<span><i class="fa fa-phone"></i> +45 58 58 58 58</span>
								<span><i class="fa fa-at"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483b24212b230838202124662b2725">[email&#160;protected]</a></span>
							</div>
						</div>
					</div>
				</div>
				<div class="back">
					<div class="title">
						<h2>Simone Lickbait</h2>
						<span>Fascism Foiler</span>
					</div>
					<div class="bio">
						<p>Nulla facilisi. Morbi in mauris ipsum. Etiam ut justo vel elit eleifend mattis eget eget arcu. Integer tincidunt dolor pharetra sem iaculis egestas. Nam feugiat eleifend lacus hendrerit iaculis.</p>
					</div>
					<div class="social">
						<div class="sms">
							<div class="sm twitter">
								<i class="fa fa-twitter"></i>
							</div>
							<div class="sm facebook">
								<i class="fa fa-facebook"></i>
							</div>
							<div class="sm pinterest">
								<i class="fa fa-pinterest"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>

9. Interactive Business Card

Made by Daniel Destefanis. Interactive Business Card with Floating animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
body {
  font-size: 16px;
  color: #6cdba6;
  background: #2F2D2C;
}

a {
  color: #fff;
  text-decoration: none;
  transition: ease 0.3s 0;
}

a:hover {
  color: #59a07e;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cabin", "sans-serif";
  text-transform: uppercase;
}

.initial {
  font-family: "Cabin", "sans-serif";
  text-transform: uppercase;
  font-size: 3em;
  color: #fff;
  font-weight: 700;
}

.logo {
  position: relative;
  top: 20%;
  height: 100px;
  width: 100px;
  margin: 0 auto 0;
  background: #6cdba6;
  border-radius: 50%;
  text-align: center;
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
}
.logo h2 {
  margin-left: 5px;
  line-height: 100px;
  font-size: 5.35em;
  font-family: "Cabin", "sans-serif";
  font-weight: 600;
  color: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.logo .initial {
  -webkit-transform: translateZ(0);
  transition: all 0.5s .8s ease;
  text-shadow: 0px 0px 0 #59A07E, 1px 1px 0 #59A07E, 2px 2px 0 #59A07E, 3px 3px 0 #59A07E, 4px 4px 0 #59A07E, 5px 5px 0 #59A07E, 6px 6px 0 #59A07E, 7px 7px 0 #59A07E, 8px 8px 0 #59A07E, 9px 9px 0 #59A07E, 10px 10px 0 #59A07E, 11px 11px 0 #59A07E, 12px 12px 0 #59A07E, 13px 13px 0 #59A07E, 14px 14px 0 #59A07E, 15px 15px 0 #59A07E, 16px 16px 0 #59A07E, 17px 17px 0 #59A07E, 18px 18px 0 #59A07E, 19px 19px 0 #59A07E, 20px 20px 0 #59A07E, 21px 21px 0 #59A07E, 22px 22px 0 #59A07E, 23px 23px 0 #59A07E, 24px 24px 0 #59A07E, 25px 25px 0 #59A07E, 26px 26px 0 #59A07E, 27px 27px 0 #59A07E, 28px 28px 0 #59A07E, 29px 29px 0 #59A07E, 30px 30px 0 #59A07E, 31px 31px 0 transparent;
}
.logo a {
  padding: 15px;
}

.logo:after {
  content: "";
  position: absolute;
  top: 89%;
  left: 16%;
  border-left: 12px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #6CDBA6;
  transform: rotate 31px;
  -ms-transform: rotate(31deg);
  -webkit-transform: rotate(31deg);
  transform: rotate(31deg);
}

.name {
  margin: 7em 0 0.5em;
  font-size: 17px;
  font-family: "Cabin", "sans-serif";
  font-weight: 700;
  color: #fff;
  letter-spacing: 3px;
}

.h3 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
}

.about {
  margin: 0 auto;
  width: 200px;
  line-height: 16px;
}

.contact-info {
  line-height: 160px;
}

.info {
  margin: auto;
  width: 427px;
  font-family: "Cabin", "sans-serif";
  margin-bottom: 1em;
}

/* Rules for the cards  */
/* Credit: http://davidwalsh.name/css-flip */
/* entire container, keeps perspective */
.wrapper, .card-front, .card-back {
  width: 427px;
  height: 320px;
}

.wrapper {
  margin: 1em auto;
  perspective: 1000;
}

/* Flip the pane when hovered */
.wrapper:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}

/* Flip speed and styling. */
.flipper {
  position: relative;
  transition: 0.8s;
  transform-style: preserve-3d;
}

/* Hide back of pane during swap */
.card-front, .card-back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  backface-visibility: hidden;
  text-align: center;
  box-sizing: border-box;
}

/* Front pane, placed above back */
.card-front {
  z-index: 2;
  background: #fff;
}

/* back, initially hidden pane */
.card-back {
  transform: rotateY(180deg);
  background: #6cdba6;
  color: #fff;
}

.oval {
  position: relative;
  top: 38%;
  margin: auto;
  width: 55px;
  height: 25px;
  background: #2F2D2C;
  -moz-border-radius: 60px / 25px;
  -webkit-border-radius: 60px / 25px;
  border-radius: 55px / 25px;
  animation: shadow 2s infinite;
  -webkit-animation: shadow 2s infinite;
}

@-webkit-keyframes bounce {
  0% {
    margin-top: 15px;
    margin-bottom: 10px;
  }
  50% {
    margin-top: 22px;
    margin-bottom: 3px;
  }
  100% {
    margin-top: 15px;
    margin-bottom: 10px;
  }
}
@keyframes bounce {
  0% {
    margin-top: 15px;
    margin-bottom: 10px;
  }
  50% {
    margin-top: 22px;
    margin-bottom: 3px;
  }
  100% {
    margin-top: 15px;
    margin-bottom: 10px;
  }
}
@-webkit-keyframes shadow {
  0% {
    padding: 1px;
    opacity: 0.10;
  }
  50% {
    padding: 3px;
    opacity: 0.18;
  }
  100% {
    padding: 1px;
    opacity: 0.10;
  }
}
@keyframes shadow {
  0% {
    padding: 1px;
    opacity: 0.10;
  }
  50% {
    padding: 3px;
    opacity: 0.18;
  }
  100% {
    padding: 1px;
    opacity: 0.10;
  }
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<!-- ontouchstart used for card flip -->
<div class="wrapper" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="card-front">
      <div class="logo">
        <h2 class="initial">D</h2>
      </div>
      <div class="oval"></div>
    </div>
    <div class="card-back">
      <h1 class="name">Daniel Destefanis</h1>
      <h3 class="h3 about">Front End Development & Web Design</h3>
      <h3 class="h3 contact-info"><a href="http://www.danielrd.com">Danielrd.com</a></h3>
    </div>
  </div> <!--/flipper -->
</div> <!--/wrapper -->
<div>
  <p class="info">
   For the <a href="https://www.reddit.com/r/web_design/comments/2bah6s/community_challenge_design_your_own_business_card/">/r/web_design</a> challenge.
  </p>
  <p class="info">
    Roll over the card to see other side.
  </p>
</div>
</body>
</html>

10. Slant Studio Business Card

Made by Alex. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
.business-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 250px;
  width: 500px;
  background: #f12e50;
  border-radius: 30px;
}
.business-card:before, .business-card:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
}
.business-card:before {
  background: #ee0c4b;
  border-top-right-radius: 30px;
  -webkit-clip-path: polygon(20% 0, 100% 0, 100% 30%, 40% 70%);
          clip-path: polygon(20% 0, 100% 0, 100% 30%, 40% 70%);
}
.business-card:after {
  background: #c80e3d;
  border-bottom-right-radius: 30px;
  -webkit-clip-path: polygon(40% 70%, 100% 30%, 100% 100%, 48.5% 100%);
          clip-path: polygon(40% 70%, 100% 30%, 100% 100%, 48.5% 100%);
}

div {
  z-index: 2;
}

.bc__logo {
  position: absolute;
  top: 10%;
  right: 10%;
}
.bc__logo figure {
  position: relative;
  display: inline-block;
  height: 4em;
  width: calc(4em * 0.57735);
  border-radius: 0.5em/0.25em;
  background: white;
  transform: rotate(90deg);
}
.bc__logo figure:before, .bc__logo figure:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: "";
}
.bc__logo figure:before {
  transform: rotate(60deg);
}
.bc__logo figure:after {
  transform: rotate(-60deg);
}
.bc__logo i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 25%;
  width: 70%;
  background: #ee0c4b;
  transform: skew(-30deg) rotate(-90deg);
  z-index: 2;
}
.bc__logo i:before, .bc__logo i:after {
  content: "";
  position: absolute;
  width: 60%;
  height: 75%;
  background: inherit;
  z-index: 5;
}
.bc__logo i:before {
  top: -82%;
  right: 24%;
  transform: skew(-40deg) rotate(90deg);
}
.bc__logo i:after {
  bottom: -85%;
  right: 23%;
  transform: skew(-40deg) rotate(90deg);
}
.bc__logo h2 {
  display: inline-block;
  padding-left: 0.65em;
  color: white;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 2;
  vertical-align: top;
}

.bc__tagline {
  position: absolute;
  bottom: 10%;
  right: 5%;
  color: white;
  line-height: 1.4;
  text-align: right;
}
.bc__tagline em {
  font-weight: 600;
  font-style: italic;
}

body {
  background: #111;
  font: 400 0.875em "Helvetica Neue", "Roboto Sans", Helvetica, Arial, Sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.credit {
  position: absolute;
  bottom: 15%;
  width: 100%;
  color: white;
  text-align: center;
}
.credit a {
  color: #ea4c89;
  text-decoration: none;
}
</style>
</head>
<body>
  <div class='business-card'>
  <div class='bc__logo'>
    <figure><i></i></figure>
    <h2>Slant Studio</h2>
  </div>
  <div class='bc__tagline'>
    <p>Putting a <em>slant</em> on your<br>Web Design &amp; Branding Projects</p>
  </div>
</div>
<p class='credit'>
  Based on <a href="http://drbl.in/naLd" target="_blank">this dribbble shot</a> by <a href="https://dribbble.com/slant" target="_blank">Marc Bowers</a>
</p>
</body>
</html>

11. Business card fandom

Made by summer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');

@font-face {
  font-family: 'Exan Regular';
  src: url(https://files.jcink.net/uploads/summertests/fonts/Exan_Regular.ttf);
}

body {
  margin: 0;
  padding: 0;
  background: hsl(var(--background));

  /*FONTS*/
  --display-font: 'Exan Regular';
  --mono-font: 'Syne Mono';

  /*COLORS*/
  --clear: hsla(0, 0%, 0%, 0);
  --background: 263, 19%, 6%;
  --shadow: 263, 19%, 4%;
  --black: 263, 19%, 14%;
  --white: 263, 49%, 84%;
  --purple: 263, 49%, 44%;
  --bright-burple: 263, 49%, 84%;

  /*GRADIENTS*/


  /*IMAGES*/
  --marmora: url('https://cdn.discordapp.com/attachments/744259364772118559/950463423727169556/marmora_sigil.png');

  /*OTHER*/

}

*, *::before, *::after { box-sizing: border-box; }
a { text-decoration: none; }

.business-card {
  margin: 2rem auto;
  width: 230px;
  height: 400px;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}

.business-card-front, .business-card-back {
  grid-area: 1 / 1 / 2 / 2;
  padding: 2rem;
  background: hsl(var(--black));
  box-shadow: 0 0 7px hsl(var(--shadow));
  color: rgb(var(--text-color));
  overflow: hidden;
  transition: .5s linear;
}

.business-card-front {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: rotateY(0deg);
  opacity: 1;
}

.business-card-back {
  transform: rotateY(180deg);
  opacity: 0;
  position: relative;
  font: .7rem/1.8 var(--mono-font);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .1rem;
  color: hsla(var(--white), .7);
  display: flex;
  flex-flow: column nowrap;
}
.business-card-back::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: hsla(var(--black), .5);
  mix-blend-mode: multiply;
}
.business-card-back name {
  display: block;
  font: 1.25rem/1.8 var(--display-font);
  text-shadow: 0 0 2px hsl(var(--white));
  position: relative;
  z-index: 2;
}
.business-card-back job {
  display: block;
}
.business-card-back currently {
  display: block;
  margin: 30px auto;
  position: relative;
  z-index: 2;
}
.business-card-back currently b {
  color: hsl(var(--bright-purple));
  text-shadow: 0 0 1px hsl(var(--white));
}
.business-card-back scan {
  display: block;
  margin: auto;
  font-size: 5rem;
  filter: drop-shadow(0 0 5px hsl(var(--white)));
}
.business-card-back contact {
  display: block;
  margin-top: auto;
}

.business-card:hover .business-card-front {
  transform: rotateY(180deg);
  opacity: 0;
  transition: .5s linear;
}
.business-card:hover .business-card-back {
  transform: rotateY(0deg);
  opacity: 1;
  transition: .5s linear;
}

.business-card .business-card-front .sigil img {
  width: 40px;
  margin: 0 auto 50px auto;
  filter: drop-shadow(0 0 25px hsl(var(--purple)));
}

.business-card .business-card-front .organization {
  font: .55rem/1.5 var(--display-font);
  letter-spacing: .3rem;
  text-align: center;
  color: hsl(var(--white));
  text-shadow: 
    0 0px 5px hsla(var(--purple));
}

.credits {
  width: 230px;
  margin: 0 auto;
  font: .7rem/1 var(--mono-font);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .1rem;
  color: hsla(var(--white), .2);
}
.credits a {
  color: hsla(var(--purple), .7);
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}
#particles-js::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: hsla(var(--black), .5);
  mix-blend-mode: multiply;
}
</style>
</head>

<body>
  <link href="/CC016-business_card_fandom/business_card.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/phosphor-icons"></script>

<div class="business-card">
  <div class="business-card-front">
    <div id="particles-js"></div>
    <div class="sigil">
      <img src="https://cdn.discordapp.com/attachments/744259364772118559/950463423727169556/marmora_sigil.png">
    </div>
    <div class="organization">
      knowledge <br>or death
    </div>
  </div>
  <div class="business-card-back">
    <name>Keith Kogane</name>
    <job>blade captain</job>
    <currently>
      currently: <b>online</b>
    </currently>
    <scan><i class="ph-user-focus-thin"></i></scan>
    <contact>scan face to <br>request contact</contact>
  </div>
</div>

<div class="credits">
  particles js by <a href="https://codepen.io/bob6664569/full/rOzmve">johan</a>
</div>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  
      <script id="rendered-js" >
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 355,
      "density": {
        "enable": true,
        "value_area": 789.1476416322727 } },


    "color": {
      "value": "#ffffff" },

    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000" },

      "polygon": {
        "nb_sides": 5 },

      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100 } },


    "opacity": {
      "value": 0.48927153781200905,
      "random": false,
      "anim": {
        "enable": true,
        "speed": 0.2,
        "opacity_min": 0,
        "sync": false } },


    "size": {
      "value": 2,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 2,
        "size_min": 0,
        "sync": false } },


    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1 },

    "move": {
      "enable": true,
      "speed": 0.2,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200 } } },



  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble" },

      "onclick": {
        "enable": true,
        "mode": "push" },

      "resize": true },

    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1 } },


      "bubble": {
        "distance": 83.91608391608392,
        "size": 1,
        "duration": 3,
        "opacity": 1,
        "speed": 3 },

      "repulse": {
        "distance": 200,
        "duration": 0.4 },

      "push": {
        "particles_nb": 4 },

      "remove": {
        "particles_nb": 2 } } },



  "retina_detect": true });
//# sourceURL=pen.js
    </script>

  

</body>

</html>
 

12. 3D flip business card

Made by Elena Nazarova. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Arimo|Playfair+Display" rel="stylesheet">
<style>
*{box-sizing:border-box}
body {
  margin: 0;
  background: #1C1A30;
  height: 100vh;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; 
  align-items: center;
}
.container {
  width: 600px;
  height: 340px;
  margin: 0 auto; 
  position: relative;
  -webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
  -moz-transform: perspective(1400px);
	-ms-transform: perspective(1400px);
	-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d; 
  transform-style: preserve-3d;
  -webkit-perspective-origin: right;
  -moz-perspective-origin: right;
  perspective-origin: right;
}
.card {
  width: 600px;
  height: 340px;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, .7), 0 17px 17px 0 rgba(0, 0, 0, .5);
  position: relative; 
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d; 
  transform-style: preserve-3d;
  transition: .8s ease-in-out;
}
.logo {
  width: 200px;
  height: 200px;
  position: relative;
  background:
  linear-gradient(45deg, #F5AF69 50%, #F4EED7 50.9%),
  linear-gradient(90deg, #FC5135 50%, #4E203C 50%),
  linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%), 
  linear-gradient(#FC5135 50%, #4E203C 50%),
  linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%),
  linear-gradient(90deg, #FC5135 50%, #4E203C 50%),
  linear-gradient(45deg, #FC5135 50%, #F5AF69 50.9%);
  background-size: 50px 50px, 100px 50px, 50px 50px, 200px 100px, 50px 50px, 100px 50px, 50px 50px;
  background-repeat: no-repeat;
  background-position: 0 0, 50px 0px, 150px 0, 0 50px, 0 150px, 50px 150px, 150px 150px;
}
.logo:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  width: 140px;
  height: 140px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: linear-gradient(45deg, #F4EED7 50%, #E8D9A0 50%);
}
.logo:after {
  content: "";
  position: absolute;
  top: 55px;
  left: 55px;
  width: 90px;
  height: 90px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: linear-gradient(45deg, #FC5135 50%, #4E203C 49.9%),
  linear-gradient(-45deg, #F5AF69 50%, transparent 50%),
  linear-gradient(#FC5135 50%, #FC5135 50%),
  linear-gradient(-45deg, #4E203C 50%, transparent 50%);
  background-size: 45px 45px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 45px, 45px 45px, 45px 0;
  border-radius: 0 50% 50% 50%;
}
.logo span {
  display: block;
  background: #4E203C;
  width: 29px;
  height: 32px;
  position: absolute;
  top: 99.5px;
  left: 130px;
  border-radius: 0 50% 50% 0;
}
.logo span:before {
  content: "";
  width: 10px;
  height: 10px;
  background: #E8D9A0;
  border-radius: 50%;
  position: absolute;
  top: 11px;
  left: 10px;
  z-index: 2;
}
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front {
  display:-webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  font-family: 'Arimo', sans-serif;
}
.container:hover .card {
  -webkit-transform: rotateY(180deg) translateX(100%);
  -moz-transform: rotateY(180deg) translateX(100%);
  -ms-transform: rotateY(180deg) translateX(100%);
  transform: rotateY(180deg) translateX(100%);
  cursor: pointer;
}
ul {
  margin: 0;
  width: 100%;
  list-style: none;
  position: absolute;
  bottom: 30px;
  left: 0;
  padding: 0 1%;
}
ul:after {
  content: '';
  display: table;
  clear: both;
}
li {
  width: 31.3333333333%;
  margin: 0 1%;
  float: left;
  padding: 10px;
  border: 2px solid #FC5135;
  border-radius: 4px;
  position: relative;
  text-align: center;
  color: #4E203C;
}
li:before {
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height:30px;
  background: #FC5135;
  color: white;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-family: FontAwesome;
}
li:nth-child(1):before {content: "\f095"}
li:nth-child(2):before {content: "\f003"}
li:nth-child(3):before {content: "\f0c1"}
h1 {
  color: #FC5135;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  margin-top: 110px;
  text-align: center;
  font-size: 40px;
}
h1 span {
  color: #4E203C;
  display: block;
  font-size: .45em;
  letter-spacing: 3px;
}
h1 i {
  font-style: normal;
  text-transform: none;
  font-family: 'Playfair Display', serif;
}
</style>
</head>
<body>
  <div class="container">
  <div class="card">
    <div class="front">
      <div class="logo"><span></span></div>
    </div>
    <div class="back">
      <h1>Helen Parker<span>design <i>&</i> photography</span></h1>
      <ul>
        <li>+1-111-111-11-11</li>
        <li>[email protected]</a></li>
        <li>my-site.com</li>
        </ul>
    </div>
    </div>
  </div>
</body>
</html>

13. Flippable Digital Business Card

Made by Peter Girnus. Flippable Digital Business Card with social buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);
/* CENTERING */
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

/* /end */
body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

h3 {
  position: relative;
  left: 45%;
}

/* THE FRONT */
.front {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/bc-front.jpg);
  background-size: cover;
}

/* /end */
/* THE BACK */
.back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/bc-back.jpg);
  background-size: cover;
}
.back h1, .back p, .back .font-a-icons {
  color: #000;
  font-family: "Lato";
  margin-left: 30%;
  line-height: 90%;
}
.back h1 {
  margin-top: 5%;
}
.back p {
  font-size: 16px;
  padding-bottom: 15px;
  width: 35%;
  border-bottom: 2px solid #000;
}
.back .bold {
  font-weight: bold;
}
.back .font-a-icons {
  margin-top: 25px;
}
.back .font-a-icons .icon-group {
  margin-top: 8px;
}
.back .font-a-icons span, .back .font-a-icons .link, .back .font-a-icons .fa, .back .font-a-icons a {
  color: #000;
}
.back .font-a-icons .fa {
  font-size: 18px;
}
.back .font-a-icons span, .back .font-a-icons a {
  font-size: 16px;
}
.back .font-a-icons a, .back .font-a-icons .website {
  text-decoration: none;
}
.back .font-a-icons a:hover, .back .font-a-icons .website:hover {
  color: #3f3f3f;
}
.back .icon-box {
  position: relative;
  color: #000;
  font-size: 24px;
  height: 45px;
  width: 45px;
  padding: 5px;
  top: 75px;
  left: 30%;
  display: inline-block;
  border: 2px solid #000;
  margin: 5px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.back .icon-box:hover {
  box-shadow: inset 0 50px 0 0 #000;
  color: #fff;
}

/* /end */
/* THE FLIP EFFECT */
/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
  cursor: pointer;
}

.flip-container, .front, .back {
  height: 350px;
  width: 600px;
}

.flipper {
  transition: 0.5s;
  transform-style: preserve-3d;
  position: relative;
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
}

.front {
  z-index: 2;
  /* firefox 31 */
  transform: rotateY(0deg);
}

.back {
  background-color: #000;
}

.back {
  transform: rotateY(180deg);
}

.vertical.flip-container {
  position: relative;
}

.vertical .back {
  transform: rotateX(180deg);
}

.vertical.flip-container .flipper {
  transform-origin: 100% 400x;
}

.vertical.flip-container:hover .flipper {
  transform: rotateX(-180deg);
}
</style>
</head>
<body>
  <div class="flip-container centered">
      <div class="flipper">
         <div class="front"></div>
         <div class="back">
            <h1>Petrus Rex</h1>
      <p>Web Design & Development</p>
         <div class="font-a-icons">
            <div class="icon-group">
               <span class="bold">T: </span><span class="contact">512-773-0889</span>
            <div class="icon-group">
                <span class="bold">E: [email protected]</span>
            </div>
            <div class="icon-group">
               <a class="contact" href="http://www.petrusrex.com" target="_blank">www.petrusrex.com</a>
            </div>
         </div>
      </div>   
      <a class="icon-box" href="https://www.facebook.com/xpetrus.rex" target="_blank"><i class="fa fa-facebook"></i></a>
      <a class="icon-box" href="https://twitter.com/Gothburz" target="_blank"><i class="fa fa-twitter"></i></a>
      <a class="icon-box" href="https://plus.google.com/u/0/+PetrusRex/" target="_blank"><i class="fa fa-google-plus"></i></a>
      <a class="icon-box" href="https://www.linkedin.com/in/xpetrus" target="_blank"><i class="fa fa-linkedin"></i></a>
      <a class="icon-box" href="https://codepen.io/Gothburz/" target="_blank"><i class="fa fa-codepen"></i></a>
      <a class="icon-box" href="https://github.com/Gothburz" target="_blank"><i class="fa fa-github"></i></a>
         </div>
      </div>
   </div>
</body>
</html>

14. Simple Business Card

Made by Gigi. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background: -moz-linear-gradient(-45deg, #ffe0e3 32%, #a7e0e5 68%);
  background: -webkit-linear-gradient(-45deg, #ffe0e3 32%, #a7e0e5 68%);
  background: linear-gradient(135deg, #ffe0e3 32%, #a7e0e5 68%);
}

html {
  margin: 0px;
  padding: 0px;
}

* {
  letter-spacing: 1px;
  font-family: Arial;
  color: white;
}

.container {
  margin: 90px auto 300px auto;
  position: relative;
}
@keyframes card-ani1 {
  0% {
    opacity: 0;
    transform: translateX(30px) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
}
@keyframes card-ani2 {
  0% {
    opacity: 0;
    transform: translateX(0px) translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
    color: #9B9B9B;
  }
}
.container .card {
  width: 165px;
  height: 280px;
  padding: 30px;
  border-radius: 10px;
  margin: 80px auto 50px auto;
  background-color: white;
  animation: card-ani1 1s;
  transition-delay: 1s;
  transition-timing-function: easeOutCirc;
  position: relative;
}
.container .card .name {
  font-size: 28px;
  margin: 15px auto 0px auto;
  animation: card-ani2 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.container .card hr {
  border: 0;
  height: 1px;
  background-color: #d4d4d4;
  animation: card-ani2 1s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}
.container .card .title {
  font-size: 14px;
  animation: card-ani2 1s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}
.container .card .email {
  font-size: 14px;
  margin: 160px auto 6px auto;
  animation: card-ani2 1s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
}
.container .card .phone {
  font-size: 14px;
  animation: card-ani2 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
}
@keyframes card-ani3 {
  0% {
    opacity: 0;
    transform: translateX(-60px) translateY(-60px);
  }
  100% {
    opacity: 0.5;
    transform: translateX(0px) translateY(0px);
  }
}
.container .card .card-back {
  width: 160px;
  height: 275px;
  padding: 30px;
  border-radius: 10px;
  margin: -286px 0px 0px -8px;
  background-color: white;
  z-index: -1;
  position: relative;
  opacity: 0.5;
  animation: card-ani3 1s;
  transition-delay: 10s;
  transition-timing-function: easeOutCirc;
}
@keyframes card-ani4 {
  0% {
    opacity: 0;
    transform: translateX(50px) translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) translateY(0px);
  }
}
.container .card .card-front {
  width: 165px;
  height: 275px;
  padding: 30px;
  border-radius: 10px;
  margin: -373px 0px 0px -49px;
  background-color: transparent;
  border: solid 2px white;
  z-index: -1;
  position: relative;
  animation: card-ani4 1s;
  transition-delay: 6s;
  animation-timing-function: easeOutCirc;
}
.container .card .card2 {
  width: 165px;
  height: 280px;
  padding: 30px;
  border-radius: 10px;
  margin: -323px auto 0px -30px;
  background-color: transparent;
  overflow: hidden;
  position: relative;
  animation: card-ani4 1s;
  transition-delay: 6s;
  animation-timing-function: easeOutCirc;
}
.container .card .card2 .card-pink {
  width: 165px;
  height: 275px;
  padding: 30px;
  border-radius: 10px;
  margin: -46px 0px 0px -49px;
  background-color: transparent;
  border: solid 2px #FFE0E3;
  position: relative;
}

@keyframes circle-ani1 {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  20% {
    transform: translateX(20px) translateY(-10px);
  }
  40% {
    transform: translateX(-10px) translateY(-30px);
  }
  60% {
    transform: translateX(-20px) translateY(-10px);
  }
  80% {
    transform: translateX(10px) translateY(10px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}
@keyframes circle-ani2 {
  0% {
    transform: translateX(20px) translateY(0px);
  }
  20% {
    transform: translateX(-10px) translateY(20px);
  }
  40% {
    transform: translateX(0px) translateY(-10px);
  }
  60% {
    transform: translateX(20px) translateY(0px);
  }
  80% {
    transform: translateX(-10px) translateY(20px);
  }
  100% {
    transform: translateX(20px) translateY(0px);
  }
}
@keyframes circle-ani3 {
  0% {
    transform: translateX(-30px) translateY(10px);
  }
  20% {
    transform: translateX(-10px) translateY(0px);
  }
  40% {
    transform: translateX(0px) translateY(-20px);
  }
  60% {
    transform: translateX(20px) translateY(10px);
  }
  80% {
    transform: translateX(15px) translateY(-20px);
  }
  100% {
    transform: translateX(-30px) translateY(10px);
  }
}
.circle1 {
  width: 500px;
  height: 500px;
  background-color: white;
  border: 0;
  opacity: 0.3;
  position: absolute;
  border-radius: 100%;
  bottom: -254px;
  left: -255px;
  animation: circle-ani1 10s infinite;
  animation-timing-function: linear;
}

.circle2 {
  width: 120px;
  height: 120px;
  background-color: white;
  border: 0;
  opacity: 0.5;
  position: absolute;
  border-radius: 100%;
  bottom: 214px;
  left: -69px;
  animation: circle-ani2 10s infinite;
  animation-timing-function: linear;
}

.circle3 {
  width: 30px;
  height: 30px;
  background-color: white;
  border: 0;
  opacity: 0.6;
  position: absolute;
  border-radius: 100%;
  top: 183px;
  left: 78px;
  animation: circle-ani3 10s infinite;
  animation-timing-function: linear;
}

.circle4 {
  width: 220px;
  height: 220px;
  background-color: transparent;
  border: solid 2px white;
  opacity: 0.6;
  position: absolute;
  border-radius: 100%;
  bottom: -100px;
  left: 100px;
  animation: circle-ani3 10s infinite;
  animation-timing-function: linear;
}

.circle5 {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 0;
  opacity: 0.5;
  position: absolute;
  border-radius: 100%;
  bottom: 30px;
  left: 298px;
  animation: circle-ani2 10s infinite;
  animation-timing-function: linear;
}

.circle6 {
  width: 300px;
  height: 300px;
  background-color: transparent;
  border: solid 2px white;
  opacity: 0.6;
  position: absolute;
  border-radius: 100%;
  top: -150px;
  right: -80px;
  animation: circle-ani3 10s infinite;
  animation-timing-function: linear;
}

.circle7 {
  width: 165px;
  height: 165px;
  background-color: white;
  border: 0;
  opacity: 0.45;
  position: absolute;
  border-radius: 100%;
  top: 71px;
  right: -106px;
  animation: circle-ani1 10s infinite;
  animation-timing-function: linear;
}

.circle8 {
  width: 20px;
  height: 20px;
  background-color: white;
  border: 0;
  opacity: 0.7;
  position: absolute;
  border-radius: 100%;
  top: 183px;
  right: 78px;
  animation: circle-ani2 10s infinite;
  animation-timing-function: linear;
}
</style>
</head>

<body>
  <div class="container">
  <div class="card">
    <div class="name">GIGI YEH</div>
    <hr/>
    <div class="title">Graphic Designer</div>
    <div class="email">[email protected]</div>
    <div class="phone">0938-388-388</div>
    <div class="card-back"></div>
    <div class="card-front"></div>
    <div class="card2">
      <div class="card-pink"></div>
    </div>
  </div>
</div>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
<div class="circle8">  </div>
</html>

15. Cool business card

Made by Eduard Kosicky. Cool business card with social buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Business Card /r/web_design -- Ciclop</title> 
<style>
@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
@import url(https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css);
::selection {
  color: #fff;
  background: #2a2b39;
}

::-moz-selection {
  color: #fff;
  background: #2a2b39;
}

body, html {
  font-family: 'Raleway', sans-serif;
  background: url(https://unsplash.imgix.net/uploads/141310026617203b5980d/c86b8baa?q=75&fm=jpg&s=be8d1e8254844f53e56583bd49cf5e77);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 9;
}

.bgtint {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(42, 43, 57, 0.7);
}

p {
  padding: 0;
  margin: 0;
  display: inline-block;
}

a {
  color: #2a2b39;
  text-decoration: none;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
a:hover {
  color: #6acd79;
}

.bussinesscard {
  height: 320px;
  width: 428px;
  overflow: hidden;
  box-shadow: 0px 0px 43px -10px black;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.bussinesscard .flip {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.bussinesscard .front {
  z-index: 11;
  width: 100%;
  position: absolute;
  height: 100%;
  background: #fff;
  box-shadow: 0px 0px 33px -1px rgba(0, 0, 0, 0.45);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.bussinesscard .front .top {
  height: 50%;
  background: #2a2b39;
}
.bussinesscard .front .top:after {
  position: absolute;
  content: '';
  pointer-events: none;
}
.bussinesscard .front .top:after {
  left: 50%;
  width: 2em;
  height: 2em;
  -moz-transform: translateX(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  bottom: 9em;
  z-index: 10;
  background: inherit;
}
.bussinesscard .front .top .logo {
  display: inline-block;
  background: #6acd79;
  color: #fff;
  z-index: 11;
  padding: .16em;
  border: 8px solid #fff;
  position: relative;
  pointer-events: none;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%;
  margin-top: .4em;
  font-size: 4em;
}
.bussinesscard .front .top .logo .fat {
  font-weight: 800;
}
.bussinesscard .front .top .logo .skinny {
  font-weight: 100;
}
.bussinesscard .front .nametroduction {
  margin-top: 2.4em;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  z-index: 8;
}
.bussinesscard .front .name {
  color: #2a2b39;
  font-weight: 400;
  font-size: 3.2em;
  text-align: center;
  position: relative;
  margin-bottom: .35em;
}
.bussinesscard .front .name:after {
  content: '';
  position: absolute;
  top: 1.3em;
  width: 20%;
  left: 40%;
  right: 40%;
  height: 1px;
  background: #2a2b39;
}
.bussinesscard .front .introduction {
  text-align: center;
  color: #2a2b39;
  font-family: 'Old Standard TT', serif;
  font-style: italic;
}
.bussinesscard .front .contact {
  color: #2a2b39;
  margin-left: 1.7em;
  font-weight: 300;
  font-size: 1.6em;
  -moz-transform: translateY(400%);
  -ms-transform: translateY(400%);
  -webkit-transform: translateY(400%);
  transform: translateY(400%);
}
.bussinesscard .front .contact span {
  color: #2D3244;
  font-size: 1.7em;
  width: 1.3em;
  display: inline-block;
}
.bussinesscard .front .contact a {
  position: relative;
  bottom: .24em;
}
.bussinesscard .back {
  width: 100%;
  height: 100%;
  background: #fff;
  backface-visibility: hidden;
  position: absolute;
}

.tooltip {
  position: absolute;
  left: 1em;
  bottom: 1em;
  color: #fff;
  font-weight: 300;
  padding: .4em;
  background: #6acd79;
}

/* HOVER ANIMATIONS */
.front .top .logo, .front .top, .front .top:after, .front .nametroduction, .front .contact {
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.flip:hover .front .top .logo {
  margin-top: .28em;
  font-size: 1.3em;
  border: 3px solid #fff;
  margin-left: .15em;
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  left: 0;
}

.flip:hover .front .top {
  height: 15%;
}
.flip:hover .front .top:after {
  width: 1.5em;
  height: 1.5em;
  bottom: 16.3em;
}

.flip:hover .front .nametroduction {
  -moz-transform: translateY(400%);
  -ms-transform: translateY(400%);
  -webkit-transform: translateY(400%);
  transform: translateY(400%);
}

.flip:hover .front .contact {
  -moz-transform: translateY(-52%);
  -ms-transform: translateY(-52%);
  -webkit-transform: translateY(-52%);
  transform: translateY(-52%);
}
</style>
</head>
<body>
  <div class="bgtint"></div>
<section class="bussinesscard">
		<div class="flip">
			<div class="front">				
				<div class="top">				
					<div class="logo"><span class="fat">E</span><span class="skinny">K</span></div>				
				</div>
				<div class="nametroduction">
					<div class="name">Eduard Kosicky</div>
					<div class="introduction">A Front End Developer</div>
				</div>	
				<div class="contact">						
					<div class="website">
						<span class="ion-earth"></span>
						<a href="#">www.eduardkosicky.me</a>
					</div>
					<div class="twitter">
						<span class="ion-social-twitter"></span>
						<a href="#">@eduardkosicky</a> 
					</div>												
					<div class="phone ">
						<span class="ion-ios7-telephone"></span> 
						<a href="#">0118 999 7253</a> 
					</div>
					<div class="email ">
						<span class="ion-paper-airplane"></span>
						<a href="#">[email protected]</a>
					</div>
				</div>						
			</div>
			<div class="back"></div> <!--FIXES FONT RENDERING -->
		</div>
	</section>
	<section class="tooltip">
		<p>
			Hover over the card to see the back.
		</p>
	</section>
</body>
</html>

16. Flipping Business Card

Made by Joshua Ward. Flipping business card with syntax theme. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inconsolata'>
  
<style>
*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

html {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-smooth: auto;
  font-weight: 300;
  line-height: 1.5;
  color: #444;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(45deg, #E91E63, #9C27B0);
}

code, .card .line-numbers {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
}

.card {
  position: relative;
  width: 30rem;
  height: 15rem;
  perspective: 150rem;
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 5px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
  transition: 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
  backface-visibility: hidden;
  overflow: hidden;
}
.card-front:before, .card-front:after, .card-back:before, .card-back:after {
  position: absolute;
}
.card-front:before, .card-back:before {
  top: -40px;
  right: -40px;
  content: "";
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.08);
  transform: rotate(45deg);
  z-index: 1;
}
.card-front:after, .card-back:after {
  content: "+";
  top: 0;
  right: 10px;
  font-size: 24px;
  transform: rotate(45deg);
  z-index: 2;
}
.card-front {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #101010, #2c3e50);
}
.card-front:after {
  color: #212f3c;
}
.card-back {
  background: linear-gradient(-45deg, #101010, #2c3e50);
  transform: rotateX(180deg);
}
.card-back:after {
  color: #11181f;
}
.card:hover .card-front {
  transform: rotateX(-180deg);
}
.card:hover .card-back {
  transform: rotateX(0deg);
}
.card .line-numbers {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0 10px;
  background-color: rgba(255, 255, 255, 0.03);
  font-size: 13px;
}
.card .line-numbers > div {
  padding: 2.5px 0;
  opacity: 0.15;
}
.card code, .card .line-numbers {
  color: whitesmoke;
}
.card .indent {
  padding-left: 30px;
}
.card .operator {
  color: #4dd0e1;
}
.card .string {
  color: #9ccc65;
}
.card .variable {
  color: #BA68C8;
}
.card .property {
  color: #ef5350;
}
.card .method {
  color: #29b6f6;
}
.card .function {
  color: #FDD835;
}
.card .boolean {
  color: #4dd0e1;
}
</style>
</head>
<body>
  <div class="card">
  <div class="card-back">
    <div class="line-numbers">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div><code><span class="variable">const </span><span class="function">aboutMe </span><span class="operator">= </span><span>{</span>
      <div class="indent"> <span class="property">name</span><span class="operator">: </span><span class="string">'Joshua Ward'</span><span>,</span></div>
      <div class="indent"> <span class="property">title</span><span class="operator">: </span><span class="string">'Sr. UI/UX Developer'</span><span>,</span></div>
      <div class="indent"> <span class="property">contact</span><span class="operator">: </span><span>{</span>
        <div class="indent"> <span class="property">email</span><span class="operator">: </span><span class="string">'[email protected]'</span><span>,</span></div>
        <div class="indent"><span class="property">website</span><span class="operator">:</span><span class="string">'joshuaward.me'</span></div><span>}</span>
      </div><span>}</span></code>
  </div>
  <div class="card-front">
    <div class="line-numbers">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div><code><span class="variable">this</span><span>.</span><span class="method">addEventListener</span><span>(</span><span class="string">'mouseover'</span><span>, </span><span class="function">() => </span><span>{ </span>
      <div class="indent"><span class="variable">this</span><span>.</span><span class="property">flipCard </span><span>= </span><span class="boolean">true</span><span>;</span></div><span>});</span></code>
  </div>
</div>
</body>
</html>

17. Circular Tabs

Made by Philip Zastrow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<style>
body, div:after, div:before {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAABGdBTUEAALGPC/xhBQAAG/VJREFU eNrtXduOG8cO7F8yBnpQA9PAoAH9/x/5WLviTLFYZMtBcmI7+xBs5F1Jo1HzViwW230/vt/u+/f9 mN+/3e7fn4/x53483OMxr8fP5+Hj7cdjfP7t9Xi79Y/XucHvn483eD7/xOff+jh/9nHI6zw/x3h+ jv79eL3Oga/3ev7zJ74P/rTX/7i+H69zXe+U90PdJ3yeuz77HB/3+3HeF3ze83221++z+yrf/8fn vtHznu/X8Kbaf/ak5xPwS7H/7MNmv7cXr17v+fN6vev98eY8/8Y+9MfrvF4zu5n293g9+Hx7/+fn 5evDx3Y/tnt314/Xi9dv1/HxHj9eBz8PHj71fs/n9dfvt/s9vN/z35+HdKP7hddr12PXi99nUxZn X6KduOskdXei+GTxyfuwiHDSZzj56EHQ0p8/+5juptnNscf4vPNm0d+r90VLMku359lP+7xsScqi 7HldeDq2YHw/5wFfh/PG9xX+Xd1Pu07lmRpaBn7zeJM+Tn7fzy85szx8fN4sPHnDW5L9PZ9cthx7 DfXYn+QpPc2dns+W9Xw/uzmnZcGX+fn5h7Rk9hwff/fjv+11aJXl2r/ZIbLfHzNa5nUdPb1+u98q PDT8R/zJMZNPqt0MjkF2SOzDqROpX3cGy8KL7UksPM73eyxjH+cSH5/j8M9XlpfFRHUf+Cbb9Y4z 5s7yPtwTD6R+buI+8es2FVOfF20xBU/SZZmTfj+d5akYpD6E/X0/LXd3h4gt1yzdeQpw79vrGtBT 6Bj6mchsbOl0WPn6laf4eD/yXOjp7Pqe92sDz2WPQ8w9D80ur/9WJFx2fyxRDDEYP5zKVj9i3Ctb G6/Af1AWHWOfj5U9vN5xxs7ry99lDhA8wfOwDfxyfAzDLB49E17HIA+grlPHbp3tmufqIisP2TTH ZLhu9IQqm7b3R48UrufH52n/lWxSxegs2+ZEk7P5z/+uhPN5vc+/s8OOlmf3w4yD3//j8L0+g89B Oni63Sdur78/5pXDyBzhx/u1cWT14HTuxZ1Ayj5VLGUL5Fgx5uN8HawPuR5VOYK6XgsrpyWNWYYH +3mIk4+fD68br3NAAhRff3fZOL/vWY2Iz3PmMsdD5g4WLg+BR3yGiwnvs39aMFuKuRm23KsOnUWM inVoVjKoujerq6uYmlkqJyLmGY7XYbDsWFkWPra/36gaOHOOlzGo69ug7uYEibNfzK5Vtq48pfJc +P5tT7JIjiUcM+zvfQzuZyxw2SZ8aUfIvqdDtOx9x3yk7xs9ho+9Z11ISJnK6odA6nxdPp277MLy zrpZWCQjc4fK0slDVVn0O9k1vl9Dy1AxTdWpl6U/QnZnr4XFuasrISZxHYjZOscoRqgqBA4t+awT 4UuNdfcuYzK//hkGoM5V17MVdTdn21cdu7sYrGIqZsfZ6+H3+TxMjevdDKM1384Yr0OeRMxQSNA3 zpq/sPB/DAtvmGg4hAge25vxybt/+P0Mi74QoKpOVJZ5XmyBIH2+7/Bfxqu2tsNo1oSeybnpPtLs Xr2fuj5G6Lzn686TuOxaxGyzXPYMdii25Po4hg+4341jwkddiid9RIQJs0TsgmTdlBSxsQRo0S3h rJevS8fmh8sB7DFf5xBVwEaW7j/nQ36uzrEdY7+wWK5CuugOKRxBeUpMjPm+NH9Spqx78bFhrZwN Vlivi4lUd5+WDImZ/7046Yvs+sK6p+xiXZaSY+/oubakrlfVBFqqJZToyTDnwM+7ya7dw1muyjnw fp4JLHw/LUOcnicBuxTcrVAISzhZlC3793nA+3yePGxQHNPHoFBv00ntr9iH9TVboPIEGmnaZb8V E8dD3AdGtNiTYbaMCJrLMai7Vd33d7LrproceBI5Bp5wHNSx5rbt+ZcnuLuE43RzY7ouiMN24aak CNrrMJyI1aERpMsSZ/AMZ0wmy8SWo8ueAVtmXIC7bJyNY/bLWL8DPZ7fgcg5jvmQWHTlOR0WzVkm Fv8KUcHWFZ9ErDcDguOywkfKRFCxL+ta2e8PYRExS14jYllfdV1lPETWfb1/T7tB0xmF8zyUC92g ClGwqqqvG1pKFycPERzOjrMux2kZI2K3XJdyXYwxdsyHZHZsi5h/e2X3zjIRoaO6UvWXs0bHZ/a9 i67S7pklZOnhel6ewjxNVo0gYqU8BeY4Zx0OnrAhc0Flzz2JgV/Z9u+RbTd0K+zDub+rsllr7SmE JouhH3UdIF4YkzAmx2zex1jromDd6RkQI+kn65hfdZkwZ7DrRyaM6l+7GH3raR3esQ5WnjD0vx+i Gvn0Aoxtp1m0yo45O60YExUb8BZO/i5jLX7ZyoMENuIitq5irsq2PUa8O8+FHCz2DI5pQl0yTLzY 0kfSnTtUbiMeO26ZYdGMtZ4xq+iyhJsgsOmMs3RmkwJ7vl5/l8yOC6HqMkahpxnipGOM5OzUsmVn CVRNYA4x3sxuOcYy4pR5Sq7jOeaHunzMcL9ahnE6tuL9alZnMY1jktWlKutF+G7FfrRDNwoW4rek u6O6Rf+1fnfzXZbu3JLFuE8sdA9Yq2cH7km/9sqeN+rSuC6WyAYlrxoSKC5ROPuVMRVKjS1BoDJs XF0fWzJnw1gtcL/bLJuZGsozYHZfdpWg4fFhwT2zyDGX/UdMOLo4mXizOevOs9OXx6CssycnnPvG WIdb44H5zQy66H7wQ1oWMyZSpE3EZCQfMOLG9Xx2vzg3GEkf2j5X+8Ke/yzsmbP1dgguz88wBq4T N53vNyz7zBbH9KzFcaSM/gzTdjHIsuwx5YSFqhM/JyXeq7tV3b5CjsrZIeNHz0esn0WfOuNZo+fL PBPev4Yw3nbf85Mq2JZnXXu++PBAvWHTLub4GIwgC09AbAKLRffFf+/rRJ/9Mg+Zs++sH4zgR+m5 IEYeCRtVeR4EWS4EbpbMEsbWsS7mCZP2q7D/VLYZuFkFksUnn7PofSTdLMyKGcFSWf7Z9ZqhLse6 OI35i+w+v9+CJw78cTnh8JFFQ12qmBfv1HWq7r1iRORYfdSaPMuk6rrjijF2UyNnrAvO1Z5ymG4i Btr1IM85y4Yzjppkpryy2S2ZpVrxtl12DglV5MztqWdtX1yrP3vuuKmT05OYYexGH5N62gXh7Lfm QPVgGVcX6SHrVJxgUBMOjPBgl+yzn3whZopTpbpSeL32N50mFNxUZtI/DuxPGmMJ1YBA5FR2jkZ2 9oNv9zgL5E6ciG1H1v0YU2bHjBWHOeLhZ3T6Mit9SA5SiVzB9fLPzIK6YHQoRKyaZtwCL3x/Kwuv phZX9bf9ezvnWeVk/KPMLv2b9bQLxJP39hjnYd9hKjhmBSaGNKsTELT7PVjGRUfapeWj27vqWv0l r5gVnh3aHWKFzBPOUTiHwDpfxVyeJXt+njMG91GfKONI9VBfzpKZgcwKhhm5W4WxI5tSzOdwH2nM xwQqNEiSzz1E98qu/+b6x7+252tfiNB7iBBny8gMuVOdrxDAgE3fezrV6JQGyPOpz3PMqHFi889N ZXVnIpLUnTj0LDHSRQx1nuCYkuHA2ht2XQNib4ZNMyadeYKfRu46aocAcyUgaV2Er6hFskK8fP99 Jhj/dB7GZqkM4Wt40tnHS+YAxQyLgVWXxE0I4GGyBKXvrtRCnrZnP073/sfk2aY1U4NnnXiWipkV 2edF2DFMNWK1ILpw2SyRrqOjZ+J+sfWvZR2MPvykp3zF5D8mJjdXhyW8XNTkUDEXsWX8cjhGcMxS 7El0O6suU1TLuQfmSDX7lHHAfM7Q3ZSl+3uqsz880fn3veRoZUwTxZyJPPT53Xtewet+3a/2u+tA qblgTFwOYi2+w7Pm+hItvgsk7eru+C6XjJn0/p8W150e2Caw+DG9xZulZizNM4tOGf9OHaau8xhx 4pi7VIv50un6x3S62hUj5luzLkq7wqnojJpFmSE0J4acTDwMwXO2yQGe3OdYiNN3lsgpnS/zUG5a z3WXelDTUZg6qwb9m6zVlvVH1U/MXlV/d4M6MFiS6JciexIt2Q7JRrNSaj7Z3QyqO/mxnMeFsBB/ vy85WWrS3/q1leVXWL8lSBt4xgvBi+zMTDPljMG/k3Ib15cVn/m2mITIGRs95Tln9fSYmhvVF9m4 1NDMxmZc/3ymEyMui3ZqM+JknYgUxSyeSMh1sCLbkWPuBrNHqu5VszqMYKH7/LyGXjI3OGZ/A5E3 1Q/PsPkwK/SKf2cJ9epaKUXAbPYpUy8yS94EOzPrOrWvevfPxKBdDO7Cp7v5W2P8i7rSI0B7QHjw y8uywaj7pGMKWgIjWvz6yk2fvOIkxsp56GDpF4wYNENEzEcqrMV8j4B1yUs3TxBEw+9dxnCVQzmt SrZMnLAPsfYNDJez6Z7+3cwtTlim5FJJTtgkldpHyZQYCYPFZonwfdXfqVwgmx/OxOFiztG1Gi/O RC346035fENkdIkUT8omOEKOmPbyBl3NuwrLtTpOTepnzAbVdcl0pm7CMhh7R7ccYuxvhN23aiov xq7+Vj2GfOVLvXamuwaqLDLGnpl0t673U2QERsKMejvYkqmbhUjSJuptxwqlOWA9uT8le/S9ujdW Dfw5WHuk6a4F7UgYUyrgKSaFirErRTpmNqy6LqanzG6tmoxH9qTxptVUHw60oc5VNWU5khzAzxZd OcmRzDLxRMmWaI4MpWsG3w9i+S2r8xx2Cv1fzBYDgiQn1Kcbou4Jox+xV6wrmQ3JFpHNLPH8rfcE PeVJv6sJmWXt/dWnZszesvGKY8WqRIqnbTlBZunXfPDMYnAPJ9N4woOwX9ZmvKbkPGPfMxn2wDbc 6OSpmHujCYCqK2PWgNguurM7Zd8Z1s6KddV2l5UedqkFqrDlZN6acYXKsz4/f6smB9xcsNhygmoy irEvFdpREwREskeiqXFN5a1jtcxeqTrg2aD3ELMck//VlfHbn9b/xNJGsUVjXbynEweoj21sR1Wn qmx+SxCv67Bqrc6cSdId0yTL1vnztX87RmTcrrPfOSpesJ7w/8aT9kVWvpokGDNXPshit8qmK84W TiR0snAzHtboOGgOmnGDgYwOpQqb6kihpbxefLVtxWJKp2xR7TjQCFZ3N6fS7LAOFyZ2eueCn3/G MJPFVDXlWMXwTMlg1VUyvBlnkW4LHS3ufwedLHODqMyGTIqoyFYrAwyYG1YT8qgYH7en3EMdHTDj g2eDZqp1wRMQN9DGPBaTDTGHmC436MkWlS4QJu4GqZmpuH/qiuF/ZY67VdgmW0rIfhM95MDIT+rs jCO16p+OYq8RfnnIMUMe9V6o7yh9bEuUNhHjmHkS3C99HvyyqokRzEFSz7HYFem0KscRfTyro6bT bckU4pZgqYwlVzHfneBCw8KpwYrZoLPrMj490zHr+VytJtTDRjfHcLnvS7UcVPWpsl+FfaeIY6HS 03jj2fuWxDsZelBww66LK0ESbBZ5vm5vkMo2wc1/W0wxqlmijfrF2Z6nd3KEwLHKlONfI6iY86hd hVHBrpo/jjsi7v1i2rS41XOGWJl1T6LF7W8hPwGhEllu1K2aTi9LKcFddaI+0WxhOBCmrg/7vurz Vjse1bYZfB/lIbj/iznKu3U6anec+4Pj2rQLG1ZdGvy9qiuz2aPVrE22X7jSzWKVXLXbUG1wO3c8 uA1j92LXYU+1N9+ZisRZpZS203OOWcZ+3QQ7FO9/+9qgXW/QDh5tzBLzrjhXcR9xd0hVqvSHfGuh sIeYPPPB2ya6Jj57zqf4OLvjSfoMy63me5Vqq9SGBDDkPLlfXbGAlbcvBbm/piD3uzBfGmaryPjP LEnt+73edIiT12UM9JP6s9TBOlAFF8ZEOIZvUmm+tjw8pBtMUGQxkHnUDnwA/Wf1+bL+Mns6vF/M eWPJJPV5DSRys0luQqCsZyPSovrCP6M1EYll+exS1U1SMU4px6k+NGts4hYYH9un3Blh9fWqTs30 xQ6xLQYZNbzLocLE0ZM0d/Jhi6WtP98StRq9JXPKxCXbDRjr0ClPbqZO8zO7/XDQK9W8EHX1Rtl/ ptFRda22wNzws1Fxf/DulOvVZP/T02RgDWbX7Z2+aNV35Y3arB+tdJixRZfVwUrfKlW4g+k8NeWI pcpSD+vIY13FRctUc9jTsaKBQ7YEklVNSryDQLZqi2Wo46gOVpaltp34rs1Y86rFVGKq9lMgUGq+ eNUfdi1HuF7exnJbaFeyNqbqt6fVCGXfaoJEzVsrT9Duyy0ej3CCWOcJP3TGnkTND8a2Xb05ZomA XVoUfnOaubNst0OFeWczS36PlNhHLGauqnlofH6mUaJmuVg5nvcu8YQItj6DXrRSbFOWzTHmK4b/ mjG8pf3WZJI+w4rz/Umxy3Nz2eEstS2t3kZ2p5L1V9i2m6RPPkembrPS1uS9TBVCpywSLZnxgXcU 7jiG8+c2fKBZHae7FD2NOTiFl91cFTMqRbsV1ss3eyPdqmw+2DNTeqI629/mjEkes9u3POUUJR9G rOszXS0HnsDEh5yXBg7ZpRc94kSA3mV4xK0iVJ9hAuYZCd1NOATtDrfN8+G0L+QWmKSLk2lAqn7q O/X8aleh3ESWWCp7Ns5BsuzePNg+fk5hPvSDq7GSahuJ2lqKiM6NslfFBsw3b8+wedzL+vv5YeZV s2LchV0joqSx3rjdpEu4MGTXgp2JXSq8XmRvhu0qf9NGuvZfV0R/J6tmHW2VLY+Z86Sr1+MZMGOO xJxnEtsyel6FfbcvztXvzblCHrjT0nx1AZvaZI0pvZzmE3zhDsuY0IKVzlPGw1YqOmGTGVmSgutU /VltEosWmmtt8JSgn5joclZKapxMz+FS04e1ssFc9OM/w1f72mP0Z6vWtizr9AputdJ4qGcFW5Bj e7aTHtmRjsiXbBxfda3QQ23FBrVjPuQuh6Ooi7G1GDxaYclcr5a7JIrpT2Xp3BVr79SdmX5xtqtP TcmxKuxqEp7rOtbEWMV4bmgobLxSCtgEhyz8RB2rW084Uz1FyNTGOTf7lExIsGettsu0r+z0r2Wn 1v9VWL2fFfp3kcLGzAjkaHkdqDg11xOEh6f6NrIM1qhQqrGc7fopv2JW596l+gxm29uqC4SeRrA7 Q47wsuQBWLziMV+I1S6v/929Vdm+Zbx/dlja383iyzDY1UyN0gqx7hTraG2kuJ5pfajuUMXxwunI wfO6Q/O8s/dlpfqKXepnwB5O9iHgCSKWs8ICeqCm5llTMOPF4Ov7UXaBRqCePtz2kp5l5/d1HZ3p YjHbMFNlrdx7tgHO4MIM0WPEanX9VV3uFfHqbTeVIp8pGSQWrPf6SgW8kanJRCRsS5giGEtWsTbD ohVPWsUwuQmNOU99DzzmyHnSh1ixL29ObahWGapUf9VEh9IQTbHov2NnPCoD9GoTN96kYvZnS7o8 oT8NiZ9kbhRdrlXXyiYOuF++6h9nNB9f9/fgOTbS6MBqpNp0bokffh/ti5nxezAzcLsKT54YD131 2ZuPYULFVe6vvbQrsWu0JTsSeCIBpw6RRJ9auuA5c5eKYxgrp1f616mk8Tn16Pu3B6kPSYQKcIOR TEEyT5ph4u0NNSGVw2D10uSsDAiFZBPzKhahJG+l7L7aM4TZO+8oYKUBiUQV+tJO0SDZxJ0xKpRu F3tAe53TQ2RMD5qQ6AtFgf14lB7rEB7pzKIzBv49mWC41HceTlPi+rLGMjvOdKaYyYAx5wwPOH8s coAKC+Z+Ne9Jytiat6RLdXahwL3ajgmeWDD3yokqq+dkKrL7mCki5gbjIKdqer50l6ouajLfYZ/J 5u4qBmG9HZkge8CeU172OEpkSGpMUmzl+WGU0882ja8UENa87ik9T1Z3r7p6qBC4nXuT4GRwNscK dg7UIEux/qzqumBMQb1kxWSQ87yLGMRqOxnHquKEZZwq1bXaCOHCrg5z2FBJ3iGGvJHNwI1Xwmkz yVydVHU85wQnJ+sDMbr3wMCotCxVAsNaGpZAZYp6TjmP/t2p+yw2hx+C+Mc7DfDEj/mQLbZsjtnF QlQAHLme9eYscjrSu5ojrtieykKzvVQYBpqqK3lyHk92UDk9EapdcpTUJP+Kp2zZMesfZ12uaq+T YcOrnQ/KMjOVWeSNn/1t1n9O9kjJGMqWzJvDWWhFKPhl22narzpT86Xq8/eo+rR8R71HmGyHw1Zs M2GesGV37yracTb/zMZRbCzjJasujJof5hwDLfHzZg037/uuBkdMkEh5fZjGx90djk30czmGR8Ru BE90Mk+gmok7G75UcP4VFRyOyd7Se5hfPohvzupGXM83PNl4knAIGrUeM8vAIeiSKYHK5VRXHvNB EwIPgd1qzpfeZai7Mkrdp9pBoTQ4qokIVMFNEb2QA0TmB26XuQlPe4I9NLWJ1ULLMF/OPn+WUa82 qans1k4gxji3VSSbCaJ69NRTHvWEgfIstzcUAA5CiI7pJ+17slXVSqQd9KNr3WifTZtnwevIsmzJ 6MApvkzNBi1poxh2NskNG75nsz93qa+suixqo1jKAYMFINX+4Urtp1J9VZoe6MmUJTIbkpXm4xTn TDeLs24Yd5UYkePtN00xLUK/0yFKs8yaVf/S5AZUtlluGaEJe8VjRpKBmmnirTFZv7kLtVvFblRs 0K3o9652OmasS7XRDckHaNlZ1XJa8MVTjmo3yO7L+rXvTCToTdwxWzXdp0yLstrsnel4ZTnDWOxs qHTBtoAddzlluCWP69mjuyP0oaWe6j1V9QM4Q+tKg7LgI5f7k4iRwVN0qOymtpwGROondihk+5u4 dCktR0xZosVuhESdzI/EcwQcQcxs3Yv7L0dPD7G/KWGxnhod/0/dJslpOljBboZZG55NkrNKFCZW 2DVOQBjbUk0J9jHTzd9uYUjXyvhjPuTs0lbscqxms9wuRLdDorsw9Pz/hidT11WznIXhLaQqa+Xd 9Bspm2Oi5q6DujwZ+/JrU1u+qa1V2WTsh07XNVKbwa8uiUa8eGLgspQe+sUDNmFnajOZ6m2+c+FC kOJUJLMbH5KiuuRgvayJPYVuHfaAQ7C4m9r8rbpwOK9tIEz7fyMr3Be2Q3PMx0/V2V4pru4SGdar WJvcPcrkFnB+eoPcIqsiuojt72xWc92ohcJ7qW2J3aSxwIpHoeOUZsPFdhG2HMvWc10uvy84Q3ww Gz5PslOS/++pCbVMs0LO+kBd2gU3C5kEp4UOPXXI03dGZ+moESliOnoWt1/pDW0NtGxkhiiLQO5W xqXKMGi1yxFxgC2ZP66qhnc2tSsP0py+8ZhltpmRxUNXpXMXivcMdYkYDZEdyn4yJTjfFopvMkbS ZvJs1+CF9e5eTzphU4bqwXG0ZjHRcJEIKrUhRMh437HvQu26H/y7ndAMa+apRGSJxuy8L3WxQrYc pvzybJZZj6Erlijoo8eR+4vh+1EIm9/ZcOtyy+Y3ZjcKxv27ajlyIoGYEDzVl2LXSZ3s+9F74FX/ 12axmsM4k4n0LeExf/Gnf33+dFPrxuNJ0Xt9uLEwxA4HqUmRbHPh97MvY1vUnWe/lCcgMg6UZb/z IRXp1kr3ev6X2ZNSF4zqcty5sGK6rGK+Uq39Hx1QBkqZnejdAAAAAElFTkSuQmCC") #33383b;
}

body {
  background-position: top center;
}

div {
  height: 18em;
  width: 35em;
  position: relative;
  margin: 3em auto;
  padding: 5em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 1px #fff inset, 0 0 5em rgba(0, 0, 0, 0.2) inset, 0 0 2em rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  background: #eee;
}

div:after, div:before {
  height: 6em;
  width: 6em;
  position: absolute;
  content: "";
  border-radius: 50%;
}

div:after {
  left: -2em;
  top: -2em;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), 1px 1px #000;
}

div:before {
  right: -2em;
  bottom: -2em;
  box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.2), -1px -1px rgba(255, 255, 255, 0.4);
}

h1 {
  margin: 0;
  color: #666;
  font-family: "Avenir Next", Helvetica, Arial, sans-serif;
  font-size: 3em;
  font-weight: 100;
  text-align: center;
  text-shadow: 0 1px #fff;
}

h1:before {
  color: #0066cc;
  content: "@";
  text-shadow: 0 1px #fff;
}

h2 {
  margin: 0;
  color: #333;
  font-family: "Avenir Next", Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-align: center;
  text-shadow: 0 1px #fff;
  text-transform: uppercase;
}
</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
  <body>
	<div>
  	<h1>zastrow</h1>
    <h2>Designer + Developer</h2>
  </div>
</body>
</html>

18. Simplistic css business card

Made by Kyle Shanks. Simplistic css business card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Business Card</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
* {
  box-sizing: border-box;
  transition: 0.3s cubic-bezier(0.6, 0, 0.2, 1);
}
.abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.vert-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.rela-block {
  display: block;
  position: relative;
}
.rela-inline {
  display: inline-block;
  position: relative;
}
body {
  transition: 0s;
  background-color: #00c9ba;
  background: linear-gradient(to right bottom, #ff565a 50%, #00c9ba 50%);
  min-height: 100vh;
  font-family: 'Rubik', Helvetica, sans-serif;
  line-height: 1.3;
}
h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
h3 {
  font-size: 22px;
  margin-bottom: 5px;
  font-weight: 700;
}
b {
  font-weight: 700;
}
.container {
  perspective: 5000px;
  transform-style: preserve-3d;
  transition: 0.55s ease;
}
.container.flipped {
  transform: translate(-50%, -50%) rotateY(180deg);
}
.container.flipped .front {
  z-index: 1;
}
.container.flipped .back {
  z-index: 2;
}
.card {
  height: 307.5px;
  width: 547.5px;
  border-radius: 3px;
  box-shadow: 0px 4px 24px -1px rgba(0,0,0,0.3);
  pointer-events: none;
}
.front,
.back {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #fff;
  border-radius: 3px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  padding: 20px 30px 10px;
  pointer-events: all;
}
.front {
  z-index: 2;
  transform: translate(-50%, -50%) rotateY(0deg);
}
.back {
  transform: translate(-50%, -50%) rotateY(180deg);
}
.card-nav,
.card-footer {
  flex: 1 1 0;
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
}
.card-content {
  flex: 2 1 0;
}
.back-content {
  flex: 5 1 0;
}
.art {
  height: 70px;
  width: 70px;
}
.logo {
  left: 0;
  background: url("https://i.pinimg.com/originals/be/e0/fe/bee0fefa29acf5c991d39aa0c922a94b.png") center no-repeat;
  background-size: cover;
}
.portrait {
  background: url("https://images.vexels.com/media/users/3/145718/isolated/preview/ff12a3cdda3c630cb3d51b7af25ebdb3-hipster-logo-by-vexels.png") center no-repeat;
  background-size: cover;
  height: 120px;
  width: 120px;
}
.links {
  display: flex;
  color: #aaa;
}
.links li+li {
  margin-left: 20px;
}
.links li {
  cursor: pointer;
  font-size: 13px;
}
.links li:hover {
  color: #111;
}
.nav-links {
  right: 0;
}
.footer-links {
  left: 0;
}
.footer-links li {
  line-height: 20px;
  text-align: center;
  height: 24px;
  overflow: hidden;
  padding: 4px 0;
  transition: 0s;
}
.footer-links li i {
  font-size: 20px;
  opacity: 0;
  transition: 0.3s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.15s;
}
.footer-links li:hover i {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.6, 0, 0.2, 1);
}
.footer-links li:hover p {
  opacity: 0;
  margin-top: -20px;
  transition: 0.3s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.15s;
}
.content-container {
  display: flex;
  align-items: center;
  width: 105%;
  font-size: 18px;
}
.content-container * {
  transition: 0s;
}
.content-container .art-container {
  flex: 1 1 0;
}
.content-container .art-container .art {
  margin: 0 auto;
}
.portfolio-container {
  display: flex;
  flex-wrap: wrap;
}
.square {
  background-color: #ccc;
  border-radius: 5px;
  height: 100px;
  width: 100px;
  margin: 0 10px;
}
.square:hover {
  background-color: #999;
}
@media screen and (min-width: 1100px) {
  .container {
    transform: translate(-50%, -50%) scale(1.25);
  }
  .container.flipped {
    transform: translate(-50%, -50%) rotateY(180deg) scale(1.25);
  }
}
@media screen and (max-width: 680px) {
  .container {
    transform: translate(-50%, -50%) scale(0.75);
  }
  .container.flipped {
    transform: translate(-50%, -50%) rotateY(180deg) scale(0.75);
  }
}
</style>
</head>
<body>
  <!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|Nunito|Rubik" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<!-- PAGE STUFF -->
<div id="app">
  <div :class="['abs-center', 'container', (cardFlipped ? 'flipped' : '')]">
    <div class="card">
      <div class="abs-center front">
        <div class="rela-block card-nav">
          <div class="vert-center art logo"></div>
          <ul class="vert-center links nav-links">
            <li class="rela-inline" @click="cardFlipped = true; display = 'portfolio';">Portfolio</li>
            <li class="rela-inline">Writing</li>
            <li class="rela-inline" @click="cardFlipped = true; display = 'contact';">Contact</li>
          </ul>
        </div>
        <div class="rela-block card-content">
          <div class="vert-center content-container">
            <div>
              <h3>ใ“ใ‚“ใซใกใฏ</h3>
              <p>Hello, My name is ______!</p>
              <p>Dreamer with a big heart and bold ideas!</p>
            </div>
            <div class="art-container">
              <div class="art portrait"></div>
            </div>
          </div>
        </div>
        <div class="rela-block card-footer">
          <ul class="vert-center links footer-links">
            <li class="rela-inline">
              <p>Dribbble</p>
              <i class="fab fa-dribbble"></i>
            </li>
            <li class="rela-inline">
              <p>Medium</p>
              <i class="fab fa-medium"></i>
            </li>
            <li class="rela-inline">
              <p>Twitter</p>
              <i class="fab fa-twitter"></i>
            </li>
          </ul>
        </div>
      </div>
      <div class="abs-center back">
        <div class="rela-block card-nav">
          <ul class="vert-center links nav-links">
            <li @click="cardFlipped = false;">Back</li>
          </ul>
        </div>
        <div class="rela-block back-content">
          <div v-show="display === 'contact'" class="vert-center">
            <h2>Say Hello!</h2>
            <p><b>Name:</b> Person Personson</p>
            <p><b>Email:</b> [email protected]</p>
            <p><b>Phone:</b> 123-456-7890</p>
            <p><b>LinkedIn:</b> https://www.linkedin.com/in/person</p>
            <p><b>Github:</b> https://github.com/person</p>
            <p><b>Twitter:</b> @person</p>
          </div>
          <div v-show="display === 'portfolio'" class="vert-center">
            <h2>Portfolio!</h2>
            <div class="rela-block portfolio-container">
              <div class="rela-inline square"></div>
              <div class="rela-inline square"></div>
              <div class="rela-inline square"></div>
              <div class="rela-inline square"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script>
      <script id="rendered-js" >
// --- Notes ---
// https://static.collectui.com/shots/2806993/cassius-homepage-large

var app = new Vue({
  el: '#app',
  data: {
    cardFlipped: false,
    display: '' } });
    </script>
</body>
</html>

19. Business Card with Flip Effect

Made by Jonathan Ostrander. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
@import url(https://fonts.googleapis.com/css?family=Lato);

* {
  margin: 0;
  cursor: default;
}

body {
  background: url(https://subtlepatterns.com/patterns/grey_wash_wall.png);
}

.business-card {
  height: 260px;
  width: 427px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  perspective: 1000;
}

.business-card:hover .front {
	-webkit-transform: rotateY(180deg); 
}

.business-card:hover .back {
  -webkit-transform: rotateY(0deg);
}

.front, .back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.front {
  height: 260px;
  width: 427px;
  z-index: 2;
  background-color: black;
  background-image: url(https://i.imgur.com/VAzi3EA.png);
  background-position: 65% center;
  transition: ease .5s;
  transform-style: preserve-3d;
}

.overlay {
	height: 260px;
  width: 427px;
  position: fixed;
  background-color: black;
  opacity: 0.6;
}

.logo {
	position: relative;
  font-family: "Roboto", sans-serif;
  color: white;
  font-size: 150px;
  text-align: center;
  left: 40px;
  top: -10px;
}

.logo > span {
  position: relative;
}

.char1 {
  top: 70px;
  left: 10px;
}

.char2 {
  left: -59px;
  z-index: 30;
}

.char3 {
  left: -117px;
}

.back {
	height: 260px;
  width: 427px;
  position: relative;
  top: -260px;
  background-color: black;
	-webkit-transform: rotateY(-180deg);
  transition: ease .5s;
  transform-style: preserve-3d;
  z-index: 1;
  font-family: "Lato";
  color: white;
  text-align: center;
}

.title {
	height: 50px;
  line-height: 50px;
  font-size: 40px;
}

.container {
  height: 210px;
  width: 427px;
}

.jobs {
	list-style-type: none;
  margin: 0;
  height: 30px;
  line-height: 30px;
  padding: 5px 0;
  font-size: 17px;
}

.jobs > li {
  display: inline;
}

.jobs > li:after {
  content: " | ";
}

.jobs > li:last-child:after {
  content: ""
}

.contact {
	margin: 0 auto;
  height: 165px;
  width: 95%;
}

.row {
  height: 50%;
  width: 100%;
}

.row > div {
	height: 100%;
  width: 201px;
  display: block;
  float: left;
}

i {
  font-size: 30px;
}

.con-text {
	position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.top {
  border-bottom: 1px solid white;
}

.phone, .website {
  border-right: 1px solid white;
}

.email, .github {
  border-left: 1px solid white;
}

a, a:hover, i, i:hover {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>
  <div class="business-card">
  <div class="front">
    <div class="overlay"></div>
    <div class="logo">
      <span class="char1">J</span>
      <span class="char2">D</span>
      <span class="char3">O</span>
    </div>
  </div>
  <div class="back">
    <div class="title">Jonathan Ostrander</div>
    <div class="container">
      <ul class="jobs">
        <li>Nanoscale Engineer</li>
        <li>Web Developer</li>
        <li>Blogger</li>
      </ul>
      <div class="contact">
        <div class="top row">
          <div class="phone"><div class="con-text"><a href="tel:5166402963"><i class="fa fa-phone"></i> <br/> (516) 640-2963</a></div></div>
          <div class="email"><div class="con-text"><a href="#"> <i class="fa fa-envelope"></i> <br/></a></div></div>
        </div>
        <div class="bottom row">
          <div class="website"><div class="con-text"><a href="http://jonost.me"><i class="fa fa-home"></i><br />jonost.me</a></div></div>
          <div class="github"><div class="con-text"><a href="https://github.com/OstrichProjects/"><i class="fa fa-github-alt"></i><br />OstrichProjects</a></div></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
 

20. American Psycho Business Card (Flips over)

Made by Sibrand. American Psycho themed Business Card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - American Psycho Business Card (Flips over)</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
 body {
     background: url("https://images4.alphacoders.com/520/thumb-1920-52094.jpg");
     background-position: 350px;
     height: 100vh;
     display: flex;
     flex-flow: column wrap;
     align-content: center;
     justify-content: center;
}
 .scene{
     position:relative;
     -webkit-perspective:1000;
     perspective:1000;
     width: 100%;
}
 .card{
     -webkit-transition: all 1s ease;
     transition: all 1s ease;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     position:relative;
     margin-left:5px;
     -webkit-transition: all 1s ease;
     transition: all 1s ease;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     max-width: 560px;
     min-height: 300px;
     width: 100%;
     margin: 0 auto;
}
 .card:hover {
     transform: rotateY( 180deg );
     -webkit-transform: rotateY(180deg);
}
 .businesscard {
     background: #fff;
     max-width: 560px;
     min-height: 300px;
     width: 100%;
     text-align: center;
     padding: 10px;
     margin: 0 auto;
     font-family: 'EB Garamond', serif;
     text-transform: uppercase;
     color: #000;
     box-shadow: 4px 4px 15px -5px #000;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     position: absolute;
}
 .businesscard.front{
     z-index: 2;
     background: url("https://www.prems.work/userfiles/tr01sibrand.nl/images/businesscardbg.jpg");
}
 .businesscard.back{
     -webkit-transform: rotateY(180deg);
     transform: rotateY( 180deg );
     background: url("https://www.prems.work/userfiles/tr01sibrand.nl/images/businesscardbg.jpg");
     z-index: 3;
     font-size:11px;
}
 .businesscard.back b {
     font-size: 20px;
}
 .card:hover .businesscard.front{
     display: none;
}
 .card:hover .businesscard.front {
     display: block;
}
 .businesscard.back::after {
     content: "";
     top: 0;
     left: 0;
     position: absolute;
     background: url("https://www.prems.work/userfiles/tr01sibrand.nl/images/bloodspats.png");
     width: 100%;
     height: 100%;
}
 .businesscard div {
     float: left;
     width: 100%;
}
 .wrap:nth-child(1) {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     z-index: 1;
     padding: 10px;
}
 .wrap:nth-child(2){
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     z-index: 1;
}
 .wrap:nth-child(3){
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
     padding-bottom: 20px;
}
 .businesscard .number {
     width: 50%;
     text-align: left;
     font-size: 20px;
}
 .businesscard .company {
     width: 50%;
     text-align: right;
     font-size: 21px;
}
 .businesscard .company p {
     margin: 0;
     margin-bottom: -15px;
     font-size: 24px;
}
 .businesscard .company b {
     font-size: 28px;
}
 .businesscard .company small {
     font-size: 61%;
}
 .businesscard .nameandfunction{
     width: 100%;
     font-size: 18px;
}
 .businesscard .nameandfunction b {
     font-size: 26px;
}
 .businesscard .adress{
     width:100%;
     font-size: 14px;
}
 .businesscard .form-control {
     border: none;
     box-shadow: none;
     border-bottom: 1px solid #333;
     border-radius: 0;
     background-color: transparent;
     color: #333;
     z-index: 10;
     position: relative;
}
</style>
</head>
<body>
  <div class="scene">
    <div class="card">
        <div class="businesscard front">
            <div class="wrap">
                <div class="number">
                    212 555 6342
                </div>
                <div class="company">
                    <p><b>P</b>IERCE & <b>P</b>IERCE
                    </p>
                    <small><b>M</b>ergers and <b>A</b>quisitions</small>
                </div>
            </div>
            <div class="wrap">
                <div class="nameandfunction">
                    <b>P</b>atrick<b>BATEMAN</b>
                    <br>
                    <small><b>V</b>ice <b>P</b>resident</small>
                </div>
            </div>
            <div class="wrap">
                <div class="adress">
                    <b>358 Exchange Place New York, N.Y. 10099 FAX 212 555 6390 TELEX 10 4534</b>
                </div>
            </div>
        </div>

        <div class="businesscard back">
          <b>C</b>ontact <b>M</b>e
            <div class="form-group">
                <div class="col-sm-12">
                    <div class="input-group">
                        <input name="naam" id="naam" class="form-control" placeholder="Name" value="" type="text">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12">
                    <div class="input-group">
                        <input name="email" id="email" class="form-control" placeholder="Email" value="" type="text">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12">
                    <div class="input-group">
                        <input name="phone_number" id="phone_number" class="form-control" placeholder="Phone Number" value="" type="text">
                    </div>
                </div>
            </div>
           
            <div class="form-group">
                <div class="col-sm-12">
                    <div class="input-group">
                        <textarea cols="30" rows="3" name="message" id="message" placeholder="Message" class="form-control"></textarea>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'></script>
  
</body>
</html>

21. Geometric business card with CSS Grid

Made by Liz Wendling. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
.card {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  display: grid;
  font-family: 'Trebuchet MS', sans-serif;
  height: 200px;
  margin: 20px auto;
  width: 350px;
}
.front {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.front .blue {
  background-color: #4cc9c8;
  grid-column: 8 / span 5;
  grid-row: 1 / span 4;
}
.front .yellow {
  background-color: #f1ef1c;
  grid-column: 1 / span 7;
  grid-row: 1 / span 4;
}
.front .pink {
  background-color: #fa001a;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  grid-row: 1 / span 3;
  grid-column: 1 / span 11;
  position: relative;
  z-index: 2;
}
.front .dots {
  background: radial-gradient(#fa001a 20%, transparent 19%), radial-gradient(#fa001a 20%, transparent 19%), transparent;
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  grid-column: 1 / span 12;
  grid-row: 3 / span 2;
  margin: 0 0 15px 20px;
  z-index: 1;
}
.front .personal-intro {
  background: black;
  color: white;
  display: flex;
  flex-direction: column;
  grid-column: 4 / span 6;
  grid-row: 2 / span 2;
  justify-content: center;
  text-align: center;
  z-index: 3;
}
.front .personal-intro p {
  letter-spacing: 1px;
  text-transform: uppercase;
}
.front .personal-intro p:first-of-type {
  font-size: 18px;
}
.front .personal-intro p:last-of-type {
  font-size: 8px;
  margin-top: 5px;
}
.back {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}
.back .yellow {
  background-color: #f1ef1c;
  grid-column: 1 / span 9;
  grid-row: 1 / span 3;
}
.back .top.dots {
  background: radial-gradient(#4cc9c8 20%, transparent 19%), radial-gradient(#4cc9c8 20%, transparent 19%), transparent;
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  grid-column: 8 / span 6;
  grid-row: 2 / span 3;
}
.back .personal-info {
  grid-column: 2 / span 6;
  grid-row: 5 / span 6;
}
.back .personal-info p {
  font-size: 10px;
}
.back .personal-info p:first-of-type {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.back .personal-info p:nth-of-type(2) {
  font-size: 12px;
  margin-bottom: 15px;
}
.back .bottom.dots {
  background: radial-gradient(#4cc9c8 20%, transparent 19%), radial-gradient(#4cc9c8 20%, transparent 19%), transparent;
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  grid-column: 1 / span 8;
  grid-row: 11 / span 2;
  z-index: 2;
}
.back .pink {
  background-color: #fa001a;
  grid-column: 8 / span 5;
  grid-row: 10 / span 3;
}
</style>
</head>
<body>
  <div class="card front">
  <div class="blue"></div>
  <div class="yellow"></div>
  <div class="pink"></div>
  <div class="dots"></div>
  <div class="personal-intro">
    <p>Krista Stone</p>
    <p>Photographer Maker Doer</p>
  </div>
</div>
<div class="card back">
  <div class="yellow"></div>
  <div class="top dots"></div>
  <div class="personal-info">
    <p>Krista Stone</p>
    <p>Photographer. Maker. Doer.</p>
    <p>123 Address St</p>
    <p>Sacramento, CA 14234</p>
    <p>567.890.1234</p>
    <p>www.kristastone.com</p>
    <p>@kristastone</p>
  </div>
  <div class="bottom dots"></div>
  <div class="pink"></div>
</div>
</body>
</html>