Elliot Hayes (app)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat:400,500|Playfair+Display:900" rel="stylesheet">

<style>
#app-collab{
  width: 500px;
  height: 550px;
  margin: 0px auto;
  overflow: hidden;
  position: relative;
  background: #222;
  outline: 1.5px solid #444;
  outline-offset: 2px;
}

#app-collab a{
  color: #fff;
  text-decoration: none;
  font-size: 8px;
}
#app-collab ::-webkit-scrollbar {
    width: 5px;
}

#app-collab ::-webkit-scrollbar-track {
  border: 2px solid #fff;
  background: #333;
}

#app-collab ::-webkit-scrollbar-thumb {
    background: #444;
}

#app-collab .base{
  position: absolute;
  bottom: 0px;
  background: transparent;
  width: 500px;
  height: 500px;
  transition-delay: 1s;
  transition-duration: 1s;
}
#app-collab:hover .base{
  bottom: 380px;
}
#app-collab:not(:hover) .base{
  transition-duration: 1s;
  transition-delay: 1s;
}

#app-collab .polygon{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 250px;
  height: 170px;
  background: #A9CCE3;
  -webkit-clip-path: polygon(0 0, 74% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 74% 0, 100% 100%, 0% 100%);
}

#app-collab .avatar{
  border-radius: 20px;
  border: 9px solid #fff;
  position: absolute;
  top: 33px;
  left: 45px;
  width: 90px;
  height: 90px;
  background: url(https://i.imgur.com/K1Ioheo.gif);
  background-size: 90px;
}

#app-collab .title{
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 57px;
  position: relative;
  top: 190px;
  width: 305px;
  height: 80px;
  background: transparent;
  color: #A9CCE3;
  transition-delay: 1s;
  transition-duration: 1s;
  line-height: 0px;
  text-shadow: 1px 1px #000;
}
#app-collab:hover .title{
  font-size: 42px;
  top: 50px;
  left: 105px;
}
#app-collab:not(:hover) .title{
  transition-duration: 1s;
  transition-delay: 1s;
  left: 0;
}

#app-collab .info{
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  position: relative;
  top: 155px;
  padding-top: 10px;
  width: 305px;
  height: 150px;
  background: transparent;
  color: #A9CCE3;
  transition: 0.7s;
  border-top: 0.5px solid #fff;
  line-height: 12px;
}
#app-collab:hover .info{
  opacity: 0;
}
#app-collab:not(:hover) .info{
  transition-duration: 1s;
  transition-delay: 2s;
}

#app-collab w{
  color: #fff;
}

#app-collab .fcbase{
  width: 500px;
  height: 70px;
  background: #fff;
  position: absolute;
  bottom: 0px;
  left: 0px;
  text-align: justify;
  line-height: 13px;
  color: #222;
}

#app-collab .fc{
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 9px;
  padding-left: 30px;
  width: 210px;
  padding-top: 14px;
  height: 26px;
  background: #222;
  position: absolute;
  bottom: 15px;
  right: -250px;
  text-align: justify;
  line-height: 13px;
  color: #A9CCE3;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 10%, 26% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%,6.5% 100%);
  transition-duration: 0.7s;
}
#app-collab:hover .fc{
  right: 12px;
}
#app-collab:not(:hover) .fc{
  transition-duration: 1s;
  transition-delay: 0s;
}

#app-collab .tag{
  height: 33px;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 31px;
  padding-top: 16px;
  padding-left: 20px;
  background: #A9CCE3;
  line-height: 12px;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 1px 1px #98B6C9;
}

#app-collab .textbox{
  overflow: auto;
  padding-right: 10px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 10px;
  text-align: justify;
  color: #222;
  position: absolute;
  bottom: -355px;
  left: 35px;
  width: 360px;
  height: 255px;
  border: 30px solid #fff;
  background: #fff;
  transition-delay: 1s;
  transition-duration: 1s;
  line-height: 15px;
}
#app-collab:hover .textbox{
  bottom: 32px;
}
#app-collab:not(:hover) .textbox{
  transition-duration: 1s;
  transition-delay: 1s;
}

</style>

<center>
<div id='app-collab'>

    <div class='base'>
        <div class='fcbase'>
           <div class='fc'>alias . <w>sexuality .</w> time zone <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©"><i class="fa fa-chain" style="margin-left:5px;"></i></a></div>
        </div>

        <div class='polygon'>
            <div class='avatar'></div>
        </div>
    </div>

    <div class='title'><w>elliot</w> hayes</div>
    <div class='info'><w>age .</w> face claim . <w>occupation .</w> membergroup</div>

    <div class='textbox'>

      <div class='tag'>about</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra sed nisl nec lacinia. Aliquam pharetra magna urna. Nulla risus nisl, volutpat sed mauris id, maximus eleifend nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi ex, posuere sit amet rutrum sed, pharetra eget risus. Sed luctus vehicula justo, non volutpat lacus elementum nec. Nam pellentesque aliquam felis et lobortis. Vivamus faucibus leo vel placerat efficitur.
        <br><br>
        Donec et justo massa. Vestibulum mi orci, mattis sit amet accumsan nec, placerat eget sapien. Cras commodo pellentesque velit. Vestibulum luctus euismod pulvinar. In in vestibulum augue. Praesent placerat dolor nisl, a egestas purus dictum vitae. Fusce pellentesque tortor quis blandit congue.
        Sed blandit mi a metus iaculis, vel tempus mauris auctor. Quisque aliquam est a ex viverra ultricies. Integer tristique finibus nibh, id ornare nisl egestas ac. Vivamus pretium dictum mauris, eget pharetra elit luctus eget. Morbi eget pulvinar sapien, a posuere magna. Nam tristique est at lectus tincidunt gravida. Aenean faucibus hendrerit aliquet. Nulla nibh enim, euismod vitae vulputate et, hendrerit nec nisl. Nunc nec mi non felis ultrices vehicula. Praesent auctor gravida vestibulum. Etiam mi nisi, faucibus volutpat nisl in, mollis gravida odio. Vivamus lacinia tellus elit, et vestibulum eros condimentum ut.
        <br><br>

        <div class='tag'>enemies</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra sed nisl nec lacinia. Aliquam pharetra magna urna. Nulla risus nisl, volutpat sed mauris id, maximus eleifend nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi ex, posuere sit amet rutrum sed, pharetra eget risus. Sed luctus vehicula justo, non volutpat lacus elementum nec. Nam pellentesque aliquam felis et lobortis. Vivamus faucibus leo vel placerat efficitur.
        <br><br>
        Donec et justo massa. Vestibulum mi orci, mattis sit amet accumsan nec, placerat eget sapien. Cras commodo pellentesque velit. Vestibulum luctus euismod pulvinar. In in vestibulum augue. Praesent placerat dolor nisl, a egestas purus dictum vitae. Fusce pellentesque tortor quis blandit congue.
        Sed blandit mi a metus iaculis, vel tempus mauris auctor. Quisque aliquam est a ex viverra ultricies. Integer tristique finibus nibh, id ornare nisl egestas ac. Vivamus pretium dictum mauris, eget pharetra elit luctus eget. Morbi eget pulvinar sapien, a posuere magna. Nam tristique est at lectus tincidunt gravida. Aenean faucibus hendrerit aliquet. Nulla nibh enim, euismod vitae vulputate et, hendrerit nec nisl. Nunc nec mi non felis ultrices vehicula. Praesent auctor gravida vestibulum. Etiam mi nisi, faucibus volutpat nisl in, mollis gravida odio. Vivamus lacinia tellus elit, et vestibulum eros condimentum ut.
        <br><br>

        <div class='tag'>anything</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra sed nisl nec lacinia. Aliquam pharetra magna urna. Nulla risus nisl, volutpat sed mauris id, maximus eleifend nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi ex, posuere sit amet rutrum sed, pharetra eget risus. Sed luctus vehicula justo, non volutpat lacus elementum nec. Nam pellentesque aliquam felis et lobortis. Vivamus faucibus leo vel placerat efficitur.
        <br><br>
        Donec et justo massa. Vestibulum mi orci, mattis sit amet accumsan nec, placerat eget sapien. Cras commodo pellentesque velit. Vestibulum luctus euismod pulvinar. In in vestibulum augue. Praesent placerat dolor nisl, a egestas purus dictum vitae. Fusce pellentesque tortor quis blandit congue.
        Sed blandit mi a metus iaculis, vel tempus mauris auctor. Quisque aliquam est a ex viverra ultricies. Integer tristique finibus nibh, id ornare nisl egestas ac. Vivamus pretium dictum mauris, eget pharetra elit luctus eget. Morbi eget pulvinar sapien, a posuere magna. Nam tristique est at lectus tincidunt gravida. Aenean faucibus hendrerit aliquet. Nulla nibh enim, euismod vitae vulputate et, hendrerit nec nisl. Nunc nec mi non felis ultrices vehicula. Praesent auctor gravida vestibulum. Etiam mi nisi, faucibus volutpat nisl in, mollis gravida odio. Vivamus lacinia tellus elit, et vestibulum eros condimentum ut.


    </div>

</div>
</center>