API tools faq
paste
Advertisement
Euna-

[f2u] char. html Ahri

Euna-
Sep 12th, 2022 (edited)
217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.92 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. __________________________
  4. this code uses custom colors:
  5.  
  6. accent color #565cb3
  7. header text color #c4f0ff
  8. regular text color #46427d
  9. text background color #fcfdff
  10. secondary background color: #edf1ff
  11. __________________________
  12.  
  13. more info about the icons on fontawesome.com
  14.  
  15. -->
  16.  
  17.  
  18. <!-- center content -->
  19. <center>
  20.  
  21. <!-- outline box -->
  22. <div class="card p-2 mb-2" style="max-width:880px; border-radius:20px; overflow:auto; background:#565cb3 ;">
  23.    
  24.     <h1 style="color: #c4f0ff"> Profile </h1>
  25.    
  26.    
  27. <!-- main background box -->
  28.     <div class="card p-4 mb-0" style="border-radius:14px; background:#edf1ff ;
  29.    
  30.    background:url(
  31.    https://i.ibb.co/3dM1bt0/jw-T03l-C-lighter.jpg
  32.    ) fixed center;">
  33.        
  34.        
  35.        
  36. <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------->        
  37. <div class="row">
  38.     <div class="col-sm-3 mb-1">        
  39.        
  40.  
  41.     <div class="card p-2 mb-3" style="border-radius:20px; background:#565cb3;">  
  42.        
  43.         <!---profile image-->
  44.     <img class="mx-auto mb-2"
  45.    src="
  46.    https://media.discordapp.net/attachments/965593531311849493/1005547583114055730/ahri_edited.png
  47.    " style="border-radius: 16px; border: 2px solid #fcfdff; ">
  48.    
  49.     <!-- end profile image--->
  50.    
  51.     <!---name-->
  52.         <h2 style="color: #c4f0ff"> Name_here</h2>
  53.        
  54.     </div>
  55.    
  56.    
  57.     </div>
  58.     <div class="col-sm-9 mb-1">
  59.    
  60. <!-- stats box ------------------------------------------------
  61. feel free to add or remove
  62. ------------------------------------------------------------------>    
  63. <div class="card p-2 mb-3" style="border-radius:20px; background:#565cb3;">
  64.    
  65.     <h2 style="color: #c4f0ff"> Basics </h2>
  66.    
  67.     <div class="card p-3 mb-" style="height:160px; border-radius:14px; overflow:auto; background:#fcfdff ;">
  68.         <div class="row">
  69.                <div class="col-sm-6 mb-1">
  70.                      <div class="d-flex justify-content-between">
  71.                      <span style="color:#46427d"><b>Name</b> <i class="fa-solid fa-signature"></i></span>
  72.                      <span style="color:#46427d">content</span>
  73.                      </div>
  74.                 </div>    
  75.                      
  76.                 <div class="col-sm-6 mb-1">
  77.                     <div class="d-flex justify-content-between">    
  78.                      <span style="color:#46427d"><b>Nicknames </b> <i class="fa-solid fa-pen-line"></i> </span>
  79.                      <span style="color:#46427d">content</span>
  80.                      </div>
  81.                 </div>    
  82.                      
  83.                 <div class="col-sm-6 mb-1">
  84.                      <div class="d-flex justify-content-between">    
  85.                      <span style="color:#46427d"><b>Age </b> <i class="fa-solid fa-cake-candles"></i> </span>
  86.                      <span style="color:#46427d">content</span>
  87.                      </div>
  88.                 </div>    
  89.                      
  90.                 <div class="col-sm-6 mb-1">
  91.                      <div class="d-flex justify-content-between">    
  92.                      <span style="color:#46427d"><b>Birthday </b> <i class="fa-solid fa-calendar"></i></span>
  93.                      <span style="color:#46427d">content</span>
  94.                      </div>
  95.                 </div>    
  96.                        
  97.                 <div class="col-sm-6 mb-1">
  98.                      <div class="d-flex justify-content-between">    
  99.                      <span style="color:#46427d"><b>Gender </b> <i class="fa-solid fa-venus-mars"></i></span>
  100.                      <span style="color:#46427d">content</span>
  101.                      </div>
  102.                 </div>  
  103.                
  104.                 <div class="col-sm-6 mb-1">
  105.                      <div class="d-flex justify-content-between">    
  106.                      <span style="color:#46427d"><b>Orientation </b> <i class="fa-solid fa-heart"></i></span>
  107.                      <span style="color:#46427d">content</span>
  108.                      </div>
  109.                 </div>  
  110.                
  111.                 <div class="col-sm-6 mb-1">
  112.                      <div class="d-flex justify-content-between">    
  113.                      <span style="color:#46427d"><b>Height </b> <i class="fa-solid fa-ruler"></i></span>
  114.                      <span style="color:#46427d">content</span>
  115.                      </div>
  116.                 </div>
  117.                
  118.                 <div class="col-sm-6 mb-1">
  119.                      <div class="d-flex justify-content-between">    
  120.                      <span style="color:#46427d"><b>Species </b> <i class="fa-solid fa-person"></i></span>
  121.                      <span style="color:#46427d">content</span>
  122.                      </div>
  123.                 </div>
  124.                
  125.                 <div class="col-sm-6 mb-1">
  126.                      <div class="d-flex justify-content-between">    
  127.                      <span style="color:#46427d"><b>Race </b> <i class="fa-solid fa-dna"></i></span>
  128.                      <span style="color:#46427d">content</span>
  129.                      </div>
  130.                 </div>
  131.                
  132.                 <div class="col-sm-6 mb-1">
  133.                      <div class="d-flex justify-content-between">    
  134.                      <span style="color:#46427d"><b>Occupation </b> <i class="fa-solid fa-briefcase"></i></span>
  135.                      <span style="color:#46427d">content</span>
  136.                      </div>
  137.                 </div>  
  138.                      
  139.                    
  140.                      
  141.  
  142.         </div>
  143.     </div>
  144. </div>
  145. <!------------------------------>
  146.  
  147.     </div>
  148.  
  149.  
  150.  
  151.  
  152.  
  153. </div>
  154.  
  155.        
  156.    
  157. <!-- end stats box info -->
  158.    
  159.    
  160. <!-- likes dislikes box ------>
  161.  
  162.  
  163.   <div class="row">
  164.            
  165.               <div class="col-sm-6 mb-3">
  166.                    <div class="card p-2 mb-2" style="border-radius:20px; background:#565cb3;">
  167.                         <h2 style="color: #c4f0ff"> Likes </h2>      
  168.                   <div class="card p-3 mb-0" style="height:120px; border-radius:14px; overflow:auto; background:#fcfdff ;">
  169.                      
  170.                       <p style="color:#46427d ; text-align:left;">
  171.                           <i class="fa-solid fa-angles-right"></i>
  172.                           content <br>
  173.                          
  174.                           <i class="fa-solid fa-angles-right"></i>
  175.                           content <br>
  176.                          
  177.                           <i class="fa-solid fa-angles-right"></i>
  178.                           content <br>
  179.                          
  180.                           <i class="fa-solid fa-angles-right"></i>
  181.                           content <br>
  182.                          
  183.                       </p>
  184.                      
  185.                           </div>
  186.                       </div>
  187.                 </div>  
  188.              
  189.               <div class="col-sm-6 mb-3">
  190.                    <div class="card p-2 mb-2" style="border-radius:20px; background:#565cb3;">
  191.                         <h2 style="color: #c4f0ff"> Dislikes </h2>      
  192.                   <div class="card p-3 mb-0" style="height:120px; border-radius:14px; overflow:auto; background:#fcfdff ;">
  193.                      
  194.                       <p style="color:#46427d ; text-align:left;">
  195.                           <i class="fa-solid fa-angles-right"></i>
  196.                           content <br>
  197.                          
  198.                           <i class="fa-solid fa-angles-right"></i>
  199.                           content <br>
  200.                          
  201.                           <i class="fa-solid fa-angles-right"></i>
  202.                           content <br>
  203.                          
  204.                           <i class="fa-solid fa-angles-right"></i>
  205.                           content <br>
  206.                          
  207.  
  208.                       </p>
  209.  
  210.                          
  211.                           </div>
  212.                       </div>
  213.                 </div>  
  214.  
  215.      </div>
  216.  
  217.         <!-- end likes dislikes-->          
  218.        
  219.    
  220. <!-- profile text box------->    
  221.  
  222. <div class="card p-2 mb-0" style="border-radius:20px; background:#565cb3;">
  223.     <h2 style="color: #c4f0ff"> About </h2>    
  224.         <div class="card p-3 mb-" style="height:200px; border-radius:14px; overflow:auto; background:#fcfdff ;">
  225.    
  226.  
  227.     <!--profile text -->
  228.     <p style="color:#46427d ; text-align:left;">
  229.        
  230.     This box will scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet cursus sit amet dictum. Facilisi etiam dignissim diam quis enim lobortis. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Dui sapien eget mi proin sed libero enim sed. Eget aliquet nibh praesent tristique magna sit amet. Euismod in pellentesque massa placerat duis ultricies. Placerat orci nulla pellentesque dignissim.
  231.    
  232.     <p style="color:#46427d ; text-align:left;">
  233.     Imperdiet proin fermentum leo vel orci porta non. Quisque sagittis purus sit amet volutpat consequat. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Arcu felis bibendum ut tristique et egestas quis ipsum. Vulputate odio ut enim blandit volutpat maecenas. Tortor posuere ac ut consequat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. In hac habitasse platea dictumst.
  234.    
  235.     </p>
  236.     <!-- end profile text -->
  237.  
  238.     </div>
  239.     <!-- end profile text box-->
  240.    
  241.  
  242.     </div>
  243.     <!--end  main background box -->
  244.    
  245.  
  246.  
  247. </center>    
  248. <!-- end center content -->
  249.  
  250.  
  251. <!-- code credits
  252. -->
  253. </div>
  254. </div>
  255. <center>
  256.    
  257. <font>
  258.     <span data-toggle="tooltip" title="HTML Code by @/Euna"><a href="https://toyhou.se/Euna">
  259. <i class="fa-light fa-bolt-lightning"></i> <i class="fa-light fa-code"></i>
  260.  
  261. </a>
  262. </span>
  263.  
  264. <!-- end code credits -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!