Add animation to head

Hi, So I have this nice animation someone did for me:
But I need to know how to add it to index.html.

I think I'm going to have to get him to add the links... But in the meantime, can someone show me how to do this, please?

Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
A couple of things - when you say add to HEAD I am assuming you mean the masthead of your page.

I see on the sample page there are <div> elements in the <head> section of the page which is not valid.

As for adding this to index.html - that all depends on what your index.html looks like.

Probably not the best time to raise this but you might want to reconsider banners with things that move. Unless this is what you want visitors to primarily focus on all that those moving pictures are going to do is complicate your page and distract your visitors. It might look shiny now but that wears off quickly.

Having said that if you still want to include it show us what page you are trying to integrate it to.
Melody ScottAuthor Commented:
That's what the client wants to see. This is what I meant by index.html:

Julian HansenCommented:
You need to do something like this - see notes afterwards
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Faveicon -->
<link rel="icon" href="favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.css">
<!-- Google Font opensans -->
<link href=',400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a> to improve your experience.</p>

<div class="container">
<div class="wrapper">

  <!-- copy these lines to your document: -->

  <div id="clinicaamericasv4_hype_container" style="margin:auto;position:absolute;height:228px;overflow:hidden;z-index: 1" aria-live="polite">
    <script type="text/javascript" charset="utf-8" src="ClinicaAmericasV4.hyperesources/clinicaamericasv4_hype_generated_script.js?47896"></script>

  <!-- end copy -->
<!-- Header Start-->
<header class="clearfix">
  <span class="navIcon"><i class="fa fa-navicon"></i></span>

  <nav class="pull-right" style="position: relative; z-index: 1000;">
    <ul class="clearfix">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="contact.html">Contact</a></li>
<!-- Header End-->

<!-- Contents Start -->
<section class="contents">
<p class="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<!-- Contents End -->

<!-- Footer Start -->
<div class="footerTop">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<!--<div class="partnersCntr">
<h3>Partner Companies</h3>
<div class="partners clearfix">
<div class="column pull-left">
<a href="#"><img src="images/boston-scientific2.jpg" /></a>
<a href="#"><img src="images/stryker2.jpg" /></a>
<div class="column pull-left">
<a href="#"><img src="images/olympus2.jpg" /></a>
<a href="#"><img src="images/allergan2.jpg" /></a>
<div class="column pull-left"><a href="#"><img src="images/cook-medicalsmall3.jpg" /></a></div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="getinTouch">
<h3>Get in Touch</h3>
<li class="clearfix"><i class="fa fa-phone pull-left"></i><span class="pull-left"><label>Phone:</label> 638-383-2440 </span></li>
<li class="clearfix"><i class="fa fa-envelope pull-left"></i><span class="pull-left"><label>Email:</label><a href="#"></a></span></li>
<li class="clearfix"><i class="fa fa-home pull-left"></i><span class="pull-left"><label>Address:</label>Clínica Santa Maria <br/> Niños Heroes 37<br/>Puerto Peñasco, SON </span></li>
<li class="clearfix pad"><span class="pull-left"><a href="#">Map</a></span></li>
<li class="pad"><img src="images/visa-mc.jpg" /></li>
</div> -->
<div class="copyright">Copyright &copy; 2013 Dr. Noé Zaragoza. All Rights Reserved.</div>
<!-- Footer End -->


<!-- jQuery Plugin -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap Plugin -->
<script src="js/bootstrap.min.js"></script>
<!-- Backstretch Plugin -->
<script src="js/jquery.backstretch.min.js"></script>
<!-- Custom Javascript -->
<script src="js/app.js"></script>

Open in new window

The <nav> has in element styling to position it over the header - you can leave it there or move it to your stylesheet.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
That's just perfect, thanks very much!
Julian HansenCommented:
You are welcome - good luck with your project.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.