为什么我的网页没有加载？

Question

我正在使用C9构建一个网站，每当我尝试运行网页并访问它时，它就会冻结并停止加载。它加载在bootstrap中，我不认为它是在../ css / hub.css中加载

$(function() {
  var rightVal = -350; // base value
  $(".five-column").click(function() {
    event.stopPropagation();
    rightVal = (rightVal * -1) - 350; // calculate new value
    $(".drop-details").animate({
      right: rightVal + 'px'
    }, {
      queue: false,
      duration: 500
    });
  });
});
$(function() {
  var closeRightVal = -350;
  $(".close-details").click(function() {
    event.stopPropagation();
    $(".drop-details").animate({
      right: closeRightVal + 'px'
    }, {
      queue: false,
      duration: 500
    });
  });
})
$(function() {
  $(".nav-custom").on('touchmove', function(e) {
    e.preventDefault();
  });
});
$(function() {
  $(".content").on('touchmove', function(e) {
    e.preventDefault();
  });
});
$(function() {
  $(".inner-nav").on('touchmove', function(e) {
    e.preventDefault();
  });
});
$(function() {
  $(window).resize(function() {
    var dropWidth = $(".five-column").width();
    $(".drop").css("height", dropWidth + 'px');
    $(".five-column").css("min-height", dropWidth + 20 + 'px');
  });
});

* {
  overflow: hidden;
}
html {
  height: 100%;
  margin: 0;
  max-width: 100%;
}
body {
  font-family: 'Ubuntu', sans-serif;
  background-color: #F9F9F9;
  margin: 0;
  height: 100%;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  position: fixed;
}
/* Page Components */

.content {
  min-width: 100%;
  float: right;
  height: 100%;
  overflow-y: scroll;
  overflow-x: none;
  margin-left: 250px;
}
.content::-webkit-scrollbar {
  display: none;
}
.page-content {
  min-width: calc(100% - 250px);
  max-width: calc(100% - 250px);
  min-height: 100%;
  margin-top: 0;
  overflow-y: scroll;
  float: right;
  overflow-x: hidden;
}
.drop-details {
  height: 100%;
  width: 350px;
  z-index: 1000;
  color: #FFF;
  position: absolute;
  right: -350px;
  background-color: #FFF000;
}
/* Hub Top */

.hub-jumbo {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
  background-size: cover;
  background-position: center;
  padding-top: 36px;
  padding-bottom: 36px;
  margin-bottom: 18px;
}
.hub-header {
  text-align: center;
}
h2 {
  margin-bottom: 0;
}
.hub-btns {
  display: block;
  margin-bottom: 15px;
  width: 100%;
  text-align: center;
}
.hub-btns .copy-link {
  border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
  background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
  background-color: #03a9f4;
  border-bottom-color: #0398db;
}
.hub-btns a {
  margin: 0 10px;
}
/* End of top */

.container-fluid {
  padding: 0;
  margin: 0;
  height: 10%;
  min-width: 100%;
  max-width: 100%;
  margin-left: 4px;
  overflow-y: auto;
  margin-right: 0;
}
.ad-box {
  width: 20%;
  height: 250px;
  display: inline-block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  margin-right: -14px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000000;
  vertical-align: middle;
}
.ad-text {
  text-align: center;
  color: #FFFFFF;
}
.push-div {
  height: 50px;
}
.five-column {
  min-width: calc(20% - 20px);
  padding: 0;
  max-height: 194px;
  display: inline-block;
  margin: 0;
  margin-left: 7px;
  margin-right: 7px;
  margin-bottom: 14px;
}
.row {
  display: inline-block;
  max-width: calc(80% - 14px);
  margin: 0;
  margin-left: 0;
}
/* Drop Styles */

.drop {
  width: 100%;
  height: 180px;
  background-color: #FFF;
  border-bottom: 3px solid #EBEBEB;
  display: block;
  margin: 0 auto;
  border-radius: 5px;
}
.drop-image {
  background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
  background-size: cover;
  background-position: center;
}
.drop .name {
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #FFF;
  background-color: #03a9f4;
  font-size: 1em;
}
.drop .icon {
  height: 80px;
  vertical-align: middle;
  display: block;
  margin: 0 auto;
  margin-top: 32px;
}
/* SCALING */

@media only screen and (max-width: 1400px) {
  .five-column {
    min-width: calc(25% - 20px);
  }
  .drop .name {
    font-size: 1.10em;
  }
}
@media only screen and (max-width: 1200px) {
  .ad-box {
    display: none;
  }
  .row {
    max-width: calc(100% - 14px);
  }
  .five-column {
    min-width: calc(33% - 20px);
  }
  .drop .name {
    font-size: 1.20em;
  }
}
@media only screen and (max-width: 1000px) {
  .five-column {
    min-width: calc(50% - 20px);
  }
  .drop .name {
    font-size: 1.30em;
  }
  .user-name {
    left: 7%;
  }
  .more-dropup {
    left: 5%;
  }
  .user-image {
    left: 2%;
  }
}

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->

<head>
  <title>Hub</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <!-- Mobile Optimization -->
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  <!-- Custom styling -->
  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
  <link rel="stylesheet" href="../css/hub.css" type="text/css" />
  <link rel="stylesheet" href="../partials/nav.css" type="text/css" />
  <link rel="stylesheet" href="../css/components.css" type="text/css" />
  <!-- Imported Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
</head>

<body>
  <div class="nav-custom">
    <a class="venos_logo" href="hubs.html">
      <img src="venos_logo.png">
    </a>
    <div class="inner-nav">
      <ul class="upper-items smooth">
        <li class="label">NAVIGATE</li>
        <li class="link"><a href=""><i class="material-icons nav-icon">home</i> Dashboard</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">notifications</i> Notifications</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">cloud</i> Synced Files</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">create</i> Create Hub</a>
        </li>
      </ul>
      <ul class="lower-items">
        <li class="label">HUBS</li>
        <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> San Haven Roadtrip</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Fargo Roadtrip</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Velva Roadtrip</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Dank Memes</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Squad</a>
        </li>
        <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Summer 2017</a>
        </li>
      </ul>
      <div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
    </div>
    <div class="nav-push-div"></div>
    <div class="more-menu">
      <ul>
        <li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
        </li>
        <li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
        </li>
      </ul>
    </div>
    <div class="nav-user">
      <div class="user-image"></div>
      <span class="user-name">Jason Procka</span>
      <button type="button" class="more-dropup">
        <i class="material-icons nav-more-btn">more_horiz</i>
      </button>
    </div>
  </div>
  <div class="content">
    <div class="page-content">
      <div class="jumbotron hub-jumbo">
        <div class="hub-header">
          <div class="container">
            <h2 class="txt-white">Jason's Summer Vacation</h2>
            <p class="txt-white">There doesn't seem to be a description here!</p>
          </div>
        </div>
        <div class="hub-btns">
          <a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
          <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
        </div>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div class="five-column">
            <div class="drop">
              <div class="name">1.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop drop-image">
              <div class="name">2.png</div>
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">3.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">4.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">5.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">6.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">7.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">8.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">9.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">10.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">funnycats.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">funnycats.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">funnycats.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">funnycats.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
          <div class="five-column">
            <div class="drop">
              <div class="name">funnycats.gif</div>
              <img class="icon" src="gif_icon.jpg">
            </div>
          </div>
        </div>
        <div class="ad-box">
          <span class="ad-text">Your ad here.</span>
        </div>
      </div>
      <div class="push-div"></div>
    </div>
    <div class="drop-details">
      <button class="close-details">
        <i class="material-icons">close</i>
      </button>
    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
  <script type="text/javascript" src="../js/hub.js"></script>
</body>

</html>

这是指向网页的链接，看看它是否为您做同样的事情： https://venos-git-jasonprocka1.c9users.io/www/html/hub.html

我已经致力于清除cookie，似乎没有任何工作。我的代码有些问题。

非常感谢任何帮助！谢谢！

Answer 1

在链接的页面上，您尚未包含所需的tether.js库。

此外，页面正在http上请求壁纸图片（但页面本身托管在https上，通常您会在浏览器控制台上收到有关此内容的警告）

而且，它正在引用nav.css文件，但它无法找到它。

作为旁注，您不需要在其自己的function()声明中声明每个事件处理程序。您可以将它们组合在一起，如下所示：

$(function() {
  // five-column click
  var rightVal = -350; // base value
  $(".five-column").click(function() {
    event.stopPropagation();
    rightVal = (rightVal * -1) - 350; // calculate new value
    $(".drop-details").animate({
      right: rightVal + 'px'
    }, {
      queue: false,
      duration: 500
    });
  });

  // close-detail click
  var closeRightVal = -350;
  $(".close-details").click(function() {
    event.stopPropagation();
    $(".drop-details").animate({
      right: closeRightVal + 'px'
    }, {
      queue: false,
      duration: 500
    });
  });

  // nav-custom touchmove
  $(".nav-custom").on('touchmove', function(e) {
    e.preventDefault();
  });

  // content touchmove
  $(".content").on('touchmove', function(e) {
    e.preventDefault();
  });

  // inner-nav touchmove
  $(".inner-nav").on('touchmove', function(e) {
    e.preventDefault();
  });

  // window resize
  $(window).resize(function() {
    var dropWidth = $(".five-column").width();
    $(".drop").css("height", dropWidth + 'px');
    $(".five-column").css("min-height", dropWidth + 20 + 'px');
  });
});

* {
  overflow: hidden;
}
html {
  height: 100%;
  margin: 0;
  max-width: 100%;
}
body {
  font-family: 'Ubuntu', sans-serif;
  background-color: #F9F9F9;
  margin: 0;
  height: 100%;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  position: fixed;
}
/* Page Components */

.content {
  min-width: 100%;
  float: right;
  height: 100%;
  overflow-y: scroll;
  overflow-x: none;
  margin-left: 250px;
}
.content::-webkit-scrollbar {
  display: none;
}
.page-content {
  min-width: calc(100% - 250px);
  max-width: calc(100% - 250px);
  min-height: 100%;
  margin-top: 0;
  overflow-y: scroll;
  float: right;
  overflow-x: hidden;
}
.drop-details {
  height: 100%;
  width: 350px;
  z-index: 1000;
  color: #FFF;
  position: absolute;
  right: -350px;
  background-color: #FFF000;
}
/* Hub Top */

.hub-jumbo {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
  background-size: cover;
  background-position: center;
  padding-top: 36px;
  padding-bottom: 36px;
  margin-bottom: 18px;
}
.hub-header {
  text-align: center;
}
h2 {
  margin-bottom: 0;
}
.hub-btns {
  display: block;
  margin-bottom: 15px;
  width: 100%;
  text-align: center;
}
.hub-btns .copy-link {
  border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
  background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
  background-color: #03a9f4;
  border-bottom-color: #0398db;
}
.hub-btns a {
  margin: 0 10px;
}
/* End of top */

.container-fluid {
  padding: 0;
  margin: 0;
  height: 10%;
  min-width: 100%;
  max-width: 100%;
  margin-left: 4px;
  overflow-y: auto;
  margin-right: 0;
}
.ad-box {
  width: 20%;
  height: 250px;
  display: inline-block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  margin-right: -14px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000000;
  vertical-align: middle;
}
.ad-text {
  text-align: center;
  color: #FFFFFF;
}
.push-div {
  height: 50px;
}
.five-column {
  min-width: calc(20% - 20px);
  padding: 0;
  max-height: 194px;
  display: inline-block;
  margin: 0;
  margin-left: 7px;
  margin-right: 7px;
  margin-bottom: 14px;
}
.row {
  display: inline-block;
  max-width: calc(80% - 14px);
  margin: 0;
  margin-left: 0;
}
/* Drop Styles */

.drop {
  width: 100%;
  height: 180px;
  background-color: #FFF;
  border-bottom: 3px solid #EBEBEB;
  display: block;
  margin: 0 auto;
  border-radius: 5px;
}
.drop-image {
  background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
  background-size: cover;
  background-position: center;
}
.drop .name {
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #FFF;
  background-color: #03a9f4;
  font-size: 1em;
}
.drop .icon {
  height: 80px;
  vertical-align: middle;
  display: block;
  margin: 0 auto;
  margin-top: 32px;
}
/* SCALING */

@media only screen and (max-width: 1400px) {
  .five-column {
    min-width: calc(25% - 20px);
  }
  .drop .name {
    font-size: 1.10em;
  }
}
@media only screen and (max-width: 1200px) {
  .ad-box {
    display: none;
  }
  .row {
    max-width: calc(100% - 14px);
  }
  .five-column {
    min-width: calc(33% - 20px);
  }
  .drop .name {
    font-size: 1.20em;
  }
}
@media only screen and (max-width: 1000px) {
  .five-column {
    min-width: calc(50% - 20px);
  }
  .drop .name {
    font-size: 1.30em;
  }
  .user-name {
    left: 7%;
  }
  .more-dropup {
    left: 5%;
  }
  .user-image {
    left: 2%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>


<div class="nav-custom">
  <a class="venos_logo" href="hubs.html">
    <img src="http://lorempixel.com/50/50">
  </a>
  <div class="inner-nav">
    <ul class="upper-items smooth">
      <li class="label">NAVIGATE</li>
      <li class="link"><a href=""><i class="material-icons nav-icon">home</i> Dashboard</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">notifications</i> Notifications</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">cloud</i> Synced Files</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">create</i> Create Hub</a>
      </li>
    </ul>
    <ul class="lower-items">
      <li class="label">HUBS</li>
      <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> San Haven Roadtrip</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Fargo Roadtrip</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Velva Roadtrip</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Dank Memes</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Squad</a>
      </li>
      <li class="link"><a href=""><i class="material-icons nav-icon">folder</i> Summer 2017</a>
      </li>
    </ul>
    <div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
  </div>
  <div class="nav-push-div"></div>
  <div class="more-menu">
    <ul>
      <li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
      </li>
      <li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
      </li>
    </ul>
  </div>
  <div class="nav-user">
    <div class="user-image"></div>
    <span class="user-name">Jason Procka</span>
    <button type="button" class="more-dropup">
      <i class="material-icons nav-more-btn">more_horiz</i>
    </button>
  </div>
</div>
<div class="content">
  <div class="page-content">
    <div class="jumbotron hub-jumbo">
      <div class="hub-header">
        <div class="container">
          <h2 class="txt-white">Jason's Summer Vacation</h2>
          <p class="txt-white">There doesn't seem to be a description here!</p>
        </div>
      </div>
      <div class="hub-btns">
        <a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
        <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="five-column">
          <div class="drop">
            <div class="name">1.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop drop-image">
            <div class="name">2.png</div>
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">3.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">4.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">5.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">6.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">7.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">8.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">9.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">10.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">funnycats.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">funnycats.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">funnycats.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">funnycats.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
        <div class="five-column">
          <div class="drop">
            <div class="name">funnycats.gif</div>
            <img class="icon" src="gif_icon.jpg">
          </div>
        </div>
      </div>
      <div class="ad-box">
        <span class="ad-text">Your ad here.</span>
      </div>
    </div>
    <div class="push-div"></div>
  </div>
  <div class="drop-details">
    <button class="close-details">
      <i class="material-icons">close</i>
    </button>
  </div>
</div>