, A F2U CODE
https://toyhou.se/29124284.f2u-simple-monochrome
Code: Bootstrap
Mobile Friendly?: Yes
Use: Can be used anywhere, can me modified, can be inspired by, can be merged, please credit me!
Toyhouse: Turn off WYSIWYG + Turn on Code viewing
<!-- #ffffff is white, #000000 is black.But I may use the names instead due to habit.
I wanted to cry a tornado while making this. First time doing Bootstrap. This means that it's mobile friendly, I think. How you people can manage to code such beauty with this bootstrap thing it is beyond me.
Don't turn on What You See. It shrinked the images and It took me... Around half an hour to figure it out. If you also can't understand or figure this code out, feel free to reach out.
Yours truly. Dori -->
<div class="container" style="background-color:#ffffff;border:2px solid #000000;width:95%;margin-left:auto;margin-right:auto"> <br>
<div class="container" style="margin:2.5px;background-color:#000000;border:2px solid #000000;">
<!-- Row 1 -->
<div class="row m-1" style="background-color:#000000;">
<div class="col-lg-5">
<div class="p-1">
<!-- icon -->
<br><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/88098172_3kmmKji4XlALCh8.png" class="rounded-circle fr-fic fr-dib" height="150.5" width="150.5" style="border:7px double #ffffff">
<!-- --> <br>
<div class="p-1" style="background-color:#ffffff;width:100%;">
<p style="text-align:center;letter-spacing:2px;"> <strong>The name</strong></p>
</div>
</div>
</div>
<!-- end -->
<!-- Here starts the other thing on the right.-->
<div class="col-lg-7 ">
<div class="p-1 ">
<br><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/88092038_gcnTX49dL3njxTp.png " class="fr-fic fr-dii" style="display:block;margin:Auto;" width="120" height="30.0938">
<br>
<div class="p-2 " style="background-color:#ffffff;width:100%;height:170px;overflow-y:scroll;">
<p> <strong>Name:</strong> XX
<br><strong>Gender:</strong> XX (Pro/noun)
<br><strong>Age:</strong> XX
<br><strong>Birthday:</strong> XX
<br><strong>Orientation:</strong> XX
<br><strong>Likes:</strong> XX
<br><strong>Dislikes:</strong> XX
<br>
<br>Just a reminder that this box can scroll. I love to code scroll boxes so much. I will copypaste some lyrics to the song I'm currently listening to. Oh, this has gotta be the good life. This has gotta be the good life. This could really be a good life, good life. I say oh, got this feeling that you can't fight. Like this city is on fire tonight, this could really be a good life a good, good life. Oh, oh, oh, oh, oh, oh</p>
<div class="p-1" style="background-color:#ffffff;border:2px solid #000000;
position:absolute;right:0;bottom:0;width:38%;height:31px;margin-top:25px">
<a href="https://toyhou.se/link_here" style="color:#000000">
<i class="fab fa-pinterest"> </i>
</a>
<a href="https://toyhou.se/link_here" style="color:#000000">
<i class="fab fa-square-instagram"> </i>
</a>
<a href="https://toyhou.se/link_here" style="color:#000000">
<i class="fab fa-youtube"> </i>
</a>
<a href="https://toyhou.se/link_here" style="color:#000000">
<i class="fab fa-discord"> </i>
</a>
<a href="https://toyhou.se/link_here" style="color:#000000">
<i class="fab fa-deviantart"> </i>
</a>
<a href="https://toyhou.se/link_here" style="color:#000000">
<i class="fab fa-artstation"> </i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Row end -->
<!-- Now you have the second row! The one with alot of text and the image alongside it. -->
<div class="row m-1" style="background-color:#000000;">
<div class="col-lg-7"> <br>
<div class="p-2" style="background-color:#ffffff;width:100%;height:200px;overflow-y:scroll;">
<p> Hello. I have to tell you more. I am just an average person or character on the internet. I enjoy leisureful activities such as watching medias, reading words, writing letters and being an existing human. And my goodness, this is yet another other scrolling box. How surprising! You have to see it scroll, but in order for it to scroll it needs alot of words. How about this, I will copypaste lyrics. Hey there Delilah I know times are getting hard, but just believe me girl someday I'll pay the bills with this guitar. We'll have it good. We'll have the life I know we should. My word is good... Hey there, Delilah, I've got so much left to say. If every simple song I wrote to you would take your breath away, I'd write it all </p>
</div>
</div>
<div class="col-lg-5"> <br>
<div class="p-1">
<div class="p-1 " style="background-color:#ffffff;width:100%;">
<p style="text-align:center;letter-spacing:2px;"><strong>R e d i r e c t</strong></p>
</div> <br>
<!-- Icon+S-->
<a href="https://toyhou.se/link_here" style="color:#000000">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/88099328_omVUMqjvxlVhZRf.png" class="rounded-circle fr-fic m-2 tooltipster" height="150.5" width="150.5" style="border:7px double #ffffff"
title="Redirect title">
</a>
<a href="https://toyhou.se/link_here" style="color:#000000">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/88136008_fCOwUL09qwawBi9.png" class="rounded-circle fr-fic m-2 tooltipster" height="150.5" width="150.5" style="border:7px double #ffffff"
title="Redirect title">
</a>
<!-- -->
</div> </div> </div>
<!-- End of Row 2! Congratulations. -->
<!-- Let's do Number 3 now! -->
<div class="row m-1" style="background-color:#000000;">
<div class="col-lg-6"> <br>
<div class="p-2" style="background-color:#ffffff;width:100%;height:190px;overflow-y:scroll">
<h1> <strike> Music </strike></h1>
<div style="display:flex;border-gap:2px;margin:1px">
<!-- Make sure the images are a square! -->
<Img src="https://f2.toyhou.se/file/f2-toyhou-se/images/88100492_0Ctz9lvV2wZJiuS.png" width="100" height="100" style="border:3px solid black"
title="Title">
<Img src="https://f2.toyhou.se/file/f2-toyhou-se/images/88100501_po0ugMwz7UhFj3u.png" width="100" height="100" style="border:3px solid black"
title="Title">
<Img src="https://f2.toyhou.se/file/f2-toyhou-se/images/88100517_EUUhoMGpkj4ccee.png" width="100" height="100" style="border:3px solid black"
title="Title">
<Img src="https://f2.toyhou.se/file/f2-toyhou-se/images/87849243_vKMUlLHMlRhgJ8W.png" width="100" height="100" style="border:3px solid black"
title="Title">
</div>
<br>
<p><strong>Now listening to: </strong> <span style="text-decoration:underline">XX</span> <br>
This section doesn't have to be just about songs, though. It can also display your characters, folders, friends, stuff like that. </p>
</div> </div>
<div class="col-lg-6"> <br>
<div class="p-2" style="background-color:#ffffff;width:100%;height:190px;overflow-y:scroll"> <div style="width:90%;text-align:right">
<h1> Status </h1>
<p><strong>Commissions:</strong> <span style="text-decoration:underline">OPEN</span>
<br><strong>Art Trades:</strong> <span style="text-decoration:underline">OPEN</span>
<br><strong>Requests:</strong> <span style="text-decoration:underline">OPEN</span>
<br> <br>
</p>
<a href="https://toyhou.se/link_here" style="color:#000000"
title="Awesome">
A link in relation to any of that
</a>
<p> Try to keep additional text concise, it may <br>
overlap with the image on the left.</p>
</div>
</div>
<div class="p-1" style="background-color:#ffffff;border:2px solid #000000;
position:absolute;left:0;top:0;width:115px;max-height:200px;margin-top:9px">
<a href="https://toyhou.se/link_here" style="color:#000000">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/88139851_fzuB7Vu9uK0tkBv.png?1725580616" width="100%" height="auto" class="m-0 tooltipster"
title="Describe this"
</a>
</div>
</div>
</div>
</div>
<!-- Now the credit =D -->
<a href="https://toyhou.se/doritochan001" style="text-align:center;display:block;color:#000000">
Coded with love
</a>
</div>
<!-- And viola! Fin. That means end in Spanish. Thank goodness, it is over. Now if you excuse me, Dori has to take a cat nap after writing all this code... --->