Got from webdevtrick.
index.html
<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS Neon Text Effect | Webdevtrick.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="main">
<div class="row">
<div class="col-md-11"></div>
<div class="col-md-1">
<span class="webdev">?</span>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<span class="socod">Lucurious Labs</span>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</body>
</html>style.css
/** code by webdevtrick ( https://webdevtrick.com ) **/
@font-face {
font-family: 'neontubes';
src: url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.eot");
src: url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.eot?#iefix") format("embedded-opentype"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.woff2") format("woff2"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.woff") format("woff"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #000000;
}
.main {
display: block;
position: absolute;
top: 50%;
left: 30%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50vw;
height: auto;
font-family: "neontubes";
font-size: 16vw;
text-align: center;
white-space: nowrap;
}
.main span {
display: block;
position: relative;
-webkit-transform: translateZ(0) translate3D(0, 0, 0);
transform: translateZ(0) translate3D(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: opacity;
}
.main .webdev {
font-size: 18vw;
text-align: center;
color: #ffd9e2;
text-shadow: 10px 10px 40px transparent, 10px 10px 10px #ff003c, 20px 20px 20px rgba(255, 0, 60, 0.5), 40px 40px 40px #ff003c, 100px 100px 100px #ff003c, 200px 200px 200px #ff003c, 300px 300px 300px #ff003c, 500px 500px 500px #ff003c, 1000px 1000px 1000px #ff003c;
-webkit-animation: blink 4s infinite alternate;
animation: blink 4s infinite alternate;
}
.main .socod {
font-size: 11vw;
color: #d4eaff;
text-shadow: 0 0 0 transparent, 0 0 10px #2695ff, 0 0 20px rgba(38, 149, 255, 0.5), 0 0 40px #2695ff, 0 0 100px #2695ff, 0 0 200px #2695ff, 0 0 300px #2695ff, 0 0 500px #2695ff;
-webkit-animation: buzz 0.01s infinite alternate;
animation: buzz 0.01s infinite alternate;
}
@-webkit-keyframes buzz {
70% {
opacity: 0.80;
}
}
@keyframes buzz {
70% {
opacity: 0.80;
}
}
@-webkit-keyframes blink {
40% {
opacity: 1;
}
42% {
opacity: 0.8;
}
43% {
opacity: 1;
}
45% {
opacity: 0.2;
}
46% {
opacity: 1;
}
}
@keyframes blink {
40% {
opacity: 1;
}
42% {
opacity: 0.8;
}
43% {
opacity: 1;
}
45% {
opacity: 0.2;
}
46% {
opacity: 1;
}
}
@media screen and (min-width: 1000px) {
.main {
width: 400px;
font-size: 150px;
}
.main .socod {
font-size: 103px;
}
}