A Pen by Thomas

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Thomas</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
    <span class="name" id="name">First Last</span>
    <span class="title" id="title">title</span>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/thomaskolmans/a-pen-by-thomas-JrPZag */
@import url(https://fonts.googleapis.com/css?family=Oswald);
.container {
  width: auto;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  border: 2px solid #505050;
  border-radius: 4px;
  overflow: hidden;
}
.container .name, .container .title {
  height: 100%;
  padding: 0 15px;
  float: left;
  text-transform: uppercase;
  box-sizing: border-box;
  position: relative;
  font-family: "Oswald";
  font-weight: 900;
}
.container .name {
  font-size: 1.4em;
}
.container .title {
  font-size: 1em;
}
.container .title::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10%;
  width: 2px;
  height: 120%;
  background: #505050;
  transform: rotate(15deg);
}

Comments