Flowers | PT

<style>

  /*Scrollbar*/
::-webkit-scrollbar {width: 0px;}
::-webkit-scrollbar-thumb {background: url(https://cdn.pixabay.com/photo/2020/03/14/17/01/flowers-4931217_960_720.png);}
::-webkit-scrollbar-thumb:hover {background: #FFF;}

   .separ{
    display:flex;
    justify-content:space-between;
    margin:20px 0;
}

  span{
    font-family:'Handlee'
  }

  .background{
 background:url(https://cdn.pixabay.com/photo/2020/03/14/17/01/flowers-4931217_960_720.png);
    height:200px;width:400px;border:5px double black;background-size:cover;padding:30px
  }

  .categ span{
    opacity:0;
    transition:1s;
  }

  .categ:hover span{
    opacity:1;
  }

  .categ{
    background:#FFF;
    border:4px double #000;
    border-radius:100%;
    height:120px;
    width:120px;
    transition:1s;
  }

  .categ:hover{
    border-radius:0px;
    height:170px;
    width:300px;
    margin:auto;
    overflow:auto;
    padding:20px
  }




  .relation{
    transition:0.5s;
    font-family:Spectral;
    font-size:10px;
    height:80px;
    width:80px;
    border-radius:10px;
    text-position:center;
  }


  .relation:hover .relation-in{
    opacity:1
  }

  .relation-in{
    background:rgba(225,225,225,0.8);
    opacity:0;
    height:60px;
    width:60px;
    border-radius:10px;
    margin:auto;
    transition:1s;
    margin-top:7.5px;
    margin-bottom:7.5px
  }


  .gallerie{
    height:80px;
    width:80px;
    border-radius:20px;
    border:5px double black;
    opacity:0;
    transition:0.5s
  }

  .categ:hover .gallerie{
    opacity:1
  }

  .bl{
    width:100px;
    border:2px solid black;
    padding:10px;
    opacity:0;
    transition:0.5s;
  }

  .categ:hover .bl{
    opacity:1
  }

</style>
<link href="https://fonts.googleapis.com/css?family=Handlee|Spectral|Sacramento&amp;display=swap" rel="stylesheet" />
<center>
<div class="background" style="border-bottom:hidden;height:270px">

  <span style="font-family:Sacramento;color:#000;font-size:55px;">Name Here</span>

  <div class="categ" style="margin:auto"><span><b>Basics</b><br />
<br /><br>
<span style="border-top:1px solid black;border-right:1px solid black;padding:20px">Something here</span>
<br>Something here
<br>Something here
<br>Something here
<br>Something here
<br>Something here
<br>Something here
<br><span style="border-bottom:1px solid black;border-left:1px solid black;padding:20px">Something here
</span> </span><br><br></div>
</div>

<div class="background" style="border-top:hidden;border-bottom:hidden">
<div class="categ" style="margin:auto"><span><b>Personnality</b><br>

<div class="separ"><div class="bl">Something</div>
<div class="bl">Something</div></div>
<div class="separ"><div class="bl">Something</div>
<div class="bl">Something</div></div>
<div class="separ"><div class="bl">Something</div>
<div class="bl">Something</div></div>
<div class="separ"><div class="bl">Something</div>
<div class="bl">Something</div></div>
  </div></div>

<div class="background" style="border-top:hidden;border-bottom:hidden;">
<div class="categ" style="margin:auto;"><span><b>Physic</b><br>
<br>
Something here
<br>Something here
<br>Something here
<br>Something here
<br>Something here
<br>Something here
<br>Something here</span></div>
</div>


<div class="background" style="border-top:hidden">
<div class="categ" style="margin:auto"><span><b>Images</b> </span>

<div class="separ">
<div class="gallerie" style="background:url(https://data.whicdn.com/images/284613389/original.jpg)center;background-size:cover">&nbsp;</div>

<div class="gallerie" style="background:url(https://data.whicdn.com/images/284613389/original.jpg)center;background-size:cover">&nbsp;</div>

<div class="gallerie" style="background:url(https://data.whicdn.com/images/284613389/original.jpg)center;background-size:cover">&nbsp;</div>
</div>
<span> </span>

<div class="separ">
<div class="gallerie" style="background:url(https://data.whicdn.com/images/284613389/original.jpg)center;background-size:cover">&nbsp;</div>

<div class="gallerie" style="background:url(https://data.whicdn.com/images/284613389/original.jpg)center;background-size:cover">&nbsp;</div>

<div class="gallerie" style="background:url(https://data.whicdn.com/images/284613389/original.jpg)center;background-size:cover">&nbsp;</div>
</div>
<span> </span></div>
</div>
</center>

  <br><center><a href="ambrecodes.tumblr.com" target="_blank" style="text-decoration:none;font-family:Handlee;color:#000;">AmbreCodes</a></center>