Profile
| <center> <!--<div class="container rounded p-1" style="height: 200px; width: 60px; background-size: cover; float: left; background: #7f9ab5"></div>--> <div class="row" style="width: 250px; height: 30px;"> <!-- dropdown button [ignore] --> <p> <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> <p style="font-size: 7px"><span class="fa-stack fa-2x"><i class="fas fa-circle fa-beat fa-stack-2x text-dark"></i><i class="far fa-user fa-stack-1x fa-inverse"></i></span> </a> </p> <!-- name --> <span style="font-size: 17px; letter-spacing: 2px; font-variant: small-caps;"> name </span> </p> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <i class="fal fa-caret-left" style="margin: 6px"></i> </a> </div> <!-- main image --> <div class="container rounded" style="height: 200px; width: 250px; padding-top: 5px; background: url(IMG_URL); background-size: cover"> <!-- dropdown box --> <div class="collapse" id="collapseExample"> <div class="container"> <div class="container rounded" style="height: 180px; width: 220px; background: rgba(0,0,0,0.5); position: absolute; left: 0px; top: 5px; overflow: visible;"> <!-- pagedoll --> <img src="IMG_URL" style="position: absolute; right: -70px; bottom: -50px; width: 200px; height: 200px; object-fit: contain"> <!-- carousel --> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <!-- slide 1: quick info --> <div class="carousel-item active" style="width: 100px; float: left; height: 170px; overflow:scroll; font-size: 12px; text-align: left; margin: 10px"> <!-- gender --> <p style="color: white"> <i class="fal fa-venus-mars"></i> gender </p> <!-- pronouns --> <p style="color: white"> <i class="fal fa-comment"></i> pro/nouns </p> <!-- orientation --> <p style="color: white"> <i class="fal fa-heart"></i> orientation </p> <!-- species --> <p style="color: white"> <i class="fal fa-paw"></i> species </p> <!-- designer --> <p style="color: white"> <i class="fal fa-pencil"></i> @designer </p> </div> <!-- slide 2: about --> <div class="carousel-item p-2"> <!-- about --> <p style="width: 100px; float: left; height: 160px; overflow:scroll; font-size: 12px; text-align: left; margin: 5px; margin-bottom: 5px; color: white"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <!-- carousel controls [ignore] --> <h1><a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" style="position: absolute; left: -36px;"> <i class="fal fa-caret-left text-dark" aria-hidden="true"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" style="position: absolute; right: -36px;"> <i class="fal fa-caret-right text-dark" aria-hidden="true"></i> <span class="sr-only">Next</span> </a> </h1> </div> </div> </div></div> </div> <!-- code credit [DO NOT EDIT/REMOVE]--> <div class="container" style="width: 250px; font-size: 10px"> <a class="text-muted" href="https://toyhou.se/quiincodes" style="position: absolute; right: 0px"> code by <i class="fal fa-cloud-rain"></i> quiincodes </a></div> </div> </center> |