Green Crack (gallery)

<style>
:root{
  --black: #111111;
  --white: #ffffff;
  --grey: #dddddd;
  --green: #DFFD27;
}

#gc-gallery{
  position: relative;
  margin: 15px auto;
  width: 500px;
  height: 600px;
  background: var(--grey);
  overflow: hidden;
  outline: 0px solid var(--grey);
  border: 0px solid var(--green);
}

#gc-gallery ::-webkit-scrollbar {
  width: 7px;
}

#gc-gallery ::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0.5px solid var(--black);
}

#gc-gallery ::-webkit-scrollbar-thumb {
  background: var(--grey);
  border: 0.5px solid var(--black);
}

#gc-gallery input {
  display: none;
}

#gc-gallery label {
  display: inline-block;
  position: absolute;
  top: 50px;
  left: 60px;
  z-index: 3;
  transform: rotate(0deg);
  transition: 0.4s;
  cursor: pointer;
}
#gc-gallery label:hover {
  transform: scale(1.2);
}

#gc-gallery input:checked+label {
  transform: rotate(135deg);
  transition: 0.4s;
}

#gc-gallery .fa{
  display: inline-block;
  font-size: 26px;
  color: var(--green);
  background: var(--black);
  border-radius: 100px;
  padding: 22px 25px;
}

#gc-gallery .content {
  position: absolute;
  width: 500px;
  height: 515px;
  bottom: -515px;
  left: 0px;
  background: var(--green);
  z-index: 2;
  transition: 0.5s;
}

#gc-gallery input:checked+label ~ .content {
  transition: 0.5s;
  bottom: 0px;
}

#gc-gallery .content-bg {
  position: absolute;
  width: 420px;
  height: 420px;
  bottom: 50px;
  left: 40px;
  background: var(--white);
  transform: rotate(5deg);
}

#gc-gallery .content-scroll {
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: 105px;
  left: 95px;
  background: var(--white);
  text-align: left;
  overflow: auto;
  padding-right: 15px;
}

#gc-gallery a{
  text-decoration: none;
  color: var(--black);
}
#gc-gallery a:hover{
  text-decoration: none;
  border-bottom: 1px solid var(--green);
  font-style: italic;
}

#gc-gallery t1{
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 13px;
  font-style: italic;
  line-height: 15px;
  text-transform: uppercase;
  padding: 10px 20px;
  float: left;
  color: var(--black);
  background : var(--grey);
  border-radius: 75px / 27px;
  border: 0.5px solid var(--black);
  transform: rotate(-5deg);
  margin-top: 1px;
}
#gc-gallery b{
  font-family: Rubik;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 11px;
  text-align: left;
  text-transform: uppercase;
  color: var(--black);
  float: right;
}

#gc-gallery c{
  font-family: Rubik;
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  line-height: 11px;
  color: var(--black);
  float: right;
}

#gc-gallery .top-ring{
  position: absolute;
  top: 45px;
  left: 27.5px;
  width: 445px;
  height: 195px;
  background: var(--grey);
  border-radius: 340px / 150px;
  border: 0.5px solid var(--black);
  transform: rotate(-5deg);
}

#gc-gallery .sticker{
  position: absolute;
  top: 38px;
  right: 30px;
  width: 220px;
  height: 65px;
  background: var(--green);
  transform: rotate(10deg);
  transition: 0.5s;
}

#gc-gallery input:checked+label ~ .sticker{
  top: -88px;
  transition: 0.5s;
}

#gc-gallery .sticker-name{
  position: absolute;
  top: 3px;
  left: -8px;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 45px;
  line-height: 45px;
  text-align: right;
  text-transform: uppercase;
  transform: rotate(-5deg);
  color: transparent;
  -webkit-text-stroke: 1.2px var(--black);
}

#gc-gallery .sticker-txt{
  position: absolute;
  bottom: 9px;
  right: 11px;
  font-family: Rubik;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
  color: #000000;
}

#gc-gallery .polaroid{
  position: absolute;
  top: 152px;
  right: 90px;
  width: 245px;
  height: 148px;
  background: var(--white);
  transform: rotate(-8deg);
  transition: 0.5s;
}

#gc-gallery input:checked+label ~ .polaroid{
  top: -202px;
  transition: 0.5s;
}

#gc-gallery .polaroid-img{
  position: absolute;
  top: 9px;
  right: 9px;
  width: 130px;
  height: 130px;
  background: url(https://imgur.com/IwTnPU8.jpg);
  background-size: 200px;
  background-position: center;
}

#gc-gallery .polaroid-txt{
  position: absolute;
  top: 9px;
  left: 9px;
  width: 83px;
  color: var(--black);
  font-family: Rubik;
  font-weight: 400;
  font-size: 8px;
  line-height: 9px;
  text-align: left;
}

#gc-gallery .title-bg{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 500px;
  height: 250px;
  background: var(--green);
}

#gc-gallery .title-img{
  position: absolute;
  bottom: 27px;
  left: 27.5px;
  width: 445px;
  height: 195px;
  background: url(https://imgur.com/IwTnPU8.jpg);
  background-size: 445px;
  background-position: bottom;
  border-radius: 340px / 150px;
  overflow: hidden;
}

#gc-gallery .title-txt{
  position: absolute;
  top: 15px;
  left: 0px;
  width: 445px;
  height: 195px;
  color: var(--green);
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 110px;
  line-height: 75px;
  text-align: center;
  text-transform: uppercase;
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Rubik:wght@400;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<center>
<div id="gc-gallery">
  <input type="checkbox" id="toggle-label">

  <label for="toggle-label"><i class="fa fa-plus"></i></label>

  <div class="content">
    <div class="content-bg"></div>
    <div class="content-scroll">
      <t1>Thread</t1>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br><br>
      <t1>Signature</t1>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br><br>
      <t1>Mini Prof.</t1>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br><br>
      <t1>Site Temp.</a></t1>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br><br>
      <t1>Skinsss</t1>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br><br>
      <t1>Others</t1>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
      <br><br>
      <b><a href="">name here</a></b><br>
      <c>subtext goes here huhuhuu</c>
    </div>
  </div>

  <div class="top-ring"></div>

  <div class="sticker">
    <div class="sticker-name">Hanie</div>
    <div class="sticker-txt">24. GMT+8</div>
  </div>

  <div class="polaroid">
    <div class="polaroid-txt">
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit sed
    </div>
    <div class="polaroid-img"></div>
  </div>

  <div class="title-bg"></div>
  <div class="title-img">
     <div class="title-txt">Green Crack</div>
  </div>

</div>
</center>