Unit Three

LATEST REVISED with BUTTONS - Download with Delay for Chaining CSS Animations

Older Versions:

An Alternative Treatment for the Carousel Is Provided Below

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Stargazer</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- FALLDESIGN, put your custom styles in this stylsheet -->
    <link href="css/styles.css" rel="stylesheet" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
/*needed for fixed top nav */

body {
padding-top: 100px;
}
.carousel {
z-index: -99;
}
.carousel .item {
position: fixed;
top: 80px;
width: 100%;
height: 100%;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.carousel .one {
background: url(images/abstract1.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .two {
background: url(images/engineeringdrawings1280x500.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .three {
background: url(images/keyboard1280x500.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .active.left {
left: 0;
opacity: 0;
z-index: 2;
}
.my-custom-well {
width: 60%;
padding: 4em;
margin: 30px auto;
text-align: center;
background: rgba(0,0,0,0.80);
color: white;
}
.navbar-fixed-top {
margin-top: 0px;
padding-bottom: 30px;
}
</style>
    </head>
    <body>
<div class="container-fluid" id="wrapper">
      <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        <a class="navbar-brand" href="index.html">Portfolio of<br>
            Pat Smith</a></div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="defaultNavbar1">
       
        <!-- FALLDESIGN, this nested list is how you do a hover dropdown -->
        <ul class="nav navbar-nav navbar-right">
              <li><a href="design-samples.html" class="dropdown-toggle"  data-hover="dropdown">Design Samples</a>
            <ul class="dropdown-menu">
                  <li><a href="design-samples.html#Maya">Maya</a></li>
                  <li><a href="design-samples.html#Illustrator">Illustrator</a></li>
                  <li><a href="design-samples.html#Photoshop">Photoshop</a></li>
                </ul>
          </li>
              <li><a href="work-experience.html">Work Experience</a></li>
              <li><a href="about-me.html">About Me</a></li>
              <li><a href="#">Another Link</a></li>
              <li><a href="#">Another Link</a></li>
            </ul>
      </div>
          <!-- /.navbar-collapse -->
        </div>
    <!-- /.container-fluid -->
  </nav>
      <div id="myCarousel" class="carousel container slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
          <div class="active item one"></div>
          <div class="item two"></div>
          <div class="item three"></div>
        </div>
  </div>
      <div class="container my-custom-well">
    <h2>The headline</h2>
    <h4>The images will resize nicely with the browser's viewport.</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae nibh placerat mauris dignissim convallis et sed nisi. </p>
  </div>
      <div class="container">
    <div class="row">
          <div class="col-md-4">
        <div class="thumbnail"><img src="images/placeholder800x800.png" alt="Thumbnail Image 1" class="image-fill">
              <div class="caption">
            <h3>C Ring</h3>
            <p>In feugiat libero non lacus rutrum ultricies. Etiam dignissim, massa et vestibulum molestie, nibh nisl aliquet ante, vitae scelerisque dui eros nec magna. Aenean at diam egestas, ullamcorper felis vitae, pretium nisl. Suspendisse blandit lorem turpis, non tempus leo aliquet imperdiet.</p>
          </div>
            </div>
      </div>
          <div class="col-md-4">
        <div class="thumbnail"><img src="images/placeholder800x800.png" alt="Thumbnail Image 1" class="image-fill">
              <div class="caption">
            <h3>A Ring</h3>
            <p>In feugiat libero non lacus rutrum ultricies. Etiam dignissim, massa et vestibulum molestie, nibh nisl aliquet ante, vitae scelerisque dui eros nec magna. Aenean at diam egestas, ullamcorper felis vitae, pretium nisl. Suspendisse blandit lorem turpis, non tempus leo aliquet imperdiet.</p>
          </div>
            </div>
      </div>
          <div class="col-md-4">
        <div class="thumbnail"><img src="images/placeholder800x800.png" alt="Thumbnail Image 1" class="image-fill">
              <div class="caption">
            <h3>S Rings</h3>
            <p>In feugiat libero non lacus rutrum ultricies. Etiam dignissim, massa et vestibulum molestie, nibh nisl aliquet ante, vitae scelerisque dui eros nec magna. Aenean at diam egestas, ullamcorper felis vitae, pretium nisl. Suspendisse blandit lorem turpis, non tempus leo aliquet imperdiet.</p>
          </div>
            </div>
      </div>
        </div>
  </div>
      <footer>&copy; 2015 Your Name </footer>
    </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
        $('.carousel').carousel({interval: 3100});
      });
    </script>
<script src="js/bootstrap-hover-dropdown.min.js"></script>
</body>
</html>