<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <p>WlCm!</p> </div> </div>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap"); body { margin: 0px; display: flex; align-items: center; justify-content: center; height: 100vh; background: #fef; } p { --size: 3.5px; --color: #00f; color: transparent; font-size: 400px; font-family: Bree Serif; background: repeating-linear-gradient( -45deg, var(--color), var(--color) var(--size), transparent var(--size), transparent calc(var(--size) * 2) ), repeating-linear-gradient( 45deg, var(--color), var(--color) var(--size), transparent var(--size), transparent calc(var(--size) * 2) ); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 10px; position: relative; left: 10px; top: 10px; animation: p 1s infinite alternate; } p::before { content: "WlCm!"; position: absolute; color: transparent; background: #e45; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 10px; z-index: -1; animation: p 1s infinite alternate; } @keyframes p { 0% { left: 0px; top: 0px; } 100% { left: -10px; top: -10px; } }