<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Saira:wght@300;900&display=swap" rel="stylesheet">

 <svg id="dot-bg" width="100%" height="100%">
  <pattern id="pattern-circles" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
     <circle id="pattern-circle" cx="10" cy="10" r=".75" fill="#000"></circle>
  </pattern>
  
  <rect  id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect>
</svg>


<div class="container">
  <h1 class="duplicate" title="trafficking">Trafficking</h1> </br></br></br></br>
  <h1 class="duplicate center-align blur-text" title="Trafficking">Trafficking</h1>
  <h1 class="duplicate right-align" title="Trafficking">Trafficking</h1>
</div>



h1 {
  font-family:'saira', sans-serif;
  text-transform:uppercase;
  font-size:3em;
  font-weight:300;
  padding-left:20px;
}

.duplicate::before{
  content:attr(title);
  display:block;
  color:rgba(0, 0, 0, 0.1);
  font-size:150%;
  font-weight:900;
  margin-bottom:-70px;
  filter: blur(2.5px);-webkit-filter: blur(2.5px);
}

.center-align {text-align:center;}
.right-align {text-align:right;}

.left-dash {
  width:50%;
  positon:relative;
  margin-left:0;
}

.container {
  max-width:1200px;
  margin:0 auto;  
}

* {margin-left:0; margin-right:0;}

#dot-bg {
  position:fixed;
  z-index:-1;

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.