<div class="container">
	 
			<section class="rw-wrapper">
				<h2 class="rw-sentence">
					<span>Really</span>
					<span>would you like</span>
					<span>to</span>
					<div class="rw-words">
						<span>Discover</span>
						<span>make</span>
						<span>Looking </span>
						<span>enjoy</span>
						<span>create</span>
						<span>invent</span>
					</div>
					<span>today?</span>
				</h2>
			</section>
			 
        </div>

<div class="social">
  <a href="https://www.udemy.com/learn-psd-to-responsive-parallax-html-5-css-3-web-design/?couponCode=PSD_HTML" target="_blank">Click Here for Free PSD TO HTML course 2019</a>
</div>
     body{
	background: url(https://i.postimg.cc/B6hYRmmd/autumn-1657662-960-720.jpg) no-repeat top right;
	background-attachment: fixed;
	background-size: cover;
}
.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 0px auto 0 auto;
	padding: 10px;
}
.rw-sentence{
	margin: 0;
}
.rw-sentence span{
	text-align: center;
	color: rgba(255,255,255,1);
	font-family: 'Roboto Condensed', sans-serif;
	white-space: nowrap;
	text-shadow: 2px 5px 10px rgba(0,0,0,0.1);
}
.rw-sentence > span{
	position: absolute;
}
.rw-sentence > span:first-child{
	top: 0px;
	left: 140px;
	font-size: 700%;
	color: rgba(187,177,168,0.6);
     
}
.rw-sentence > span:nth-child(2){
	top: 160px;
	left: 300px;
	font-size: 315%;
	color: rgba(191,218,206, 0.7);
}
.rw-sentence > span:nth-child(3){
	top: 185px;
	left: 65px;
	font-size: 600%;
	color: rgba(255,255,255,0.8);
}
.rw-sentence > span:last-child{
	top: 435px;
	left: 550px;
	font-size: 200%;
	color: rgba(237,234,168, 0.9);
    text-transform: uppercase;
}
.rw-words{
	position: absolute;
	left: 220px;
	top: 220px;
	height: 80px;
	width: 400px;
	-webkit-perspective: 800px;
	perspective: 800px;
    text-transform: uppercase;
    font-family: impact;
}
.rw-words span{
	position: absolute;
	font-size: 800%;
	color: transparent;
	text-shadow: 0px 0px 80px rgba(255,255,255,1);
	opacity: 0;
	-webkit-animation: rotateWord 18s linear infinite 0s;
	-ms-animation: rotateWord 18s linear infinite 0s;
	animation: rotateWord 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
	-ms-animation-delay: 3s; 
	animation-delay: 3s; 
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
}
 
@keyframes rotateWord {
    0% { 
        opacity: 0;        
        animation-timing-function: ease-in;        
        transform: translateY(-200px) translateZ(300px) rotateY(-120deg); }
    5% { 
        opacity: 1;         
        animation-timing-function: ease-out;
        -webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg); transform: translateY(0px) translateZ(0px) rotateY(0deg); 
    
    }
    
    
	6% { 
        text-shadow: 0px 0px 0px rgba(255,255,255,1); 
        color: #fff; }
    
    17% { 
        opacity: 1; 
        text-shadow: 0px 0px 0px rgba(255,255,255,1);
        color: #fff; }
    
    20% { opacity: 0; }
    100% { opacity: 0; }
}
 
			.no-cssanimations .rw-words span:first-child{
				opacity: 1;
				color: #fff;
				text-shadow: none;
			}


  .social
{
  position:fixed;
  bottom:10px;
  right:10px;
  background:#fff;
  font-family:verdana;
  padding:5px;
  border-radius:5px;
  animation:new .5s linear infinite;
  margin-top:-50px;
}
.social a
{
  text-decoration:none;
  color:black;
  font-weight:bold;
}
@keyframes new
{
  0%
  {
    transform:scaleX(1);
  }
  50%
  {
    transform:scaleX(.95);
  }
  100%
  {
    transform:scaleX(1);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.