<!-- 14 || BUBBLY DAYS by icecreampizzeria (USER)
RULES:
- Don't remove my credit please!
- Feel free to modify/frankenstein as much as you want!
- Don't redistribute my codes please!
COLOR GUIDE:
#f0e5d8 - universal text
#bbdfc8 - bubble main color
text-white - bubble shine
#35977e - accent color (border & solid bg)
rgba(0, 30, 30, 0.8) - shadows & color overlay
find (ctrl + f) URLHERE for links, IMGHERE for image addresses
BUBBLES are labelled if you'd like to remove them
-->
<!-- oooo WHOLE THING oooo -->
<div class="container p-0" style="max-width: 700px; color: #f0e5d8; font-weight: 100">
<div class="row no-gutters">
<!-- oooo LEFT COLUMN oooo -->
<div class="col-lg card border-0 rounded-0 bg-transparent">
<!-- oooo IMAGE - best to use square/portrait transparent image, any size will adjust to the set height
Image anchor is automatically set to 'right' feel free to change that if you want to adjust the position of your image (top, center, bottom and/or left, center, right) oooo -->
<div class="d-flex mx-auto" style="background: url(IMGHERE) right; background-size: contain; background-repeat: no-repeat; min-height: 340px; max-width: 350px;">
<!-- oooo MUSIC PLAYER oooo -->
<div class="d-flex justify-content-center mt-auto">
<!-- oooo BUBBLES - arranged clockwise from big top left bubble oooo -->
<i class="fas fa-circle rounded-circle pb-3 pl-3 p-1 text-white" style="background: #bbdfc8; position:absolute; margin-left: -300px; margin-top: -10px; font-size: 1.2rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); z-index: 999;"></i>
<i class="fas fa-circle rounded-circle pb-2 pl-2 text-white" style="background: #bbdfc8; position:absolute; margin-left: 300px; margin-top: 10px; font-size: 0.9rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); overflow: hidden; z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-2 pl-2 text-white" style="background: #bbdfc8; position:absolute; margin-left: 150px; margin-top: 75px; font-size: 0.9rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); overflow: hidden; z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-2 pl-2 p-1 text-white" style="background: #bbdfc8; position:absolute; margin-left: 100px; margin-top: 60px; font-size: 1rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); z-index: 9;"></i>
<!-- oooo END BUBBLES oooo -->
<!-- oooo BUTTON BACKGROUND oooo -->
<div class="card rounded-circle my-lg-0 my-auto" style="background: url(IMGHERE) center; background-color: #35977e; background-size: cover; background-repeat: no-repeat; width: 100px; height: 100px; border: 6px #35977e solid; z-index: 99; box-shadow: -5px 5px 0 rgba(0,30,30, 0.8);">
<!-- oooo COLOR OVERLAY oooo -->
<div class="d-flex rounded-circle h-100" style="background: rgba(0,30,30, 0.8);">
<div class="m-auto">
<!-- oooo YOUTUBE LINK - replace URLHERE with the keysmash found at the end of your chosen YT vid (specifically the string after '/watch?v=')
DO NOT remove '?modestbranding=0', so you can still pause the thing
- if you don't want a music player, feel free to delete the <iframe> </iframe> line oooo -->
<iframe src="https://www.youtube-nocookie.com/embed/URLHERE?modestbranding=1" class="border-0" style="position: absolute; height: 3rem; width: 3rem; z-index: 9; opacity: 0;"></iframe>
<!-- oooo ICON - feel free to change fa-compact-disc to any fontawesome icon (https://fontawesome.com), you can also disable spinning by deleting 'fa-spin' oooo -->
<i class="fal fa-compact-disc display-3 fa-spin"></i>
</div>
</div>
<!-- oooo END COLOR OVERLAY oooo -->
</div>
<!-- oooo END BUTTON BACKGROUND oooo -->
<!-- oooo TITLE AND ARTIST - the container will expand with the text, don't make it too long! oooo -->
<div class="card py-2 pl-4 pr-3 my-auto border-0" style="background: #35977e; border-radius: 0 30px 30px 0; margin-left: -20px; z-index: 0; width: 250px; box-shadow: -5px 5px 0 rgba(0,30,30, 0.8);">
<p>
MUSIC TITLE<br>
ARTIST
</p>
</div>
<!-- oooo END TITLE AND ARTIST oooo -->
</div>
<!-- oooo END MUSIC PLAYER oooo -->
</div>
<!-- oooo END IMAGE oooo -->
</div>
<!-- oooo END LEFT COLUMN oooo -->
<!-- oooo RIGHT COLUMN oooo -->
<div class="col-lg d-flex py-2">
<div class="mx-auto">
<!-- oooo BUBBLES - arranged clockwise from small top left bubble oooo -->
<i class="fas fa-circle rounded-circle pb-2 pl-2 p-1 text-white" style="background: #bbdfc8; position:absolute; margin-top: 40px; margin-left: 40px; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-3 pl-3 p-1 text-white" style="background: #bbdfc8; position:absolute; margin-left: 60px; font-size: 1.2rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-2 pl-2 text-white" style="background: #bbdfc8; position:absolute; margin-left: 270px; margin-top: 30px; font-size: 0.9rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); overflow: hidden; z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-2 pl-2 p-1 text-white" style="background: #bbdfc8; position:absolute; margin-top: 60px; margin-left: 290px; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-3 pl-3 p-1 text-white" style="background: #bbdfc8; position:absolute; margin-top: 250px; margin-left: 290px; font-size: 1.2rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-2 pl-2 text-white" style="background: #bbdfc8; position:absolute; margin-left: 60px; margin-top: 300px; font-size: 0.9rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); overflow: hidden; z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-2 pl-2 p-1 text-white" style="background: #bbdfc8; position:absolute; margin-top: 260px; margin-left: 0px; font-size: 1.2rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); z-index: 9;"></i>
<i class="fas fa-circle rounded-circle pb-2 pl-2 text-white" style="background: #bbdfc8; position:absolute; margin-left: 0px; margin-top: 120px; font-size: 0.9rem; box-shadow: -4px 4px 0 rgba(0,30,30, 0.8); overflow: hidden; z-index: 9;"></i>
<!-- oooo END BUBBLES oooo -->
<!-- oooo BACKGROUND oooo -->
<div class="card rounded-circle mr-lg-auto ml-lg-0 mx-auto" style="background: url(IMGHERE) center; background-color: #35977e; background-size: cover; background-repeat: no-repeat; border: 6px #35977e solid; max-width: 340px; height: 340px; box-shadow: -5px 5px 0 rgba(0,30,30, 0.8);">
<!-- oooo COLOR OVERLAY oooo -->
<div class="card rounded-circle h-100" style="background: rgba(0,30,30, 0.8); overflow: hidden;">
<!-- oooo TITLE - don't make it too long or it'll touch the edges of the circle, feel free to change font-size to your liking oooo -->
<div class="card text-center border-0 rounded-0 bg-transparent mx-auto pb-2" style="height: 95px; width: 250px;">
<p class="display-4 mb-0 mt-auto" style="font-size: 1.8rem">TITLE</p>
<!-- oooo BASIC PILLS - make sure to not make it too long, I don't recommend adding more pills here oooo -->
<span>
<span class="badge badge-pill" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem">
<i class="fal fa-transgender mr-2"></i>pronouns
</span>
<span class="badge badge-pill" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem">
<i class="fal fa-clock mr-2"></i>age
</span>
<span class="badge badge-pill" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem">
<i class="fal fa-heart mr-2"></i>whatever
</span>
</span>
</div>
<!-- oooo END TITLE oooo -->
<!-- oooo MAIN TEXT oooo -->
<div class="card px-3 border-0 rounded-0 bg-transparent text-center" style="height: 130px; overflow: auto;">
<p>VHS vegan salvia, viral homo american apparel mlkshk next level master cleanse artisan cred organic. Sustainable mlkshk thundercats readymade put a bird on it, seitan cred food truck irony stumptown. 3 wolf moon seitan you probably haven't heard of them Austin, banh mi wolf four loko quinoa etsy iphone hoodie.</p>
<p>Locavore yr lo-fi, before they sold out banksy high life farm-to-table skateboard carles vinyl tumblr leggings. Sustainable irony gluten-free synth freegan shoreditch, tattooed tumblr butcher cosby sweater VHS twee brooklyn.</p>
<!-- oooo ADD more paragraphs above this line! -->
</div>
<!-- oooo END MAIN TEXT oooo -->
<!-- oooo SOCIAL PILLS - how to add and remove:
- select from <span class="badge badge-pill"> to </span>, then copy-paste/delete (don't add too much or the rest might not be visible)
- feel free to change icons as you see fit (more at https://fontawesome.com) oooo -->
<div class="card text-center border-0 rounded-0 pt-2 px-1 bg-transparent mx-auto" style="max-width: 250px;">
<span>
<!-- oooo Add more pills UNDERNEATH this line! oooo -->
<a href="URLHERE" class="badge badge-pill mx-auto" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem; z-index: 9; margin-top: -15px">
<i class="fas fa-id-card mr-2"></i>carrd
</a>
<a href="URLHERE" class="badge badge-pill mx-auto" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem; z-index: 9; margin-top: -15px">
<i class="fab fa-twitter mr-2"></i>twitter
</a>
<a href="URLHERE" class="badge badge-pill mx-auto" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem; z-index: 9; margin-top: -15px">
<i class="fab fa-tumblr mr-2"></i>tumblr
</a>
<a href="URLHERE" class="badge badge-pill mx-auto" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem; z-index: 9; margin-top: -15px">
<i class="fab fa-instagram mr-2"></i>insta
</a>
<a href="URLHERE" class="badge badge-pill mx-auto" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem; z-index: 9; margin-top: -15px">
<i class="fab fa-deviantart mr-2"></i>devart
</a>
<a href="URLHERE" class="badge badge-pill mx-auto" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem; z-index: 9; margin-top: -15px">
<i class="fas fa-paint-brush mr-2"></i>artfight
</a>
<!-- oooo Add more pills ON TOP of this line! oooo -->
</span>
</div>
<!-- oooo END BASIC PILLS oooo -->
</div>
</div>
<!-- oooo END BACKGROUND oooo -->
<!-- oooo CREDITS - please don't remove! <3 oooo -->
<span class="d-flex">
<a href="https://toyhou.se/icecreampizzeria" data-toggle="tooltip" title="code by icecreampizzeria" class="badge badge-pill mx-auto" style="background: #35977e; color: #f0e5d8; font-weight: 100; font-size: 0.8rem; z-index: 9; margin-top: -15px">
<i class="fal fa-code mr-2"></i>code
</a>
</span>
<!-- oooo END CREDITS oooo -->
</div>
</div>
<!-- oooo END RIGHT COLUMN oooo -->
</div>
</div>
<!-- oooo END WHOLE THING oooo -->