CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-animations
sanic
sanic

Reputation: 2085

Element disappears after the re-appear animation completes

Can anybody give me insight into why the element disappears (gets hidden) after the re-appearing animation completes upon hitting the toggle switch .project-list for a 3rd time. Is there a flaw in my if/else statement?

Here is the CSS for the animation classes slideDown (disappear) and slideUp.

http://www.justinaguilar.com/animations/css/animations.css

var main = function() {

  var enabled = false;
  //$('#project-box').hide();

  $('.project-list').click(function() {
    debugger;
    if (enabled == false) {
      $('#project-box').addClass("slideUp");
      $('#project-box').removeClass("slideDown");
      enabled = true;
      $('#project-box').show();

    } else {
      $('#project-box').removeClass("slideUp");
      $('#project-box').addClass("slideDown");
      enabled = false;

      $("#project-box").on('webkitAnimationEnd', function() {
        $('#project-box').hide();
      });
    }


    //$('#project-box').toggleClass("slideUp");
  });

  //    $(window).scroll(function () {
  //        $('#project-box').each(function () {
  //            var imagePos = $(this).offset().top;
  //
  //            var topOfWindow = $(window).scrollTop();
  //            if (imagePos < topOfWindow + 400) {
  //                $(this).addClass("slideUp");
  //            }
  //        });
  //    });

  //$('#carousel').carousel('cycle');
}

$(document).ready(main);
/* Exit Animation
-------------------------------------------------- */

.slideDownEdit {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: hidden !important;
}
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(8%);
  }
  65% {
    transform: translateY(-4%);
  }
  80% {
    transform: translateY(4%);
  }
  95% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(500%);
    visibility: hidden;
  }
}
/* Footer
-------------------------------------------------- */

.footer {
  background-color: #dddee1;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  border: 1px solid grey;
}
.footer p {
  font-size: 18px;
  margin-top: 10px;
  color: #777;
  position: absolute;
}
.footer a {
  color: #b55e5e;
  font-size: 16px;
  margin-top: 10px;
}
.footer .pull-right {
  color: #b55e5e;
  font-size: 16px;
  margin-top: 10px;
  right: 10%;
}
/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0;
  /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */

.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
  margin-top: 120px;
  font-size: 50px;
  display: inline-block;
}
/* Project Box 
------------------------- */

#project-box {
  text-align: center;
  cursor: pointer;
  border: 3px solid #636366;
  cursor: pointer;
  width: 75%;
  margin: auto;
  visibility: hidden;
}
#project-divider.featurette-divider {
  margin: 10px 0;
}
#project-box a {
  font-size: 30px;
  margin-left: 300px;
  margin-right: 100px;
  color: darkred;
  display: block;
  margin: auto;
}
#project-box p {
  font-size: 20px;
  color: dimgrey;
}
.project-list {
  cursor: pointer;
  color: darkred;
}
.slider {
  overflow-y: scroll;
  max-height: 500px;
  /* approximate max height */
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
  max-height: 0;
}
.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(-8%);
  }
  65% {
    transform: translateY(4%);
  }
  80% {
    transform: translateY(-4%);
  }
  95% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50% {
    -webkit-transform: translateY(-8%);
  }
  65% {
    -webkit-transform: translateY(4%);
  }
  80% {
    -webkit-transform: translateY(-4%);
  }
  95% {
    -webkit-transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
<!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>Murray Studio</title>
  <meta name="description" content="Main Page for Murray Studio">
  <link rel="icon" href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/animations.css">
  <link rel="stylesheet" href="main.css">
</head>

<body>



  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container marketing">

    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="first-featurette">
        <div class="col-md-7">
          <a class="featurette-heading" href="#">Projects.</a>
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
          <p class="project-list">See Projects.</p>
          <div id="object" class="slideUp">
            <div id="object" class="slideDownEdit">
              <div id="project-box">
                <a>Embraer adds third Legacy 500 prototype to flight test campaign</a>
                <hr class="featurette-divider" id="project-divider">
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>

              </div>
            </div>
          </div>
        </div>
        <div class="col-md-5">
          <img class="featurette-image img-responsive center-block" src="http://a1.dspnimg.com/data/l/423341110329_Qy737Vid_l.jpg" alt="Generic placeholder image">
        </div>
      </div>
    </div>

    <hr class="featurette-divider">
  </div>

  <!-- /END THE FEATURETTES -->

  <!-- FOOTER -->
  <footer class="footer">
    <div class="container">
      <p class="pull-right"><a href="#">Back to top</a>
      </p>
      <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a>
      </p>
    </div>
  </footer>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="main.js"></script>
</body>


</html>

Upvotes: 1

Views: 1413

Answers (2)

Harry
Harry

Reputation: 89770

Your problem is because within the webkitAnimationEnd event handler you aren't checking for the state. The below code is an event handler which means every time an animation on the #project-box ends the box is hidden. This happens only the 3rd time because you are attaching the event handler only on the 2nd click.

  $("#project-box").on('webkitAnimationEnd', function() {
      $('#project-box').hide();
  });

You can fix it by checking for the state within the event handler like in the below code:

var main = function() {

  var enabled = false;
  //$('#project-box').hide();

  $('.project-list').click(function() {
    //debugger;
    if (enabled == false) {
      $('#project-box').addClass("slideUp");
      $('#project-box').removeClass("slideDown");
      enabled = true;
      $('#project-box').show();

    } else {
      $('#project-box').removeClass("slideUp");
      $('#project-box').addClass("slideDown");
      enabled = false;
      $("#project-box").on('webkitAnimationEnd', function() {
        if (enabled == false)
          $('#project-box').hide();
      });
    }


    //$('#project-box').toggleClass("slideUp");
  });

  //    $(window).scroll(function () {
  //        $('#project-box').each(function () {
  //            var imagePos = $(this).offset().top;
  //
  //            var topOfWindow = $(window).scrollTop();
  //            if (imagePos < topOfWindow + 400) {
  //                $(this).addClass("slideUp");
  //            }
  //        });
  //    });

  //$('#carousel').carousel('cycle');
}

$(document).ready(main);
/* Exit Animation
-------------------------------------------------- */

.slideDownEdit {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: hidden !important;
}
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(8%);
  }
  65% {
    transform: translateY(-4%);
  }
  80% {
    transform: translateY(4%);
  }
  95% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(500%);
    visibility: hidden;
  }
}
/* Footer
-------------------------------------------------- */

.footer {
  background-color: #dddee1;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  border: 1px solid grey;
}
.footer p {
  font-size: 18px;
  margin-top: 10px;
  color: #777;
  position: absolute;
}
.footer a {
  color: #b55e5e;
  font-size: 16px;
  margin-top: 10px;
}
.footer .pull-right {
  color: #b55e5e;
  font-size: 16px;
  margin-top: 10px;
  right: 10%;
}
/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0;
  /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */

.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
  margin-top: 120px;
  font-size: 50px;
  display: inline-block;
}
/* Project Box 
------------------------- */

#project-box {
  text-align: center;
  cursor: pointer;
  border: 3px solid #636366;
  cursor: pointer;
  width: 75%;
  margin: auto;
  visibility: hidden;
}
#project-divider.featurette-divider {
  margin: 10px 0;
}
#project-box a {
  font-size: 30px;
  margin-left: 300px;
  margin-right: 100px;
  color: darkred;
  display: block;
  margin: auto;
}
#project-box p {
  font-size: 20px;
  color: dimgrey;
}
.project-list {
  cursor: pointer;
  color: darkred;
}
.slider {
  overflow-y: scroll;
  max-height: 500px;
  /* approximate max height */
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
  max-height: 0;
}
.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(-8%);
  }
  65% {
    transform: translateY(4%);
  }
  80% {
    transform: translateY(-4%);
  }
  95% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50% {
    -webkit-transform: translateY(-8%);
  }
  65% {
    -webkit-transform: translateY(4%);
  }
  80% {
    -webkit-transform: translateY(-4%);
  }
  95% {
    -webkit-transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
<!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>Murray Studio</title>
  <meta name="description" content="Main Page for Murray Studio">
  <link rel="icon" href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/animations.css">
  <link rel="stylesheet" href="main.css">
</head>

<body>



  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container marketing">

    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="first-featurette">
        <div class="col-md-7">
          <a class="featurette-heading" href="#">Projects.</a>
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
          <p class="project-list">See Projects.</p>
          <div id="object" class="slideUp">
            <div id="object" class="slideDownEdit">
              <div id="project-box">
                <a>Embraer adds third Legacy 500 prototype to flight test campaign</a>
                <hr class="featurette-divider" id="project-divider">
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>

              </div>
            </div>
          </div>
        </div>
        <div class="col-md-5">
          <img class="featurette-image img-responsive center-block" src="http://a1.dspnimg.com/data/l/423341110329_Qy737Vid_l.jpg" alt="Generic placeholder image">
        </div>
      </div>
    </div>

    <hr class="featurette-divider">
  </div>

  <!-- /END THE FEATURETTES -->

  <!-- FOOTER -->
  <footer class="footer">
    <div class="container">
      <p class="pull-right"><a href="#">Back to top</a>
      </p>
      <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a>
      </p>
    </div>
  </footer>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="main.js"></script>
</body>


</html>

Alternately, you can detach the event handler within the else loop after it has been executed but that would mean that we do an attach/detach cycle within every loop which I don't think is good.

Note that this answer was posted only to explain the source of your problem. I am assuming that you will be having something more (or something different) which necessitates the use of the extra .show() and .hide().

If your requirement is only to show/hide the element on toggling the switch and nothing more, then the approach provided in humble.rumble.6x3's answer is the easiest.

Upvotes: 1

user4639281
user4639281

Reputation:

You can just toggle the classes and get the same effect a lot easier as the element is moved off canvas already, there is no need to apply hide or show.

$('.project-list').click(function () {
    $('#project-box').toggleClass("slideUp");    
    $('#project-box').toggleClass("slideDown");
});


var main = function () {

    var enabled = false;
    //$('#project-box').hide();

    $('.project-list').click(function () {
        $('#project-box').toggleClass("slideUp");    
        $('#project-box').toggleClass("slideDown");
    });

    //    $(window).scroll(function () {
    //        $('#project-box').each(function () {
    //            var imagePos = $(this).offset().top;
    //
    //            var topOfWindow = $(window).scrollTop();
    //            if (imagePos < topOfWindow + 400) {
    //                $(this).addClass("slideUp");
    //            }
    //        });
    //    });

    //$('#carousel').carousel('cycle');
}

$(document).ready(main);
/* Exit Animation
-------------------------------------------------- */

.slideDownEdit{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: hidden !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(0%);
	}		
	100% {
		-webkit-transform: translateY(500%);
        visibility: hidden;
	}	
}

/* Footer
-------------------------------------------------- */

.footer {
    background-color: #dddee1;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    
    height: 60px;
    border: 1px solid grey;
}

.footer p {
    font-size: 18px;
    margin-top: 10px;
    color: #777;
    position: absolute;
}

.footer a {
    color: #b55e5e;
    font-size: 16px;
    margin-top: 10px;
}

.footer .pull-right {
    color: #b55e5e;
    font-size: 16px;
    margin-top: 10px;
    right: 10%;
}
/* Featurettes
------------------------- */

.featurette-divider {
    margin: 80px 0;
    /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */

.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
    margin-top: 120px;
    font-size: 50px;
    display: inline-block;
}

/* Project Box 
------------------------- */

#project-box {
    text-align: center;
    cursor: pointer;
    border: 3px solid #636366;
    cursor: pointer;
    width: 75%;
    margin: auto;
    visibility: hidden;
}

#project-divider.featurette-divider{
    margin: 10px 0;
}

#project-box a {
    font-size: 30px;
    margin-left: 300px;
    margin-right: 100px;
    color: darkred;
    display: block;
    margin: auto;
}

#project-box p {
    font-size: 20px;
    color: dimgrey;
}

.project-list {
    cursor: pointer;
    color: darkred;
}

.slider {
	overflow-y: scroll;
	max-height: 500px; /* approximate max height */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slider.closed {
	max-height: 0;
}

.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;	
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}
<!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>Murray Studio</title>
    <meta name="description" content="Main Page for Murray Studio">
    <link rel="icon" href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="main.css">
</head>

<body>

    

    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

        <!-- START THE FEATURETTES -->

        <hr class="featurette-divider">

        <div class="row featurette">
            <div class="first-featurette">
                <div class="col-md-7">
                    <a class="featurette-heading" href="#">Projects.</a>
                    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                    <p class="project-list">See Projects.</p>
                    <div id="object" class="slideUp">
                        <div id="object" class="slideDownEdit">
                            <div id="project-box">
                                <a>Embraer adds third Legacy 500 prototype to flight test campaign</a>
                                <hr class="featurette-divider" id="project-divider">
                                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
                                <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <img class="featurette-image img-responsive center-block" src="http://a1.dspnimg.com/data/l/423341110329_Qy737Vid_l.jpg" alt="Generic placeholder image">
                </div>
            </div>
        </div>

        <hr class="featurette-divider">
    </div>

    <!-- /END THE FEATURETTES -->

    <!-- FOOTER -->
    <footer class="footer">
        <div class="container">
            <p class="pull-right"><a href="#">Back to top</a>
            </p>
            <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a>
            </p>
        </div>
    </footer>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="main.js"></script>
</body>


</html>

Upvotes: 1

Related Questions