Profile
<!-------------------------------------------
| MIRROR IMAGE |
| by Zylphide |
---------------------------------------------
drawer color: #2F3136
mirror shine: rgba(255,255,255,0.2)
dark stars: #313B45
bright stars: #F1B35A
drawer borders:
text: #DCD8D9
stat text: #80919C
likes: #96994E
dislikes: #AB5B45
--------->
<!---- mirror ---->
<div class="row no-gutters justify-content-center">
<div class="col-lg-4">
<!--- mirror border ----->
<div class="p-4" style="background: #2F3136; border-top-right-radius:250px; border-top-left-radius:250px;">
<!----- starting mirror, will see this when you first load the page ---->
<div class="collapse multi-collapse show" id="login">
<!---- starting mirror image, will stretch to fit ----->
<div style="background: url(https://images.unsplash.com/photo-1592348846067-0139af80c390?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-repeat: none; background-size: cover; background-position: center; height: 450px;
border-top-right-radius:250px; border-top-left-radius:250px;
">
<!--- mirror "shine", delete "background: rgba(255,255,255,0.2)" if you don't want the shine ----->
<div class="row no-gutters justify-content-center" style="background: rgba(255,255,255,0.2); height: 450px;
border-top-right-radius:250px; border-top-left-radius:250px
">
<!---- stars ---->
<span style="color: #313B45"><i class="fas fa-star"></i></span>
<span style="color: #313B45"><i class="fas fa-star fa-2x"></i></span>
<span style="color: #313B45"><i class="fas fa-star fa-3x"></i></span>
<span style="color: #313B45"><i class="fas fa-star fa-2x"></i></span>
<span style="color: #313B45"><i class="fas fa-star"></i></span>
<!---- stars END ---->
<!---- button for changing picture to the collapsed, hidden picture ----->
<a href="#" class="btn btn-outline-primary btn-block btn-lg" style="height:100%; mix-blend-mode: soft-light; border-top-right-radius:250px; border-top-left-radius:250px; margin-top: -43px" data-target=".multi-collapse" data-toggle="collapse"></a>
<!---- button end ---->
</div>
<!--- mirror "shine" END ---->
</div>
<!---- starting mirror image END ----->
</div>
<!---- starting mirror END ----->
<!----- hidden mirror, will see this when you click on the starting mirror ---->
<div class="collapse multi-collapse w-100">
<!---- collpased mirror image, will stretch to fit ----->
<div style="background: url(https://images.unsplash.com/photo-1452570053594-1b985d6ea890?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-repeat: none; background-size: cover; background-position:center; height: 450px;
border-top-right-radius:250px; border-top-left-radius:250px;
">
<!--- mirror "shine", delete "background: rgba(255,255,255,0.2)" if you don't want the shine ----->
<div class=" justify-content-center" style="background: rgba(255,255,255,0.2); height: 450px;
border-top-right-radius:250px; border-top-left-radius:250px
">
<!---- stars ---->
<span style="color: #F1B35A"><i class="fas fa-star"></i></span>
<span style="color: #F1B35A"><i class="fas fa-star fa-2x"></i></span>
<span style="color: #F1B35A"><i class="fas fa-star fa-3x"></i></span>
<span style="color: #F1B35A"><i class="fas fa-star fa-2x"></i></span>
<span style="color: #F1B35A"><i class="fas fa-star"></i></span>
<!---- stars END ---->
</div>
<!--- mirror "shine" END ---->
</div>
<!---- collpased mirror image END ----->
</div>
<!---- hidden mirror END ---->
</div>
<!--- mirror border END ----->
</div>
</div>
<!---- mirror END ---->
<!---- drawers with text info ---->
<div class="row no-gutters justify-content-center" style="margin-top: -20px">
<!--- profile information ---->
<div class="col-lg-8 rounded p-4" style="background: #2F3136; color: #DCD8D9">
<!--- quote drawer ---->
<div class="container rounded justify-content-center display-4 p-3" style="border: solid 1px #ADB2B5">
<i>"When will my reflection show who I am inside 😢"</i>
</div>
<!--- quote drawer END ---->
<!---- middle drawers ---->
<div class="row mx-0">
<!--- basic info ---->
<div class="col-lg-6 my-4" style="border: solid 1px #ADB2B5;">
<div class="row mt-2 mb-2">
<div class="col-6 mb-2">
<span class="text-uppercase" style="color: #80919C"><b>stat</b></span>
<span class="pull-right">info</span>
<hr class="mt-1 mb-0">
</div>
<div class="col-6 mb-2">
<span class="text-uppercase" style="color: #80919C"><b>stat</b></span>
<span class="pull-right">info</span>
<hr class="mt-1 mb-0">
</div>
<div class="col-6 mb-2">
<span class="text-uppercase" style="color: #80919C"><b>stat</b></span>
<span class="pull-right">info</span>
<hr class="mt-1 mb-0">
</div>
<div class="col-6 mb-2">
<span class="text-uppercase" style="color: #80919C"><b>stat</b></span>
<span class="pull-right">info</span>
<hr class="mt-1 mb-0">
</div>
<!----- ADD MORE LINES ABOVE THIS ---->
<div class="col-6 mb-1">
<span class="text-uppercase" style="color: #80919C"><b>stat</b></span>
<span class="pull-right">info</span>
</div>
<div class="col-6 mb-1">
<span class="text-uppercase" style="color: #80919C"><b>stat</b></span>
<span class="pull-right">info</span>
</div>
</div>
</div>
<!--- basic info END ---->
<!---- likes and dislikes section --->
<div class="col-lg-6 my-4" style="border: solid 1px #ADB2B5">
<div class="row no-gutters py-2">
<!---- likes ----->
<div class="col-lg-6">
<span style="color: #96994E; display: block; text-align: center"><b>LIKES:</b></span>
<ul class="mb-1">
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<!---- likes END ----->
<!---- dislikes ----->
<div class="col-lg-6">
<span style="color: #AB5B45; display: block; text-align: center"><b>DISLIKES:</b></span>
<ul class="mb-1">
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<!---- dislikes END ----->
</div>
</div>
<!---- likes and dislikes section END --->
</div>
<!---- middle drawers END ---->
<!--- paragraph drawer ---->
<div class="container rounded justify-content-center p-3" style="border: solid 1px #ADB2B5">
Cat ipsum dolor sit amet, eu and aspernatur quisquam so numquam. In cupidatat but nesciunt, ullamco laudantium, ullamco but molestiae. Perspiciatis. Doloremque numquam but rem yet esse ullam. Doloremque excepteur eiusmod quae. Ipsa quisquam ipsa or magnam proident and commodi yet et. Illo incididunt, nemo or dolore, sunt or mollit magna. Commodo quia dolor iste voluptas. Dolorem commodo but exercitationem or vel tempor. Iste irure rem nesciunt yet laborum error for occaecat. Magnam.
</div>
<!--- paragraph drawer END ---->
</div>
<!---- profile information END ---->
</div>
<!---- drawer with text info END ---->
<!---- credits, do not remove! ------>
<a class="d-block text-center pt-2" style="font-size:12px; color: #80919C; " href="https://toyhou.se/Zylphide"><i class="fas fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
Recent Images
No images.