Emily

<html lang="en">
<head>
<meta charset="UTF-8">

<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Set the page to the width of the device and set the zoon level -->
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>About me</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body{
  font-family: "Georgia";
}

.jumbotron{
    background-color:#2E2D88;
    color:white;
}
/* Adds borders for tabs */
.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}
.nav-tabs {
    margin-bottom: 0;
}

.frame1{
  visibility: hidden;
}
</style>
</head>
<body background="https://images.unsplash.com/photo-1535478044878-3ed83d5456ef?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5627447ed73815773a2fa205a2111ca1&auto=format&fit=crop&w=1369&q=80">
<div class="container">

  <div class="page-header">
    <h1>About me</h1>
  </div>

  <div class="jumbotron">
    <p id="wait" style="color: red">*Wait for the page to finish loading the audio*</p>
    <div title="You're hovering the text!">
      <p style="color: red">Click the button, hover over me</p>
    </div>
    <p>
      <a href="#" onClick="showText();" class="btn btn-default btn-lg" role="button">
        <img src="https://wallpaperplay.com/walls/full/4/c/b/131767.jpg"
        width="100" border="0" height="72">
      </a>
    </p>
    <p id="changeMe"></p>
  </div>

  <div class="jumbotron" style="background-color:#6699ff">
    <img src="https://wallpaper.wiki/wp-content/uploads/2017/05/wallpaper.wiki-HD-Artsy-Desktop-Wallpaper-PIC-WPE0012064-1024x640.jpg" width="500" border="0" height="300">
  </div>

  <div class="jumbotron" style="background-color:#cc00cc">
    <img src="https://pbs.twimg.com/media/C-CH2FQXcAAZrS_.jpg" width="200" border="0" height="300">
  </div>

  <div class="jumbotron" style="background-color:#cc0000">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/66/Johannes_Vermeer_%281632-1675%29_-_The_Girl_With_The_Pearl_Earring_%281665%29.jpg" width="300" border="0" height="300">
  </div>

  <div class="jumbotron" style="background-color:#336600">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Piet_Mondriaan_-_03.jpg/800px-Piet_Mondriaan_-_03.jpg" width="500" border="0" height="300">
  </div>

  <div class="jumbotron">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Vincent_van_Gogh_-_The_Bedroom_-_Google_Art_Project.jpg/1280px-Vincent_van_Gogh_-_The_Bedroom_-_Google_Art_Project.jpg" width="500" border="0" height="300">
  </div>

  <iframe style="width:0;height:0;border:0; border:none;"
  src="https://freemusicdownloads.world/songs/paradise/?player=2147"
  allow="autoplay" loop="true" allow="autoplay"></iframe>

</div>
</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>
  $(window).load(function(){
    document.getElementById("wait").innerHTML = "You can now interact with the page";
    $("p").css("color", "green");
  });
  var count = 0;
  function showText(){
    if(count % 2 == 0){
      document.getElementById("changeMe").innerHTML = "You changed the background! (Click again to change back)";
      count++;
      $(document).ready(function() {
        $('body').css('background-image', 'url(https://images.unsplash.com/photo-1480944657103-7fed22359e1d?ixlib=rb-0.3.5&s=f82b9a82df80817a49829e67cf51351c&auto=format&fit=crop&w=1489&q=80)');
        $('body').css('color', 'white');
      });
    } else {
      document.getElementById("changeMe").innerHTML = "";
      count++;
      $(document).ready(function() {
        $('body').css('background-image', 'url(https://images.unsplash.com/photo-1535478044878-3ed83d5456ef?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5627447ed73815773a2fa205a2111ca1&auto=format&fit=crop&w=1369&q=80)');
        $('body').css('color', 'black');
      });

    }
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</html>