f2u » wave (CODE (CC))

CCXVII

Info


Created
1 year, 2 months ago
Creator
CCXVII
Favorites
1

Profile


<!--
#aaa        : text
#a9c1c7     : highlights (blue)
#fff        : background colour
link_url    : external links
img_url     : image links
-->

<!-- main bg -->
<div class="container my-3 mx-auto" style="
background: url(https://storage.googleapis.com/subtlepatterns-production/designers/subtlepatterns/uploads/spikes.png) 
repeat fixed; padding: 50px; border-radius:1rem; color:#aaa; 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" style="background: #a9c1c7; font-size: 12px; font-weight:400;">theme song</span>
<div class="py-3 px-4 mt-2" style="border-radius:1rem;background-color:#fff;">
<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" style="color:#a9c1c7; 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" style="background: #a9c1c7; font-size: 14px; font-weight:400;">username</span>
<div class="justify-content-between py-3 px-4 mt-2" style="border-radius:1rem;background-color:#fff;">
<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" style="background: #a9c1c7; font-size: 12px; font-weight:400;">about me</span>
<div class="px-3 py-4 mt-2" style="border-radius:1rem;background-color:#fff;">
<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" style="background: #a9c1c7; font-size: 12px; font-weight:400;">my links</span>
<div class="justify-content-between py-3 px-3 mt-3" style="border-radius:1rem;background-color:#fff;">
    <a href="link_url" style="color:#a9c1c7;" class="tooltipster" title="instagram"><i class="fab fa-instagram"></i></a>
    <a href="link_url" style="color:#a9c1c7;" class="tooltipster" title="deviantart"><i class="fab fa-deviantart"></i></a>
    <span style="color:#a9c1c7;" class="tooltipster" title="discord"><i class="fab fa-discord"></i></span>
    <a href="link_url" style="color:#a9c1c7;" class="tooltipster" title="twitter"><i class="fab fa-twitter"></i></a>
    <a href="link_url" style="color:#a9c1c7;" class="tooltipster" title="artfight"><i class="fas fa-pencil-paintbrush"></i></a>
    <a href="link_url" style="color:#a9c1c7;" class="tooltipster" 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" style="background: #a9c1c7; font-size: 12px; font-weight:400;">featured</span>
<div class="row no-gutters py-3 px-4 mt-2" style="border-radius:1rem;background-color:#fff;" 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="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 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" style="color:#a9c1c7;" class="tooltipster" title="img credit"><i class="fal fa-image"></i></a>
<a href="https://www.toptal.com/designers/subtlepatterns/spikes-pattern/" style="color:#a9c1c7;" class="tooltipster" 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>