小编Ser*_*ata的帖子

html
/*FLEXBOX*/

{
  font-family: "Arsenal", "Times New Roman";
}
body {
  background: #364949;
  margin: 0;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #999999;
  height: 50px;
  padding-right: 100px;
}
/*LAST RENTED*/

main {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.panel {
  height: 500px;
  flex: 1;
}
.main-content {
  background: #999999;
  flex-grow: 2;
  order: 2;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
/*LAST MOVIES*/

.left {
  background: #999999;
  order: 1;
  margin: 20px;
  color: white;
  font-family: Arial, Helvetica, …

#module {
  width: 500px;
}

#module p.collapse[aria-expanded="false"] {
  display: block;
  height: 40px !important;
  overflow: hidden;
}

#module p.collapsing[aria-expanded="false"] {
  height: 40px !important;
}

#module a.collapsed:after {
  content: '+ Show More';
}

#module a:not(.collapsed):after {
  content: '- Show Less';
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="module" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="collapse" id="collapseExample" aria-expanded="false">Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger …

<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
  <label class="custom-control-label" for="customCheck">Label</label>
</div>

.articlecontainer ol li {
  line-height: 24px;
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  margin: .5em 0;
  background: #f7f7f7;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
}

.articlecontainer ol li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em; …

@-webkit-keyframes swinging {
  0% {
    -webkit-transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(-5deg)
  }
  100% {
    -webkit-transform: rotate(10deg);
  }
}

@keyframes swinging {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-5deg)
  }
  100% {
    transform: rotate(10deg);
  }
}

.swingimage {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
  animation: swinging 3.5s ease-in-out forwards infinite;
}

.key_hand {
  /*
        background-image: url('arm_hand.png');
        background-repeat: no-repeat;
        background-size: …