eons adrift / f2u html (CODE)

dogboy

Profile


<!--- 

EONS ADRIFT / by dogboy

    NOTES
    accent (green): #72C9B9
    accent (dark green): #224857
            (use ctrl+f + replace for accent replacement)
    mobile friendly + custom colors! ✔✔✔

    RULES & DISCLAIMERS
    - fav/comment if using pls!
    - not wysiwyg friendly so please turn that off!
    - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
    - have a nice day!!
    

--->

<!-- TOP BANNER COLORING -->
<div class="container-fluid" style="background:#72C9B9;padding:20px;padding-top:20px;border-radius:30px 30px 0px 0px;max-width:550px;margin:30px auto 0px;box-shadow:3px 3px 1px #72C9B9;"></div>

<!-- MAIN BOX -->

<div class="container-fluid" style="background:#FFFFFF;border-radius:0px;max-width:550px;padding:0px;box-shadow:3px 3px 1px #72C9B9;">
    <div class="row no-gutters">
        <!-- left info column -->
        <div class="col-md-5">
            <div class="container-fluid">
            <!-- icon -->
            <center><img src="https://cdn.discordapp.com/attachments/959578845701369907/1049259651105038356/image.png" class="p-1 mt-2" style="box-shadow:3px 3px 1px #72C9B9;width:200px;"></center>
            <!-- name and media links, feel free to change the icon type and tooltip to say something different if you want like commissions, art trades etc! -->
            <h3 class="text-uppercase text-center" style="font-size:20px;padding-top:12px;color:#224857;font-family:verdana;font-weight:700;letter-spacing:1px;text-shadow: 0 0 10px #72C9B9;">NAME</h3>
            <h3 class="text-uppercase" style="font-size:13px;letter-spacing:3px;color:#224857;" align="center">
                      <a href="LINK_HERE"><span data-toggle="tooltip" title="DEVIANTART"><i class="fab fa-deviantart" style="color:#72C9B9;"></i></span></a> ✽
                      <a href="LINK_HERE"><span data-toggle="tooltip" title="INSTAGRAM"><i class="fab fa-instagram" style="color:#72C9B9;"></i></span></a> ✽
                      <a href="LINK_HERE"><span data-toggle="tooltip" title="TUMBLR"><i class="fab fa-tumblr" style="color:#72C9B9;"></i></span></a> ✽
                      <a href="LINK_HERE"><span data-toggle="tooltip" title="YOUTUBE"><i class="fab fa-youtube" style="color:#72C9B9;"></i></span></a> ✽
                      <a href="LINK_HERE"><span data-toggle="tooltip" title="TWITTER"><i class="fab fa-twitter" style="color:#72C9B9;"></i></span></a>
           </h3>
           </div>
      </div>
      <!-- right info column -->
        <div class="col-md-7">
        <!-- title slide -->
        <div class="container-fluid hidden-sm-down" style="background:#72C9B9;border-radius:0px 0px 00px 30px;">
            <h3 class="text-uppercase text-center p-1" style="font-size:27px;color:#FFFF;font-family:verdana;font-weight:700;letter-spacing:2px;margin-bottom:3px;text-shadow: 0 0 20px #FFF;">eons adrift ♡</h3>
        </div>
        <div class="card p-2" style="border:none;background:#FFFFFF;padding:0px;border-radius:0px;">
            <!-- pronouns, age etc -->
            <h3 class="text-lowercase text-center" style="color:#6A6A6A;font-size:15px;letter-spacing:0.4px;">
                pronouns / age / ethnicity / mbti</h3>
            <!-- about box, this will scroll! -->
            <p class="text-lowercase p-2" style="color:#6A6A6A;height:110px;overflow:auto;font-size:12px;letter-spacing:0.4px;">
                lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus et rutrum eros. sed maximus a diam sit amet tincidunt. proin nulla nisi, sodales ut ultricies eu, mollis vitae nulla. nulla facilisi. nam id turpis iaculis, facilisis sem et, tristique turpis. morbi ut varius lorem. proin quis ex id dolor aliquet auctor.
                <br>In imperdiet a justo in rutrum. Ut rutrum bibendum dapibus. Phasellus ac sagittis ipsum. Ut sit amet tortor est. Etiam a quam ac dui ornare feugiat. Nulla aliquam lectus maximus nisi efficitur, tempor dignissim libero dictum. Ut consectetur ac diam eu maximus. Sed interdum leo eget eros tristique, sit amet volutpat ligula bibendum. Phasellus neque purus, congue in magna id, posuere condimentum quam. Donec dignissim interdum dolor vitae lacinia. Phasellus ac leo in sapien euismod sollicitudin et ut mauris.
            </p>
        </div>
        <!-- image boxes for characters, etc -->
        <div class="row no-gutters mt-2 mb-2 justify-content-center">
            <a href="LINK_HERE"><img src="https://cdn.discordapp.com/attachments/959578845701369907/1049259857364131840/image.png" class="m-1" style="border-radius:10px;width:70px;"></a>
            <a href="LINK_HERE"><img src="https://cdn.discordapp.com/attachments/959578845701369907/1049259987496615936/image.png" class="m-1" style="border-radius:10px;width:70px;"></a>
            <a href="LINK_HERE"><img src="https://cdn.discordapp.com/attachments/959578845701369907/1049260140441903144/image.png" class="m-1" style="border-radius:10px;width:70px;"></a>
            <a href="LINK_HERE"><img src="https://cdn.discordapp.com/attachments/959578845701369907/1049260281253089300/image.png" class="m-1" style="border-radius:10px;width:70px;"></a>
        </div>
        </div>
    </div>

</div>
<!-- credit, dont remove! -->
<div class="container-fluid" style="background:none;max-width:590px;">
    <h3 class="text-uppercase mt-2" style="font-size:10px;letter-spacing:3px;color:#FFFFFF;" align="right">
         <a class="d-block text-muted" href="19153413" style="font-size:0.6em;">code by dogboy <i class="fad fa-rainbow"></i></a>
    </h3>
</div>