Writing Pen using HTML and CSS

Hello coders,

Today we will learn to code a writing pen note, write your code in any editor save both the file separately don’t forget to link the CSS file with the HTML file or you may write the styling code in an HTML file under style tag.

copy and paste these simple coding lines and see the magic

HTML Code:

<!DOCTYPE html>
<html lang="en">
  <!--www.codeithub.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>writing pen</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="letter">
        <div class="pen">
          <div class="bodypen">
            <div class="whitestripe"></div>
            <div class="blackstripe"></div>
          </div>
          <div class="penhead">
            <div class="mine"></div>
          </div>
        </div>
      
        <div class="paper">
        </div>
      </div>
</body>
</html>

CSS Code:

/*www.codeithub.com*/
body {
  margin: 100;
  font-weight: 300;
  background-color: black;
  color: grey;
}

.letter {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding: 15px;
  height: 100vh;
}

.pen {
  display: block;
  position: relative;
  width: 20px;
  height: 200px;
  animation: 4s infinite linear slidein;
  z-index: 2;
}

.bodypen {
  position: absolute;
  left: 30px;
  width: 150px;
  height: 30px;
  transform: rotate(-35deg);
  transform-origin: top left;
  background-color: #a10f0f;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  animation: 0.25s infinite alternate updownpen,
    0.5s infinite alternate rotateBody;
}

.whitestripe {
  position: absolute;
  right: 25px;
  width: 25px;
  height: 30px;
  background-color: #c0b5b5;
}

.blackstripe {
  position: absolute;
  right: 0;
  width: 30px;
  height: 30px;
  background-color: black;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.penhead {
  position: absolute;
  width: 0px;
  height: 0px;
  left: 30px;
  border-left: 20px solid transparent;
  border-right: 10px solid transparent;
  border-top: 50px solid #ffe4ae;
  transform: rotate(50deg);
  transform-origin: top left;
  animation: 0.25s infinite alternate updownpen, 0.5s infinite alternate rotate;
}

.mine {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 3px solid transparent;
  border-top: 18px solid #242222;
  top: -17px;
  left: -7px;
}

.paper {
  position: absolute;
  height: 30rem;
  width: 30rem;
  padding: 16px 35px;
  margin: 40px;
  outline: none;
  background-image: linear-gradient(
      #00000045 0.05em,
      transparent 0.05em
    ),
    radial-gradient(circle at 25px 35px, transparent 10px, white 3px);
  background-size: 100% 4em;
  -webkit-box-shadow: 9px 4px 7px -10px #424242;
  -moz-box-shadow: 9px 4px 7px -10px #424242;
  box-shadow: 9px 4px 7px -10px #424242;
  box-shadow:
    0 -1px 1px #00000026,
    0 -10px 0 -5px #eee,
    0 -10px 1px -4px #00000026,
    0 -20px 0 -10px #eee,
    0 -20px 1px -9px #00000026;
    z-index: 1;
}

@keyframes updownpen {
  from {
    top: 80%;
  }
  to {
    top: 85%;
  }
}

@keyframes slidein {
  from {
    margin-left: 4rem;
  }
  to {
    margin-left: 20rem;
  }
}
@keyframes rotate {
  from {
    transform: rotate(50deg);
  }
  to {
    transform: rotate(60deg);
  }
}

@keyframes rotateBody {
  from {
    transform: rotate(-40deg);
  }
  to {
    transform: rotate(-30deg);
  }
}

OUTPUT

See also  Animated Image Grid with CSS3 Based Hover Caption Effects

EXAMPLES:

Glowing Effect on Buttons using HTML and CSS

Blog Card Slider using HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *