API tools faq
paste
Jade-Everstone

rounded code

Jade-Everstone
May 24th, 2021 (edited)
1,325
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.67 KB | None | 0 0
raw download clone embed print report
  1. <!--Rules:
  2.  
  3. You may
  4. -frankenstein with other codes (as long as the creator of said code allows it)
  5. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  6.  
  7. You may not
  8. -Redistribute, resell, and/or claim its yours
  9. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  10.  
  11. Misc Notes:
  12. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  13. -Some basic html knowledge is recommended for editing
  14.  
  15. Default colors:
  16.    Text bubble: #000000
  17.    Navs: rgba (0,0,0,0.65)
  18.  
  19. -->
  20.  
  21. <div class="container">
  22.    
  23.     <div class="card bg-faded border-0 p-4 mb-2" style="
  24.        min-height:600px;
  25.        border-radius:15px;
  26.        background-image:url(#);
  27.        background-size:cover;
  28.        background-position:center;
  29.        background-attachment:fixed;
  30.        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5)
  31.        ">
  32.        
  33.         <div class="row">
  34.            
  35.            
  36.             <!--blurb and character info-->
  37.            
  38.             <div class="col-12 col-lg-6 col-xl-5 order-1 order-lg-2">
  39.                
  40.                
  41.                 <!--text bubble-->
  42.                
  43.                 <div class="card bg-white border-0" style="min-height:125px;border-radius:15px;color:#000000;font-size:20px;">
  44.                     <div class="card-body p-3" style="text-align:center;margin-top:auto;margin-bottom:auto;">
  45.                        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
  46.                     </div>
  47.                 </div>
  48.                
  49.                 <!--end text bubble-->
  50.                
  51.                
  52.                 <!--character image-->
  53.                
  54.                 <div class="card bg-transparent border-0" style="
  55.                    height:475px;
  56.                    background-image:url(https://via.placeholder.com/400px);
  57.                    background-repeat:no-repeat;
  58.                    background-size:contain;
  59.                    background-position:center;
  60.                    ">
  61.                    
  62.                     <!--(text-bubble tail)-->
  63.                    
  64.                     <div class="card bg-white border-0 rounded-0" style="width:30px; height:25px; margin-left:45px; clip-path:polygon(100% 0%, 0% 0%, 50% 100%);"></div>
  65.                    
  66.                 </div>
  67.                
  68.                 <!--end character image-->
  69.                
  70.                
  71.                 <!--image credit-->
  72.                        
  73.                     <span style="position:absolute; bottom:3px; right:5px;" >
  74.                         <a href="#" class="text-white px-1" data-toggle="tooltip" title="img credit" style="text-shadow: 0px 0px 5px #000000;"><i class="fas fa-user"></i> </a>
  75.                    
  76.                         <a href="#" class="text-white px-1" data-toggle="tooltip" title="bg credit" style="text-shadow: 0px 0px 5px #000000;"><i class="fas fa-image"></i> </a>
  77.                     </span>
  78.                    
  79.                 <!--end image credit-->
  80.                
  81.             </div>
  82.            
  83.             <!--end blurb and character info-->
  84.            
  85.            
  86.             <!--info-->
  87.            
  88.             <div class="col-12 col-lg-6 col-xl-7 order-3 order-lg-1">
  89.                 <div class="card border-0 h-100" style="border-radius:15px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5)">
  90.                    
  91.                     <div class="card-body p-3">
  92.  
  93.                            
  94.                         <!--basics-->
  95.                        
  96.                         <div class="carousel-item active">
  97.                             <div class="card bg-faded border-0 p-2" style="border-radius:20px;font-weight:bold;text-align:center;font-size:18px;">
  98.                             <p>First off, let's get the basics down.</p>
  99.                         </div>
  100.                        
  101.                        
  102.                         <div class="row my-2 mx-4 mb-3" style="font-size:17px;">
  103.                            
  104.                             <div class="col-12 col-sm-6 col-lg-12 col-xl-6 mb-2">
  105.                                 <p> <i class="fas fa-pen-alt"></i> Name</p>
  106.                             </div>
  107.                            
  108.                             <div class="col-12 col-sm-6 col-lg-12 col-xl-6 mb-2">
  109.                                 <p> <i class="fas fa-venus-mars"></i> Gender (pro/noun)</p>
  110.                             </div>
  111.                            
  112.                             <div class="col-12 col-sm-6 col-lg-12 col-xl-6 mb-2">
  113.                                 <p> <i class="fas fa-paw"></i> Species and/or Race</p>
  114.                             </div>
  115.                            
  116.                             <div class="col-12 col-sm-6 col-lg-12 col-xl-6 mb-2">
  117.                                 <p> <i class="fas fa-birthday-cake"></i> Birthday</p>
  118.                             </div>
  119.                            
  120.                             <div class="col-12 col-sm-6 col-lg-12 col-xl-6 mb-2">
  121.                                 <p> <i class="fas fa-circle"></i> (content)</p>
  122.                             </div>
  123.                            
  124.                             <div class="col-12 col-sm-6 col-lg-12 col-xl-6 mb-2">
  125.                                 <p> <i class="fas fa-circle"></i> (content)</p>
  126.                             </div>
  127.                            
  128.                         </div>
  129.                        
  130.                         <!--end basics-->
  131.                        
  132.                        
  133.                         <div class="card bg-faded border-0 p-2" style="border-radius:20px;font-weight:bold;text-align:center;font-size:18px">
  134.                             <p>Tell me a little about yourself!</p>
  135.                         </div>
  136.                        
  137.                         <div class="card-body px-3 mt-2 mb-3">
  138.                             <p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."</p>
  139.                         </div>
  140.                        
  141.                        
  142.                        
  143.                         <div class="card bg-faded border-0 p-2" style="border-radius:20px;font-weight:bold;text-align:center;font-size:18px">
  144.                             <p>Got any interests? Or dislikes?</p>
  145.                         </div>
  146.                        
  147.                         <div class="row my-2 mx-4 mb-3" style="font-size:17px;">
  148.                            
  149.                             <!--likes section-->
  150.                             <div class="col-12 col-sm-6 col-lg-12 col-xl-6 mb-2">
  151.                                 <span> <i class="fas fa-heart"></i> "Something I like!"</span> <br class="mb-2">
  152.                                 <span> <i class="fas fa-heart"></i> "Another thing I like."</span> <br class="mb-2">
  153.                                 <span> <i class="fas fa-heart"></i> "Oh yeah! I like this too!"</span> <br class="mb-2">
  154.                             </div>
  155.                            
  156.                             <!--dislike section-->
  157.                             <div class="col-12 col-sm-6 col-lg-12 col-xl-6 mb-2">
  158.                                 <span> <i class="fas fa-heart-broken"></i> "Something I don't like."</span> <br class="mb-2">
  159.                                 <span> <i class="fas fa-heart-broken"></i> "This thing too..."</span> <br class="mb-2">
  160.                                 <span> <i class="fas fa-heart-broken"></i> "Also not a fan of this one"</span> <br class="mb-2">
  161.                             </div>
  162.                            
  163.                         </div>
  164.                         </div>
  165.                        
  166.                         <!--end info-->
  167.                        
  168.                        
  169.                     </div>
  170.                    
  171.                 </div>
  172.             </div>
  173.            
  174.             <!--end info-->
  175.            
  176.            
  177.         </div>
  178.        
  179.        
  180.     </div>
  181.    
  182.     <!--Credit. You may move , but please do not delete/remove-->
  183.    
  184.     <p style="text-align:right">HTML by <a href="https://toyhou.se/11226005"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
  185.    
  186. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!