Profile
| <!DOCTYPE HTML> <html> <body> <!-- Cosmic Craze - F2U Code Rules: - Turn off WYSIWYG when editing!! - Do not remove my credit Guide: - Accent color: #61b55c - 'Now In Color' Yellow: #ffc936 - About Text Color: Black - Header Text Color: White --> <!--Main Box--> <div class="container" style="width: 410px; height: 700px; background-color: white; border-radius: 10px; padding: 10px"> <!--Header Box--> <div class="container" style="width: 370px; height: 120px; background-color: #61b55c; border-radius: 10px; padding: 30px; margin: 10px"> <!--Name--> <h1 style="font-size: 50px; text-align: center; "> NAME </h1> <!--Barcode--> <h1 style="color:white; position: absolute; right: 15px; top: 32px; font-size: 30px;">IIIIII||</h1> <!--Issue #--> <h1 style="color:white; position: absolute; right: 30px; top: 70px; font-size: 10px;">ISSUE #1</h1> </div> <!--Now In Color--> <i class="fas fa-star" style="position: absolute; left: 0px; top: 0px; color: #ffc936; font-size: 70px"></i> <i class="fas fa-star fa-rotate-180" style="position: absolute; left: 0px; top: 0px; color: #ffc936; font-size: 70px"></i> <p style="font-size: 10px; color: black; position: absolute; left: 20px; top: 20px;"> NOW IN<br> COLOR!</p> <!--IMAGE TAB--> <div class="tab-pane fade show active" id="TAB-1"> <!--Top Left Image 1--> <img src="IMG_URL" style="width: 200px; height: 220px; border-radius: 10px; margin: 10px; object-fit: cover; float: left" title="Art by ___"> <!--Top Right Image 1--> <img src="IMG_URL" style="width: 150px; height: 100px; border-radius: 10px; margin: 10px; object-fit: cover; float: right" title="Art by ___"> <!--Top Right Image 2--> <img src="IMG_URL" style="width: 150px; height: 100px; border-radius: 10px; margin: 10px; object-fit: cover; float: right" title="Art by ___"> <!--Bottom Right Image 1--> <img src="IMG_URL" style="width: 200px; height: 220px; border-radius: 10px; margin: 10px; object-fit: cover; float: right" title="Art by ___"> <!--Bottom Left Image 1--> <img src="IMG_URL" style="width: 150px; height: 100px; border-radius: 10px; margin: 10px; object-fit: cover; float: left" title="Art by ___"> <!--Bottom Left Image 2--> <img src="IMG_URL" style="width: 150px; height: 100px; border-radius: 10px; margin: 10px; object-fit: cover; float: left" title="Art by ___"> </div> <!--image tab content end--> <!--TAB 2 CONTENT--> <div class="tab-pane fade" id="TAB-2"> <div class="container" style="width: 100%; height: 100%"> <!--Icon--> <img src="IMG_URL" style="height: 100px; width: 100px; object-fit: cover; border-radius: 100%; position: absolute; top: 7px; left: 10px"> <!--Brain vs Brawn--> <div class="row" style="position: absolute; top: 20px; right: 30px; width: 200px"> <!--Brain Label--> <p style="color: black"> <i class="far fa-head-side-brain"></i> </p> <!--Progress Bar--> <div class="container" style="height:10px; width: 100px; background-color: black; border-radius: 10px; "> <!--Change the 'width: 50%' to change progress!--> <div class="container" style="height:10px; width: 50%; background-color: #61b55c; border-top-left-radius: 10px; border-bottom-left-radius: 10px; position: absolute; top: 0px; left: 0px;"> </div> </div> <!--Brawn Label--> <p style="color: black"><i class="far fa-dumbbell"></i></p> </div> <!--End Brain vs Brawn--> <!--Good vs Bad--> <div class="row" style="position: absolute; top: 50px; right: 32px; width: 200px"> <!--Good Label--> <p style="color: black"> <i class="far fa-thumbs-up"></i> </p> <!--Progress Bar--> <div class="container" style="height:10px; width: 100px; background-color: black; border-radius: 10px; "> <!--Change the 'width: 50%' to change progress!--> <div class="container" style="height:10px; width: 50%; background-color: #61b55c; border-top-left-radius: 10px; border-bottom-left-radius: 10px; position: absolute; top: 0px; left: 0px;"> </div> </div> <!--Bad Label--> <p style="color: black"> <i class="far fa-thumbs-down"></i> </p> </div> <!--End Good vs Bad--> <!--Heart vs Head--> <div class="row" style="position: absolute; top: 80px; right: 32px; width: 200px"> <!--Heart Label--> <p style="color: black"> <i class="far fa-heart"></i> </p> <!--Progress Bar--> <div class="container" style="height:10px; width: 100px; background-color: black; border-radius: 10px; "> <!--Change the 'width: 50%' to change progress!--> <div class="container" style="height:10px; width: 50%; background-color: #61b55c; border-top-left-radius: 10px; border-bottom-left-radius: 10px; position: absolute; top: 0px; left: 0px;"> </div> </div> <!--Head Label--> <p style="color: black"> <i class="far fa-head-side"></i> </p> </div> <!--End Heart vs Head--> <!--Quick Info--> <!--Left Column--> <div class="container" style="width: 50%; height: 100%; float: left; position: absolute; top: 150px"> <p style="color: black; text-align: left"> <!--Name--> <i class="far fa-pen"></i> name<br> <!--Nickname--> <i class="far fa-comment-alt-lines"></i> alias<br> <!--Gender--> <i class="far fa-venus-mars"></i> gender<br> <!--Orientation--> <i class="far fa-heart"></i> orient.<br> </p> </div> <!--Right Column--> <div class="container" style="width: 50%; height: 100%; float: right; position: absolute; top: 150px; right: 10px"> <p style="color: black; text-align: right"> <!--Height--> height <i class="far fa-ruler"></i><br> <!--Birthday--> d.o.b <i class="far fa-birthday-cake"></i><br> <!--Theme--> <a href="SONG LINK" style="color: #61b55c">theme <i class="far fa-music"></i></a><br> <!--Orientation--> worth <i class="far fa-dollar-sign"></i> <br> </p> </div> <!--About--> <div class="container" style="height: 200px; width: 90%; overflow: scroll; position: absolute; top: 250px; "> <p style="color: black;">ABOUT BLURB [this area scrolls, write as much or little as you want!]</p> </div> <!--tab 2 content end--> </div> </div> <center> <!--BUTTONS--> <ul class="nav nav-tabs" style="position: absolute; bottom: 10px; width: 95%; "> <!--IMAGES TAB--> <li class="nav-item" style="width: 50%;"> <a class="nav-link active" data-toggle="tab" href="#TAB-1" style="background-color: white"> <i class="far fa-images" style="color: #61b55c" ></i> </a> </li> <!--button 1 end--> <!--ABOUT TAB--> <li class="nav-item" style="width: 50%"> <a class="nav-link" data-toggle="tab" href="#TAB-2"style="background-color: white"> <i class="far fa-pencil-alt" style="color: #61b55c" ></i> </a> </li> <!--button 2 end--> </ul> <!--buttons end--> </center> <!--End Main Box--> </div> <br> <center> <!--CREDIT - DONT EDIT!!!--> <a href="https://toyhou.se/JustKiddinq"><i class="far fa-code"></i> </a> </center> </body> </html> |
Recent Images
No images.