text-shadow

index.html

<div class="full-wrapper">
<div class="content-wrapper">
<div class="headline">
<small>the new</small><br/>
GDG&trade;<br/>
website <br/>
will be<br/>
ready<br/>
<strong>very</strong><br/>
soon<br/>
	<small>
	please,<br/>
stay tuned!<br/></small>	
</div>
<!-- Next one will try to make the shadow looks like a profil -->
<div class="gdg__ascii">
	<code><pre>         _              _            _        
        /\ \           /\ \         /\ \      
       /  \ \         /  \ \____   /  \ \     
      / /\ \_\       / /\ \_____\ / /\ \_\    
     / / /\/_/      / / /\/___  // / /\/_/    
    / / / ______   / / /   / / // / / ______  
   / / / /\_____\ / / /   / / // / / /\_____\ 
  / / /  \/____ // / /   / / // / /  \/____ / 
 / / /_____/ / / \ \ \__/ / // / /_____/ / /  
/ / /______\/ /   \ \___\/ // / /______\/ /   
\/___________/     \/_____/ \/___________/</pre>	
		</code>
		</div>
	</div>
	</div>

style.scss

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 100 {
    $val: #{$val}, -#{$i}px #{$i}px #{$color};
  }
  @return $val;
}

body{
	display:flex;
	align-items:stretch;
	flex-direction:column;
	background-color:light-gray;
	& .full-wrapper{
		align-self:stretch;
	width:100%;
	display:flex;
		flex-direction:column;
		flex-wrap:wrap;
	align-items:stretch;
	justify-content:space-between;
	align-content:flex-end;}
& .content-wrapper{
	background: hsl(239, 100%, 20%);//#EDEEE9;
	}}

.headline{
	font-family: 'Archivo Black', sans-serif;
	padding : 40px;
	overflow:hidden;
	margin: 0px auto;
	width: 300px;
	font-weight: 600; 
	line-height: 60px; 
	font-size: 60px; 
	text-align: left;
	font-size: 3rem;
	color: #ff0059; 
	/* font-family: 'Georgia'; */
	text-shadow: makelongshadow(#3E3E40);
}

.gdg__ascii{
	display:inline-block;
	z-index:-12;
	&{
	code pre {
	color:hsl(63°, 100%, 50%);
	font-weight:bold;
		direction: ltr;
		unicode-bidi: bidi-override;
		transition: color 800ms ease-in-out, direction 8000ms ease-in-out;
		&:hover{color:#ff0059;direction:rtl;}
}
}
}

styles

<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet" />

text-shadow.markdown

text-shadow

Inpired by https://www.mixfont.com/

A Pen by gdg on CodePen.

License.