Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-----------------------------------------------------------------
- MOONSET - Character Profile
- Profile by HTMLobster (noll)
- TOS:
- Do not remove my credit. You may edit it, however.
- You may edit code/frankenstein with others as long as their TOS allows!
- Turn off WYSIWYG and turn on Code Editor.
- Ask me if you want to redistribute edits. Must be F2U.
- ------------------------------------------------------------------>
- <div class="container p-0 p-sm-4" style="max-width:600px;">
- <div class="row no-gutters">
- <div class="col-sm-auto justify-content-center mb-2 mb-sm-0">
- <div style="width:200px">
- <!-- icon background -->
- <div class="rounded-circle p-2" style="height:200px; width:200px; background:linear-gradient(#B9A9E3,#D380E4,#ED80CB,#EE8278,#F7D662); overflow:hidden; border:1px solid #B2DFE3; position:relative; z-index:1;">
- <!-- icon image - blend mode can be changed but overlay, screen, and luminosity work best - square shape is best -->
- <img style="mix-blend-mode:overlay; max-width:200px; margin-top:-8px; margin-left:-8px;" src="IMG_URL">
- </div>
- <!-- animated stars - delete "fa-pulse" to remove animation -->
- <i class="fas fa-star float-right fa-3x fa-pulse" style="color:#B2DFE3; margin-left:-50px; margin-top:-200px; animation-direction:reverse; animation-duration:2.4s; position:relative; z-index:2;"></i>
- <i class="fas fa-star float-left fa-2x ml-2 fa-pulse" style="margin-top:-40px; color:#B2DFE3; animation-duration:2.5s; position:relative; z-index:2;"></i>
- <i class="fas fa-star float-left fa-pulse" style="margin-top:-12px; margin-left:35px; color:#B2DFE3; animation-direction:reverse; animation-duration:2.3s; position:relative; z-index:2;"></i>
- </div>
- </div>
- <!-- right column -->
- <div class="col-sm rounded bg-faded ml-sm-3" style="overflow:hidden; border:1px solid #B2DFE3;">
- <div class="p-2" style="clip-path:polygon(0% 0%, 0% 100%, 100% 0%); background:#B2DFE3; width:50px; height:50px; position:absolute;">
- <div class="bg-faded rounded-circle" style="height:100px; width:100px; margin-top:-8px; margin-left:-8px;"></div>
- </div>
- <!-- text -->
- <div class="px-4 py-3" style="position:relative;">
- <!-- heading -->
- <h1 class="display-4">
- <!-- name -->
- Character Name
- <!-- icon -->
- <span class="float-right"><i class="fas fa-cloud" style="color:#B9A9E3;"></i></span>
- </h1>
- <!-- description - use <br> for line breaks -->
- <div class="text-justify" style="height:125px; overflow:auto;">
- <p>
- <i class="fas fa-leaf" style="color:#B9A9E3;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum sed arcu porta condimentum. Nullam ut volutpat odio, non consequat eros.
- <br>
- <i class="fas fa-flower" style="color:#B9A9E3;"></i> Morbi a lorem fringilla diam convallis interdum ut sed felis.
- </p>
- </div>
- </div>
- <!-- end text -->
- <div style="clip-path:polygon(0% 100%, 100% 0%, 100% 100%); background:#B2DFE3; width:50px; height:50px; position:absolute; bottom:0; right:0;">
- <div class="bg-faded rounded-circle" style="height:100px; width:100px; margin-left:-50px; margin-top:-50px;"></div>
- <div style="position:absolute; bottom:0; right:3px; font-size:12px;">
- <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="code by noll" style="color:#000;"><i class="far fa-code"></i></a>
- </div>
- </div>
- </div>
- </div>
- </div>
Add Comment
Please, Sign In to add comment