[03] moodboard
created by:Skysong
Custom ColorsHTMLMiscellaneous
Copy
<!----------------------------------------------------------------------------------- M O O D B O A R D > couldn't come up with an actual name ;-; f2u code by skysong things to edit (if you're not customizing more) should be marked in all caps with instructions on what to change r e s o u r c e s editing code https://th.circlejourney.net/ icons https://fontawesome.com/ image hosting https://freeimage.host/ g u i d e · (ignore brackets) · IMAGES: ctrl+f for [background-url] and replace them with your own · IMAGE POSITIONING: ctrl+f for [background-position] and change the first number for horizontal, second number for vertical · ICONS: in the sections marked [icon 1] and [icon 2], change the <i class"..."> to the icon of your choosing ------------------------------------------------------------------------------------> <div class="container my-3 p-3" style="font-family:monospace;"> <div class="row justify-content-md-center"> <!--TOP LEFT--> <div class="col-sm-6 my-3"> <div class="h-100 w-100" style="padding-bottom:100%; border-radius:10px; background-image:url(https://iili.io/2Cce1N2.png); background-size:cover; background-position:0% 20%;"> </div> </div> <!--TOP RIGHT--> <div class="col-sm-6 my-3"> <div class="w-100" style="height:0; padding-bottom:100%; width:100%; overflow:hidden;"> <div class="container px-0" style="height:100%; padding-bottom:100%; width:100%;"> <!--COLOR PALLETE--> <div class="row m-0 w-100" style="height:20%; position:absolute; top:0; border-radius: 10px 10px 0 0; overflow:hidden;"> <div class="col" style="background-color:#414a6b"></div> <div class="col" style="background-color:#78749e"></div> <div class="col" style="background-color:#ca95ad"></div> <div class="col" style="background-color:#debdbd"></div> </div> <!--IMAGE--> <div class="row m-0 w-100" style="height:75%; position:absolute; bottom:0; border-radius: 0 0 10px 10px; overflow:hidden;"> <div class="h-100 w-100" style="background-image:url(https://iili.io/2C1VRCg.png); background-size:cover; background-position:0% 20%;"></div> </div> </div></div></div> </div> <div class="row"> <!--BOTTOM LEFT--> <div class="col-sm-6 my-3"> <div class="ratio ratio-1x1" style="height:0; padding-bottom:100%; width:100%; border-radius:10px; overflow:hidden; position:relative;"> <!--IMAGE--> <div style="width:54%; padding-bottom:100%; background-image:url(https://iili.io/2CEVSX1.png); background-size:cover; background-position:30% 0%;"></div> <!--ICON 1--> <div style="width:40%; height:47%; background-color:#debdbd; position:absolute; top:0; right:0; align-content:center; text-align:center;"> <i class="fal fa-moon" style="font-size:55px; color:#414a6b"></i> </div> <!--ICON 2--> <div style="width:40%; height:47%; background-color:#debdbd; position:absolute; bottom:0; right:0; align-content:center; text-align:center;"> <i class="fal fa-star" style="font-size:55px; color:#414a6b"></i> </div> </div> </div> <!--BOTTOM RIGHT--> <div class="col-sm-6 my-3"> <div class="ratio ratio-1x1 bg-faded px-4" style="height:0; padding-bottom:100%; width:100%; border-radius:10px; overflow:hidden; background-image:url(https://iili.io/2CEu5XV.png); background-size:cover; background-position:0% 70%;"> <!--QUOTE--> <div class="p-3" style="width:75%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#debdbd"> <i class="far fa-quote-left" style="color:#78749e"></i> <span style="color:#414a6b"> A quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <i class="far fa-quote-right" style="color:#78749e"></i> <p style="text-align:right; color:#78749e"><i><br> – Anonymous </i></p></div> </div></div> </div> </div> <!--CREDITS--> <div class="tooltipster pb-4" data-placement="right" title="code by sky" style="margin:0 auto; height:10px; width:50px; text-align:center;"> <a href="https://toyhou.se/29936589.moodboard"><i class="fas fa-cloud text-muted" style="font-size:10px"></i></a> </div>