<html>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover')">
<div class="card" >
<div class="front-card">
<div class="top">
<div class="card-header">
<h1 class="head">< <span id="capital1">H</span>ermes <span id="capital2">K</span>eng /></h1>
<h3 class="head job_position">Full Stack Web Developer</h3>
</div>
</div>
<div class="card-bottom">
<div class="box" >
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" class="icon" id="github" width="45" height="45" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;;fill:#000000;"><linearGradient id="SVGID_1__52539" gradientUnits="userSpaceOnUse" x1="30.9989" y1="16" x2="30.9989" y2="55.3422" spreadMethod="reflect"> <stop offset="0" style="stop-color:#6DC7FF"></stop> <stop offset="1" style="stop-color:#E6ABFF"></stop></linearGradient><path style="fill:url(#SVGID_1__52539);" d="M25.008,56.007c-0.003-0.368-0.006-1.962-0.009-3.454l-0.003-1.55 c-6.729,0.915-8.358-3.78-8.376-3.83c-0.934-2.368-2.211-3.045-2.266-3.073l-0.124-0.072c-0.463-0.316-1.691-1.157-1.342-2.263 c0.315-0.997,1.536-1.1,2.091-1.082c3.074,0.215,4.63,2.978,4.694,3.095c1.569,2.689,3.964,2.411,5.509,1.844 c0.144-0.688,0.367-1.32,0.659-1.878C20.885,42.865,15.27,40.229,15.27,30.64c0-2.633,0.82-4.96,2.441-6.929 c-0.362-1.206-0.774-3.666,0.446-6.765l0.174-0.442l0.452-0.144c0.416-0.137,2.688-0.624,7.359,2.433 c1.928-0.494,3.969-0.749,6.074-0.759c2.115,0.01,4.158,0.265,6.09,0.759c4.667-3.058,6.934-2.565,7.351-2.433l0.451,0.145 l0.174,0.44c1.225,3.098,0.813,5.559,0.451,6.766c1.618,1.963,2.438,4.291,2.438,6.929c0,9.591-5.621,12.219-10.588,13.087 c0.563,1.065,0.868,2.402,0.868,3.878c0,1.683-0.007,7.204-0.015,8.402l-2-0.014c0.008-1.196,0.015-6.708,0.015-8.389 c0-2.442-0.943-3.522-1.35-3.874l-1.73-1.497l2.274-0.253c5.205-0.578,10.525-2.379,10.525-11.341c0-2.33-0.777-4.361-2.31-6.036 l-0.43-0.469l0.242-0.587c0.166-0.401,0.894-2.442-0.043-5.291c-0.758,0.045-2.568,0.402-5.584,2.447l-0.384,0.259l-0.445-0.123 c-1.863-0.518-3.938-0.796-6.001-0.806c-2.052,0.01-4.124,0.288-5.984,0.806l-0.445,0.123l-0.383-0.259 c-3.019-2.044-4.833-2.404-5.594-2.449c-0.935,2.851-0.206,4.892-0.04,5.293l0.242,0.587l-0.429,0.469 c-1.536,1.681-2.314,3.712-2.314,6.036c0,8.958,5.31,10.77,10.504,11.361l2.252,0.256l-1.708,1.49 c-0.372,0.325-1.03,1.112-1.254,2.727l-0.075,0.549l-0.506,0.227c-1.321,0.592-5.839,2.162-8.548-2.485 c-0.015-0.025-0.544-0.945-1.502-1.557c0.646,0.639,1.433,1.673,2.068,3.287c0.066,0.19,1.357,3.622,7.28,2.339l1.206-0.262 l0.012,3.978c0.003,1.487,0.006,3.076,0.009,3.444L25.008,56.007z"></path><linearGradient id="SVGID_2__52539" gradientUnits="userSpaceOnUse" x1="32" y1="5" x2="32" y2="59.1669" spreadMethod="reflect"> <stop offset="0" style="stop-color:#1A6DFF"></stop> <stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><path style="fill:url(#SVGID_2__52539);" d="M32,58C17.663,58,6,46.337,6,32S17.663,6,32,6s26,11.663,26,26S46.337,58,32,58z M32,8 C18.767,8,8,18.767,8,32s10.767,24,24,24s24-10.767,24-24S45.233,8,32,8z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" id="fb" x="0px" y="0px" width="45" height="45" viewBox="0 0 48 48"
style="fill:#000000;"><g id="surface1"><path style=" fill:#3F51B5;" d="M 42 37 C 42 39.761719 39.761719 42 37 42 L 11 42 C 8.238281 42 6 39.761719 6 37 L 6 11 C 6 8.238281 8.238281 6 11 6 L 37 6 C 39.761719 6 42 8.238281 42 11 Z "></path><path style=" fill:#FFFFFF;" d="M 34.367188 25 L 31 25 L 31 38 L 26 38 L 26 25 L 23 25 L 23 21 L 26 21 L 26 18.589844 C 26.003906 15.082031 27.460938 13 31.59375 13 L 35 13 L 35 17 L 32.714844 17 C 31.105469 17 31 17.601563 31 18.722656 L 31 21 L 35 21 Z "></path></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" id="linkedin" x="0px" y="0px" width="45" height="45" viewBox="0 0 46 46"style="fill:#000000;"><g id="surface1"><path style=" fill:#0288D1;" d="M 42 37 C 42 39.761719 39.761719 42 37 42 L 11 42 C 8.238281 42 6 39.761719 6 37 L 6 11 C 6 8.238281 8.238281 6 11 6 L 37 6 C 39.761719 6 42 8.238281 42 11 Z "></path><path style=" fill:#FFFFFF;" d="M 12 19 L 17 19 L 17 36 L 12 36 Z "></path><path style=" fill:#FFFFFF;" d="M 14.484375 17 L 14.457031 17 C 12.964844 17 12 15.886719 12 14.5 C 12 13.078125 12.996094 12 14.515625 12 C 16.035156 12 16.972656 13.078125 17 14.5 C 17 15.886719 16.035156 17 14.484375 17 Z "></path><path style=" fill:#FFFFFF;" d="M 36 36 L 31 36 L 31 26.902344 C 31 24.703125 29.773438 23.203125 27.808594 23.203125 C 26.308594 23.203125 25.496094 24.214844 25.101563 25.191406 C 24.957031 25.542969 25 26.511719 25 27 L 25 36 L 20 36 L 20 19 L 25 19 L 25 21.617188 C 25.722656 20.5 26.851563 19 29.738281 19 C 33.316406 19 36 21.25 36 26.273438 Z "></path></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" id="ig" x="0px" y="0px" width="45" height="45" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;;fill:#000000;"><linearGradient id="SVGID_1__43625" gradientUnits="userSpaceOnUse" x1="32" y1="6.6667" x2="32" y2="57.8724" spreadMethod="reflect"> <stop offset="0" style="stop-color:#1A6DFF"></stop> <stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><path style="fill:url(#SVGID_1__43625);" d="M44,57H20c-7.168,0-13-5.832-13-13V20c0-7.168,5.832-13,13-13h24c7.168,0,13,5.832,13,13v24 C57,51.168,51.168,57,44,57z M20,9C13.935,9,9,13.935,9,20v24c0,6.065,4.935,11,11,11h24c6.065,0,11-4.935,11-11V20 c0-6.065-4.935-11-11-11H20z"></path><linearGradient id="SVGID_2__43625" gradientUnits="userSpaceOnUse" x1="32" y1="18.1667" x2="32" y2="45.6793" spreadMethod="reflect"> <stop offset="0" style="stop-color:#6DC7FF"></stop> <stop offset="1" style="stop-color:#E6ABFF"></stop></linearGradient><path style="fill:url(#SVGID_2__43625);" d="M32,45c-7.168,0-13-5.832-13-13c0-7.168,5.832-13,13-13c7.168,0,13,5.832,13,13 C45,39.168,39.168,45,32,45z M32,23c-4.962,0-9,4.038-9,9c0,4.963,4.038,9,9,9c4.963,0,9-4.037,9-9C41,27.038,36.963,23,32,23z"></path><linearGradient id="SVGID_3__43625" gradientUnits="userSpaceOnUse" x1="46" y1="12.75" x2="46" y2="23.0487" spreadMethod="reflect"> <stop offset="0" style="stop-color:#6DC7FF"></stop> <stop offset="1" style="stop-color:#E6ABFF"></stop></linearGradient><circle style="fill:url(#SVGID_3__43625);" cx="46" cy="18" r="3"></circle></svg>
</div>
<div class="line3">
</div>
<div class="line2">
</div>
<div class="line1">
</div>
</div>
</div>
<div class="back-card">
<div class="left-container">
</div>
<div class="right-container">
<div class="text-back-content">
<b>Hermes Keng</b><br>
<b>National Taipei University</b>
<p>Skills:</p>
<ul>
<li>C++</li>
<li>C#</li>
<li>Javascript</li>
<li>Python</li>
<li>Android</li>
<li>Swift</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="message">
<h1>Click me !</h1>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css?family=KoHo');
body{
height:800px;
background-color:#2c3848;
font-family: 'KoHo',sans-serif;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.flip-container{
width:24em;
height:15em;
perspective:1000px;
}
.card:hover{
transform:rotateY(5deg);
}
.flipped{
transform:rotateY(180deg);
-webkit-transform: rotateY( 180deg );
}
.flipped:hover{
transform:rotateY(165deg);
}
.card{
width:100%;
height:100%;
position:relative;
border-radius:12px;
transition: transform 1.2s;
transform-style:preserve-3d;
box-shadow:0px 0px 320px 3px grey;
}
.line1{
width:100%;
height:0.3em;
background-color:#f7aa00AA;
margin-bottom:0.6em;
}
.line2{
width:100%;
height:0.3em;
background-color:#f18a9b55;
margin-bottom:0.3em;
}
.line3{
width:100%;
height:0.3em;
background-color:#373640;
margin-bottom:0.3em;
}
.front-card{
-webkit-backface-visibility: hidden;
position: absolute;
z-index:3;
width:100%;
height:100%;
border-radius:12px;
background-color:#e5e5e5;
display:flex;
flex-direction:column;
transform: rotateY(0deg);
}
.back-card{
-webkit-backface-visibility: hidden;
position: absolute;
display:flex;
flex-direction:column
top:0;
left:0;
width:100%;
height:100%;
background-color:#e5e5e5;
border-radius:12px;
transform: rotateY(180deg);
}
.top{
background-image:linear-gradient(#7474BF,#348AC7);
width:100%;
height:55%;
border-radius:12px;
border-bottom-left-radius: 50% 30%;
border-bottom-right-radius: 50% 40%;
}
.card-header{
border-radius:10px;
text-align:center;
animation-name: starter;
}
.card-bottom{
width:100%;
height:45%;
padding-top:20px;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
#capital1{
color:#f7aa00;
animation-name:capital1-starter;
animation-duration:2s;
}
@keyframes capital1-starter {
0% {color:transparent;}
100% {color:#f7aa00;}
}
#capital2{
color:#f18a9b;
animation-name:capital2-starter;
animation-duration:2s;
}
@keyframes capital2-starter {
0% {color:transparent;}
100% {color:#f18a9b;}
}
.head{
/* color:#393e46; */
color:#e5e5e5;
margin-bottom:-0.4em;
animation-name:head-starter;
animation-duration:5s;
}
@keyframes head-starter {
0% {color:transparent;}
100% {color:#e5e5e5;}
}
.icon{
margin-right:0.33em;
margin-bottom:1em;
cursor:pointer;
animation-name:link-starter;
animation-duration:8s;
}
#ig:hover {
border-bottom:3px solid #373640;
}
#fb:hover {
border-bottom:3px solid #373640;
}
#linkedin:hover {
border-bottom:3px solid #373640;
}
#github:hover {
border-bottom:3px solid #373640;
}
@keyframes link-starter {
0% {opacity:0;}
30% {opactiy:0;}
100% {}
}
.box{
text-align:center;
margin:auto;
}
.message{
animation-name:message-bling;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes message-bling {
0% {color:transparent;}
100% {color:#e5e5e5;}
}
.text-content{
margin-left:1.5em;
margin-righ:1.5em;
}
.text-back-content{
margin-left:1.5em;
margin-righ:1.5em;
margin-top:1em;
color:#393e46;
}
.back-card{
background-color:#e5e5e5;
display:felx;
}
.right-container{
width:65%;
height:100%;
display:flex;
flex-direction:column;
}
.right-container p{
margin-top:0.4em;
}
.right-container b{
margin-top:0.5em;
margin-bottom:0.5em;
}
.right-container ul{
margin-top:-0.6em;
}
.left-container{
position:relative;
width:35%;
height:100%;
/* background-image:linear-gradient(#7474BF95,#348AC795); */
background-image: url("https://preview.ibb.co/dQWV00/IMG-3254-2.jpg");
background-position: center;
background-repeat: no-repeat;
background-size:cover;
opacity:0.8;
border-radius:12px;
border-right:1px #dadada solid;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
color:white;
}
var ids=["github","fb","linkedin","ig"]
var isFlipped=false;
var card=document.getElementsByClassName("card")[0];
card.onclick=function(){
if(!isFlipped){
card.classList.add("flipped");
isFlipped=true;
}else{
card.classList.remove("flipped");
isFlipped=false
}
}
var buttons=[];
var links=["https://github.com/HermesKeng","https://www.facebook.com/Loganning7","https://www.linkedin.com/in/hermes-keng-65a457b3/","https://www.instagram.com/hermeskeng/"]
var card=document.getElementsByClassName("card")[0];
for(var i =0;i<ids.length;i++){
var button = document.getElementById(ids[i]);
buttons.push(button);
}
buttons[0].onclick=function(){
var a = document.createElement('a');
a.target="_blank"
a.href=links[0];
console.log(a.href);
a.click();
}
buttons[1].onclick=function(){
var a = document.createElement('a');
a.target="_blank"
a.href=links[1];
a.click();
}
buttons[2].onclick=function(){
var a = document.createElement('a');
a.target="_blank"
a.href=links[2];
a.click();
}
buttons[3].onclick=function(){
var a = document.createElement('a');
a.target="_blank"
a.href=links[3];
a.click();
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.