A Pen by Иванов Павел

Thumbnail
This awesome code was written by ardentum, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ardentum ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Иванов Павел</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="poem">
  Если ты верстать закончил,
  То сходи и посмотри,
  Как страницу отрисует
  Лишь любимый браузер твой.
  Чтобы время сэкономить,
  В остальных смотреть не надо.
  Главное сверстать быстрее
  И залить страницу в прод.
</div>

<div class="trash">
  <input type="range" class="range">
  
  <input type="checkbox" class="checkbox" checked>
  
  <select name="" id="" class="select">
    <option value="">undefined</option>
  </select>
  
  <div class="block1"></div>
  <div class="close"></div>
  
  <div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  
  <div class="title">&lt;!doctype</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ardentum/a-pen-by-andx418andx432andx430andx43dandx43eandx432-andx41fandx430andx432andx435andx43b-dmRoQX */
.poem {
  white-space: pre-wrap;
  text-transform: lowercase;
  position: fixed;
  right: 10vw;
  bottom: 5vh;
  -webkit-transform: scale(0.99);
          transform: scale(0.99);
  overflow: scroll;
  font-size: 20px;
  padding: 5px;
}

.trash > * {
  position: fixed;
}
.trash .range {
  top: 20vh;
  left: 30vw;
  -webkit-transform: scale(5) rotate(-15deg);
          transform: scale(5) rotate(-15deg);
}
.trash .checkbox {
  bottom: 25vh;
  left: 10vw;
  -webkit-transform: scale(5) rotate(-36.6deg);
          transform: scale(5) rotate(-36.6deg);
  -webkit-filter: blur(1px);
          filter: blur(1px);
}
.trash .select {
  top: 25vh;
  left: 80vw;
  -webkit-transform: scale(1.7) rotate(46deg);
          transform: scale(1.7) rotate(46deg);
  box-shadow: 15px 40px 5px 5px rgba(0, 0, 0, 0.2);
}
.trash .block1 {
  top: 25vh;
  left: 10vw;
  width: 100vw;
  height: 100vh;
  background: red;
  opacity: 0.1;
  border-radius: 3px;
}
.trash .close {
  top: 5vh;
  right: 5vh;
  border-radius: 3px;
  padding: 5px;
}
.trash .close:after {
  content: '&times;';
  color: red;
}
.trash .items {
  bottom: 10vh;
  left: 30vw;
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
}
.trash .items .item {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: blue;
  opacity: 0.5;
  line-height: 100px;
  text-align: center;
}
.trash .items .item:last-child {
  position: relative;
  top: 2px;
}
.trash .title {
  font-size: 35px;
  opacity: 0.1;
}

Comments