Profile
NAVIGATION
Interactives
links
I'm pretty sure everyone knows what links are. But, in case you don't, no worries. Links are helpful little elements that can be found all over the world wide web (AKA the internet for you young people out there.) Links define the locations of each object or site on the internet and can be used to redirect folks to the exact location it responds to when clicked on. Links are commonly highlighted and underlined just like this. Depending on the site theme, links will look different. Links on this site in particular respond to the primary site color. Links can be inserted by typing < a href="LINK_HERE" > with what ever text you want to be linked between the starting tag and the ending tag, which, in this case is < /a >.
< span class="text-center">
< a href="https://toyhou.se/OxyMoxy">A link to my profile!< /a>
< /span>
< span class="text-center">
< a href="https://toyhou.se/OxyMoxy/characters/folder:4076052">A link to my codes folder!< /a>
< /span>
< span class="text-center">
< a href="https://www.youtube.com"> A link to YouTube! < /a>
< /span>
< span class="text-center">
< a href="https://www.discord.com">A link to Discord!< /a>
< /span>
< span class="text-center">
< a href="https://media.discordapp.net/attachments/
710954602111172628/1082097872008401047/Screenshot_2023-
02-09_9.30.25_PM.png">A link to a specific image from Discord... < /a>< /span>
(i.e. < a href="LINK_HERE" target="_BLANK" >< /a >)
Buttons
Buttons are little div classes which links can be connected to. They can be styled however you like and, admittedly, look far nicer than a plain link.< div class="btn m-1 mx-auto">< a class="btn btn-outline-primary" data-toggle="button" href="https://toyhou.se/20062188.art-examples">My Art< /a>< /div>
< span class="text-center faded">Basic button; primary color; inactive< /span>
< div class="btn m-1 mx-auto">< a class="btn btn-outline-danger active" data-toggle="button" href="https://toyhou.se/~forums/13975.art-trades/374363.-forever-open-art-trades-">< b>! CHECK THIS OUT !< /b>< /a>< /div>
< span class="text-center faded">Danger color; bold text; active< /span>
< div class="btn m-1 mx-auto">< a class="btn" style="border: 2px solid; border-color: white; color: white; background-color: black" data-toggle="button" href="https://toyhou.se/_png">My co-owned profile< /a>< /div>
< span class="text-center faded">Custom button; black background; white text and outline span>
TABS
Tabs are quite tricky for me so I'll try my best to explain them and show a simple enough code for them. Basically, tabs are ways to display multiple different kinds of content in one place. In case you also have trouble with coding them, here's a simple horizontal and vertical tab code I got from Elithian . Check them out because they also have some resources of their own!< span class="text-center" style="margin-bottom: 10px">Horizontal tabs< /span>
< ul class="nav nav-tabs card-header-tabs row mb-1"> < li class="col-md-4 mb-1">< a class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#reg1">Tab1< /a>< /li>
< li class="col-md-4 mb-1">< a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#reg2">Tab2< /a>< /li>
< li class="col-md-4 mb-1">< a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#reg3">Tab3< /a>< /li>
< /ul>
< /div>
< div class="col-md-9">
< div class="tab-content">
< div class="tab-pane fade active show" id="reg1">
< div class="card p-3">
< div class="p-3">Text1< /div>
< /div>
< /div>
< div class="tab-pane fade" id="reg2">
< div class="card p-3">
< div class="p-3">Text1< /div>
< /div>
< /div>
< div class="tab-pane fade" id="reg3">
< div class="card p-3">
< div class="p-3">Text1< /div>
< /div>
< /div>
< /div>
< span class="text-center" style="margin-top: 10px; margin-bottom: 10px">Vertical tabs< /span>
< div class="row no-gutters">
< div class="col-md-3 px-3 mb-3">
< ul class="nav nav-tabs row card-header-tabs">
< li class="col-12 mb-1">< a class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#vert1">Tab1< /a>< /li>
< li class="col-12 mb-1">< a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert2">Tab2< /a>< /li>
< li class="col-12 mb-1">< a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert3">Tab3< /a>< /li>
< li class="col-12 mb-1">< a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#vert4">Tab4< /a>< /li>
< /ul>
< /div>
< div class="col-md-9">
< div class="tab-content">
< div class="tab-pane fade active show" id="vert1">
< div class="card p-3">
< div class="p-3">Text1< /div>
< /div>
< /div>
< div class="tab-pane fade" id="vert2">
< div class="card p-3">
< div class="p-3">Text2< /div>
< /div>
< /div>
< div class="tab-pane fade" id="vert3">
< div class="card p-3">
< div class="p-3">Text3< /div>
< /div>
< /div>
< div class="tab-pane fade" id="vert4">
< div class="card p-3">
< div class="p-3">Text4< /div>
< /div>
< /div>
< /div>
< /div>
Music Players
Now these are fun. And, in case you're wondering, yes this specific code actually plays music without sending you to YouTube! This code can be stylized and customized to fit any box and can look any way you want! It uses inline frames (aka iframe) which are frames that imbed sites and content into your code, keeping the functionality and making it interactive! In order for this code to work, you need to paste the end of a YouTube link (specifically the numbers and letters at the very end) behind the "/embed/" part of the src link."SONG NAME" - song artist
< p class="m-2" style= "background-color: #1a181f; padding: 15px; width: 100%; border-0; border-radius: 0;">
< span class="p-2 text-uppercase font-weight-bold" style="font-size: 21px; letter-spacing: 1px; text-align-center;">"SONG NAME" - song artist< /span>
< span class="p-2">
< iframe class="flex-fill" style="height: 1em; width: 1em; opacity: 0; position: absolute; margin-top: 6px; z-index: 1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/END_OF_LINK_HERE_">< /iframe>< i class="fas fa-play fa-2x">< /i>< /span>
< /p>
Did I forget something?
If there is something you want to see or anything you have questions about, please let me know in the comments so I can add it!
Recent Images
No images.