Advertisement
PandoraLights

Genshin edit

Jan 26th, 2022
1,346
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--------------------------------------------------------------------------------
  2.  
  3. SPLASH profile by JUNI
  4.  
  5. This profile is based off the character splash pages on the MIHOYO website and
  6. I do not claim the design as something of my original creation. That being
  7. said, it is offered for free and should not be resold/redistributed for money.
  8. You are free to edit it!
  9.  
  10. Please edit the code with WYSIWYG turned off and Code Editor turned on.
  11. I personally recommend editing the code in a code editor like Visual Studio Code
  12. OR using the very handy live-preview website:
  13. https://th.circlejourney.net/
  14. You may alter/relocate/restyle coding credit, but please do not remove it.
  15.  
  16. -------------------------------------------------------------------------------->
  17.  
  18. <div class="container px-0 py-0" style="max-width: 1200px; background-color: black; border-radius: 10px;">
  19. <!--------------------------------------------------------------------------------
  20.  
  21. FOR BACKGROUND IMAGE
  22. It is set to be left-aligned, non-repeating. You'll want something at least 650 x 710 px.
  23. You can alter the positioning if you'd like by changing the "background-position" to "center".
  24.  
  25. GENSHIN COUNTRIES
  26. Mondstadt, Daytime https://uploadstatic-sea.mihoyo.com/contentweb/20200211/2020021114281584004.jpg
  27. Mondstadt, Evening https://uploadstatic-sea.mihoyo.com/contentweb/20200211/2020021114281985438.jpg
  28. Liyue, Daytime https://uploadstatic-sea.mihoyo.com/contentweb/20200526/2020052612332812636.jpg
  29. Liyue, Evening https://uploadstatic-sea.mihoyo.com/contentweb/20200526/2020052612332536813.jpg
  30. Inazuma, Daytime https://uploadstatic-sea.mihoyo.com/contentweb/20210715/2021071516521972191.jpg
  31. Inazuma, Evening https://uploadstatic-sea.mihoyo.com/contentweb/20210715/2021071516524062780.jpg
  32.  
  33. -------------------------------------------------------------------------------->
  34. <div class="container" style="max-width: 1200px; background-image: url('https://uploadstatic-sea.mihoyo.com/contentweb/20210715/2021071516524062780.jpg'); background-repeat: no-repeat; background-position: left; border-radius: 10px; overflow: hidden;">
  35.  
  36. <!-- Decorative Shapes -->
  37. <div class="d-lg-flex d-none">
  38. <img style="position: absolute; top: 0px; left: -15px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/37816583_jr7vq8m46u5fQC0.png">
  39. <img style="position: absolute; top: 0px; left: 31px; opacity: .3" src="https://f2.toyhou.se/file/f2-toyhou-se/images/37816555_3ZMfJJO8CGgiHAF.png">
  40. </div>
  41. <div class="row">
  42. <!--------------------------------------------------------------------------------
  43.  
  44. DESKTOP NAVIGATION
  45. There is another section further below 'MOBILE NAVIGATION' be sure to alter both sections.
  46.  
  47. -------------------------------------------------------------------------------->
  48. <div class="col-lg-2 pl-0 d-lg-flex d-none" style="margin-top: 100px;">
  49. <ul class="nav flex-column" style="font-family: georgia; font-size: 1.4rem; text-shadow: 0px 0px 3px rgba(0,0,0,1);">
  50. <!-- nav link -->
  51. <li class="nav-item mb-3">
  52. <a class="text-white nav-link" data-toggle="tab" href="#tab1">
  53. <span style="text-shadow: 0px 0px 3px rgb(255,0,0);"></span></a>
  54. </li>
  55. <br>
  56. <!-- nav link -->
  57. <li class="nav-item mb-3">
  58. <a class="text-white nav-link" data-toggle="tab" href="#tab2">
  59. <span style="text-shadow: 0px 0px 3px rgb(255, 136, 0);"></span></a>
  60. </li>
  61. <br>
  62. <!-- nav link -->
  63. <li class="nav-item mb-3">
  64. <a class="text-white nav-link" data-toggle="tab" href="#tab3">
  65. <span style="text-shadow: 0px 0px 3px rgb(229, 255, 0);"></span></a>
  66. </li>
  67. <br>
  68. <!-- nav link -->
  69. <li class="nav-item mb-3">
  70. <a class="text-white nav-link" data-toggle="tab" href="#tab4">
  71. <span style="text-shadow: 0px 0px 3px rgb(0, 255, 13);"></span></a>
  72. </li>
  73. <br>
  74. <!-- nav link -->
  75. <li class="nav-item mb-3">
  76. <a class="text-white nav-link" data-toggle="tab" href="#tab5">
  77. <span style="text-shadow: 0px 0px 3px rgb(0, 162, 255);"></span></a>
  78. </li>
  79. </ul>
  80. </div>
  81. <!---------------- Character Art ---------------->
  82. <div class="col-lg-10" style="background-image: url('https://cdn.discordapp.com/attachments/791860616443854849/935807143762862130/256.png'); background-repeat: no-repeat; background-position: right top; background-size: contain;">
  83. <!-- Content -->
  84. <div class="row">
  85. <div class="col-12 d-lg-flex d-none" style="margin-top: 80px;"></div>
  86. <div class="col-lg-6 p-2 mx-md-4 mx-2">
  87. <!--------------------------------------------------------------------------------
  88.  
  89. FOR BACKGROUND ELEMENT
  90. It is a large white 400 x 420 px image.
  91.  
  92. GENSHIN ELEMENTS
  93. Geo https://uploadstatic-sea.mihoyo.com/contentweb/20201216/2020121611210150023.png
  94. Anemo https://uploadstatic-sea.mihoyo.com/contentweb/20200723/2020072319133258916.png
  95. Electro https://uploadstatic-sea.mihoyo.com/contentweb/20200330/2020033022174332519.png
  96. Pyro https://uploadstatic-sea.mihoyo.com/contentweb/20200312/2020031220003686233.png
  97. Hydro https://uploadstatic-sea.mihoyo.com/contentweb/20191009/2019100912281839220.png
  98. Cryo https://uploadstatic-sea.mihoyo.com/contentweb/20191009/2019100910341145525.png
  99. Dendro --
  100.  
  101. -------------------------------------------------------------------------------->
  102. <img style="position: absolute; top: -0px; left: -60px; opacity: .1; z-index: 0;" src="https://uploadstatic-sea.mihoyo.com/contentweb/20191009/2019100912281839220.png">
  103. <hr style="position: relative; top: -40px; left: -7.5%; border: 2px solid; border-color: #E3BC8C; width: 84%;">
  104. <!---------------- Character Name ---------------->
  105. <h1 class="text-uppercase text-white" style="position: relative; top: -40px; font-family: Georgia; font-size: 2rem; letter-spacing: 6px; text-shadow: 0px 0px 3px rgba(0,0,0,1);">Manahimeko Seiji</h1>
  106. <div class="col-12 d-lg-none d-flex" style="margin-top: 140px;"></div>
  107. <div class="row no-gutters">
  108.    
  109. <!--
  110.  
  111.  TERMS OF SERVICE
  112.  ✦ Please do not remove credit.
  113.  ✦ You may edit and frankenstein them (if the other coder/s allow it too).
  114.  ✦ You may use my codes as reference but don't heavily reference or steal chunks of it.
  115.  ✦ Do not steal, claim, redistribute or make profit from my codes. This also applies to edits.
  116.  ✦ You are responsible for your own edits.
  117.  
  118.  NOTES
  119.  ✦ Always have WYSIWYG turned OFF and Code Editor turned ON when editing. Otherwise the code will break.
  120.  
  121.  TIPS
  122.  ✦ To change the colours, press ctrl + F, type in hex code you want to replace, click on + and replace "all" with a different hex code
  123.  ✦ Get hex codes here: https://www.w3schools.com/colors/colors_picker.asp
  124.  ✦ Get more icons here: https://fontawesome.com/icons?d=gallery
  125.  
  126.  ACCENT COLOURS
  127.  ✦ Theme:          #75B9FF
  128.  ✦ White Text:     #fff
  129.  
  130. -->
  131.  
  132. <div class="mx-auto text-muted my-5" style="max-width: 580px; font-size: 12px; letter-spacing: .6px;">
  133.  
  134. <!-- BG ------------------------------------->
  135. <div style="position: relative; top: -60px; border-radius: 8px 8px 0px 0px; height: 100px;
  136.  
  137.  /*-- Note: Replace URL between () brackets to change image or leave empty to use flat colour --*/;
  138.  
  139.  background: #75B9FF url() center; background-size: cover;">
  140.  
  141.   <div class="row no-gutters">
  142.    
  143.     <!-- ICON | Replace URL to change image -->
  144.     <div class="col hidden-sm-down">
  145.       <img src="https://images.unsplash.com/photo-1629226772043-41e90a3c2121?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=671&q=80" class="fr-rounded d-block mx-auto bg-faded mb-3" style="height: 120px; width: 120px; padding: 4px; margin-top: 30px; object-fit: cover; position: relative; top: -53px;">
  146.     </div>
  147.     <!-- ------->
  148.    
  149.     <!-- NAME & INFO -->
  150.     <div class="col-md-8" style="color: #fff;">
  151.      
  152.       <!-- NAME -->
  153.       <div class="text-truncate px-3 px-md-2" style="margin-top: 20px; padding: 2px 0px; background: linear-gradient(135deg, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0) ); font-weight: 500; letter-spacing: 1px; font-size: 16px;">
  154.          
  155.        
  156.       </div>
  157.      
  158.       <!-- QUOTE | Try to keep it short -->
  159.       <div class="text-truncate px-3 px-md-2" style="padding: 0px 6px; height: 32px;">
  160.          
  161.         "Write a short quote here."
  162.        
  163.       </div>
  164.      
  165.       <!-- MUSIC -->
  166.       <div class="text-right" style="padding: 0px 6px;">
  167.        
  168.         <!-- Song Title -->
  169.         <span>Song Title</span>
  170.        
  171.         <!-- HOW TO ADD MUSIC ---
  172.        
  173.        Copy and paste the id at the end of a youtube link after the = symbol (don't copy the entire link or it will not work!)
  174.          
  175.          Example. Link = https://www.youtube.com/watch?v=PBZICTaUmU0
  176.          Embed link    = https://www.youtube.com/embed/PBZICTaUmU0
  177.        
  178.        ------------------------>
  179.        
  180.         <iframe src="https://www.youtube.com/embed/"
  181.          frameborder="0" style="height: 16px; width: 16px; opacity: 0; position: absolute; z-index: 1000;" allow="autoplay;"></iframe><i class="fas fa-music"/>
  182.          
  183.       </div>
  184.      
  185.     </div>
  186.     <!-- -------------->
  187.    
  188.   </div>
  189. </div>
  190. <!-- ---------------------------------------->
  191.  
  192. <!-- PROFILE -------------------------------->
  193. <div class="bg-faded p-3" style="border-radius: 0px 0px 8px 8px; position: relative; top: -60px;">
  194. <div class="row no-gutters">
  195.  
  196.   <!-- INFO -->
  197.   <div class="col-md-4 mb-2 mb-md-0 mt-sm-5 pr-0 pr-md-3">
  198.    
  199.     <!-- Name -->
  200.     <div class="row no-gutters mb-2">
  201.       <div class="col-2 text-center px-1 tooltipster" title="Nickname" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  202.         <i class="fas fa-signature fa-fw"/>
  203.       </div>
  204.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  205.          
  206.         Seisei
  207.        
  208.       </div>
  209.     </div>
  210.    
  211.     <!-- Age or Birthday -->
  212.     <div class="row no-gutters mb-2">
  213.       <div class="col-2 text-center px-1 tooltipster" title="Birthday" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  214.         <i class="fas fa-birthday-cake fa-fw"/>
  215.       </div>
  216.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  217.          
  218.         Info
  219.        
  220.       </div>
  221.     </div>
  222.    
  223.     <!-- Gender -->
  224.     <div class="row no-gutters mb-2">
  225.       <div class="col-2 text-center px-1" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  226.         <i class="far fa-venus-mars fa-fw tooltipster" title="Gender"/>
  227.       </div>
  228.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  229.          
  230.         Male
  231.        
  232.       </div>
  233.     </div>
  234.    
  235.     <!-- Height -->
  236.     <div class="row no-gutters mb-2">
  237.       <div class="col-2 text-center px-1 tooltipster" title="Height" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  238.         <i class="fas fa-ruler-vertical fa-fw"/>
  239.       </div>
  240.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  241.          
  242.         5'9
  243.        
  244.       </div>
  245.     </div>
  246.    
  247.     <!-- Hair -->
  248.     <div class="row no-gutters mb-2">
  249.       <div class="col-2 text-center px-1 tooltipster" title="Hair" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  250.         <i class="fas fa-head-side fa-fw"/>
  251.       </div>
  252.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  253.          
  254.         Raven
  255.        
  256.       </div>
  257.     </div>
  258.    
  259.     <!-- Height -->
  260.     <div class="row no-gutters mb-2">
  261.       <div class="col-2 text-center px-1 tooltipster" title="Eyes" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  262.         <i class="fas fa-eye fa-fw"/>
  263.       </div>
  264.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  265.          
  266.         Gold
  267.        
  268.       </div>
  269.     </div>
  270.    
  271.     <!-- Main Weapon -->
  272.     <div class="row no-gutters mb-2">
  273.       <div class="col-2 text-center px-1 tooltipster" title="Weapon" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  274.         <i class="fas fa-sword fa-fw"/>
  275.       </div>
  276.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  277.          
  278.         Bow
  279.        
  280.       </div>
  281.     </div>
  282.    
  283.     <!-- Vision -->
  284.     <div class="row no-gutters mb-2">
  285.       <div class="col-2 text-center px-1 tooltipster" title="Vision" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  286.         <i class="fas fa-star-christmas fa-fw"/>
  287.       </div>
  288.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  289.          
  290.         Hydro
  291.        
  292.       </div>
  293.     </div>
  294.    
  295.     <!-- Occupation -->
  296.     <div class="row no-gutters mb-2 mb-md-0">
  297.       <div class="col-2 text-center px-1 tooltipster" title="Occupation" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
  298.         <i class="fas fa-briefcase fa-fw"/>
  299.       </div>
  300.       <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">
  301.          
  302.         Rich Person TM
  303.        
  304.       </div>
  305.     </div>
  306.    
  307.   </div>
  308.   <!-- ------->
  309.  
  310. <!-- ABOUT -->
  311. <div class="col-md-8">
  312.      
  313. <!-- BUTTONS ------------------------------------->
  314. <ul class="row no-gutters nav mb-2">
  315.   <li class="col nav-item my-auto" style="background: #75B9FF; border-radius: 10px 0px 0px 10px;">
  316.     <a class="btn btn-outline-secondary border-0 d-flex nav-link active tooltipster p-1" style="border-radius: 10px 0px 0px 10px; color: #fff;" title="About" data-toggle="tab" href="#about"><i class="fas fa-feather m-auto"></i></a>
  317.   </li>
  318.   <li class="col nav-item my-auto" style="background: #75B9FF;">
  319.     <a class="btn btn-outline-secondary border-0 rounded-0 d-flex nav-link tooltipster p-1" style="color: #fff;" title="Personality" data-toggle="tab" href="#personality"><i class="fas fa-moon-stars m-auto"></i></a>
  320.   </li>
  321.   <li class="col nav-item my-auto" style="background: #75B9FF;">
  322.     <a class="btn btn-outline-secondary border-0 rounded-0 d-flex nav-link tooltipster p-1" style="color: #fff;" title="Trivia" data-toggle="tab" href="#trivia"><i class="fas fa-puzzle-piece m-auto"></i></a>
  323.   </li>
  324.   <li class="col nav-item my-auto" style="background: #75B9FF;">
  325.     <a class="btn btn-outline-secondary border-0 rounded-0 d-flex nav-link tooltipster p-1" style="color: #fff;" title="Moodboard" data-toggle="tab" href="#moodboard"><i class="fas fa-images m-auto"></i></a>
  326.   </li>
  327.   <li class="col nav-item my-auto" style="background: #75B9FF; border-radius: 0px 10px 10px 0px;">
  328.     <a class="btn btn-outline-secondary border-0 d-flex nav-link tooltipster p-1" style="border-radius: 0px 10px 10px 0px; color: #fff;" title="Relationships" data-toggle="tab" href="#relations"><i class="fas fa-user-friends m-auto"></i></a>
  329.   </li>
  330. </ul>
  331. <!-- /BUTTONS ------------------------------------>
  332.  
  333. <div class="tab-content table-responsive text-justify pr-1" style="height: 280px; overflow: auto; overflow-x: hidden;">
  334.    
  335. <!-- ABOUT --------------------------------------->
  336. <div class="tab-pane fade active show" id="about">
  337.  
  338.   <!-- TEXT -->
  339.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in sodales massa, eget mollis lorem. Aliquam erat volutpat. Sed et dui turpis. Integer at ante nibh. Nunc mattis lorem sed suscipit condimentum. Donec nisl nulla, mattis sit amet mollis vitae, pretium sit amet erat. Vestibulum hendrerit augue lorem.</p>
  340.   <p>Morbi diam enim, vestibulum vel ullamcorper dapibus, ultrices eu nibh. Donec facilisis velit a quam feugiat, quis faucibus est dapibus. Morbi at euismod dui, a commodo sapien. Suspendisse potenti. Duis dapibus metus quis venenatis hendrerit. Donec turpis augue, feugiat quis neque et, venenatis porttitor quam. Nam accumsan lobortis tincidunt. Sed felis dui, condimentum non luctus ac, tristique non nisi.</p>
  341.   <!-- /TEXT -->
  342.  
  343. </div>
  344. <!-- --------------------------------------------->
  345.  
  346. <!-- PERSONALITY --------------------------------->
  347. <div class="tab-pane fade" id="personality">
  348. <div class="row">
  349.      
  350.   <!-- Tip: Change the width % to adjust the slider -->
  351.  
  352.   <div class="col-6 mb-2">
  353.     <div class="d-flex justify-content-between mb-1">
  354.       <span>Introvert</span>
  355.       <span>Extrovert</span>
  356.     </div>
  357.     <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
  358.       <div class="progress-bar" style="background: #75B9FF;
  359.        width: 70%;"></div>
  360.     </div>
  361.   </div>
  362.  
  363.   <div class="col-6 mb-2">
  364.     <div class="d-flex justify-content-between mb-1">
  365.       <span>Irrational</span>
  366.       <span>Logical</span>
  367.     </div>
  368.     <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
  369.       <div class="progress-bar" style="background: #75B9FF;
  370.        width: 38%;"></div>
  371.     </div>
  372.   </div>
  373.  
  374.   <div class="col-6 mb-2">
  375.     <div class="d-flex justify-content-between mb-1">
  376.       <span>Passive</span>
  377.       <span>Assertive</span>
  378.     </div>
  379.     <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
  380.       <div class="progress-bar" style="background: #75B9FF;
  381.        width: 27%;"></div>
  382.     </div>
  383.   </div>
  384.  
  385.   <div class="col-6 mb-2">
  386.     <div class="d-flex justify-content-between mb-1">
  387.       <span>Serious</span>
  388.       <span>Playful</span>
  389.     </div>
  390.     <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
  391.       <div class="progress-bar" style="background: #75B9FF;
  392.        width: 50%;"></div>
  393.     </div>
  394.   </div>
  395.  
  396.   <div class="col-6 mb-2">
  397.     <div class="d-flex justify-content-between mb-1">
  398.       <span>Spiteful</span>
  399.       <span>Kind</span>
  400.     </div>
  401.     <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
  402.       <div class="progress-bar" style="background: #75B9FF;
  403.        width: 40%;"></div>
  404.     </div>
  405.   </div>
  406.  
  407.   <div class="col-6 mb-2">
  408.     <div class="d-flex justify-content-between mb-1">
  409.       <span>Pessimistic</span>
  410.       <span>Optimistic</span>
  411.     </div>
  412.     <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
  413.       <div class="progress-bar" style="background: #75B9FF;
  414.        width: 69%;"></div>
  415.     </div>
  416.   </div>
  417.  
  418. </div>
  419.  
  420. <hr class="my-2">
  421.  
  422.   <!-- Description -->
  423.   <p>Seiji as apart of the Manahimeko family, has a good public image of being kind and compassionate. However, under the private cover of a meeting room, Seji can prove to be quite the intimidating person. While he rarely get's physical with business deals, he's got the demeanor that shows he's willing. His aggression is mostly shone through spiteful words, and petty actions. Despite his business demeanor, Seiji is a very playful person. Commonly telling jokes and messing with people. Outside of business affairs, Seiji truly is a nice person. While he is frequently in public, and talking in meetings, he's quite the introvert. He much prefers to take lone strolls, and rest out in the empty areas.</p>
  424.   <!-- /Description -->
  425.  
  426. </div>
  427. <!-- --------------------------------------------->
  428.  
  429. <!-- TRIVIA -------------------------------------->
  430. <div class="tab-pane fade" id="trivia">
  431.  
  432.   <!-- Likes -->
  433.   <div class="mb-2">
  434.     <div class="d-flex justify-content-between mb-2" style="border-radius: 20px; padding: 2px 10px; background: #75B9FF; color: #fff; font-weight: 500; letter-spacing: 1px;">
  435.       Likes<i class="fas fa-heart fa-fw my-auto"/>
  436.     </div>
  437.     <ul class="pl-4 mb-3">
  438.        
  439.       <li>Kiba <3</li>
  440.       <li>Strolls through the fields</li>
  441.       <li>His afternoon tea</li>
  442.    
  443.     <!-- Add more above this line -->
  444.     </ul>
  445.   </div>
  446.  
  447.   <!-- Dislikes -->
  448.   <div class="mb-2">
  449.     <div class="d-flex justify-content-between mb-2" style="border-radius: 20px; padding: 2px 10px; background: #75B9FF; color: #fff; font-weight: 500; letter-spacing: 1px;">
  450.       Dislikes<i class="fas fa-times fa-fw my-auto"/>
  451.     </div>
  452.     <ul class="pl-4 mb-3">
  453.        
  454.       <li>Snobby Business men</li>
  455.       <li>Tsurumi Island >:(</li>
  456.       <li>Being in crowded areas for too long</li>
  457.    
  458.     <!-- Add more above this line -->
  459.     </ul>
  460.   </div>
  461.  
  462.   <!-- Trivia -->
  463.   <div class="d-flex justify-content-between mb-2" style="border-radius: 20px; padding: 2px 10px; background: #75B9FF; color: #fff; font-weight: 500; letter-spacing: 1px;">
  464.       Trivia<i class="fas fa-flask fa-fw my-auto"/>
  465.   </div>
  466.   <ul class="pl-4 mb-3">
  467.    
  468.     <li>Pre-Tsurumi Island fog clearing, Seiji can often be found sitting on the edge of the docks staring off in the ocean</li>
  469.     <li>The big tree in Inazuma City used to be a reading spot for him, as well as a spot to tease Kiba from</li>
  470.     <li>Don't put Kiba and him in the same team. They will not help. They're too busy making out.</li>
  471.  
  472.   <!-- Add more above this line -->
  473.   </ul>
  474. </div>
  475. <!-- --------------------------------------------->
  476.  
  477. <!-- MOODBOARD ----------------------------------->
  478. <div class="tab-pane fade" id="moodboard">
  479. <div class="row no-gutters">
  480.  
  481.   <!-- IMAGE 01 | Replace URL in () brackets to change image -->
  482.   <div class="col-6" style="height: 140px; border-radius: 10px 0px 0px 0px;
  483.    background: url(https://images.unsplash.com/photo-1603113601705-0f3a09f3df8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80) center no-repeat; background-size: cover;">
  484.   </div>
  485.   <!-- ----------->
  486.  
  487.   <!-- IMAGE 02 | Replace URL in () brackets to change image -->
  488.   <div class="col-6" style="height: 140px; border-radius: 0px 10px 0px 0px;
  489.    background: url(https://images.unsplash.com/photo-1507058315425-12d723a95fea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGNoYWxrfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60) center no-repeat; background-size: cover;">
  490.   </div>
  491.   <!-- ----------->
  492.  
  493.   <!-- IMAGE 03 | Replace URL in () brackets to change image -->
  494.   <div class="col-6" style="height: 140px; border-radius: 0px 0px 0px 10px;
  495.    background: url(https://images.unsplash.com/photo-1542768651-5d7354d0b782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHdoaXRlJTIwbGlseXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60) center no-repeat; background-size: cover;">
  496.   </div>
  497.   <!-- ----------->
  498.  
  499.   <!-- IMAGE 04 | Replace URL in () brackets to change image -->
  500.   <div class="col-6" style="height: 140px; border-radius: 0px 0px 10px 0px;
  501.    background: url(https://images.unsplash.com/photo-1601046296534-4a5da114f78f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1193&q=80) center no-repeat; background-size: cover;">
  502.   </div>
  503.   <!-- ----------->
  504.  
  505. </div>
  506. </div>
  507. <!-- --------------------------------------------->
  508.  
  509. <!-- RELATIONSHIPS ------------------------------->
  510. <div class="tab-pane fade" id="relations">
  511.  
  512.   <!-- CHAR 01 ------------>
  513.   <div class="row no-gutters mb-2">
  514.      
  515.     <!-- IMAGE | Replace URL in () brackets to change image -->
  516.     <div class="col-3">
  517.       <div style="min-height: 126px; border-radius: 10px 0px 0px 10px;
  518.      
  519.        background: url(https://via.placeholder.com/200) center no-repeat; background-size: cover;">
  520.          
  521.       </div>
  522.     </div>
  523.    
  524.     <div class="col-9">
  525.       <!-- Name -->
  526.       <div class="py-1 px-2" style="background: #75B9FF; border-radius: 0px 10px 0px 0px; letter-spacing: 1px; font-weight: 500; color: #fff;">
  527.          
  528.         Shinku Kiba
  529.        
  530.       </div>
  531.       <div class=" text-justify p-2" style="background: rgba(0,0,0,0.05); border-radius: 0px 0px 10px 0px; height: 100px; overflow: auto;">
  532.       <!-- TEXT -->
  533.      
  534.         <p>His beloved boyfriend. They were childhood friends, and after Kiba went away to Tsurumi island for a mission, Seiji would sit at the docks for a few hours a day waiting for him to come home.</p>
  535.        
  536.       <!-- /TEXT -->
  537.       </div>
  538.     </div>
  539.    
  540.   </div>
  541.   <!-- -------------------->
  542.  
  543.   <!-- CHAR 02 ------------>
  544.   <div class="row no-gutters mb-2">
  545.      
  546.     <!-- IMAGE | Replace URL in () brackets to change image -->
  547.     <div class="col-3">
  548.       <div style="min-height: 126px; border-radius: 10px 0px 0px 10px;
  549.      
  550.        background: url(https://via.placeholder.com/200) center no-repeat; background-size: cover;">
  551.          
  552.       </div>
  553.     </div>
  554.    
  555.     <div class="col-9">
  556.       <!-- Name -->
  557.       <div class="py-1 px-2" style="background: #75B9FF; border-radius: 0px 10px 0px 0px; letter-spacing: 1px; font-weight: 500; color: #fff;">
  558.          
  559.         ???
  560.        
  561.       </div>
  562.       <div class=" text-justify p-2" style="background: rgba(0,0,0,0.05); border-radius: 0px 0px 10px 0px; height: 100px; overflow: auto;">
  563.       <!-- TEXT -->
  564.      
  565.         <p>An adeptus he met while on a business trip to Liyue. They wound up in a fun mini adventure, and became good friends. They try to write to each other when they can.</p>
  566.        
  567.       <!-- /TEXT -->
  568.       </div>
  569.     </div>
  570.    
  571.   </div>
  572.   <!-- -------------------->
  573.  
  574. <!-- Add more above this line -->
  575. </div>
  576. <!-- ---------------------------------------->
  577. </div>
  578.  
  579. </div>
  580.  
  581. </div>
  582. </div>
  583. </div>
  584.  
  585. </div>
  586. </div>
  587. </div>
  588. </div>
  589. </div>
  590. </div>
  591. <p class="text-white" style="font-size: .6rem; position: absolute; right: 10px; bottom: 1px;"><a href="/12087247.-genshin-character-splash" style="color: rgb(255, 115, 0);"><span data-toggle="tooltip" data-placement="left" title="code by junijwi"><i class="fas fa-code"></i></span></a>
  592. and
  593.   <a href="https://toyhou.se/13886013.-6-alchemia" style="font-size:10px; "><i class="fas fa-sparkles" style="color: rgb(255, 115, 0);" title="Code by Sealkitty"></i></a>
  594.   , edited by PandoraLights
  595.   </p>
  596. </div>
  597. </div>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement