Gravity
CuckooHoopoe
- Created
- 2 years, 18 days ago
- Creator
- https://toyhou.se/CuckooHoopoe
- Favorites
- 1057
Profile
Gravity [f2u]
yes i know im supposed to be studying for my exam leave me alone mom
I was using Habibty for a long time a profile and decided to completely revamp, so I made this code (inspired by the song Gravity by Wage War). I've been using this code for a bit so I think its time to share it (❁´◡`❁)
My default is always dark, but I decided to make a light version for the non-emos. There are a few tweaks between the two for readability but they are pretty much the same code. And of course you are free to modify it as much as you would like.
Features
- Mobile Friendly
- Custom colours
- Not beginner friendly ?
IMPORTANT NOTES
- Icons from font-awesome
- A comment would be appreciated, I'd like to see it!
- Don't use WYSIWYG
<!--
NOTES:
» Make sure to credit everything!
» the pixel art directly links back to the original artist
» the header and Icon have their credits at the bottom, do not forget to change this!
» The icons are from font awesome, you can find more here: https://fontawesome.com/v6.0/icons
COLOURS:
» highlight the numbers i have written below
» hit ctrl f
» hit the plus sign
» put in your new colour (use hex codes)
» click the "all" button - this automatically replaces all the colours
3b6e81 accent
EDEDED text
000000 main background
222222 textbox background
LINKS:
» Do the same as with the colours
» I have filled each link with a name that i describe bellow
IMG_LINK replace with the image address
IMG_SOURCE Link back to the original arist
LINK_HERE Other links such as header & icon credit as well as
social media links, directory links, etc.
-->
<!-- Background -->
<div class="card rounded-0 border-0" style="z-index:100;position:relative;margin:-15px -15px -31px;min-height:calc(100vh - 74px);
background-image: url(https://via.placeholder.com/350x150);
background-color: #222222;
background-attachment: fixed;
background-size: cover;">
<!--Header Image and Name -->
<div class="container-fluid" style="background:none; margin:50px auto 50px; color:#EDEDED; max-width:1100px">
<!-- cover image -->
<div class="card rounded-0 p-0" style="
background:url(https://via.placeholder.com/350x150) center;
background-size:cover;
background-attachment:fixed;
border:8px solid #000000;
box-shadow:0 0 7px #000000;">
<!-- Black gradient -->
<div class="card rounded-0 border-0 text-right px-2 pb-2" style="background:linear-gradient(to right, rgba(175, 178, 222,0), rgba(0,0,0,1)); padding-top:80px">
<!--Username or title -->
<p class="display-4 p-2" style="color:#EDEDED;font-variant:small-caps;letter-spacing:3px;font-family:serif; text-shadow: 0 0 4px #EDEDED">UserName</p>
</div>
</div>
<!-- Circle image with the icon - this is decorative and will disapear on mobile, you can remove it if you want-->
<div class="row no-gutters hidden-sm-down" style="margin-top:-80px; margin-bottom:-85px; z-index:10; position:relative">
<div class="col-sm-3 p-1 mt-auto">
<!-- Image -->
<div class="card border-0 rounded-circle p-2 mx-auto" style="background-color:#000000; height:160px;width:160px;">
<div class="card h-100 w-100 border-0 rounded-circle justify-content-center text-center"
style="background:url(https://via.placeholder.com/350x150)
top center; background-size:cover;opacity:0.9">
<!-- Font Awesome icon -->
<i class="fas fa-fish-bones fa-4x"></i></div>
</div>
</div>
</div>
<!-- Information Row -->
<div class="card rounded-0 border-0 p-1 mt-3" style="background:#000000; box-shadow:0 0 7px #000000;">
<div class="card rounded-0 border-0" style="background:#000000;">
<div class="row no-gutters">
<!-- Left Column-->
<div class="col-sm-3 p-1 mt-auto">
<div class="card border-0 rounded-0" style="opacity:0.8">
<!-- YouTube Display - change SONG_ID to your video's ID-->
<iframe frameborder="0" src="https://www.youtube-nocookie.com/embed/CODE_ID?controls=0"></iframe>
</div>
<!-- Song quote or something - looks best if you keep it short -->
<div class="lead text-center font-italic faded mt-2">"quotey mc quote"</div>
</div>
<!-- Middle Column-->
<div class="col-sm-6 p-1">
<div class="card rounded-0 border-0 p-1" style="background:#3b6e81;">
<p class="lead text-center font-italic">intro</p>
</div>
<div class="card border-0 rounded-0 p-1 mb-2" style="background:#222222;">
<p class="faded m-1">Some sort of intro about your self, you could also change the title or completely remove this. You can write as much as you want since it will stretch with more content, but I dont reccomend writting an essay.</p>
<p class="faded m-1">When the middle block stretches the other 2 columns will also stretch and align their content at the bottom. It took me a bit to figure out but I think it looks neat :^)</p>
<!-- add more paragraphs above this line-->
</div>
<div class="card rounded-0 border-0 p-1" style="background:#3b6e81;">
<p class="lead text-center font-italic">notes</p>
</div>
<div class="card border-0 rounded-0 p-1" style="background:#222222;">
<ul class="text-left fa-ul my-2 faded">
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Write any important notes here</li>
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Could also work as a DNI or whatever</li>
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Note</li>
<!-- add more list items above this line-->
</ul>
</div>
</div>
<!-- Right Column-->
<div class="col-sm-3 p-1 mt-auto">
<!-- Decorative Image
IMG_SOURCE: replace with the credit link
IMG_LINK: replace with the image address-->
<a class="justify-content-center"
href="IMG_SOURCE">
<img src="IMG_LINK"></a>
<!-- Social Media -->
<div class="card rounded-0 border-0 p-1" style="background:#3b6e81;">
<p class="lead text-center font-italic">social media</p>
</div>
<div class="card border-0 rounded-0 p-2 mb-2" style="background:#222222">
<p class="text-center faded">
<!-- Social Media Links
each icon will link to a different social media
feel free to add, remove, or change them
dont forget to change their title as well -->
<!-- INSTAGRAM -->
<a class="text-light mx-1 tooltipster" style="text-decoration:none"title="instagram" href="INSTAGRAM_LINK"><i class="fab fa-instagram"></i></a>
<!-- TWITTER -->
<a class="text-light mx-1 tooltipster" style="text-decoration:none"title="twitter" href="TWITTER_LINK"><i class="fab fa-twitter"></i></a>
<!-- DEVIANTART -->
<a class="text-light mx-1 tooltipster" style="text-decoration:none"title="deviantart" href="DEVIANTART_LINK"><i class="fab fa-deviantart"></i></a>
<!-- WEBSITE -->
<a class="text-light mx-1 tooltipster" style="text-decoration:none"title="website" href="WEBSITE_LINK"><i class="fas fa-link"></i></a>
<!-- ADD MORE LINKS ABOVE -->
</p>
</div>
<!-- I like to have a little directory for my
toyhouse to lead to important folders,
remove this section if you dont need it -->
<div class="card rounded-0 border-0 p-1" style="background:#3b6e81;">
<p class="lead text-center font-italic">directory</p>
</div>
<div class="card border-0 rounded-0 p-2 mb-2" style="background:#222222">
<p class="text-center faded">
<!-- FOLDER -->
<a class="text-light mx-1 tooltipster" style="text-decoration:none"
title="FOLDER TITLE"
href="FOLDER_LINK">
<i class="fas fa-folder"></i>
</a>
<!-- FOLDER -->
<a class="text-light mx-1 tooltipster" style="text-decoration:none"
title="FOLDER TITLE"
href="FOLDER_LINK">
<i class="fas fa-folder"></i>
</a>
<!-- FOLDER -->
<a class="text-light mx-1 tooltipster" style="text-decoration:none"
title="FOLDER TITLE"
href="FOLDER_LINK">
<i class="fas fa-folder"></i>
</a>
<!-- ADD MORE ABOVE -->
</p>
</div>
<!-- If you dont like the layout used above
you can use these large buttons that
are clearly labled -->
<!-- Button one-->
<div class="btn btn-block p-0 border-0 rounded-0 mb-2 tooltipster" title="info about my settings" style="background:#3b6e81;">
<a class="btn btn-block btn-outline-warning border-0 rounded-0 faded" style="mix-blend-mode:luminosity; color:white; letter-spacing:2px;"
href="LINK">button title</a>
</div>
<!-- Button two -->
<div class="btn btn-block p-0 border-0 rounded-0 tooltipster" title="commisions, tos, etc." style="background:#3b6e81;">
<a class="btn btn-block btn-outline-warning border-0 rounded-0 faded" style="mix-blend-mode:luminosity; color:white; letter-spacing:2px;"
href="LINK">button title</a>
</div>
<!-- Add more buttons above -->
</div>
</div>
</div>
</div>
<!-- Featured Character Row
Each character image is a button that leads to the chararcter
If you have a mouse you can hover over the button and see
their name and a short description about them or why you like them.
Add as many characters as you want, the whole thing will scroll sideways.
-->
<div class="card rounded-0 border-0 p-1 mt-3" style="background:#000000 ; box-shadow:0 0 7px #000000;">
<div class="card rounded-0 border-0 p-1 m-1" style="background:#3b6e81;">
<p class="lead text-center font-italic">featured</p>
</div>
<p class="faded mx-2 mb-0"><i class="fas fa-exclamation-triangle mr-1"></i> Add a warning if any of these are mature or triggering. Remove if you dont need it.</p>
<p class="faded mx-2"><i class="fas fa-info-circle mr-1"></i> Hover over each icon to see their name and a little description about them. This only works if you have a mouse lol sorry mobile users.</p>
<div class="m-1" style="overflow-x:auto; opacity:0.8">
<div class="d-flex justify-content-center">
<!-- CHRACTER ONE -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://via.placeholder.com/350x150);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="CHARACTER_LINK" title="CHARACTER_NAME_AND_DESCRIPTION"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
</div>
<!-- CHRACTER TWO -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://via.placeholder.com/350x150);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="CHARACTER_LINK" title="CHARACTER_NAME_AND_DESCRIPTION"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
</div>
<!-- CHRACTER THREE -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://via.placeholder.com/350x150);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="CHARACTER_LINK" title="CHARACTER_NAME_AND_DESCRIPTION"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
</div>
<!-- add more characters above -->
</div>
</div>
</div>
<!-- credits row - add more if you need, feel free to change the icons -->
<div class="card rounded-0 border-0 mt-3" style="background:#000000; box-shadow:0 0 7px #000000;">
<p class="text-center p-1">
<!-- Cover/ Header Image credit-->
<a href="IMAGE_LINK">
<i class="fas fa-trees tooltipster" title="cover image"
style="mix-blend-mode:luminosity; padding: 5px"></i></a>
<!-- Icon Image Credit-->
<a href="IMAGE_LINK">
<i class="fas fa-fish-bones tooltipster" title="icon image"
style="mix-blend-mode:luminosity; padding: 5px"></i></a>
<!-- Background Image Credit-->
<a href="IMAGE_LINK">
<i class="fas fa-water tooltipster" title="background image"
style="mix-blend-mode:luminosity; padding: 5px"></i></a>
<!-- My Credit - DO NOT REMOVE -->
<a href="https://toyhou.se/15654426.gravity"><i class="fas fa-ghost tooltipster" title="code by cuckoohoopoe" style="mix-blend-mode:luminosity; padding: 5px"></i></a>
</p>
</div><!-- credits end -->
</div>
</div>
<!--
NOTES:
» Make sure to credit everything!
» the pixel art directly links back to the original artist
» the header and Icon have their credits at the bottom, do not forget to change this!
» The icons are from font awesome, you can find more here: https://fontawesome.com/v6.0/icons
COLOURS:
» highlight the numbers i have written below
» hit ctrl f
» hit the plus sign
» put in your new colour (use hex codes)
» click the "all" button - this automatically replaces all the colours
c8b0d3 accent
000000 text
FFFFFF main background
f0eceb textbox background
rgba(0,0,0,0.5) box & header text shadow
LINKS:
» Do the same as with the colours
» I have filled each link with a name that i describe bellow
IMG_LINK replace with the image address
IMG_SOURCE Link back to the original arist
LINK credit links for the header and icon
-->
<!-- Background -->
<div class="card rounded-0 border-0" style="z-index:100;position:relative;margin:-15px -15px -31px;min-height:calc(100vh - 74px);
background-image: url(https://via.placeholder.com/350x150);
background-color: #222222;
background-attachment: fixed;
background-size: auto;">
<!--Header Image and Name -->
<div class="container-fluid" style="background:none; margin:50px auto 50px; color:#000000; max-width:1100px">
<!-- cover image -->
<div class="card rounded-0 p-0" style="
background:url(https://via.placeholder.com/350x150) center;
background-size:cover;
background-attachment:fixed;
border:8px solid #FFFFFF;
box-shadow:0 0 7px rgba(0,0,0,0.5);">
<!-- Black gradient -->
<div class="card rounded-0 border-0 text-right px-2 pb-2" style="background:linear-gradient(to right, rgba(255,255,225,0), rgba(255,255,255,1)); padding-top:80px">
<!--Username or title -->
<p class="display-4 p-2" style="color:#ffffff;font-variant:small-caps;letter-spacing:3px;font-family:serif; text-shadow: 0 0 4px rgba(0,0,0,0.5)">
Username or Title
</p>
</div>
</div>
<!-- Circle image with the icon - this is decorative and will disapear on mobile, you can remove it if you want-->
<div class="row no-gutters hidden-sm-down" style="margin-top:-80px; margin-bottom:-85px; z-index:10; position:relative">
<div class="col-sm-3 p-1 mt-auto">
<!-- Image -->
<div class="card border-0 rounded-circle p-2 mx-auto" style="background-color:#FFFFFF; height:160px;width:160px;">
<div class="card h-100 w-100 border-0 rounded-circle justify-content-center text-center" style="
background:url(https://via.placeholder.com/350x150) center;
background-size:cover;
opacity:0.9">
<!-- Font Awesome icon -->
<i class="fas fa-seedling fa-4x" style="color:#ffffff; text-shadow: 0 0 4px #000000"></i></div>
</div>
</div>
</div>
<!-- Information Row -->
<div class="card rounded-0 border-0 p-1 mt-3" style="background:#FFFFFF ; box-shadow:0 0 7px rgba(0,0,0,0.5);">
<div class="card rounded-0 border-0" style="background:#FFFFFF">
<div class="row no-gutters">
<!-- Left Column-->
<div class="col-sm-3 p-1 mt-auto">
<div class="card border-0 rounded-0" style="opacity:0.8">
<!-- YouTube Display - change SONG_ID to your video's ID-->
<iframe frameborder="0" src="https://www.youtube-nocookie.com/embed/SONG_ID?controls=0"></iframe>
</div>
<!-- Song quote or something - looks best if you keep it short -->
<div class="lead text-center font-italic faded mt-2">"quotey mc quote"</div>
</div>
<!-- Middle Column-->
<div class="col-sm-6 p-1">
<div class="card rounded-0 border-0 p-1" style="background:#c8b0d3;">
<!-- Section Header-->
<p class="lead text-center font-italic">intro</p>
</div>
<div class="card border-0 rounded-0 p-1 mb-2" style="background:#f0eceb;">
<p class="faded m-1">Some sort of intro about your self, you could also change the title or completely remove this. You can write as much as you want since it will stretch with more content, but I dont reccomend writting an essay.</p>
<p class="faded m-1">When the middle block stretches the other 2 columns will also stretch and align their content at the bottom. It took me a bit to figure out but I think it looks neat :^)</p>
<!-- add more paragraphs above this line-->
</div>
<div class="card rounded-0 border-0 p-1" style="background:#c8b0d3;">
<p class="lead text-center font-italic">notes</p>
</div>
<div class="card border-0 rounded-0 p-1" style="background:#f0eceb;">
<ul class="text-left fa-ul my-2 faded">
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Write any important notes here</li>
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Could also work as a DNI or whatever</li>
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Note</li>
<!-- add more list items above this line-->
</ul>
</div>
</div>
<!-- Right Column-->
<div class="col-sm-3 p-1 mt-auto">
<!-- Decorative Image
IMG_SOURCE: replace with the credit link
IMG_LINK: replace with the image address-->
<a class="justify-content-center"
href="IMG_SOURCE">
<img src="IMG_LINK"></a>
<div class="card rounded-0 border-0 p-1" style="background:#c8b0d3;">
<p class="lead text-center font-italic">social media</p>
</div>
<div class="card border-0 rounded-0 p-2 mb-2" style="background:#f0eceb">
<p class="text-center faded">
<!-- Social Media Links
each icon will link to a different social media
feel free to add, remove, or change them
dont forget to change their title as well -->
<!-- INSTAGRAM -->
<a class="text-dark mx-1 tooltipster" style="text-decoration:none" title="instagram" href="INSTAGRAM_LINK"><i class="fab fa-instagram"></i></a>
<!-- TWITTER -->
<a class="text-dark mx-1 tooltipster" style="text-decoration:none" title="twitter" href="TWITTER_LINK"><i class="fab fa-twitter"></i></a>
<!-- DEVIANTART -->
<a class="text-dark mx-1 tooltipster" style="text-decoration:none" title="deviantart" href="DEVIANTART_LINK"><i class="fab fa-deviantart"></i></a>
<!-- WEBSITE -->
<a class="text-dark mx-1 tooltipster" style="text-decoration:none" title="website" href="WEBSITE_LINK"><i class="fas fa-link"></i></a>
<!-- ADD MORE LINKS ABOVE -->
</p>
</div>
<!-- I like to have a little directory for my
toyhouse to lead to important folders,
remove this section if you dont need it -->
<div class="card rounded-0 border-0 p-1" style="background:#c8b0d3;">
<p class="lead text-center font-italic">directory</p>
</div>
<div class="card border-0 rounded-0 p-2 mb-2" style="background:#f0eceb">
<p class="text-center faded">
<!-- FOLDER -->
<a class="text-dark mx-1 tooltipster" style="text-decoration:none"
title="FOLDER TITLE"
href="FOLDER_LINK">
<i class="fas fa-folder"></i>
</a>
<!-- FOLDER -->
<a class="text-dark mx-1 tooltipster" style="text-decoration:none"
title="FOLDER TITLE"
href="FOLDER_LINK">
<i class="fas fa-folder"></i>
</a>
<!-- FOLDER -->
<a class="text-dark mx-1 tooltipster" style="text-decoration:none"
title="FOLDER TITLE"
href="FOLDER_LINK">
<i class="fas fa-folder"></i>
</a>
<!-- ADD MORE ABOVE -->
</p>
</div>
<!-- If you dont like the layout used above
you can use these large buttons that
are clearly labled -->
<!-- Button one-->
<div class="btn btn-block p-0 border-0 rounded-0 mb-2 tooltipster" title="info about my settings" style="background:#c8b0d3;">
<a class="btn btn-block btn-outline-primary border-0 rounded-0 faded" style="mix-blend-mode:luminosity; color:black; letter-spacing:2px;"
href="LINK">button</a>
</div>
<!-- Button one-->
<div class="btn btn-block p-0 border-0 rounded-0 mb-2 tooltipster" title="info about my settings" style="background:#c8b0d3;">
<a class="btn btn-block btn-outline-primary border-0 rounded-0 faded" style="mix-blend-mode:luminosity; color:black; letter-spacing:2px;"
href="LINK">button</a>
</div>
<!-- Add more buttons above -->
</div>
</div>
</div>
</div>
<!-- Featured Character Row
Each character image is a button that leads to the chararcter
If you have a mouse you can hover over the button and see
their name and a short description about them or why you like them.
Add as many characters as you want, the whole thing will scroll sideways.
-->
<div class="card rounded-0 border-0 p-1 mt-3" style="background:#FFFFFF ; box-shadow:0 0 7px rgba(0,0,0,0.5);">
<div class="card rounded-0 border-0 p-1 m-1" style="background:#c8b0d3;">
<p class="lead text-center font-italic">featured</p>
</div>
<p class="faded mx-2 mb-0"><i class="fas fa-exclamation-triangle mr-1"></i> Add a warning if any of these are mature or triggering. Remove if you dont need it.</p>
<p class="faded mx-2"><i class="fas fa-info-circle mr-1"></i> Hover over each icon to see their name and a little description about them. This only works if you have a mouse lol sorry mobile users.</p>
<div class="m-1" style="overflow-x:auto; opacity:0.8">
<div class="d-flex justify-content-center">
<!-- CHRACTER ONE -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://via.placeholder.com/350x150);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="CHARACTER_LINK" title="CHARACTER_NAME_AND_DESCRIPTION"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
</div>
<!-- CHRACTER TWO -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://via.placeholder.com/350x150);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="CHARACTER_LINK" title="CHARACTER_NAME_AND_DESCRIPTION"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
</div>
<!-- CHRACTER THREE -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://via.placeholder.com/350x150);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="CHARACTER_LINK" title="CHARACTER_NAME_AND_DESCRIPTION"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
</div>
<!-- add more characters above -->
</div>
</div>
</div>
<!-- credits row - add more if you need, feel free to change the icons -->
<div class="card rounded-0 border-0 mt-3" style="background:#FFFFFF; box-shadow:0 0 7px rgba(0,0,0,0.5);">
<p class="text-center p-1">
<!-- Cover/ Header Image credit-->
<a href="IMAGE_LINK">
<i class="fas fa-flower tooltipster faded" title="cover image"
style="mix-blend-mode:luminosity; padding: 5px"></i></a>
<!-- Icon Image Credit-->
<a href="IMAGE_LINK">
<i class="fas fa-seedling tooltipster faded" title="icon image"
style="mix-blend-mode:luminosity; padding: 5px"></i></a>
<!-- Background Image Credit-->
<a href="IMAGE_LINK">
<i class="fas fa-clouds tooltipster faded" title="background image"
style="mix-blend-mode:luminosity; padding: 5px"></i></a>
<!-- My Credit - DO NOT REMOVE -->
<a href="https://toyhou.se/15654426.gravity">
<i class="fas fa-ghost tooltipster faded" title="code by cuckoohoopoe"
style="mix-blend-mode:luminosity; padding: 5px"></i></a>
</p>
</div><!-- credits end -->
</div>
</div>
UserName
"quotey mc quote"
intro
Some sort of intro about your self, you could also change the title or completely remove this. You can write as much as you want since it will stretch with more content, but I dont reccomend writting an essay.
When the middle block stretches the other 2 columns will also stretch and align their content at the bottom. It took me a bit to figure out but I think it looks neat :^)
notes
- Write any important notes here
- Could also work as a DNI or whatever
- Note
featured
Add a warning if any of these are mature or triggering. Remove if you dont need it.
Hover over each icon to see their name and a little description about them. This only works if you have a mouse lol sorry mobile users.
CuckooHoopoe
"quotey mc quote"
intro
Some sort of intro about your self, you could also change the title or completely remove this. You can write as much as you want since it will stretch with more content, but I dont reccomend writting an essay.
When the middle block stretches the other 2 columns will also stretch and align their content at the bottom. It took me a bit to figure out but I think it looks neat :^)
notes
- Write any important notes here
- Could also work as a DNI or whatever
- Note
featured
Add a warning if any of these are mature or triggering. Remove if you dont need it.
Hover over each icon to see their name and a little description about them. This only works if you have a mouse lol sorry mobile users.
Recent Images
No images.