Demeter

<style>

  .backgroundD {
    width:80%;
    margin:auto;
  }

  .titleD {
    text-align:center;
    font:60px Berkshire Swash;
    color:#00561B;
    text-shadow:1px 1px 3px #000;
  }

  .linemembersD {
    display:flex;
    justify-content:center;
  }

  .memberbackD {
    width:150px;
    height:150px;
    padding:5px;
    margin:10px;
    background-color:#00561B;
  }

  .memberpicaD {
    margin-top:0px;
    width:150px;
    height:150px;
    clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
    background-size:cover;
  }

  .memberpicbD {
    width:150px;
    height:150px;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
    background-size:cover;
  }

  .membernameD {
    margin-top:-80px;
    height:50px;
    padding:5px;
    text-align:center;
    font:20px Indie Flower;
      transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
      opacity:0;
    cursor:pointer;
    color:#000;
    background-color:#00561B;
  }

  .membernameD:hover {
      opacity:1;
      color: #fff;
  }

</style>


<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Indie+Flower&display=swap" rel="stylesheet">


<div class="backgroundD">
  <div class="titleD">An amazing Title</div>
  <!--MEMBERS LINE-->
  <div class="linemembersD">
    <!--MEMBER LEFT-->
    <div class="memberbackD">
      <div class="memberpicaD" style="background:url(https://64.media.tumblr.com/f9ebfba79adc99498e73338f710924e8/f11904b9818546a9-70/s500x750/7c8540645533891fe66cf465c65f9ac478e5d12c.gif)center #eee; background-size:cover;"></div>
      <div class="membernameD">An amazing Name</div>
    </div>
    <!--MEMBER RIGHT-->
    <div class="memberbackD">
      <div class="memberpicbD" style="background:url(https://img.wattpad.com/4f276e421b16c38cc2ab99b8a8599e61868b34c3/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f5a485170374d4c754e41773136513d3d2d313033323434393333322e31363638313238646331366433656636343636343730353535382e676966)center #eee; background-size:cover;"></div>
      <div class="membernameD">An amazing Name</div>
    </div>
  </div>
  <!--MEMBERS LINE-->
  <div class="linemembersD">
    <!--MEMBER LEFT-->
    <div class="memberbackD">
      <div class="memberpicaD" style="background:url(https://i.pinimg.com/originals/10/cd/c6/10cdc68c21ec38809ad3dc407521846a.gif)center #eee; background-size:cover;"></div>
      <div class="membernameD">An amazing Name</div>
    </div>
    <!--MEMBER RIGHT-->
    <div class="memberbackD">
      <div class="memberpicbD" style="background:url(https://media4.giphy.com/media/YlyE8TGWYTw7bjAHK2/200w.gif?cid=82a1493b8t1nwt3qcaxzoeh6sppv2nhl4rgy39r3d7oxugbf&rid=200w.gif&ct=g)center #eee; background-size:cover;"></div>
      <div class="membernameD">An amazing Name</div>
    </div>
  </div>
  <!--MEMBERS LINE-->
  <div class="linemembersD">
    <!--MEMBER LEFT-->
    <div class="memberbackD">
      <div class="memberpicaD" style="background:url(https://64.media.tumblr.com/a610b997f87930f2a3f3668be8f1efbe/2c3e175ce922c66a-f5/s500x750/2deb48316058bf66653c0c1af24461b3447493c6.gif)center #eee; background-size:cover;"></div>
      <div class="membernameD">An amazing Name</div>
    </div>
    <!--MEMBER RIGHT-->
    <div class="memberbackD">
      <div class="memberpicbD" style="background:url(https://i.makeagif.com/media/5-08-2021/2vx-4l.gif)center #eee; background-size:cover;"></div>
      <div class="membernameD">An amazing Name</div>
    </div>
  </div>
</div>


<!-- CREDITS, DO NOT TOUCH-->
<div style="margin:0 auto;text-align:center;"><a href="https://aliyahscreations.tumblr.com/" style="font-size:10px;letter-spacing:2px;color:#222;text-decoration:none; font-family:century gothic,helvetica,arial,sans-serif;font-size:12px;line-height:1.3;">© Code by Aliyah</a></div>