f2u » wave (CODE (BS))

CCXVII

Info


Created
1 year, 2 months ago
Creator
CCXVII
Favorites
1

Profile


<!--
muted       : text
secondary   : highlight colour
bg-white    : background colour
link_url    : external links
img_url     : image links
-->

<!-- main bg -->
<div class="container my-3 mx-auto text-muted" style="
background: url(https://storage.googleapis.com/subtlepatterns-production/designers/subtlepatterns/uploads/spikes.png) 
repeat fixed; padding: 50px; border-radius:1rem; font-size:12px; letter-spacing:1px;">
<div class="container" style="max-width:800px;">
<div class="row my-4 mx-auto justify-content-center">

<!-- right column, sidebar image -->
<div class="col-sm-6 order-lg-2">
<div class="h-75 my-2 hidden-lg-down" style="
background: url(img_url) center center;
background-size:cover;border-radius:1rem;"><div style="position:absolute;bottom:150px;right:40px;"></div></div>

<!-- theme song, replace music_url with your youtube embed (the random numbers/letters at the end of a video link) -->
<div class="row no-gutters">
<div class="col-sm-12 my-4">
<span class="badge badge-pill text-uppercase bg-secondary" style="font-size: 12px; font-weight:400;">theme song</span>
<div class="py-3 px-4 mt-2 bg-white" style="border-radius:1rem;">
<span><iframe class="flex-fill" style="height:1em; width:1em; opacity:0; position:absolute; margin-top:5.5px; z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/music_url"></iframe><i class="fas fa-play mr-2 text-secondary" style="font-size:12px;"></i></span>
<span>song name - song artist</span>
</div></div></div></div>

<!-- left column, general -->
<div class="col-sm-6 order-lg-1">
<div class="row">
<div class="col-sm-12 my-2">
<span class="badge badge-pill text-uppercase bg-secondary" style="background: #a9c1c7; font-size: 14px; font-weight:400;">username</span>
<div class="justify-content-between py-3 px-4 mt-2 bg-white" style="border-radius:1rem;">
<span>name</span>»
<span>age</span>»
<span>pro/nouns</span>
</div></div>

<!-- about -->
<div class="col-sm-12 my-2">
<span class="badge badge-pill text-uppercase bg-secondary" style="font-size: 12px; font-weight:400;">about me</span>
<div class="px-3 py-4 mt-2 bg-white" style="border-radius:1rem;">
<p>this doesn't scroll, i recommend keeping it short!</p>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div></div>

<!-- links, i recommend having at least 3 or 4 -->
<div class="col-sm-12 my-2">
<span class="badge badge-pill text-uppercase bg-secondary" style="font-size: 12px; font-weight:400;">my links</span>
<div class="justify-content-between py-3 px-3 mt-3 bg-white" style="border-radius:1rem;">
    <a href="link_url" class="tooltipster text-secondary" title="instagram"><i class="fab fa-instagram"></i></a>
    <a href="link_url" class="tooltipster text-secondary" title="deviantart"><i class="fab fa-deviantart"></i></a>
    <span  class="tooltipster text-secondary" title="discord"><i class="fab fa-discord"></i></span>
    <a href="link_url" class="tooltipster text-secondary" title="twitter"><i class="fab fa-twitter"></i></a>
    <a href="link_url" class="tooltipster text-secondary" title="artfight"><i class="fas fa-pencil-paintbrush"></i></a>
    <a href="link_url" class="tooltipster text-secondary" title="commission info"><i class="fas fa-dollar-sign"></i></a>
</div></div>

<!-- featured, square icons recommended -->
<div class="col-sm-12 my-2">
<span class="badge badge-pill text-uppercase bg-secondary" style="font-size: 12px; font-weight:400;">featured</span>
<div class="row no-gutters py-3 px-4 mt-2 bg-white" style="border-radius:1rem;" align="center">
    <div class="col-sm-4"><a href="link_url"><img class="btn btn-outline-secondary rounded-circle p-1 mb-2 tooltipster" title="name" style="width:75px;" src="himg_url"></a></div>
    <div class="col-sm-4"><a href="link_url"><img class="btn btn-outline-secondary rounded-circle p-1 mb-2 tooltipster" title="name" style="width:75px;" src="img_url"></a></div>
    <div class="col-sm-4"><a href="link_url"><img class="btn btn-outline-secondary rounded-circle p-1 mb-2 tooltipster" title="name" style="width:75px;" src="img_url"></a></div>
</div></div>

<!-- code credit and bg credits - dont remove! -->
<div class="col-sm-12 my-2 text-center">
<a href="link_url" class="tooltipster text-secondary" title="img credit"><i class="fal fa-image"></i></a>
<a href="https://www.toptal.com/designers/subtlepatterns/spikes-pattern/" class="tooltipster text-secondary" title="bg credit"><i class="fal fa-image"></i></a>
<a href="https://toyhou.se/11370961." class="tooltipster text-secondary" title="code by CCXVII"><i class="fal fa-skull-cow"></i></a>
</div></div></div>

<!-- end -->
</div></div></div>