Profile
23 || CICADA DAYS [LIGHT / SOLID BUTTONS]
<!-- CICADA DAYS by icecreampizzeria (LIGHT VERSION, SOLID BUTTONS)
DARK VERSION, BUTTONS WITH EFFECTS: https://toyhou.se/17979456.23-cicada-days-f2u-/17979469.code-dark-button-effects-
DARK VERSION, SOLID BUTTONS: https://toyhou.se/17979456.23-cicada-days-f2u-/17979468.code-dark-solid-buttons-
LIGHT VERSION, BUTTONS WITH EFFECTS: https://toyhou.se/17979456.23-cicada-days-f2u-/17979467.code-light-button-effects-
COLOR GUIDE:
#594639 - general text color
#ffffff - background color (i do not recommend changing this because it will affect the readability of the text with the effects. if you really want to change it, make sure to use very light hues)
#000000 - transparent text color (same as above, but if you want to change it, make sure to use very dark hues)
#425347 - accent one (dark green)
#dc543d - accent two (red)
rgba(0, 0, 0, 0.4) - background overlay
if you wish to remove the special effects, ctrl+f and delete [ mix-blend-mode: screen; ]
find more icons at https://fontawesome.com ! change fas fa-[icon name] to whatever you want
ctrl+f URLHERE for links -->
<!-- //////////////////// WHOLE THING //////////////////// -->
<div class="container p-0 my-4" style="max-width: 900px; color: #594639;">
<!-- //////////////////// BACKGROUND - best if you use a darker background image for this one! if you want a repeating pattern, delete 'no-repeat'//////////////////// -->
<div class="p-3" style="
background: url(https://images.unsplash.com/photo-1612288443047-edd40b6196d4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80) top center no-repeat;
background-size: cover;
border-radius: 10px;
box-shadow: 0 2000px 0 inset rgba(0, 0, 0, 0.4);">
<!-- BOX SHADOW - this is meant to be an overlay to increase the readability of the text that blend with the background. make sure to use rgba colors (the last number separated by commas is the opacity, 0 is fully transparent, 1 is solid) -->
<!-- //////////////////// FIRST ROW //////////////////// -->
<div class="row no-gutters">
<!-- //////////////////// SIDE IMAGE / LEFT COLUMN //////////////////// -->
<div class="col-lg-4 p-2 mb-3 d-flex" style="background: #ffffff; border-radius: 10px;">
<div class="flex-fill d-flex p-2" style="
background: url(https://images.unsplash.com/photo-1564151301481-5b0c85e12a38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80) top center no-repeat;
background-size: cover;
min-height: 400px; border-radius: 10px;">
</div>
</div>
<!-- //////////////////// END SIDE IMAGE //////////////////// -->
<!-- //////////////////// RIGHT COLUMN //////////////////// -->
<div class="col-lg pl-lg-3">
<!-- //////////////////// TITLE //////////////////// -->
<div class="mb-3 p-3" style="background: #ffffff; color: #000000; mix-blend-mode: screen; border-radius: 10px;">
<p class="mb-0 text-lg-right text-center font-weight-bold" style="letter-spacing: 1px; font-size: 1.5rem; font-family: arial black, sans-serif;">
NAME / PRNS
<i class="fas fa-trees"></i>
</p>
</div>
<!-- //////////////////// END TITLE //////////////////// -->
<!-- //////////////////// TEXT FIELD - if you want a nonscrolling field that will expand with text, delete 'max-height: 250px; overflow: auto;' the side image will expand with the text, so keep that in mind ! //////////////////// -->
<div class="text-justify mb-3" style="background: #ffffff; border-radius: 10px; overflow: hidden;">
<div class="p-3" style="max-height: 250px; overflow: auto;">
<p>Talk about yourself here! This area will automatically scroll when the content becomes longer. The greener grass grows where the wildfires fertilize, with ashes of sparrows, peppered moths and butterflies, ghosts of trees and termites bloom in the beanstalk. And if you get lightheaded when standing too fast, is it from shaking out the weight of phosphenes and pasts? Salt deposits on warm little rivers that burst from our words.</p>
<p>And God knows crying ain't gonna change a thing. She said take care, but I take more than I bring.</p>
<p>She said it just feels inhumane to lose this much. 'Cause when you leave you know you take more than your love. Just one week of cicada days, we're losing touch...and I know it just feels inhumane to lose this much.</p>
<!-- //////////////////// add more paragraphs ABOVE this line! //////////////////// -->
</div>
</div>
<!-- //////////////////// END TEXT FIELD //////////////////// -->
<!-- //////////////////// MINI COLUMNS //////////////////// -->
<div class="row no-gutters mx-n2">
<!-- //////////////////// LIKES //////////////////// -->
<div class="col-lg mx-2 mb-3" style="border-radius: 10px; overflow: hidden;">
<!-- //////////////////// TITLE //////////////////// -->
<div class="px-3 pt-3" style="background: #ffffff; color: #000000; mix-blend-mode: screen;">
<p class="text-lg-right text-center font-weight-bold" style="letter-spacing: 1px; font-size: 1.5rem; font-family: arial black, sans-serif;">
LIKES
<i class="fas fa-heart fa-fw"></i>
</p>
</div>
<!-- //////////////////// END TITLE //////////////////// -->
<!-- //////////////////// LIST LIKES - copy from <li> to </li>, then paste anywhere BELOW <ul> and ABOVE </ul>! Feel free to change fas fa-heart and its color to anything else //////////////////// -->
<div class="px-3 pb-3 pt-2 h-100" style="background: #ffffff;">
<ul class="mb-0 ml-4 fa-ul">
<li><span class="fa-li"><i class="fas fa-heart" style="color: #425347"></i></span>
our nerves were braided
</li>
<li><span class="fa-li"><i class="fas fa-heart" style="color: #425347"></i></span>
under ceiling stars
</li>
<li><span class="fa-li"><i class="fas fa-heart" style="color: #425347"></i></span>
that we're all
</li>
<li><span class="fa-li"><i class="fas fa-heart" style="color: #425347"></i></span>
glow in the dark
</li>
<!-- //////////////////// add more li's ABOVE this line! //////////////////// -->
</ul>
</div>
<!-- //////////////////// END LIST LIKES //////////////////// -->
</div>
<!-- //////////////////// END LIKES //////////////////// -->
<!-- //////////////////// DNI //////////////////// -->
<div class="col-lg mx-2 mb-3" style="border-radius: 10px; overflow: hidden;">
<!-- //////////////////// TITLE //////////////////// -->
<div class="px-3 pt-3" style="background: #ffffff; color: #000000; mix-blend-mode: screen;">
<p class="mb-0 text-lg-right text-center font-weight-bold" style="letter-spacing: 1px; font-size: 1.5rem; font-family: arial black, sans-serif;">
DNI
<i class="fas fa-multiply fa-fw"></i>
</p>
</div>
<!-- //////////////////// END TITLE //////////////////// -->
<!-- //////////////////// DNI LIST //////////////////// -->
<div class="px-3 pb-3 pt-2 h-100" style="background: #ffffff;">
<ul class="mb-0 ml-4 fa-ul">
<li><span class="fa-li"><i class="fas fa-multiply" style="color: #dc543d"></i></span>
hanging over queen-sized
</li>
<li><span class="fa-li"><i class="fas fa-multiply" style="color: #dc543d"></i></span>
purple waves of ancient chemicals
</li>
<li><span class="fa-li"><i class="fas fa-multiply" style="color: #dc543d"></i></span>
just
</li>
<li><span class="fa-li"><i class="fas fa-multiply" style="color: #dc543d"></i></span>
whisper
</li>
<!-- //////////////////// add more li's ABOVE this line! //////////////////// -->
</ul>
</div>
<!-- //////////////////// END DNI LIST //////////////////// -->
</div>
<!-- //////////////////// END DNI //////////////////// -->
</div>
<!-- //////////////////// END MINI COLUMNS //////////////////// -->
</div>
<!-- //////////////////// END RIGHT COLUMN //////////////////// -->
</div>
<!-- //////////////////// END FIRST ROW //////////////////// -->
<!-- //////////////////// SECOND ROW //////////////////// -->
<div class="row no-gutters mx-n2">
<!-- //////////////////// ART STATUS //////////////////// -->
<div class="col-lg-7 mx-2 mb-3" style="border-radius: 10px; overflow: hidden;">
<div class="px-3 pt-3" style="background: #ffffff; color: #000000; mix-blend-mode: screen;">
<!-- //////////////////// TITLE //////////////////// -->
<p class="text-lg-right text-center font-weight-bold" style="letter-spacing: 1px; font-size: 1.5rem; font-family: arial black, sans-serif;">
ART STATUS
<i class="fas fa-paintbrush fa-fw"></i>
</p>
<!-- //////////////////// END TITLE //////////////////// -->
</div>
<div class="px-3 pb-3 pt-2 h-100" style="background: #ffffff;">
<!-- //////////////////// ART BUTTONS - you can link your bulletins/profiles/whatever else here! to add more, start from <a> to </a> then copy paste anywhere inside this div. delete buttons by following the <a> and </a>s too!
- #425347 is the color for ask/open statuses, #dc543d is the color for closed statuses //////////////////// -->
<div class="row no-gutters my-auto justify-content-center text-center" style="font-family: arial black, sans-serif;">
<a href="URLHERE" class="p-2 m-1 col-lg-5" style="color: #ffffff; background: #425347; border-radius: 10px;">
<strong>ART TRADES: ASK</strong>
</a>
<a href="URLHERE" class="p-2 m-1 col-lg-5" style="color: #ffffff; background: #dc543d; border-radius: 10px;">
<strong>COMMS: CLOSED</strong>
</a>
<a href="URLHERE" class="p-2 m-1 col-lg-5" style="color: #ffffff; background: #dc543d; border-radius: 10px;">
<strong>REQUESTS: CLOSED</strong>
</a>
<a href="URLHERE" class="p-2 m-1 col-lg-5" style="color: #ffffff; background: #425347; border-radius: 10px;">
<strong>OC TRADES: OPEN</strong>
</a>
<!-- //////////////////// add more buttons ABOVE this line! //////////////////// -->
</div>
<!-- //////////////////// END ART BUTTONS //////////////////// -->
</div>
</div>
<!-- //////////////////// END ART STATUS //////////////////// -->
<!-- //////////////////// SOCIALS //////////////////// -->
<div class="col-lg mx-2 mb-3" style="border-radius: 10px; overflow: hidden;">
<div class="px-3 pt-3" style="background: #ffffff; color: #000000; mix-blend-mode: screen;">
<!-- //////////////////// TITLE //////////////////// -->
<p class=" text-lg-right text-center font-weight-bold" style="letter-spacing: 1px; font-size: 1.5rem; font-family: arial black, sans-serif;">
SOCIALS
<i class="fas fa-signs-post fa-fw"></i>
</p>
<!-- //////////////////// END TITLE //////////////////// -->
</div>
<div class="px-3 pb-3 pt-2 h-100" style="background: #ffffff;">
<!-- //////////////////// SOCIAL BUTTONS - to add more, start from <a> to </a> then copy paste anywhere inside this div. delete buttons by following the <a> and </a>s too! you can also edit the title="" text too, just make sure to stay inside the "quotation marks" and the closing bracket> //////////////////// -->
<div class="my-auto text-center" style="font-family: arial black, sans-serif;">
<a href="URLHERE" class="p-2 btn m-1" style="color: #ffffff; background: #425347; border-radius: 10px; font-size: 1rem;" data-toggle="tooltip" title="carrd">
<i class="fas fa-id-card fa-lg fa-fw"></i></a>
<a href="URLHERE" class="p-2 btn m-1" style="color: #ffffff; background: #425347; border-radius: 10px; font-size: 1rem" data-toggle="tooltip" title="twitter">
<i class="fab fa-twitter fa-lg fa-fw"></i></a>
<a href="URLHERE" class="p-2 btn m-1" style="color: #ffffff; background: #425347; border-radius: 10px; font-size: 1rem" data-toggle="tooltip" title="instagram">
<i class="fab fa-instagram fa-lg fa-fw"></i></a>
<a href="URLHERE" class="p-2 btn m-1" style="color: #ffffff; background: #425347; border-radius: 10px; font-size: 1rem" data-toggle="tooltip" title="tumblr">
<i class="fab fa-tumblr fa-lg fa-fw"></i></a>
<br>
<a href="URLHERE" class="p-2 btn m-1" style="color: #ffffff; background: #425347; border-radius: 10px; font-size: 1rem" data-toggle="tooltip" title="deviantart">
<i class="fab fa-deviantart fa-lg fa-fw"></i></a>
<a href="URLHERE" class="p-2 btn m-1" style="color: #ffffff; background: #425347; border-radius: 10px; font-size: 1rem" data-toggle="tooltip" title="furaffinity">
<i class="fas fa-paw fa-lg fa-fw"></i></a>
<a href="URLHERE" class="p-2 btn m-1" style="color: #ffffff; background: #425347; border-radius: 10px; font-size: 1rem" data-toggle="tooltip" title="artfight">
<i class="fas fa-pen-paintbrush fa-lg fa-fw"></i></a>
<!-- //////////////////// add more buttons ABOVE this line! //////////////////// -->
</div>
<!-- //////////////////// END SOCIAL BUTTONS //////////////////// -->
</div>
</div>
<!-- //////////////////// END SOCIALS //////////////////// -->
</div>
<!-- //////////////////// END SECOND ROW //////////////////// -->
<!-- //////////////////// MUSIC PLAYER //////////////////// -->
<div class="row no-gutters mx-n2">
<!-- //////////////////// TITLE AND ARTIST //////////////////// -->
<div class="col-lg-10 mx-2 p-3 mb-3 row no-gutters align-items-center text-center font-weight-bold" style="background: #ffffff; color: #000000; mix-blend-mode: screen; border-radius: 10px;">
<!-- //////////////////// TITLE - add some lyrics inside the title="like this". or whatever you want really! feel free to delete it if you don't need it //////////////////// -->
<div class="col-lg-auto mb-0 text-lg-left" style="letter-spacing: 1px; font-size: 1.5rem; font-family: arial black, sans-serif;">
<a href="URLHERE" class="text-reset" data-toggle="tooltip" title="lyrics here">
MUSIC TITLE
</a>
</div>
<!-- //////////////////// END TITLE //////////////////// -->
<!-- //////////////////// DIVIDER //////////////////// -->
<div class="card flex-fill mx-2" style="background: #000000;"></div>
<!-- //////////////////// ARTIST NAME //////////////////// -->
<em class="col-lg-auto text-lg-right" style="font-size: 1rem;">
Music Artist
</em>
</div>
<!-- //////////////////// END TITLE AND ARTIST //////////////////// -->
<!-- //////////////////// MUSIC BUTTON //////////////////// -->
<div class="col-lg mx-2 mb-3 p-3 d-flex order-lg-last order-first" style="background: #ffffff; color: #000000; mix-blend-mode: screen; border-radius: 10px; font-size: 3rem; overflow: hidden;">
<!-- //////////////////// YT LINK - search your chosen video, copy the keysmash seen after watch?v= then replace 'O3klqGc89kQ' with chosen keysmash. Don't remove the '?modestbranding=1' for the best performance //////////////////// -->
<iframe src="https://www.youtube-nocookie.com/embed/O3klqGc89kQ?modestbranding=1" style="position: absolute; border: 0; height: 200px; margin-top: -75px; margin-left: -100px; opacity: 0.001; z-index: 99"></iframe>
<i class="fas fa-compact-disc fa-spin m-auto"></i>
</div>
<!-- //////////////////// END MUSIC BUTTON //////////////////// -->
</div>
<!-- //////////////////// END MUSIC PLAYER //////////////////// -->
<!-- //////////////////// CREDITS //////////////////// -->
<div class="text-center d-flex justify-content-center align-items-center">
<!-- //////////////////// ICONS - change fas fa-mushroom to any available icon //////////////////// -->
<i class="fas fa-mushroom fa-2x mr-2" style="color: #ffffff;"></i>
<!-- //////////////////// BG IMAGE CRED - edit title to your liking, don't forget to stay inside "quotation marks" and closing bracket> //////////////////// -->
<a href="URLHERE" class="btn mr-2 text-center" style="text-decoration: none; background: #ffffff; color: #000000; mix-blend-mode: screen; border-radius: 10px;"
data-toggle="tooltip" title="background image by user">
<i class="fas fa-image fa-lg"></i>
</a>
<!-- //////////////////// FOCAL IMAGE CRED - edit title to your liking, don't forget to stay inside "quotation marks" and closing bracket> //////////////////// -->
<a href="URLHERE" class="btn mr-2 text-center" style="text-decoration: none; background: #ffffff; color: #000000; mix-blend-mode: screen; border-radius: 10px;"
data-toggle="tooltip" title="focal image by user">
<i class="fas fa-camera fa-lg"></i>
</a>
<!-- //////////////////// CODE CREDITS - please don't remove! //////////////////// -->
<a href="https://toyhou.se/icecreampizzeria" class="btn mr-2 text-center" style="text-decoration: none; background: #ffffff; color: #000000; mix-blend-mode: screen; border-radius: 10px;"
data-toggle="tooltip" title="code by icecreampizzeria">
<i class="fas fa-code fa-lg"></i>
</a>
<!-- //////////////////// ICONS - change fas fa-mushroom to any available icon //////////////////// -->
<i class="fas fa-mushroom fa-2x" style="color: #ffffff;"></i>
</div>
<!-- //////////////////// END ICONS //////////////////// -->
</div>
<!-- //////////////////// END BACKGROUND //////////////////// -->
</div>
<!-- //////////////////// END WHOLE THING //////////////////// -->