Profile
Hi there! Just a few quick notes before you put the code into safehouse:
- Some parts of the code (namely the right side of the featured character icons before you insert their image urls, the middle section with all 6 icons enabled, the status section (with links enabled)) may look odd/wrong on safehouse's preview. They'll be fine when imported into TH.
- The heart shaped icon's shape cannot be changed in this version/on safehouse. If you want to change it, you will have to go into the code yourself (I've provided instructions but it might not be that easy if you don't know too much HTML).
<!--Hi there! This is the Safehouse compatible version of the code. Please visit https://safehou-se.vercel.app/code-filler to fill it in!--> <!--Start of top bar.--> <div class="card card border-0 rounded-0 p-3" style="background: #03040E;"> <div class="row"> <!--Start of basics section.--> <div class="col-md-3"> <center> <div style="font-size: 25px; letter-spacing:1mm; font-weight:light; color: #F0EAE2; font-family:georgia;"> {{!Username/name!}} </div> <div style="font-size: 15px; letter-spacing:1mm; font-weight:light; color: #F0EAE2; font-family:georgia;"> <em>{{!Pro/nouns!}} <i class="fas fa-angle-double-right fa-xs"></i> {{!Age!}}</em> </div> </center> </div> <!--End of basics section.--> <!--Start of bio section.--> <div class="col-md-6"> <div style="font-weight:lighter; color: #F0EAE2; overflow-x: hidden; height:65px;"> <div class="mt-2"></div> {{l!Write about yourself here.!}} </div> </div> <!--End of bio section.--> <!--Start of social media/icons section.--> <div class="col-md-3"> <center> <div style="letter-spacing:1mm;"> <div class="mt-3"></div> <!--Social medias/misc icons. Feel free to add more, change them, or remove them, they should fit regardless.--> {{%Icon% <a href="{{u%Link to social media/etc.%}}"> <i class="{{i%Icon%}} tooltipster fa-lg" title="{{%Name of social media/link%}}" style="color: #F0EAE2;"> </i></a> %end%}} </div> <!--End of social media/icons section.--> </center> </div> </div> </div> <!--End of top bar.--> <!--Start of middle section.--> <!--Background image for the center portion. I HIGHLY reccomend using a static image OR a slower gif due to the animated elements of this code ESPECIALLY if you're using GIFs for the individual icons, or IF you're using a faster/flashing GIF please place a warning on your page for flashing images. Any non-transparent image should fit in here!--> <div class="card border-0 rounded-0 p-2" style="background: url({{u!Middle background image URL!}}); background-size: cover; background-position: center;"> <!--Start of icons. You can remove as many characters as you need- I do NOT suggest adding any, though, it'll make the code start to look funky. I reccomend placing featured characters here! Any image should fit for the icons.--> <div class="mt-3"></div> <div class="mx-auto;" style="z-index: 100;"> <div class="row no-gutters justify-content-center"> <div class="col-md-4; my-auto"> <div class="row"> <!--Start of icons to the left.--> {{%Featured Character Left% <a href="{{u%Link to Character%}}"> <img src="{{u%Character image URL%}}" style="clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); background-color: #000000; height:125px; width:110px; background-size: cover; object-fit: cover; z-index: 100;" title="{{%Name of Character%}}" class="tooltipster"></a> %end%}} </div> <!--End of character Three.--> </div> <!--End of character icons (left).--> <div class="col-md-3; mx-auto;"> <!--Beating heart icon. Any image should also work here. If you want another shape than a heart, replace clip-path: polygon(31.12% 5.81%, 50% 19.87%, 68.88% 5.81%, 98.58% 45.7%, 50% 94.27%, 1.42% 45.7%); with one of the following: Circle: clip-path: circle(50% at 50% 50%); Star: clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); Diamond/rhombus: clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); Octagon: clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); Pentagon: clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); Be absolutely sure that you're not removing the quotation marks (") around this section, nor the rest of the icon's code.--> <div class="card border-0 rounded-0; mt-3; fa-beat" style="clip-path: polygon(31.12% 5.81%, 50% 19.87%, 68.88% 5.81%, 98.58% 45.7%, 50% 94.27%, 1.42% 45.7%); background: url({{u!Heart icon image URL!}}); --fa-beat-scale: 1.1; --fa-animation-duration: 1.2s; background-color: #000000; height:250px; width:250px; background-size: cover; background-position: center; z-index: 102;"> </div> </div> <!--End of heart icon.--> <!--Start of icons to the right.--> <div class="col-md-4; my-auto"> <div class="row"> {{%Featured Character Right% <a href="{{u%Link to Character%}}"> <img src="{{%Character image URL%}}" style="clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%); background-color: #000000; height:125px; width:110px; background-size: cover; object-fit: cover; z-index: 100;" title="{{%Name of Character%}}" class="tooltipster"></a> %end%}} </div> </div> </div> </div> </div> <!--End of middle section.--> <!--Start of lower bar.--> <div class="card card border-0 rounded-0 p-4" style="background: #03040E;"> <div class="row"> <!--Start of music section.--> <div class="col-md-4"> <div class="row"> <div class="col-md-2; p-1"> <!--Music player. Plays from youtube, place the end of the youtube's url (it's the final thing in the url after the last /, usually looks like a keysmash) in the specified area. Credits to @strabi for the original music player code snippet.--> <span><iframe class="flex-fill" style="width:100%;height:30px;width:30px;clip-path: polygon(25% 20%, 25% 100%, 80% 60%);opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/{{!End of youtube URL!}} HERE"></iframe><i class="fas fa-play fa-2x" style="margin-left:-25px; color: #827E7A;"></i></span> </div> <div class="col-md-4; my-auto mx-auto"> <div style="font-size: 15px; letter-spacing:1mm; font-weight:light; color: #F0EAE2; font-family:georgia;"> {{!Song artist!}} </div> <div style="font-size: 10px; letter-spacing:1mm; font-weight:light; color: #F0EAE2; font-family:georgia;"> <em>{{!Song name!}}</em> </div> </div> </div> </div> <!--End of music section.--> <!--Start of quote section. You can remove this one if you want, just be sure to get only the quote section itself and nothing else.--> <div class="col-md-4"> <div class="mt-2"></div> <center> <span style="letter-spacing:.4mm; color: #F0EAE2; font-size:16px; font-weight:lighter;">{{!Short quote or tagline!}}</span> </center> <div class="mt-2"></div> </div> <!--End of quote section.--> <!--Start of status section.--> <div class="col-md-4"> <div style="color: #F0EAE2; letter-spacing:1.8mm; font-size: 14px; font-weight:lighter; font-family:georgia;"> <!--To add a little link button to the end of one of these, just copy and paste this directly after the </em> of each section (before the <br> section: <a href="LINK HERE"><i class="fas fa-external-link-square-alt tooltipster" title="Link" style="color:#693fef"></i></a> By default, the colour is the purple shown on the code demo. Feel free to change it! --> Commissions <i class="fas fa-angle-double-right fa-xs"></i> <em>{{!Commission status (open/closed/etc.)!}}</em> {{?Commission Link? <a href="{{u!URL to commission link!}}"><i class="fas fa-external-link-square-alt tooltipster" title="Link" style="color:{{c!commission link color!}}"></i></a> ?end?}} <br> Trades <i class="fas fa-angle-double-right fa-xs"></i><em> {{!Trade status!}}</em>{{?Trade Link? <a href="{{u!URL to trade link!}}"><i class="fas fa-external-link-square-alt tooltipster" title="Link" style="color:{{c!commission link color!}}"></i></a> ?end?}} <br> Requests <i class="fas fa-angle-double-right fa-xs"></i><em> {{!Request status!}}</em>{{?Request Link? <a href="{{u!URL to request link!}}"><i class="fas fa-external-link-square-alt tooltipster" title="Link" style="color:{{c!commission link color!}}"></i></a> ?end?}} <br> </div> <!--End of status section.--> </div> </div> </div> <!--End of lower bar.--> <div class="mt-1"></div> <!--Credit section, please credit both the person who created the background you use and the artist of your icon (even if it's you!)--> <a href="{{u!URL of background image's creator!}}"><i class="fas fa-image fa-lg tooltipster" title="Background by {{!Background creator's name!}}"></i></a> <i class="fas fa-heart fa-xs"></i> <a href="{{u!URL of icon image's creator!}}"><i class="fas fa-icons fa-lg tooltipster" title="Main icon by {{!Icon creator's name!}}"></i></a> <!--My credits. You may MOVE them, but do not REMOVE them.--> <span class="pull-right"> <a href="https://toyhou.se/Coturnix"><i class="fas fa-moon-stars fa-xl tooltipster" style="color: #ffd633;" title="Code cooked up by Quail"></i></a> </span> <!--End of WILD HEARTS. Thanks so much for using it!-->