<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.