<html>
  <head>
    <title>Standing Text with Shadow</title>
  </head>
  <body>
    <nav>
      <ul class="links">
      <li><a href="Home">Home</a></li>
      <li><a href="Projects">Projects</a></li>
      <li><a href="Team">Team</a></li>
      <li><a href="Contact">Contact</a></li>
      <li><a href="FAQ's">FAQ's</a></li>
      </ul>
    </nav>
    <div class="center">
      <h1 data-title="Villainy">Villainy</h1>
      <br>
      <h6 data-title1="Films">Films</h6>
    </div>
    </body>
      </html>
body
{
  margin: 0;
  padding: 0;
  font-family: "arial black";
  overflow: hidden;
  background: #ccc;
}
.center
{
  margin-top: 5%; 
  translate(-50%, -50%);
  text-align: center;
}
h1
{
  text-transform: uppercase;
  font-size: 12em;
  color: rgba(0,0,0,.2);
  position: relative;
  margin: 0 auto;
  padding: 0;
  transform-origin: bottom;
  transform: skewX(50deg);
}
h6
{
  letter-spacing: 4.5em;
  font-size: 2em;
  color: rgba(0,0,0,0.2);
  position: relative;
  margin: auto 0;
  padding: 0;
  transform-origin: bottom;
  transform: skewX(50deg);
}

h1:before
{
  content: attr(data-title);
  position: absolute;
  color: #fff;
  transform-origin: bottom;
  transform: skewX(-50deg) translate(-70px, 29px) scaleY(1.5);
}
h6:before
{
  letter-spacing: 4.5em;
  content: attr(data-title1);
  position: absolute;
  color: #fff;
  transform-origin: bottom;
  transform: skewX(-50deg) translate(-11px, 1px) scaleY(1);
}

.links {
  display: flex; 
  flex-direction: row;
  justify-content: center;
  margin-right: 15%;
}

.links li {
  margin-left: 5%;
  text-decoration: none;
  list-style: none;
}


.links li a {
  text-decoration: none;
  color: white;
} 


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.