<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="card"> <div class="name">GIGI YEH</div> <hr/> <div class="title">Graphic Designer</div> <div class="email">gigiyeh@company.com</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>

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; }