Reyouth Root Banner - Animate

index.html

<br><br>
  <div class="container-fluid">
    <div class="row">
    <div class="col">
      
      </div>
    </div>
</div>

  <div class="container">
    <div class="row">
    <div class="col">
     
            <div class="credit">
              <center>
        <a href="https://v4-alpha.getbootstrap.com/">&#183; BootStrap 4.0</a> &#183; <a href="https://github.com/IanLunn/Hover/blob/master/README.md#hovercss">Hoover</a> &#183; <A href="https://jquery.com/">JQuery</a> &#183; <a href="https:// fontawesome.io">FontAwesome</a> &#183 <a href="https://fonts.googleapis.com">Google Fonts</a> &#183;</center></div>
      </div>
  </div>

      <div class="row">
        <div class="reyouthroot mx-auto" id="obj">
          <center>
          <h1 id="banner-text" class="hvr-grow"><a href="http://reyouthroot.com" target="_blank">Reyouthroot Capsules for Men.</a></h1> 
            </center>
        </div>
    </div>
  </div>
<br>  <br>  <br>

  

reyouth-root-banner-animate.markdown

Reyouth Root Banner - Animate

Simple animation

A Pen by clondon on CodePen.

License.

script.js

$(document).ready(function(){

  $( "h1" ).hide().delay( 1500 ).show( 600 );
  // rotate the container 
  $("container").addClass(".rotate1");
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Andika');
body {
  
  font-family: Andika;
  background-image: url(http://reyouthroot.com/wp-content/uploads/light-blue-background-3.jpg);
  background-size: cover;
}
.credit {
   margin-bottom: 50px;
  font-size: 1.25rem;
  padding: 5px;
  text-shadow: 2px 2px 2px gold, -2px 2px 20px gold, 2px -2px 20px gold, -2px -2px 20px gold, 1px 1px 1px #fff,1px -1px 1px #fff, -1px 1px 1px #fff,-1px -1px 1px #fff;
  text-align: left;
    }
.credit a {color: black;}
.reyouthroot {
  box-shadow: 1px 1px 20px black,1px 1px 20px black;
  background: border-box red;
  transform: rotate(6.91deg);
  background-color: #fc523b;
  color: white;
  text-shadow: 2px 2px 20px gold, -2px 2px 20px gold, 2px -2px 20px gold, -2px -2px 20px gold, 1px 1px 1px #000,1px -1px 1px #000, -1px 1px 1px #000,-1px -1px 1px #000;
  text-align: center;
  width: 946.9px;
  height: 128.9px;
  align: middle;
  pading-top: 228px;
  vertical-align: middle;
  
}
.reyouthroot h1 {
  padding-top: 4%;
}
#banner-text {
  
}
.rotate1 {
  transform: rotate(10deg);
 
} 
/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}
#banner-text a {color: #fff;}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link href="https:///maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />