Floral Casing User
created by:Aris
Custom ColorsBootstrapHTMLUser
Copy
<!-- background colour: #452C23 text colour: #f4e9d6 border colour: #F2E3C7 accent colour: #AAB26A --> <div class="container p-0" style="max-width:750px"> <!-- top image --> <div class="row no-gutters" style="width:100%; height:100px; background:url('https://images.unsplash.com/photo-1622264829715-7bc9d6f06428'); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:100% 100% 0% 0%"></div> <!-- contents --> <div class="row no-gutters my-2"> <!-- top --> <div class="row no-gutters" style="min-height:300px; width:100%; background-color:#452C23; border:6px double #F2E3C8; position:relative"> <!-- left side --> <div class="col-lg col-12" style="z-index:100"> <!-- pfp --> <div style="position:absolute; background-color:#452C23; height:200px; width:200px; border:6px double #F2E3C8; left:-15px; top:-40px"><img src="IMG_HERE" style="height:100%; width:100%"></div> <!-- fontawesome icons --> <i class="fa-duotone fa-trillium fa-2x" style="transform:rotate(20deg); position:absolute; top:-10px; left:170px; --fa-primary-color:#b4a3bc; --fa-secondary-color:#31683d; --fa-secondary-opacity:1"></i> <i class="fas fa-flower fa-lg" style="transform:rotate(20deg); position:absolute; top:160px; left:-18px; color:#4f86cc; z-index:10"></i> <!-- link thingies, no more than 7 preferably. can remove any unused ones or change the icon. icons from fontawesome.com --> <div class="row no-gutters p-1" style="position:absolute; top:153px; left:-7px; color:#aab26a; background-color:#F2E3C8; border-radius:50px"> <div class="col mx-1"><a data-toggle="tooltip" title="Username"><i class="fab fa-discord fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-twitter fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-instagram fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-deviantart fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-tiktok fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-tumblr fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fas fa-link fa-lg"></i></a></div> </div> <div class="row no-gutters" style="margin-left:190px"> <!-- name --> <div class="mx-auto text-center"> <span style="font-size:1.25em; font-variant:small-caps; color:#f4e9d6">Name</span> </div> <!-- pronouns, timezone, n other badges --> <div class="row no-gutters justify-content-center mx-auto"> <div class="col-auto badge p-1 m-1" style="background-color:#AAB26A; border-radius:50px; font-size:1em; height:25px"><span>pro/nouns</span></div> <div class="col-auto badge p-1 m-1" style="background-color:#AAB26A; border-radius:50px; font-size:1em; height:25px"><span>timezone</span></div> <div class="col-auto badge p-1 m-1" style="background-color:#AAB26A; border-radius:50px; font-size:1em; height:25px"><span>lorem</span></div> <div class="col-auto badge p-1 m-1" style="background-color:#AAB26A; border-radius:50px; font-size:1em; height:25px"><span>lorem ipsum</span></div> </div> </div> <!-- spacer --> <div class="d-lg-block d-none" style="margin-top:50px"></div> <div class="d-block d-lg-none" style="margin-top:25px"></div> <!-- about me --> <div class="row no-gutters p-2" style="color:#f4e9d6; font-size:1.25em"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p> </div> <!-- do not interact --> <div> <div style="font-size:1.5em; font-variant:small-caps; color:#f4e9d6"> <span><i class="fas fa-x p-2"></i>Do not Interact</span> </div> <hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8;"> <div style="color:#f4e9d6"> <ul style="list-style-type:circle; font-size:1.2em"> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </ul> </div> </div> <!-- before you interact --> <div> <div class="pull-right" style="font-size:1.5em; font-variant:small-caps; color:#f4e9d6"> <span>Before you Interact<i class="fas fa-exclamation p-2"></i></span> </div> <hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8;"> <div style="color:#f4e9d6"> <ul style="list-style-type:circle; font-size:1.2em"> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </ul> </div> </div> </div> <div class="col-lg col-12 d-lg-block d-none mx-3" style="max-width:1px; border:1px solid #F2E3C8"></div> <!-- right side --> <div class="col-lg col-12"> <!-- commissions --> <div class="row no-gutters my-2" style="color:#f4e9d6"> <div class="container p-0 mx-auto"> <div style="font-size:2em; font-variant:small-caps;"> <span><i class="fas fa-paintbrush-fine p-2"></i>Art</span> </div> <hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8;"> <div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em"> <span>commissions</span> </div> <div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em"> <div class="col-1 mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div> <span>yes</span> <div class="col mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div> </div> <div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em"> <span>trades</span> </div> <div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em"> <div class="col mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div> <span>no</span> <div class="col-1 mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div> </div> <div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em"> <span>requests</span> </div> <div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em"> <div class="col-1 mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div> <span>friends</span> <div class="col mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div> </div> </div> </div> <!-- friends list --> <div class="row no-gutters my-2" style="color:#f4e9d6"> <div class="container p-0 mx-auto"> <div style="font-size:2em; font-variant:small-caps"> <span class="pull-right">Friends<i class="fas fa-user-group p-2"></i></span> </div> <hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8"> <!-- row --> <div class="row no-gutters justify-content-center mt-2"> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> </div> <!-- row, you can make more rows by copy pasting --> <div class="row no-gutters justify-content-center mt-2"> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> </div> </div> </div> </div> </div> <!-- bottom --> <div class="row no-gutters" style="width:100%"> <!-- ribbon display --> <div class="col-lg col-12 mt-2 mr-1"> <div class="px-1" style="max-height:100%; border-top:3px solid #44332d; border-bottom:3px solid #44332d"> <div class="container p-0" style="background:url('https://images.unsplash.com/photo-1597113366853-fea190b6cd82'); background-size:cover; background-position:center; background-repeat:no-repeat; border:3px solid #44332d; position:relative"><div class="h-100 w-100 pb-1" style="background:rgba(91,65,57,0.9)"> <!-- fun fontawesome icon --> <div class="fas fa-flower fa-2xl" style="color:#f5f1ee; position:absolute; transform:rotate(0deg); left:-5px; bottom:10px"></div> <div class="fas fa-flower fa-xl" style="color:#f09d69; position:absolute; transform:rotate(50deg); left:-2px; bottom:10px"></div> <!-- recommended max 6 ribbons per row, just copy paste a row to add more ribbons. --> <div class="row no-gutters pt-2 pb-1 justify-content-center" style="border-bottom:3px solid #44332d"> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> </div> <div class="row no-gutters pt-2 pb-1 justify-content-center" style="border-bottom:3px solid #44332d"> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> </div> </div></div> </div> </div> <!-- interests --> <div class="col-lg col-12 mt-2 ml-1" style="background-color:#452C23; border:6px double #F2E3C8"> <div> <div style="font-size:2em; font-variant:small-caps; color:#f4e9d6"> <span><i class="fas fa-heart fa-2xs p-2"></i>Interests</span> </div> <hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8;"> <div style="color:#f4e9d6"> <ul style="list-style-type:circle; font-size:1.2em"> <li>Lorem ipsum<br>dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </ul> </div> </div> </div> </div> </div> <!-- bottom image --> <div class="row no-gutters" style="width:100%; height:100px; background:url('https://images.unsplash.com/photo-1622264829715-7bc9d6f06428'); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:0% 0% 100% 100%"></div> <!-- code credit, do not remove --> <div class="pull-right"><a href="/Aris" data-toggle="tooltip" title="HTML by Palarista" style="color:#aab26a; position:absolute; bottom:75px; right:5px; opacity:.75"><i class="fas fa-code"></i></a></div> </div>
Copy
<!-- background colour: bg-dark text colour: text-light border colour: text-primary accent colour: bg-secondary, text-secondary fontawesome icons: text-warning, text-danger --> <div class="container p-0" style="max-width:750px"> <!-- top image --> <div class="row no-gutters" style="width:100%; height:100px; background:url('https://images.unsplash.com/photo-1622264829715-7bc9d6f06428'); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:100% 100% 0% 0%"></div> <!-- contents --> <div class="row no-gutters my-2"> <!-- top --> <div class="row no-gutters bg-dark text-primary" style="min-height:300px; width:100%; border:6px double; position:relative"> <!-- left side --> <div class="col-lg col-12" style="z-index:100"> <!-- pfp --> <div class="bg-dark text-primary" style="position:absolute; height:200px; width:200px; border:6px double; left:-15px; top:-40px"><img src="IMG_HERE" style="height:100%; width:100%"></div> <!-- fontawesome icons --> <i class="fa-duotone fa-trillium fa-2x text-warning" style="transform:rotate(20deg); position:absolute; top:-10px; left:170px"></i> <i class="fas fa-flower fa-lg text-danger" style="transform:rotate(20deg); position:absolute; top:160px; left:-18px; z-index:10"></i> <!-- link thingies, no more than 7 preferably. can remove any unused ones or change the icon. icons from fontawesome.com --> <div class="row no-gutters p-1 bg-light text-secondary" style="position:absolute; top:153px; left:-7px; border-radius:50px"> <div class="col mx-1"><a data-toggle="tooltip" title="Username"><i class="fab fa-discord fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-twitter fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-instagram fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-deviantart fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-tiktok fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-tumblr fa-lg"></i></a></div> <div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fas fa-link fa-lg"></i></a></div> </div> <div class="row no-gutters" style="margin-left:190px"> <!-- name --> <div class="mx-auto text-center"> <span class="text-light" style="font-size:1.25em; font-variant:small-caps">Name</span> </div> <!-- pronouns, timezone, n other badges --> <div class="row no-gutters justify-content-center mx-auto"> <div class="col-auto badge p-1 m-1 bg-secondary" style="border-radius:50px; font-size:1em; height:25px"><span>pro/nouns</span></div> <div class="col-auto badge p-1 m-1 bg-secondary" style="border-radius:50px; font-size:1em; height:25px"><span>timezone</span></div> <div class="col-auto badge p-1 m-1 bg-secondary" style="border-radius:50px; font-size:1em; height:25px"><span>lorem</span></div> <div class="col-auto badge p-1 m-1 bg-secondary" style="border-radius:50px; font-size:1em; height:25px"><span>lorem ipsum</span></div> </div> </div> <!-- spacer --> <div class="d-lg-block d-none" style="margin-top:50px"></div> <div class="d-block d-lg-none" style="margin-top:25px"></div> <!-- about me --> <div class="row no-gutters p-2 text-light" style="font-size:1.25em; margin-top:60px"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p> </div> <!-- do not interact --> <div> <div class="text-light" style="font-size:1.5em; font-variant:small-caps"> <span><i class="fas fa-x p-2"></i>Do not Interact</span> </div> <hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid"> <div class="text-light"> <ul style="list-style-type:circle; font-size:1.2em"> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </ul> </div> </div> <!-- before you interact --> <div> <div class="pull-right text-light" style="font-size:1.5em; font-variant:small-caps"> <span>Before you Interact<i class="fas fa-exclamation p-2"></i></span> </div> <hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid"> <div class="text-light"> <ul style="list-style-type:circle; font-size:1.2em"> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </ul> </div> </div> </div> <div class="col-lg col-12 d-lg-block d-none mx-3 text-primary" style="max-width:1px; border:1px solid"></div> <!-- right side --> <div class="col-lg col-12"> <!-- commissions --> <div class="row no-gutters my-2 text-light"> <div class="container p-0 mx-auto"> <div style="font-size:2em; font-variant:small-caps;"> <span><i class="fas fa-paintbrush-fine p-2"></i>Art</span> </div> <hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid"> <div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em"> <span>commissions</span> </div> <div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em"> <div class="col-1 mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div> <span>yes</span> <div class="col mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div> </div> <div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em"> <span>trades</span> </div> <div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em"> <div class="col mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div> <span>no</span> <div class="col-1 mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div> </div> <div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em"> <span>requests</span> </div> <div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em"> <div class="col-1 mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div> <span>friends</span> <div class="col mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div> </div> </div> </div> <!-- friends list --> <div class="row no-gutters my-2 text-light"> <div class="container p-0 mx-auto"> <div style="font-size:2em; font-variant:small-caps"> <span class="pull-right">Friends<i class="fas fa-user-group p-2"></i></span> </div> <hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid"> <!-- row --> <div class="row no-gutters justify-content-center mt-2"> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> </div> <!-- row, you can make more rows by copy pasting --> <div class="row no-gutters justify-content-center mt-2"> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> <div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a> <span class="justify-content-center text-center" style="font-size:1.1em">Name</span> </div> </div> </div> </div> </div> </div> <!-- bottom --> <div class="row no-gutters" style="width:100%"> <!-- ribbon display --> <div class="col-lg col-12 mt-2 mr-1"> <div class="px-1 text-primary" style="max-height:100%; border-top:3px solid; border-bottom:3px solid"> <div class="container p-0 text-primary" style="background:url('https://images.unsplash.com/photo-1597113366853-fea190b6cd82'); background-size:cover; background-position:center; background-repeat:no-repeat; border:3px solid; position:relative"><div class="h-100 w-100 pb-1 bg-dark"> <!-- fun fontawesome icon --> <div class="fas fa-flower fa-2xl text-light" style="position:absolute; transform:rotate(0deg); left:-5px; bottom:10px"></div> <div class="fas fa-flower fa-xl text-warning" style="position:absolute; transform:rotate(50deg); left:-2px; bottom:10px"></div> <!-- recommended max 6 ribbons per row, just copy paste a row to add more ribbons. --> <div class="row no-gutters pt-2 pb-1 justify-content-center text-primary" style="border-bottom:3px solid"> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> </div> <div class="row no-gutters pt-2 pb-1 justify-content-center text-primary" style="border-bottom:3px solid"> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> <a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'"> <img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png"> </a> </div> </div></div> </div> </div> <!-- interests --> <div class="col-lg col-12 mt-2 ml-1 bg-dark text-primary" style="border:6px double"> <div> <div class="text-light" style="font-size:2em; font-variant:small-caps"> <span><i class="fas fa-heart fa-2xs p-2"></i>Interests</span> </div> <hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid"> <div class="text-light"> <ul style="list-style-type:circle; font-size:1.2em"> <li>Lorem ipsum<br>dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </ul> </div> </div> </div> </div> </div> <!-- bottom image --> <div class="row no-gutters" style="width:100%; height:100px; background:url('https://images.unsplash.com/photo-1622264829715-7bc9d6f06428'); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:0% 0% 100% 100%"></div> <!-- code credit, do not remove --> <div class="pull-right"><a href="/Aris" data-toggle="tooltip" title="HTML by Palarista" class="text-secondary" style="position:absolute; bottom:75px; right:5px; opacity:.75"><i class="fas fa-code"></i></a></div> </div>