gleam of hope / f2u html (CODE)

dogboy

Profile


CHARACTER PROFILE:

<!--- 

GLEAM OF HOPE / by cati/dogboy
 
    NOTES
    accent: #5A392F
            (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!!

--->

<!--- background pattern --->
<div class="container-fluid" style="background:url(https://64.media.tumblr.com/195bbe838b503b84081ef020fd5c5904/tumblr_inline_ml9ds2pbI71qz4rgp.png) repeat fixed;padding-top:30px;padding-bottom:10px;border-radius:0px;max-width:800px;margin:20px auto 5px;">
    <div class="row no-gutters">
    <div class="col-md-4 justify-content-center">
    <!--- pagedoll, id personally reccommend using a verticle image --->
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/26484010_rmtZEtjAEldH7xG.gif?1600249238" style="width:200px;">
      </div>
    <div class="col-md-8 text-center">
        <div class="col-12 p-2" style="background-color:#FFFFFF;max-width:95%;overflow:auto;margin-left:2%;">
            <div class="justify-content-between mx-2 p-2">
            <!--- music player, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
            <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/URLHERE"></iframe><i class="fas fa-play fa-2x" style="color:#5A392F;"></i></span>
            <span class="p-2 text-uppercase font-italic font-weight-bold" style="font-size:14px;letter-spacing:1px;color:#5A392F;">song name - <span class="text-muted" style="font-size:14px;letter-spacing:2px;">artist</span></span></span>
            </div>
            </div>
            <div class="row no-gutters">
            <div class="col-lg-5 mt-3 m-3">
                <div class="card p-2" style="background-color:#FFFFFF;height:260px;max-width:100%;border-radius:0px;overflow:auto;border:0px;">
                 <!--- column info --->
                <div class="justify-content-between p-2">
                  <div><span class="text-uppercase font-weight-bold" style="color:#5A392F;font-size:12px;letter-spacing:1px;">name</span></div>
                   <div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:1px;">content</span></div>
                </div>
                <div class="justify-content-between my-2 p-2">
                  <div><span class="text-uppercase font-weight-bold" style="color:#5A392F;font-size:12px;letter-spacing:1px;">gender</span></div>
                   <div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:1px;">content</span></div>
                </div>
                <div class="justify-content-between my-2 p-2">
                  <div><span class="text-uppercase font-weight-bold" style="color:#5A392F;font-size:12px;letter-spacing:1px;">age</span></div>
                   <div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:1px;">content</span></div>
                </div>
                <div class="justify-content-between my-2 p-2">
                  <div><span class="text-uppercase font-weight-bold" style="color:#5A392F;font-size:12px;letter-spacing:1px;">status</span></div>
                   <div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:1px;">content</span></div>
                </div>
                <div class="justify-content-between my-2 p-2">
                  <div><span class="text-uppercase font-weight-bold" style="color:#5A392F;font-size:12px;letter-spacing:1px;">specie</span></div>
                   <div><span class="text-muted font-italic" style="font-size:12px;letter-spacing:1px;">content</span></div>
                </div>
                </div>
            </div>
            <div class="col-lg-6 p-3">
                <div class="card" style="background-color:#FFFFFF;height:260px;max-width:100%;border-radius:0px;overflow:auto;border:0px;">
                    <!--- description --->
                     <p class="text-center p-3" style="color:#5A392F;font-size:13px;">
                  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. 
                  	<br><br>Sed malesuada ultricies tincidunt. Sed odio turpis, bibendum nec justo sed, lacinia sagittis nunc. Mauris facilisis purus neque, id feugiat sem malesuada vel. Aenean id nisl quis nulla vehicula iaculis quis sit amet sapien. Vestibulum faucibus lectus sit amet justo tempus hendrerit. Praesent ut lacus neque. Curabitur vitae sem at sapien rutrum dictum.</p>
                </div>
            </div>
            </div>
        </div>
      </div>
    </div>
        <!--- credit, dont remove pls! --->
    <a class="d-block text-muted text-center" href="https://toyhou.se/8557759.gleam-of-hope-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>

USER PROFILE:

<!--- 

GLEAM OF HOPE / by cati/dogboy
 
    NOTES
    accent: #5A392F
            (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!!

--->

<!--- background image --->
<div class="container-fluid" style="background:url(https://64.media.tumblr.com/195bbe838b503b84081ef020fd5c5904/tumblr_inline_ml9ds2pbI71qz4rgp.png) repeat fixed;padding-top:30px;border-radius:0px;max-width:800px;margin:30px auto 5px;">
    <div class="row no-gutters">
    <div class="col-md-4 justify-content-center">
        <!--- pagedoll, id personally reccommend using a verticle image --->
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/26484010_rmtZEtjAEldH7xG.gif?1600249238" style="height:390px;">
      </div>
    <div class="col-md-8 text-center">
        <div class="col-12 p-2" style="background-color:#FFFFFF;max-width:95%;overflow:auto;margin-left:2%;">
            <div class="justify-content-between mx-2 p-2">
            <!--- music player, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
            <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/URLHERE"></iframe><i class="fas fa-play fa-2x" style="color:#5A392F;"></i></span>
            <span class="p-2 text-uppercase font-italic font-weight-bold" style="font-size:14px;letter-spacing:1px;color:#5A392F;">song name - <span class="text-muted" style="font-size:14px;letter-spacing:2px;">artist</span></span></span>
            </div>
            </div>
            <div class="col-12 mt-3 m-3">
                <div class="card" style="background-color:#FFFFFF;height:200px;max-width:95%;border-radius:0px;overflow:auto;border:0px;">
                    <!--- description --->
                     <p class="text-center p-3" style="color:#5A392F;font-size:16px;">
                  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. 
                  	<br><br>Sed malesuada ultricies tincidunt. Sed odio turpis, bibendum nec justo sed, lacinia sagittis nunc. Mauris facilisis purus neque, id feugiat sem malesuada vel. Aenean id nisl quis nulla vehicula iaculis quis sit amet sapien. Vestibulum faucibus lectus sit amet justo tempus hendrerit. Praesent ut lacus neque. Curabitur vitae sem at sapien rutrum dictum.</p>
                </div>
                <!--- links --->
            <h3 class="text-uppercase pt-3" style="font-size:20px;letter-spacing:3px;color:#5A392F;" align="center">
                      <a href="URLHERE"><span data-toggle="tooltip" title="DEVIANTART"><i class="fab fa-deviantart" style="color:#5A392F;"></i></span></a> •
                      <a href="URLHERE"><span data-toggle="tooltip" title="INSTAGRAM"><i class="fab fa-instagram" style="color:#5A392F;"></i></span></a> •
                      <a href="URLHERE"><span data-toggle="tooltip" title="TUMBLR"><i class="fab fa-tumblr" style="color:#5A392F;"></i></span></a> •
                      <a href="URLHERE"><span data-toggle="tooltip" title="YOUTUBE"><i class="fab fa-youtube" style="color:#5A392F;"></i></span></a> •
                      <a href="URLHERE"><span data-toggle="tooltip" title="TWITTER"><i class="fab fa-twitter" style="color:#5A392F;"></i></span></a>
            </h3>
            <!--- stamps --->
            <img class="m-2" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6acb0953-0c4e-4a3f-82dc-73fcc3ee87f5/dcxq5p8-6b20851b-022b-4ec0-b940-fd0c67550cc6.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNmFjYjA5NTMtMGM0ZS00YTNmLTgyZGMtNzNmY2MzZWU4N2Y1XC9kY3hxNXA4LTZiMjA4NTFiLTAyMmItNGVjMC1iOTQwLWZkMGM2NzU1MGNjNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.xWygwktDA7bTKLEOSW3bWs-P9qkZq6gwiVL1uE-clMs">
            <img class="m-2" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/82b5b638-69d7-4b94-a184-78cc99235a4d/dcv8whz-815a0980-01fd-4205-a2b4-f4933ef95060.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvODJiNWI2MzgtNjlkNy00Yjk0LWExODQtNzhjYzk5MjM1YTRkXC9kY3Y4d2h6LTgxNWEwOTgwLTAxZmQtNDIwNS1hMmI0LWY0OTMzZWY5NTA2MC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.QBh9ycosB7xmUnDU_chirPpTqmaknhcJVqKk8v-j13I">
            <img class="m-2" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf79e087-c4e0-406e-8eed-fc62e1142056/dbsa2tl-f3f40a10-dae1-4e08-89f0-e5410669847c.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvY2Y3OWUwODctYzRlMC00MDZlLThlZWQtZmM2MmUxMTQyMDU2XC9kYnNhMnRsLWYzZjQwYTEwLWRhZTEtNGUwOC04OWYwLWU1NDEwNjY5ODQ3Yy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.S3_XkPteM8vplwhX4_ZdEKNhZVy51bx91uklfC6N-5s">
            </div>
        </div>
      </div>
    </div>
        <!--- credit, dont remove pls! --->
    <a class="d-block text-muted text-center" href="https://toyhou.se/8557759.gleam-of-hope-f2u-html/8557765.user" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>