testpen

In this example below you will see how to do a testpen with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by abakos, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright abakos ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>testpen</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

          <h1>HOVER PLEASE!</h1>
        <div class="frame">
            <div class="cont-1 ani">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed elit vitae pulvinar. Duis volutpat mollis aliquet. Quisque nulla libero, ullamcorper non sodales in, tempus ac est. Aliquam vestibulum orci suscipit rutrum finibus. Morbi id volutpat ante. Curabitur dapibus feugiat tellus. In hac habitasse platea dictumst. Duis et rutrum sem, non commodo lectus. Aenean placerat ligula sed velit aliquam, vitae fringilla mi sagittis. Vestibulum fermentum tincidunt orci, vel rhoncus purus dapibus ut. In convallis vel felis sed dictum. Praesent rutrum libero velit, ut hendrerit libero sodales a. Donec varius eros nisl, ut faucibus massa tristique sit amet.</p>
            </div>
            
            <div class="cont-2 ani">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed elit vitae pulvinar. Duis volutpat mollis aliquet. Quisque nulla libero, ullamcorper non sodales in, tempus ac est. Aliquam vestibulum orci suscipit rutrum finibus. Morbi id volutpat ante. Curabitur dapibus feugiat tellus. In hac habitasse platea dictumst. Duis et rutrum sem, non commodo lectus. Aenean placerat ligula sed velit aliquam, vitae fringilla mi sagittis. Vestibulum fermentum tincidunt orci, vel rhoncus purus dapibus ut. In convallis vel felis sed dictum. Praesent rutrum libero velit, ut hendrerit libero sodales a. Donec varius eros nisl, ut faucibus massa tristique sit amet.</p>
            </div>
        </div>
        <div class="frame">
            <div class="cont-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed elit vitae pulvinar. Duis volutpat mollis aliquet. Quisque nulla libero, ullamcorper non sodales in, tempus ac est. Aliquam vestibulum orci suscipit rutrum finibus. Morbi id volutpat ante. Curabitur dapibus feugiat tellus. In hac habitasse platea dictumst. Duis et rutrum sem, non commodo lectus. Aenean placerat ligula sed velit aliquam, vitae fringilla mi sagittis. Vestibulum fermentum tincidunt orci, vel rhoncus purus dapibus ut. In convallis vel felis sed dictum. Praesent rutrum libero velit, ut hendrerit libero sodales a. Donec varius eros nisl, ut faucibus massa tristique sit amet.</p>
            </div>
        </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/abakos/testpen-xEzZXj */
/* just a simple sketch, playing around */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: #DDD;
}

.frame {
  display: table;
  width: 80%;
  height: auto;
  top: 150px;
  padding: 0;
  margin: auto;
  margin-bottom: 2%;
  background: #ccc;
  font-size: 22px;
  text-align: center;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}

.cont-1 {
  display: inline-table;
  width: 40%;
  height: 100%;
  margin: 0;
  padding: 2%;
  background: #7EB575 linear-gradient(to bottom, #7EB575, #6AA95F);
  border-bottom-left-radius: 10px;
  box-shadow: 0 5px 0 #34562E, 0 0 20px #34562E inset, 0 20px 10px rgba(0, 0, 0, 0.5);
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
  color: #1D2F1A;
  text-shadow: 0 1px 0 #34562E, 0 2px 0 #34562E, 0 0 3px white;
  transition: 1s;
}

.cont-1:hover {
  transition: .35s;
  -webkit-transform: rotateX(25deg);
  transform: rotateX(25deg);
  box-shadow: 0 2px 0 #34562E, 0 0 20px #34562E inset, 0 5px 5px rgba(0, 0, 0, 0.25);
}

.cont-2 {
  display: inline-table;
  width: 60%;
  height: 100%;
  margin: 0;
  padding: 2%;
  background: #CFC1A9 linear-gradient(to bottom, #CFC1A9, #BFAD8E);
  box-shadow: 0 5px 0 #7D7262, 0 0 20px #7D7262 inset, 0 20px 10px 0 rgba(0, 0, 0, 0.5);
  border-bottom-right-radius: 10px;
  color: #464037;
  text-shadow: 0 1px 0 #7D7262, 0 2px 0 #7D7262, 0 0 3px white;
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
  transition: 1s;
}

.cont-2:hover {
  transition: .35s;
  -webkit-transform: rotateX(25deg);
  transform: rotateX(25deg);
  box-shadow: 0 2px 0 #7D7262, 0 0 20px #7D7262 inset, 0 5px 5px rgba(0, 0, 0, 0.25);
}

.cont-3 {
  display: block;
  width: 50%;
  margin: 2% auto;
  font-size: 16px;
  background: #454661;
  border-radius: 10px;
  box-shadow: 0 5px 0 #222231, 0 0 20px #222231 inset, 0 20px 10px 0 rgba(0, 0, 0, 0.5);
  padding: 2%;
  color: white;
  -webkit-transform: scale(0.5) rotateX(25deg) rotateY(-180deg);
  transform: scale(0.5) rotateX(25deg) rotateY(-180deg);
  transition: 2s;
}

.cont-3:hover {
  transition: 1s;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  box-shadow: 0 5px 0 #222231, 0 0 20px #222231 inset, 0 5px 5px 0 rgba(0, 0, 0, 0.25);
}

Comments