<!--==========================================
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
====================================================
Palette to change colours!!
select the colour and press Ctrl+F to replace it
(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")
Background colour---------------#008284
Text + Window borders-----------#000
Headers-------------------------#0000a7
Header text + Window borders----#fff
Windows-------------------------#bfc7c8
Note: the progress bars use images to make the broken up effect
==========================================-->
<div class="p-2" style="background-color:#008284;margin:-14.99px;color:#000">
<div class="row no-gutters justify-content-center">
<!--================================
CURSOR
================================-->
<div class="col-1 mr-sm-n5 mr-n3 ml-5" style="z-index:10;margin-top:80px">
<img src="https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Cursor%20Mirror-2.png" class="fa-beat">
</div>
<!--================================
END OF CURSOR
===================================
PFP WINDOW
================================-->
<div class="col-sm-3 col-8 mt-3 mr-sm-2 ml-n3" style="z-index:5">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;" class="p-1">
<!--================================
BLUE HEADER PART
================================-->
<div style="background-color:#0000a7;font-size:10px;letter-spacing:0.5px;padding:1.5px;color:#fff">
<!--================================
HEADER/TITLE + FILE ICON
================================-->
<img src="https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Painting-1.png" style="width:13px"> pfp.jpg
<!--================================
WINDOW BUTTONS
================================-->
<div class="row no-gutters pull-right">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">_</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">□</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col">
<p style="margin-top:-2.5px">x</p>
</div>
</div>
<!--================================
END OF WINDOW BUTTONS
================================-->
</div>
<!--================================
END OF HEADER
===================================
PFP/ICON
================================-->
<div style="height:180px;background-size:cover;background-position:center;border: 2px inset;border-color: #000 #fff #fff #000;
/* put your image url here */
;background-image:url('https://via.placeholder.com/500/ececec')"
class="mt-1"></div>
</div>
</div>
<!--================================
END OF PFP WINDOW
===================================
ABOUT ME WINDOW
================================-->
<div class="col-sm-6 col-12 mt-sm-0 mb-sm-n5 mt-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;font-size:13px" class="p-1">
<!--================================
BLUE HEADER PART
================================-->
<div style="background-color:#0000a7;font-size:10px;letter-spacing:0.5px;padding:1.5px;color:#fff" class="mb-1">
<!--================================
HEADER/TITLE + FILE ICON
================================-->
<img src="https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Notepad-2.png" style="width:13px"> About Me - Notes
<!--================================
WINDOW BUTTONS
================================-->
<div class="row no-gutters pull-right">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">_</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">□</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col">
<p style="margin-top:-2.5px">x</p>
</div>
</div>
<!--================================
END OF WINDOW BUTTONS
================================-->
</div>
<!--================================
END OF HEADER
===================================
THINGIES IDK
================================-->
File Edit Search Help
<!--================================
CONTENT SECTION
================================-->
<div class="p-1 mt-1 pb-4" style="height:200px;overflow:auto;background-color:#fff;font-size:13px">
Just write about yourself here :) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
</div>
</div>
<!--================================
END OF ABOUT ME WINDOW
===================================
BASIC INFO WINDOW
================================-->
<div class="col-lg-4 col-sm-6 col-12 mt-sm-n5 mt-1" style="z-index:6;">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;font-size:13px" class="p-1">
<!--================================
BLUE HEADER PART
================================-->
<div style="background-color:#0000a7;font-size:10px;letter-spacing:0.5px;padding:1.5px;color:#fff" class="mb-1">
<!--================================
HEADER/TITLE + FILE ICON
================================-->
<img src="https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/HTML.png" style="width:13px"> userdata.html
<!--================================
WINDOW BUTTONS
================================-->
<div class="row no-gutters pull-right">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">_</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">□</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col">
<p style="margin-top:-2.5px">x</p>
</div>
</div>
<!--================================
END OF WINDOW BUTTONS
================================-->
</div>
<!--================================
END OF HEADER
===================================
CONTENT SECTION
================================-->
<div class="p-1 mt-1" style="height:300px;overflow:auto;font-size:13px">
<div class="row no-gutters mb-1">
<div class="col-4 pr-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
NAME
</div>
</div>
<!--====-->
<div class="col-8">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
content
</div>
</div>
</div>
<!--==============-->
<div class="row no-gutters mb-1">
<div class="col-4 pr-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
AGE
</div>
</div>
<!--====-->
<div class="col-8">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
##
</div>
</div>
</div>
<!--==============-->
<div class="row no-gutters mb-1">
<div class="col-4 pr-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
PRONOUNS
</div>
</div>
<!--====-->
<div class="col-8">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
cont/ent
</div>
</div>
</div>
<!--==============-->
<div class="row no-gutters mb-1">
<div class="col-4 pr-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
TIMEZONE
</div>
</div>
<!--====-->
<div class="col-8">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
content
</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
<div class="row no-gutters">
<div class="col-auto"> COMM STATUS </div>
<div class="col ml-2"> <hr style="border-color:#000;margin-top:9px;border-width:1.5px"> </div>
</div>
<div class="row no-gutters mb-1">
<div class="col-4 pr-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
COMMS
</div>
</div>
<!--====-->
<div class="col-8">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
OPEN
</div>
</div>
</div>
<!--==============-->
<div class="row no-gutters mb-1">
<div class="col-4 pr-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
ATs
</div>
</div>
<!--====-->
<div class="col-8">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
ASK
</div>
</div>
</div>
<!--==============-->
<div class="row no-gutters mb-1">
<div class="col-4 pr-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
REQUESTS
</div>
</div>
<!--====-->
<div class="col-8">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;" class="p-1">
CLOSED
</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
<div>
<a href="COMM_INFO_LINK" class="text-reset">
COMM INFO
</a>
<a href="TOS_LINK" class="text-reset">
TOS
</a>
<a href="QUEUE_LINK" class="text-reset">
QUEUE
</a>
</div>
</div>
</div>
</div>
<!--================================
END OF BASIC INFO WINDOW
===================================
CREDIT, DO NOT REMOVE!!!!!
================================-->
<div class="col-lg-2 col-sm-1 px-sm-2 mt-sm-2 mt-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;" class="mt-sm-4 p-1">
<a href="https://toyhou.se/clowniicat" class="text-reset">
<i class="fas fa-code"></i>
</a>
</div>
</div>
<!--================================
END OF CREDIT
===================================
STATS WINDOW + INTERESTS
================================-->
<div class="col-sm-5 col-12 mt-sm-n2 mt-1" style="z-index:5;">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;font-size:13px" class="p-1">
<!--================================
BLUE HEADER PART
================================-->
<div style="background-color:#0000a7;font-size:10px;letter-spacing:0.5px;padding:1.5px;color:#fff" class="mb-1">
<!--================================
HEADER/TITLE + FILE ICON
================================-->
<img src="https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/HTML.png" style="width:13px"> userstats.html
<!--================================
WINDOW BUTTONS
================================-->
<div class="row no-gutters pull-right">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">_</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">□</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col">
<p style="margin-top:-2.5px">x</p>
</div>
</div>
<!--================================
END OF WINDOW BUTTONS
================================-->
</div>
<!--================================
END OF HEADER
===================================
CONTENT SECTION
================================-->
<div class="p-1 mt-1" style="height:200px;overflow-y:auto;overflow-x:hidden;font-size:13px">
<div class="row no-gutters justify-content-center">
<div class="col-6 pr-1">
<div>
REPLY SPEED
</div>
<div class="progress rounded-0" style="border: 2px inset;border-color: #000 #fff #fff #000;background-color:transparent">
<div class="progress-bar" style="background-image:url('https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Progress%20bar.png');background-color:#bfc7c8;background-size:16.5px;height:18px;
/* change the percentage to modify the width */
;width:50%;
"></div>
</div>
</div>
<!--====-->
<div class="col-6 pl-1">
<div>
MOTIVATION
</div>
<div class="progress rounded-0" style="border: 2px inset;border-color: #000 #fff #fff #000;background-color:transparent">
<div class="progress-bar" style="background-image:url('https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Progress%20bar.png');background-color:#bfc7c8;background-size:16.5px;height:18px;
/* change the percentage to modify the width */
;width:50%;
"></div>
</div>
</div>
</div>
<!--==============-->
<div class="row no-gutters justify-content-center">
<div class="col-6 pr-1">
<div>
PATIENCE
</div>
<div class="progress rounded-0" style="border: 2px inset;border-color: #000 #fff #fff #000;background-color:transparent">
<div class="progress-bar" style="background-image:url('https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Progress%20bar.png');background-color:#bfc7c8;background-size:16.5px;height:18px;
/* change the percentage to modify the width */
;width:50%;
"></div>
</div>
</div>
<!--====-->
<div class="col-6 pl-1">
<div>
FRIENDLINESS
</div>
<div style="border: 2px inset;border-color: #000 #fff #fff #000">
<div class="progress rounded-0" style="background-color:#bfc7c8;">
<div class="progress-bar" style="background-image:url('https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Progress%20bar.png');background-color:#bfc7c8;background-size:16.5px;height:18px;
/* change the percentage to modify the width */
;width:50%;
"></div>
</div>
</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
<!--================================
INTERESTS PART
================================-->
<div class="row no-gutters mt-2 mx-n1">
<div class="col-12 text-center mx-1 mb-1">
INTERESTS
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;" class="mx-1 col mb-1">
THING
</div>
<!--=======-->
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;" class="mx-1 col mb-1">
THING
</div>
<!--=======-->
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;" class="mx-1 col mb-1">
THING
</div>
<!--================================
use a <div class="col-12"></div>
like below as a line break
================================-->
<div class="col-12"></div>
<!--=======-->
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;" class="mx-1 col mb-1">
THING
</div>
<!--=======-->
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;" class="mx-1 col mb-1">
THING
</div>
</div>
<!--================================
END OF INTERESTS PART
================================-->
</div>
</div>
</div>
<!--================================
END OF STATS WINDOW + INTERESTS
===================================
FEATURED CHARACTERS & FRIENDS WINDOW
================================-->
<div class="col-sm-6 mt-2 mr-sm-4">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;font-size:13px" class="p-1">
<!--================================
BLUE HEADER PART
================================-->
<div style="background-color:#0000a7;font-size:10px;letter-spacing:0.5px;padding:1.5px;color:#fff" class="mb-1">
<!--================================
HEADER/TITLE + FILE ICON
================================-->
<img src="https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Program-1.png" style="width:13px"> favs.exe
<!--================================
WINDOW BUTTONS
================================-->
<div class="row no-gutters pull-right">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">_</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">□</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col">
<p style="margin-top:-2.5px">x</p>
</div>
</div>
<!--================================
END OF WINDOW BUTTONS
================================-->
</div>
<!--================================
END OF HEADER
===================================
CONTENT SECTION
================================-->
<div class="p-1 mt-1 pb-4" style="height:170px;font-size:13px">
<div class="tab-content">
<!--================================
FEATURED CHARACTERS
================================-->
<div class="tab-pane active show" id="charsWINDOWS">
<div class="row no-gutters flex-nowrap" style="overflow-x:auto;overflow-y:hidden;height:125px">
<!--================================
CHARACTERS
================================-->
<div class="col-auto text-center mr-1" style="width:152px">
<div style="height:100px;border: 2px inset;border-color: #000 #fff #fff #000;width:150px;background-position:center;background-size:cover;
/* put your image here */
;background-image:url('https://via.placeholder.com/500/ececec')
"></div>
<a href="LINK_TO_CHARACTER" class="text-reset">
NAME
</a>
</div>
<!--=======-->
<div class="col-auto text-center mr-1" style="width:152px">
<div style="height:100px;border: 2px inset;border-color: #000 #fff #fff #000;width:150px;background-position:center;background-size:cover;
/* put your image here */
;background-image:url('https://via.placeholder.com/500/ececec')
"></div>
<a href="LINK_TO_CHARACTER" class="text-reset">
NAME
</a>
</div>
<!--=======-->
<div class="col-auto text-center mr-1" style="width:152px">
<div style="height:100px;border: 2px inset;border-color: #000 #fff #fff #000;width:150px;background-position:center;background-size:cover;
/* put your image here */
;background-image:url('https://via.placeholder.com/500/ececec')
"></div>
<a href="LINK_TO_CHARACTER" class="text-reset">
NAME
</a>
</div>
<!--=======-->
<div class="col-auto text-center mr-1" style="width:152px">
<div style="height:100px;border: 2px inset;border-color: #000 #fff #fff #000;width:150px;background-position:center;background-size:cover;
/* put your image here */
;background-image:url('https://via.placeholder.com/500/ececec')
"></div>
<a href="LINK_TO_CHARACTER" class="text-reset">
NAME
</a>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--================================
FRIENDS/FEATURED PEOPLE
================================-->
<div class="tab-pane" id="friendsWINDOWS">
<div class="row no-gutters flex-nowrap" style="overflow-x:auto;overflow-y:hidden;height:125px">
<!--================================
FRIENDS
================================-->
<div class="col-auto text-center mr-1" style="width:152px">
<div style="height:100px;border: 2px inset;border-color: #000 #fff #fff #000;width:150px;background-position:center;background-size:cover;
/* put your image here */
;background-image:url('https://via.placeholder.com/500/ececec')
"></div>
<a href="LINK_TO_PERSON" class="text-reset">
NAME
</a>
</div>
<!--=======-->
<div class="col-auto text-center mr-1" style="width:152px">
<div style="height:100px;border: 2px inset;border-color: #000 #fff #fff #000;width:150px;background-position:center;background-size:cover;
/* put your image here */
;background-image:url('https://via.placeholder.com/500/ececec')
"></div>
<a href="LINK_TO_PERSON" class="text-reset">
NAME
</a>
</div>
<!--=======-->
<div class="col-auto text-center mr-1" style="width:152px">
<div style="height:100px;border: 2px inset;border-color: #000 #fff #fff #000;width:150px;background-position:center;background-size:cover;
/* put your image here */
;background-image:url('https://via.placeholder.com/500/ececec')
"></div>
<a href="LINK_TO_PERSON" class="text-reset">
NAME
</a>
</div>
<!--=======-->
<div class="col-auto text-center mr-1" style="width:152px">
<div style="height:100px;border: 2px inset;border-color: #000 #fff #fff #000;width:150px;background-position:center;background-size:cover;
/* put your image here */
;background-image:url('https://via.placeholder.com/500/ececec')
"></div>
<a href="LINK_TO_PERSON" class="text-reset">
NAME
</a>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--================================
NAV, DONT MESS WITH IT TOO MUCH
================================-->
<ul class="nav nav-tabs border-0 row no-gutters">
<li class="col-6 pr-1">
<p style="height:30px;z-index:2;border: 2px outset;border-color: #fff #000 #000 #fff" class="p-1 text-center">CHARACTERS</p>
<a class="btn rounded-0 border-0 btn-block btn-outline-secondary active" data-toggle="tab" href="#charsWINDOWS" style="height:30px;margin-top:-30px;z-index:5;mix-blend-mode:multiply;filter: saturate(0%);opacity:.25"></a>
</li>
<!--=======-->
<li class="col-6 pl-1">
<p style="height:30px;z-index:2;border: 2px outset;border-color: #fff #000 #000 #fff" class="p-1 text-center">FRIENDS</p>
<a class="btn rounded-0 border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#friendsWINDOWS" style="height:30px;margin-top:-30px;z-index:5;mix-blend-mode:multiply;filter: saturate(0%);opacity:.25"></a>
</li>
</ul>
<!--================================
END OF NAV
================================-->
</div>
</div>
</div>
<!--================================
END OF FEATURED CHARACTERS & FRIENDS WINDOW
===================================
DNI & BYI WINDOW
================================-->
<div class="col-sm-4 col-12 mt-sm-0 mt-sm-n5 mt-1">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;font-size:13px" class="p-1">
<!--================================
BLUE HEADER PART
================================-->
<div style="background-color:#0000a7;font-size:10px;letter-spacing:0.5px;padding:1.5px;color:#fff" class="mb-1">
<!--================================
HEADER/TITLE + FILE ICON
================================-->
<img src="https://file.garden/ZU1BgQx2nVLn6KQa/WINDOWS%2095/Notepad-2.png" style="width:13px"> DNI & BYI - Notes
<!--================================
WINDOW BUTTONS
================================-->
<div class="row no-gutters pull-right">
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">_</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col mr-1">
<p style="margin-top:-2.5px">□</p>
</div>
<div style="background-color:#bfc7c8;border: 2px outset;border-color: #fff #000 #000 #fff;color:#000;text-align:center;padding-left:3px;padding-right:3px;max-height:15px" class="col">
<p style="margin-top:-2.5px">x</p>
</div>
</div>
<!--================================
END OF WINDOW BUTTONS
================================-->
</div>
<!--================================
END OF HEADER
===================================
THINGIES IDK
================================-->
File Edit Search Help
<!--================================
CONTENT SECTION
================================-->
<div class="p-1 mt-1 pb-4" style="height:150px;overflow:auto;background-color:#fff;font-size:13px">
DNI : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
<hr style="border-color:#000;border-width:1.5px" class="my-1">
BYI : Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
</div>
</div>
<!--================================
END OF DNI & BYI WINDOW
================================-->
</div>
</div>
<!--================================================================
CODE END!!!
you BINGUS
================================================================-->
