A Pen by Jonas Bjork

What is a a pen by jonas bjork How do you make a a pen by jonas bjork? This script and codes were developed by Jonas Bjork on 14 January 2022, Friday.

How do I make an a pen by jonas bjork?
  1. A Pen by Jonas Bjork Previews
  2. A Pen by Jonas Bjork HTML Codes
  3. A Pen by Jonas Bjork CSS Codes
A Pen by Jonas Bjork Previews

A Pen by Jonas Bjork HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Pen by  Jonas Bjork</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>

<div id="container">
  <svg version="1.1" class="border" width="427px" height="320px">
    <line class="top" x1="0" y1="0" x2="1281" y2="0" />
    <line class="right dash" x1="427" y1="0" x2="427" y2="960" />
    <line class="bottom" x1="-854" y1="320" x2="427" y2="320" />
    <line class="left dash" x1="0" y1="320" x2="0" y2="-1300" />
    </svg>
<div id="card">
  <div class="face">
    <svg version="1.1" class="logo" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 265.6 399.6" enable-background="new 0 0 265.6 399.6" xml:space="preserve">
          <defs>
              <linearGradient id="gradient" x1="-300%" x2="400%">
                <stop offset="0" stop-color="#fff"></stop>
                <stop offset="0" stop-color="#c16161">
                  <animate attributeName="offset" dur="20s" values="0;1;0" repeatCount="indefinite" />
                </stop>
                <stop offset="1" stop-color="#fff"></stop>
              </linearGradient>
          </defs>
        <path class="main-logo" fill="#1E1D1D" d="M238.6,3.4l0,245.1c0,1.9-1.5,3.4-3.4,3.4h-85.5c-1.9,0-3.4-1.5-3.4-3.4V129.3c0-1.9-1.5-3.4-3.4-3.4h-20.4
          c-1.9,0-3.4,1.5-3.4,3.4v239.9c0,1.9-1.5,3.4-3.4,3.4H30.4c-1.9,0-3.4-1.5-3.4-3.4v-114c0-1.9-1.5-3.4-3.4-3.4H3.4
          c-1.9,0-3.4,1.5-3.4,3.4v141.1c0,1.9,1.5,3.4,3.4,3.4h258.9c1.9,0,3.4-1.5,3.4-3.4l0-392.9c0-1.9-1.5-3.4-3.4-3.4l-20.4,0
          C240.1,0,238.6,1.5,238.6,3.4z M146.3,369.1v-87c0-1.9,1.5-3.4,3.4-3.4h85.5c1.9,0,3.4,1.5,3.4,3.4l0,87c0,1.9-1.5,3.4-3.4,3.4
          h-85.5C147.8,372.5,146.3,371,146.3,369.1z"/>
        </svg>
  </div>
  <div class="back face">
        <p class="head">DESIGNER</p>
  </div>
  
    <div class="back face two">
        <p class="head">DEVELOPER</p>
  </div>
  
  <div class="back face three">
        <p class="head">BUILDER</p>
  </div>
  <div class="back face four">
    <a href="http://www.reddit.com/user/bj_ork/" target="_blank"><p class="head link"><span>&#47;u&#47;</span>bj_ork</p></a>
  </div>
  </div></a>
</div>
  
  
</body>
</html>

A Pen by Jonas Bjork CSS Codes

html, body {
  background: #3a3b3a;
}

#container {
	overflow: hidden;
  position: relative;
  margin: 100px auto;
  width: 427px;
  height: 320px;
  z-index: 1;
}

#card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

#container:hover #card {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 15px #3a3b3a;
  text-align: center;
  -webkit-transform: translateZ(1px);
}


.face.back {
  display: block;
  width: 427px;
  height: 320px;
  -webkit-transform: rotateY(180deg) translateZ(1px);
  box-sizing: border-box;
  padding: 10px;
  background: none;
}

#container:hover .back.face {
  -webkit-animation-name: moveone;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 1.1s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes moveone {
  0% {
    top: 0px;
  }
  
  33% {
    top: -320px;
  }
  
  66% {
    top: -640px;
  }
  
  100% {
    top: -640px;
  }

}

.face.back.two {
  -webkit-transform: rotateY(180deg) translateZ(1px);
  top: 320px;
}

#container:hover .face.back.two {
  -webkit-animation-name: movetwo;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 1.1s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes movetwo {
  0% {
    top: 320px;
  }
  
  33% {
    top: 0px;
  }
  
  66% {
    top: -320px;
  }
  
  100% {
    top: -320px;
  }
}

.face.back.three {
  -webkit-transform: rotateY(180deg) translateZ(1px);
  top: 640px;
}

#container:hover .face.back.three {
  -webkit-animation-name: movethree;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 1.1s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes movethree {
  0% {
    top: 640px;
  }
  
  33% {
    top: 320px;
  }
  
  66% {
    top: 0px;
  }
  
  100% {
    top: -320px;
  }
}

.face.back.four {
  -webkit-transform: rotateY(180deg) translateZ(1px);
  top: 960px;
}

#container:hover .face.back.four {
  -webkit-animation-name: movefour;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 1.1s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes movefour {
  0% {
    top: 960px;
  }
  
  33% {
    top: 640px;
  }
  
  66% {
    top: 320px;
  }
  
  100% {
    top: 0;
  }
}


.logo {
  width: 25%;
  display: block;
  margin: 71.5px auto 0 auto;
  padding: 15px 40px;
}

.main-logo {
	fill: url(#gradient);
}


#container p {
  opacity: 0;
}

#container:hover p {
  opacity: 1;
}

.head {
	margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  color: #c16161;
  font-size: 3.5em;
  line-height: 300px;
}

a:link {
	text-decoration: none;
  
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

span {
  font-size: .7em;
}

.border {
  position: absolute;
  z-index: 1;
}

 
.border line {
    stroke-width: 15;
    stroke: #fff;
    stroke-dasharray: 427px;
  -webkit-transition: -webkit-all .3s ease-in-out;
    transition: all .3s ease-in-out;
  transition-delay: .2s;
  -webikit-transition-delay: .2s;
}

#container .dash {
  stroke-dasharray: 320px;
}

 
#container:hover svg line.top {
    -webkit-transform: translateX(-854px);
    transform: translateX(-854px);
  	stroke: #c16161;
}

#container:hover svg line.right {
    -webkit-transform: translateY(-640px);
    transform: translateY(-640px);
  stroke: #c16161;
}

#container:hover svg line.bottom {
    -webkit-transform: translateX(854px);
    transform: translateX(854px);
  stroke: #c16161;
}

#container:hover svg line.left {
    -webkit-transform: translateY(640px);
    transform: translateY(640px);
  stroke: #c16161;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.