html - 我无法将页脚保留在页面底部

Question

我知道这是一个常见问题，但我就是无法解决这个问题。无论我尝试多少种设置组合，页脚都不会停留在页面底部。它只会转到页面的随机部分并坐下，同时覆盖我的一些内容。每当我将它放到页面底部时，它都不会填满屏幕的宽度。

window.onbeforeunload = function() {
  window.scrollTo(0, 0);
}

body {
  background-color: white;
  margin: 0;
  height: 100%;
  width: 100%;
}


/* Text Body */

.title_underline {
  text-decoration: underline;
  text-decoration-color: #2546b8;
  -webkit-text-decoration-color: #2546b8;
}

.text_body {
  position: absolute;
  /*left: 10%;
    		right: 10%;*/
  margin-left: 10%;
  margin-right: 10%;
  /*padding-bottom: 180px;*/
}

.text_body .text_body_question {
  font-family: 'Open Sans', sans-serif;
  font-size: 10x;
  margin-top: 80px;
  font-weight: bold;
}

.text_body .text_body_p {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  margin-top: 20px;
}

.home_page_lmbt {
  margin-bottom: 20px;
  position: absolute;
  left: 50%;
  margin-top: 20px;
  border: 3px solid #1c3f95;
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  padding-bottom: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  height: 50px;
  width: 150px;
  text-align: center;
  vertical-align: center;
  transition-duration: .4s;
  text-decoration: none;
  color: #1c3f95;
  display: inline-block !important;
}

.home_page_lmbt:hover {
  background-color: #1c3f95;
  color: white;
  cursor: pointer;
}


/*
    .clearfix::after {
    	content: "";
    	clear: both;
    	display: table;
    }
    */

.text_body_img {
  width: 490px;
  height: 245px;
  /* margin-top: 20px; */
  border: 3px solid #262626;
}


/*Footer*/

.footer {
  background-color: #262626;
  padding: 5px;
  text-align: center;
}

.footer p {
  color: white;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
}


/* Navigation Menu */

.nav_bar_menu ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  position: fixed;
  width: 100%;
  top: 0;
  overflow: hidden;
  background-color: #262626;
  z-index: 300;
}

.nav_bar_menu li {
  float: left;
}

.nav_bar_menu li a {
  display: block;
  padding: 15px;
  background-color: #262626;
  text-decoration: none;
  font-family: 'Roboto Condensed', sans-serif;
  color: white;
  text-align: center;
}

.nav_bar_menu li a:hover {
  background-color: #4c4b4b;
}

#cloud_img {
  z-index: 98;
  width: 50px;
  height: 50px;
  float: right;
  padding-right: 20px;
}

#home_tab {
  padding-left: 50px;
}


/* Home Tab */

.home_img_title_container {
  width: 100%;
  height: 758px;
  border-bottom: 3px solid #262626;
}

#home_intro_img {
  width: 100%;
  height: 758px;
  object-fit: cover;
  opacity: 0;
  animation-name: home_intro_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes home_intro_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.home_title {
  animation-name: home_intro_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  position: absolute;
  top: 28.3%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-size: 30px;
  font-family: 'Ubuntu', sans-serif;
  text-align: left;
}

.home_title #intro_title {
  background: rgba(0, 0, 0, .5);
  z-index: 100
  /* padding: 10px */
  margin-bottom: 0px;
}

.home_title #intro_p {
  z-index: 101;
  background: rgba(0, 0, 0, .5);
  font-size: 25px;
  padding-right: 5px;
  padding-left: 5px;
}

.text_body_p_href {
  color: blue;
  text-decoration: none;
}


/* History Tab */

.history_tab_fade {
  opacity: 0;
  animation-name: history_tab_fade_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes history_tab_fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
.timeline-body-thing * {
  pading: 0;
  margin: 0;
  font-family: "Lato", sans-serif;
  position: relative;
}

.timeline {
  padding: 40px 0px;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 40px;
}

.timeline:before {
  content: "";
  position: absolute;
  top: 40px;
  left: 65px;
  width: 3px;
  height: calc(100% - 80px);
  background: #2546b8;
}

.timeline .column {
  margin: 40px 40px 40px 120px;
}

.timeline .column .title h1 {
  font-size: 120px;
  color: rgba(0, 0, 0, 0.1);
  font-family: serif;
  letter-spacing: 3px;
}

.timeline .column .title h1:before {
  content: "";
  position: absolute;
  left: -62px;
  top: 86px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 3px solid #2546b8;
}

.timeline .column .title h2 {
  margin-top: -60px;
  font-size: 33px;
}

.timeline .column .description p {
  font-size: 20px;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 10px;
  font-family: 'Open Sans', sans-serif;
  ;
}

.timeline .column .description {
  border-left: 1px solid #000;
}

.main {
  width: 80%;
  margin-left: 10%;
  margin-top: 80px;
}

.main h1 {
  font-size: 80px;
  line-height: 60px;
  font-family: 'Ubuntu', sans-serif;
}

.main p {
  font-size: 13px;
  line-height: 20px;
  font-family: serif;
  text-align: right;
}


/* How it Works Tab */

.hiw_tab_fade {
  opacity: 0;
  animation-name: hiw_tab_fade_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes hiw_tab_fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.how-it-works-body h1 {
  text-align: center;
  margin-top: 10%;
  margin-left: 0%;
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-size: 75px;
}

.how-it-works-body-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  position: absolute;
  left: 10%;
  right: 10%;
}


/* Sources Tab */

.sources_tab_fade {
  opacity: 0;
  animation-name: sources_tab_fade_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes sources_tab_fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.sources_body h1 {
  text-align: center;
  margin-top: 10%;
  margin-left: 0%;
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-size: 75px;
}

.sources_body_text {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  position: absolute;
  left: 10%;
  right: 10%;
}

.sources_body_text_border {
  border-color: #2546b8;
  border-style: solid;
  border-width: 3px;
  padding: 20px;
}


/*Plan of Work Log Tab*/

.pwl_tab_fade {
  opacity: 0;
  animation-name: pwl_tab_fade_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes pwl_tab_fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.pwl_pdf {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.pwl_body h1 {
  text-align: center;
  margin-top: 10%;
  margin-left: 0%;
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-size: 75px;
}

.pwl_disclaimer {
  position: relative;
  left: 25%;
  margin-top: 50px;
  border: 3px solid #1c3f95;
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  padding-bottom: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  height: 50px;
  width: 675px;
  text-align: center;
  vertical-align: center;
  transition-duration: .4s;
  text-decoration: none;
  color: #1c3f95;
  display: inline-block !important;
  margin-left: auto;
  margin-right: auto;
}

.pwl_disclaimer:hover {
  background-color: #1c3f95;
  color: white;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
  <script src="test.js"></script>
  <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  <link rel="shortcut icon" type="image/x-icon" href="cloud_web_filled_icon.ico" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>KMS TSA | Home</title>
  <link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class='nav_bar_menu'>
    <ul>
      <a href='index.html'><img src="https://www.odrive.com/images/links/logos/onedrive.png" id="cloud_img"></a>
      <li id="home_tab"><a href='index.html'>Home</a></li>
      <li><a href='history.html'>History</a></li>
      <li><a href='how_it_works.html'>How it Works</a></li>
      <li><a href='sources.html'>Sources</a></li>
      <li><a href='pan_of_work_log.html'>Plan of Work Log</a></li>
    </ul>
  </div>
  <div class='home_img_title_container'>
    <img src="574700-636275165749436903-16x9.jpg" id="home_intro_img">
    <div class='home_title'>
      <h1 id='intro_title'>Cloud<br> Computing.</h1>
      <span id='intro_p'>changing the world now and<br>forever</span>
    </div>
  </div>
  <div class='text_body'>
    <h1 class='text_body_question title_underline'>What is Cloud Computing?</h1>
    <p class='text_body_p'>What is the cloud? The true definition is "cloud com·put·ing - noun - The practice of using a network of remote servers hosted on the Internet to store, manage, and process data, rather than a local server or a personal computer." In more simple terms
      cloud computing means storing and accessing data and programs over the Internet instead of your computer's hard drive. The cloud is just a metaphor for the Internet. To you this probably just sounds like another storage device, but the capabilities
      of it is astonishing. This can allow you to have, basically, unlimited storage. This can allow to collaborate in projects, even if you're halfway across the world! </p>
    <h1 class='text_body_question title_underline'>What can you use this for?</h1>
    <img class='text_body_img' src='http://www.valueglobal.net/wp-content/uploads/cloud-computing-final.jpg' align='right' style='width: 464px; height: 254px;'>
    <p class='text_body_p'>There are many uses for the cloud that include social networking, email, documents(and other Hosting Services), data storage, and a lot more. Most people like you use cloud computing everyday but don't even realize it. For example if you were to own
      a business(doesn't only apply to them) you would most likely be sending email all the time. If this applies to you then you are using the cloud. You can access your email anywhere(with internet) send an email anywhere. In fact all of your emails
      are stored in the cloud. Another example could be data storage. Most people often use some time of cloud storage(<a class='text_body_p_href' href='https://onedrive.live.com/about/en-us/' target='_blank'>OneDrive</a>, <a class='text_body_p_href'
        href='https://www.google.com/drive/' target='_blank'>Google Drive</a>, <a class='text_body_p_href' href='https://azure.microsoft.com' target='_blank'>Microsoft Azure</a>). When you save your documents, images, basically any file, you are storing
      it in a cloud. I could go on forever with examples of cloud computing, but that wouldn't be interesting would it. Cloud services can be free or paid, most are free with a monthly or yearly fee for extra storage.</p>
    <h1 class='text_body_question title_underline'>What are the pros and cons of Cloud Computing?</h1>
    <p class='text_body_p'>Like any other type of technology, Cloud Computing has both good and bad attributes.
      <br><br><strong>PROS:</strong><br><br><br><strong>Cost: </strong>As mentioned above, you buy(some are free) only the the amount of storage you need and can get bigger amounts for an extra cost later when needed.<br><br>
      <strong>A reduced need for on-site IT staff: </strong>When choosing a service provider for your Cloud Computing needs, you'll probably notice how most of them guarantee a very high level of consistent uptime. For example, a company may guarantee
      trouble-free 365 days of the year and 99.9 percent of the time, and if it fails to meet these, you won't pay for the service. If you pick a provider that promises to be very reliable, it won't be dependent on on-site IT professionals for troubleshooting.
      <br><br>
      <strong>Fewer maintenance concerns: </strong>When dealing with computer networks, software, and hardware, there are a lot of maintenance needs. You must dedicate your resources to make sure it's working properly. Downloading new updated software,
      installing them on your computer, even running virus scans to keep your your maintain your technology. With Cloud Computing it usually allows you to log into a well-maintained online interface and access the latest versions of applications and content,
      without having to download anything that needs to be checked for viruses.<br><br><strong>CONS:</strong><br><br><br>
      <strong>Service is unavailable when internet is down: </strong>As mentioned above, most of today's top providers of cloud-based technology are very reliable and can promise a high percentage of uptime. However, problems can occur if you solely rely
      in the internet to access your files. If you're using the cloud only to run your business, operations will come to a stop until your internet is back up.<br><br>
      <strong>Reduced customer control: </strong> Because Cloud Computing offers a managed service, that means customers give up some control to use what's offered. That's especially true with what's happening in the background. Many Cloud Computing service
      providers don't provide details about their infrastructures, which may be frustrating to customers that prefer to handle administration needs on their own.</p>
    <h1 class='text_body_question title_underline'>What does the future of Cloud Computing look like?</h1>
    <img class='text_body_img' src='5-Predictions-on-Future-of-Cloud-Computing.jpg' align='right'>
    <p class='text_body_p'>Cloud Computing follows a simple shift like everything else from paperless to wireless. For example, fundraising has gone from mailed letters to fully online programs like <a class='text_body_p_href' href='https://www.kickstarter.com/' target='_blank'>Kickstarter</a>.
      When it comes to music people have gone from carrying mp3s around to streaming services like <a class='text_body_p_href' href='https://www.spotify.com/' target='_blank'>Spotify</a> or <a class='text_body_p_href' href='https://www.pandora.com/' target='_blank'>Pandora.</a>      Users are just now moving their data from their computers to the cloud as it moves from a trend to just the normal thing. Although we've focused on computers and analytics, but soon Cloud Computing will be used more than just in the computer world.
      For example, some automotive companies have utilized cloud technology to deliver and share vehicle data and apps, while cloud-related advancements in the travel industry allow certain airline passengers to choose media at home before they leave,
      and then access that stored ,edia/data during flight for personal entertainment. It companies will continue to favor public or hybrid cloud services. Over the past five years, IT companies have contributed to a 43.3 percent increase in public cloud
      usage. Furthermore, hybrid cloud services saw a 19.2 percent growth.</p>
    <h1 class='text_body_question title_underline'>How does it work?</h1>
    <p class='text_body_p'>The way Cloud Computing works involves a large quantity of networks, databases, and servers, which sounds very confusing, so let's make it a little easier to understand. Let's think of it like this... </p>
    <a href='how_it_works.html'><button class='home_page_lmbt'>Learn More</button></a>
    <br><br>
    <h1 class='text_body_question title_underline'>History</h1>
    <img src='history_img.jpg' align='right' style='width:200px; height:200px; border: 3px solid #262626;'>
    <p class='text_body_p'>In 1963, DARPA(the Defence Advanced Research Projects Agency), presented MIT with $2 million for Project MAC. The finding included a requirement MIT develop technology that allows a "computer to be used by two or more people, simultaneously." In this
      case, one of those gigantic, archaic computers using reels of magnetic tape for memory and was the forerunner to what has now become known as Cloud Computing. It acted as a primitive Cloud with two or three people accessing it. The word "Virtualization"
      was used to describe this situation. Currently, businesses can develop a Private Cloud system. Over time, Public Cloud Computing companies, who are intensely competitive, will expand their scalability and lower prices.</p>
    <a href='history.html'><button class='home_page_lmbt'>Learn More</button></a>
  </div>
  <div class='footer'>
    <footer>
      <p>Copyright © 2018 Kerr Middle School TSA</p>
    </footer>
  </div>
</body>

</html>



<!-- Some Images will not show -->

Answer 1

这似乎主要是由于 .text_body 的绝对定位所致和 .home_page_lmbt .一旦删除这些内容，页面就会按预期流动。

我还重组了“了解更多”链接。我不明白为什么会有 <button>在 <a> 里面，所以我用 <div> 替换了它们对齐 <a>向右。

window.onbeforeunload = function() {
  window.scrollTo(0, 0);
}

body {
  background-color: white;
  margin: 0;
  height: 100%;
  width: 100%;
}


/* Text Body */

.title_underline {
  text-decoration: underline;
  text-decoration-color: #2546b8;
  -webkit-text-decoration-color: #2546b8;
}

.text_body {
  /*position: absolute; REMOVED */
  margin-left: 10%;
  margin-right: 10%;
}

.text_body .text_body_question {
  font-family: 'Open Sans', sans-serif;
  font-size: 10x;
  margin-top: 80px;
  font-weight: bold;
}

.text_body .text_body_p {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  margin-top: 20px;
}

.button_right {
  text-align: right;
}

.home_page_lmbt {
  /* REMOVED
  margin-bottom: 20px;
  position: absolute;
  left: 50%;
  margin-top: 20px;
  padding-bottom: 40px;
  height: 50px;
  width: 150px;
  vertical-align: center;*/
  margin: 20px 0;
  padding: 20px;
  border: 3px solid #1c3f95;
  border-radius: 5px;
  background-color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  text-align: center;
  transition-duration: .4s;
  text-decoration: none;
  color: #1c3f95;
  display: inline-block;
  /* !important; REMOVED */
}

.home_page_lmbt:hover {
  background-color: #1c3f95;
  color: white;
  cursor: pointer;
}

.text_body_img {
  width: 490px;
  height: 245px;
  border: 3px solid #262626;
}


/*Footer*/

.footer {
  background-color: #262626;
  padding: 5px;
  text-align: center;
}

.footer p {
  color: white;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
}


/* Navigation Menu */

.nav_bar_menu ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  position: fixed;
  width: 100%;
  top: 0;
  overflow: hidden;
  background-color: #262626;
  z-index: 300;
}

.nav_bar_menu li {
  float: left;
}

.nav_bar_menu li a {
  display: block;
  padding: 15px;
  background-color: #262626;
  text-decoration: none;
  font-family: 'Roboto Condensed', sans-serif;
  color: white;
  text-align: center;
}

.nav_bar_menu li a:hover {
  background-color: #4c4b4b;
}

#cloud_img {
  z-index: 98;
  width: 50px;
  height: 50px;
  float: right;
  padding-right: 20px;
}

#home_tab {
  padding-left: 50px;
}


/* Home Tab */

.home_img_title_container {
  width: 100%;
  height: 758px;
  border-bottom: 3px solid #262626;
}

#home_intro_img {
  width: 100%;
  height: 758px;
  object-fit: cover;
  opacity: 0;
  animation-name: home_intro_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes home_intro_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.home_title {
  animation-name: home_intro_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  position: absolute;
  top: 28.3%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-size: 30px;
  font-family: 'Ubuntu', sans-serif;
  text-align: left;
}

.home_title #intro_title {
  background: rgba(0, 0, 0, .5);
  z-index: 100
  /* padding: 10px */
  margin-bottom: 0px;
}

.home_title #intro_p {
  z-index: 101;
  background: rgba(0, 0, 0, .5);
  font-size: 25px;
  padding-right: 5px;
  padding-left: 5px;
}

.text_body_p_href {
  color: blue;
  text-decoration: none;
}


/* History Tab */

.history_tab_fade {
  opacity: 0;
  animation-name: history_tab_fade_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes history_tab_fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
.timeline-body-thing * {
  pading: 0;
  margin: 0;
  font-family: "Lato", sans-serif;
  position: relative;
}

.timeline {
  padding: 40px 0px;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 40px;
}

.timeline:before {
  content: "";
  position: absolute;
  top: 40px;
  left: 65px;
  width: 3px;
  height: calc(100% - 80px);
  background: #2546b8;
}

.timeline .column {
  margin: 40px 40px 40px 120px;
}

.timeline .column .title h1 {
  font-size: 120px;
  color: rgba(0, 0, 0, 0.1);
  font-family: serif;
  letter-spacing: 3px;
}

.timeline .column .title h1:before {
  content: "";
  position: absolute;
  left: -62px;
  top: 86px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 3px solid #2546b8;
}

.timeline .column .title h2 {
  margin-top: -60px;
  font-size: 33px;
}

.timeline .column .description p {
  font-size: 20px;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 10px;
  font-family: 'Open Sans', sans-serif;
  ;
}

.timeline .column .description {
  border-left: 1px solid #000;
}

.main {
  width: 80%;
  margin-left: 10%;
  margin-top: 80px;
}

.main h1 {
  font-size: 80px;
  line-height: 60px;
  font-family: 'Ubuntu', sans-serif;
}

.main p {
  font-size: 13px;
  line-height: 20px;
  font-family: serif;
  text-align: right;
}


/* How it Works Tab */

.hiw_tab_fade {
  opacity: 0;
  animation-name: hiw_tab_fade_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes hiw_tab_fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.how-it-works-body h1 {
  text-align: center;
  margin-top: 10%;
  margin-left: 0%;
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-size: 75px;
}

.how-it-works-body-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  position: absolute;
  left: 10%;
  right: 10%;
}


/* Sources Tab */

.sources_tab_fade {
  opacity: 0;
  animation-name: sources_tab_fade_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes sources_tab_fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.sources_body h1 {
  text-align: center;
  margin-top: 10%;
  margin-left: 0%;
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-size: 75px;
}

.sources_body_text {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  position: absolute;
  left: 10%;
  right: 10%;
}

.sources_body_text_border {
  border-color: #2546b8;
  border-style: solid;
  border-width: 3px;
  padding: 20px;
}


/*Plan of Work Log Tab*/

.pwl_tab_fade {
  opacity: 0;
  animation-name: pwl_tab_fade_animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes pwl_tab_fade_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.pwl_pdf {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.pwl_body h1 {
  text-align: center;
  margin-top: 10%;
  margin-left: 0%;
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-size: 75px;
}

.pwl_disclaimer {
  position: relative;
  left: 25%;
  margin-top: 50px;
  border: 3px solid #1c3f95;
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  padding-bottom: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  height: 50px;
  width: 675px;
  text-align: center;
  vertical-align: center;
  transition-duration: .4s;
  text-decoration: none;
  color: #1c3f95;
  display: inline-block !important;
  margin-left: auto;
  margin-right: auto;
}

.pwl_disclaimer:hover {
  background-color: #1c3f95;
  color: white;
  cursor: pointer;
}

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<link href="//cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

<div class='nav_bar_menu'>
  <ul>
    <a href='index.html'><img src="https://www.odrive.com/images/links/logos/onedrive.png" id="cloud_img"></a>
    <li id="home_tab"><a href='index.html'>Home</a></li>
    <li><a href='history.html'>History</a></li>
    <li><a href='how_it_works.html'>How it Works</a></li>
    <li><a href='sources.html'>Sources</a></li>
    <li><a href='pan_of_work_log.html'>Plan of Work Log</a></li>
  </ul>
</div>
<div class='home_img_title_container'>
  <img src="574700-636275165749436903-16x9.jpg" id="home_intro_img">
  <div class='home_title'>
    <h1 id='intro_title'>Cloud<br> Computing.</h1>
    <span id='intro_p'>changing the world now and<br>forever</span>
  </div>
</div>
<div class='text_body'>
  <h1 class='text_body_question title_underline'>What is Cloud Computing?</h1>
  <p class='text_body_p'>What is the cloud? The true definition is "cloud com·put·ing - noun - The practice of using a network of remote servers hosted on the Internet to store, manage, and process data, rather than a local server or a personal computer." In more simple terms
    cloud computing means storing and accessing data and programs over the Internet instead of your computer's hard drive. The cloud is just a metaphor for the Internet. To you this probably just sounds like another storage device, but the capabilities
    of it is astonishing. This can allow you to have, basically, unlimited storage. This can allow to collaborate in projects, even if you're halfway across the world! </p>
  <h1 class='text_body_question title_underline'>What can you use this for?</h1>
  <img class='text_body_img' src='http://www.valueglobal.net/wp-content/uploads/cloud-computing-final.jpg' align='right' style='width: 464px; height: 254px;'>
  <p class='text_body_p'>There are many uses for the cloud that include social networking, email, documents(and other Hosting Services), data storage, and a lot more. Most people like you use cloud computing everyday but don't even realize it. For example if you were to own
    a business(doesn't only apply to them) you would most likely be sending email all the time. If this applies to you then you are using the cloud. You can access your email anywhere(with internet) send an email anywhere. In fact all of your emails are
    stored in the cloud. Another example could be data storage. Most people often use some time of cloud storage(<a class='text_body_p_href' href='https://onedrive.live.com/about/en-us/' target='_blank'>OneDrive</a>, <a class='text_body_p_href' href='https://www.google.com/drive/'
      target='_blank'>Google Drive</a>, <a class='text_body_p_href' href='https://azure.microsoft.com' target='_blank'>Microsoft Azure</a>). When you save your documents, images, basically any file, you are storing it in a cloud. I could go on forever with
    examples of cloud computing, but that wouldn't be interesting would it. Cloud services can be free or paid, most are free with a monthly or yearly fee for extra storage.</p>
  <h1 class='text_body_question title_underline'>What are the pros and cons of Cloud Computing?</h1>
  <p class='text_body_p'>Like any other type of technology, Cloud Computing has both good and bad attributes.
    <br><br><strong>PROS:</strong><br><br><br><strong>Cost: </strong>As mentioned above, you buy(some are free) only the the amount of storage you need and can get bigger amounts for an extra cost later when needed.<br><br>
    <strong>A reduced need for on-site IT staff: </strong>When choosing a service provider for your Cloud Computing needs, you'll probably notice how most of them guarantee a very high level of consistent uptime. For example, a company may guarantee trouble-free
    365 days of the year and 99.9 percent of the time, and if it fails to meet these, you won't pay for the service. If you pick a provider that promises to be very reliable, it won't be dependent on on-site IT professionals for troubleshooting.
    <br><br>
    <strong>Fewer maintenance concerns: </strong>When dealing with computer networks, software, and hardware, there are a lot of maintenance needs. You must dedicate your resources to make sure it's working properly. Downloading new updated software,
    installing them on your computer, even running virus scans to keep your your maintain your technology. With Cloud Computing it usually allows you to log into a well-maintained online interface and access the latest versions of applications and content,
    without having to download anything that needs to be checked for viruses.<br><br><strong>CONS:</strong><br><br><br>
    <strong>Service is unavailable when internet is down: </strong>As mentioned above, most of today's top providers of cloud-based technology are very reliable and can promise a high percentage of uptime. However, problems can occur if you solely rely
    in the internet to access your files. If you're using the cloud only to run your business, operations will come to a stop until your internet is back up.<br><br>
    <strong>Reduced customer control: </strong> Because Cloud Computing offers a managed service, that means customers give up some control to use what's offered. That's especially true with what's happening in the background. Many Cloud Computing service
    providers don't provide details about their infrastructures, which may be frustrating to customers that prefer to handle administration needs on their own.</p>
  <h1 class='text_body_question title_underline'>What does the future of Cloud Computing look like?</h1>
  <img class='text_body_img' src='5-Predictions-on-Future-of-Cloud-Computing.jpg' align='right'>
  <p class='text_body_p'>Cloud Computing follows a simple shift like everything else from paperless to wireless. For example, fundraising has gone from mailed letters to fully online programs like <a class='text_body_p_href' href='https://www.kickstarter.com/' target='_blank'>Kickstarter</a>.
    When it comes to music people have gone from carrying mp3s around to streaming services like <a class='text_body_p_href' href='https://www.spotify.com/' target='_blank'>Spotify</a> or <a class='text_body_p_href' href='https://www.pandora.com/' target='_blank'>Pandora.</a>    Users are just now moving their data from their computers to the cloud as it moves from a trend to just the normal thing. Although we've focused on computers and analytics, but soon Cloud Computing will be used more than just in the computer world.
    For example, some automotive companies have utilized cloud technology to deliver and share vehicle data and apps, while cloud-related advancements in the travel industry allow certain airline passengers to choose media at home before they leave, and
    then access that stored ,edia/data during flight for personal entertainment. It companies will continue to favor public or hybrid cloud services. Over the past five years, IT companies have contributed to a 43.3 percent increase in public cloud usage.
    Furthermore, hybrid cloud services saw a 19.2 percent growth.</p>
  <h1 class='text_body_question title_underline'>How does it work?</h1>
  <p class='text_body_p'>The way Cloud Computing works involves a large quantity of networks, databases, and servers, which sounds very confusing, so let's make it a little easier to understand. Let's think of it like this... </p>
  <div class="button_right"><a href='how_it_works.html' class="home_page_lmbt">Learn More</a></div>
  <br><br>
  <h1 class='text_body_question title_underline'>History</h1>
  <img src='history_img.jpg' align='right' style='width:200px; height:200px; border: 3px solid #262626;'>
  <p class='text_body_p'>In 1963, DARPA(the Defence Advanced Research Projects Agency), presented MIT with $2 million for Project MAC. The finding included a requirement MIT develop technology that allows a "computer to be used by two or more people, simultaneously." In this
    case, one of those gigantic, archaic computers using reels of magnetic tape for memory and was the forerunner to what has now become known as Cloud Computing. It acted as a primitive Cloud with two or three people accessing it. The word "Virtualization"
    was used to describe this situation. Currently, businesses can develop a Private Cloud system. Over time, Public Cloud Computing companies, who are intensely competitive, will expand their scalability and lower prices.</p>
  <div class="button_right"><a href='history.html' class="home_page_lmbt">Learn More</a></div>
</div>
<div class='footer'>
  <footer>
    <p>Copyright © 2018 Kerr Middle School TSA</p>
  </footer>
</div>