<link href="https://fonts.googleapis.com/css?family=Anton|Archivo+Black|Gloria+Hallelujah|Indie+Flower|Monoton|Pacifico|Passion+One:900" rel="stylesheet">



<div class="wrapper">
  
<div class="background">
  
  
  <div class="top">
     <span data-splitting class="WhatTop">WHAT<span>
     <span class="WhatBottom">WHAT<span>
     <span class="WhatBottomBlack">WHAT<span>
</div>
       
  <div class="bottom">
    <span data-splitting class="EverTop"> EVER<span>
      <span class="EverBottom"> EVER<span>
      <span class="EverBottomTwo"> EVER<span>
      <span class="BottomBk">  <span>
</div>
       
        
</div>
        
  <div class="bar">
        <a href="" class="typewrite" data-period="2000" data-type='[ "NEVERMIND.." ]'>
  </a>
 

</div>

  </div>
        
        
 <h4> Click to rerun it ;) 
   <br> coded by <a style="color:blue;" href="https://www.Mansoour.com"> Mansoour</a></h4>

.wrapper{
 margin:0px auto;
 text-align: center;
}

.background{
  overflow:hidden;
  display: inline-block;
  opacity:0;
  background:#080740;
  cursor: pointer;
  border-radius: 20px 20px 1px 1px;
  width:0px;
  height:0px;
  position: relative;
  text-align:center;
  text-align:center;  line-height:200px;
  padding-bottom:1px;
}

 /* never mind background  */ 
.bar{
  margin:0 auto;
  font-family: 'Archivo Black', sans-serif;
  color:#FF6501;
  border-radius: 1px 1px 100px 100px;
  font-size: 25px; 
  width:450px;
  position: relative;
  background:#080740;
  height:30px;
  padding:5px 0px 10px 0px;
  margin-top:-50px;
  letter-spacing: 20px;
  text-align: center;
  overflow:hidden;
  z-index:-4;
  opacity:0;
}

 /* "what" background */ 
.top{
font-family: 'Anton', sans-serif;
  color:#fff;
  font-size: 200px;
  position: relative;
 width:450px;
 height:200px;
 opacity:0;
}

 /* "ever" background  */ 
.bottom{
font-family: 'Anton', sans-serif;
color:#080740;
border-radius: 0px;
  opacity:0;
font-size: 225px; 
width:430px;
padding-top:3px;
 height:200px;
 position: relative;
display: inline-block;
overflow:hidden;
background-color: #080740;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  
}

 /* "what" ainmated background  */ 
.BottomBk{
width:10430px;
 height:220px;
  position: absolute;
  color:#fff;
  z-index:-1;
  left:-10000px;
  top:-5px;
  opacity:0.7;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
      -webkit-animation: slide 50s forwards infinite;
    -webkit-animation-delay: 0s;
    animation: slide 900s forwards infinite;
    animation-delay: 0s;
}



 /* ever text  */ 
.EverTop{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:1;
}

/* ever text shadow orange */ 
.EverBottom{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 3px;
  left: 3px;
  color:#FF6501;
  opacity:1;
  z-index:-1;
}

/* ever text shadow white */ 

.EverBottomTwo{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 2px;
  left: 2px;
  color:#fff;
  z-index:-1;
  opacity:0.7;
}


/* what  text */ 
.WhatTop{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:1;
  opacity:0.9;
}

/* what text shadow orange */ 
.WhatBottom{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 2px;
  left: 5px;
  color:#000;
  opacity:0.5;
  z-index:-1;
}

/* what text shadow black */ 
.WhatBottomBlack{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 1px;
  left: 3px;
  color:#FF6501;
  opacity:1;
  z-index:-1;
}

/* nevermind text */ 
.typewrite{
  display:none;
}

/* what ever text ainmation  */
.splitting .char {
 animation: slide-in 1s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(100ms * var(--char-index));
}


/* ainmations for "ever" background */

@keyframes slide-in {
  from {
    transform: translateY(-1em) rotate(-.5turn) scale(0.5);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
    0% { left: -10000px; }
}

@keyframes slide {
    100% { left: 1px; }
}












 /* Global Styling  */ 
body{
  background-color: #ff6501;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%23ffffff' fill-opacity='0.07'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

h4{
 text-align: center; 
  font-family: monospace;
  cursor: pointer;
  color:#fff;
  position:fixed;
  bottom:5px;
  right:5px;
  z-index:-5;
}


a:link {
    color: #FF6501;
    text-decoration: none;
}
a:visited {
    color: #FF6501;
    text-decoration: none;
}
a:hover {
    color: #fff;
    text-decoration: none;
}

/* inspired by http://bit.ly/2wzyTlx  */

$(document).ready(function(){
  
   /* time out for whatever ainmations */ 
setTimeout(function(){
$(".top,.bottom").animate({opacity:"1"},500);
Splitting();}, 500);
  
   /* fade in everything */ 
$(".background").delay(0).fadeIn(1000);
$(".typewrite").delay(500).fadeIn(1000);  
$(".bar").delay(500).animate({marginTop: "-2px",opacity:"1"},500);
$(".background").animate({height: "410px", width:"450px",opacity:"1"},500);
 $("h1,h4").delay(1000).animate({marginTop: "5px",opacity:"1"},500);

  
   /* rerun everything */ 
 $( "html" ).click(function() {
$(".bar").delay(0).animate({marginTop: "-50px",opacity:"0"},100); 
$(".background").animate({height: "0px", width:"0px",opacity:"0"},500);
$(".typewrite").animate({opacity:"0"},500);
$("h1,h4, .top,.bottom").animate({opacity:"0"},500);
 $(".bar").delay(2000).animate({marginTop: "-1px",opacity:"1"},500);
$(".background").delay(1000).animate({height: "410px", width:"450px",opacity:"1"},500);
 $(".typewrite, h1,h4").animate({opacity:"1"},2000);
 $(".top,.bottom").delay(1400).animate({opacity:"1"},500);

    setTimeout(function(){
    Splitting();}, 1500);
    
});
  
  
 
});



 /* typewriter effect for nevermind */ 
var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { font-family: 'Archivo Black', sans-serif; color:#FF6501; border-right: 0.01em solid #000;}";
        document.body.appendChild(css);
    };