API tools faq
paste
Advertisement
pVinc

Untitled

pVinc
May 20th, 2021
1,138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.86 KB | None | 0 0
raw download clone embed print report
  1. <!-- content container -- controls max width --------------------------------------------->
  2. <div class="container-fluid py-md-4 px-0" style="letter-spacing: .45px; max-width: 1000px;">
  3. <div style="border-radius: 1em; overflow:hidden;">
  4.   <!----------- SET TOP IMAGE HERE --- will scale & crop to fit 1000 x 200 space -------------------->
  5.   <div style="background: url(https://img.wallpapersafari.com/desktop/1920/1080/64/46/R2ranz.jpg);
  6.            background-size: cover; background-position:center; height:200px;"></div>
  7.  
  8.   <div class="bg-faded p-md-4 p-3">
  9.   <div class="row no-gutters justify-content-center">
  10.   <!-- STATS BLOCK --------------------------------------------------->
  11.   <div class="col-lg-4 order-lg-2 pl-lg-3 mb-md-0 mb-4">
  12.       <div class="card d-block border-0 px-4 pt-3 pb-md-0 pb-3 h-100" style="border-radius: 1em;">
  13.         <!---------------- USE A 200 x 200 AVATAR IMAGE ----------------------------------------->
  14.       <img src="https://cdn.discordapp.com/attachments/804662599182188564/845028874857611284/image6-removebg-preview.png"
  15.      style="max-height: 210px; margin-top: -120px;" class="d-block mx-auto rounded-circle p-3 card border-0">
  16.  
  17.         <div class="justify-content-between">
  18.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Name</div>
  19.            <div>Itami Shimura</div>
  20.         </div>
  21.         <hr class="my-2">
  22.         <div class="justify-content-between">
  23.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Called</div>
  24.            <div>Angel Ashes</div>
  25.         </div>
  26.         <hr class="my-2">
  27.         <div class="justify-content-between">
  28.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Gender</div>
  29.            <div>Male</div>
  30.         </div>
  31.         <hr class="my-2">
  32.         <div class="justify-content-between">
  33.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Age</div>
  34.            <div>21</div>
  35.         </div>
  36.         <hr class="my-2">
  37.         <div class="justify-content-between">
  38.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Sign</div>
  39.            <div>Aquarius</div>
  40.         </div>
  41.         <hr class="my-2">
  42.         <div class="justify-content-between">
  43.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Height</div>
  44.            <div>1.70 m (5.57 ft.)</div>
  45.         </div>
  46.         <hr class="my-2">
  47.         <div class="justify-content-between">
  48.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Race</div>
  49.            <div>Human</div>
  50.         </div>
  51.         <hr class="my-2">
  52.         <div class="justify-content-between">
  53.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Role</div>
  54.            <div>Villain</div>
  55.         </div>
  56.         <hr class="my-2">
  57.         <div class="justify-content-between">
  58.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Theme</div>
  59.           <!-- link a youtube vid here ----------------------->
  60.            <div><a href="https://www.youtube.com/watch?v=d9N8fzN2pfw" target="_BLANK">
  61.              <i class="fas fa-music-alt fa-fw" /><i class="fas fa-music fa-fw" /><i class="fas fa-music-alt fa-fw" />
  62.             </a></div>
  63.         </div>
  64.         <hr class="my-2">
  65.         <div class="justify-content-between">
  66.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">Value</div>
  67.            <div>100$</div>
  68.         </div>
  69.         <hr class="my-2">
  70.         <div class="justify-content-between">
  71.           <div class="pr-1 text-muted" style="letter-spacing: 1px;">HTML</div>
  72.            <div>@eggy</div>
  73.         </div>
  74.       </div>
  75.   </div>
  76.   <!-- CONTENT BLOCK -------------------------------------------------->
  77.   <div class="col-lg-8 order-lg-1">
  78.     <!-- NAV ------------------------------------------------------>
  79.     <ul class="nav text-center row no-gutters justify-content-center mb-2">
  80.         <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE SYMBOLS ----------------------------------->
  81.         <li class="nav-item col pr-md-0 pr-2">
  82.             <a class="nav-link active px-1 py-0" style="border-radius: 1em;" data-toggle="tab" title="Intro" href="#ONE">
  83.                 <i class="fas fa-star fa-fw fa-2x" /></a>
  84.         </li>
  85.  
  86.         <li class="nav-item col px-1">
  87.             <a class="nav-link px-1 py-0" style="border-radius: 1em;" data-toggle="tab" title="Character" href="#TWO">
  88.                 <i class="fas fa-heartbeat fa-fw fa-2x" /></a>
  89.         </li>
  90.  
  91.         <li class="nav-item col px-1">
  92.             <a class="nav-link px-1 py-0" style="border-radius: 1em;" data-toggle="tab" title="Story" href="#THREE">
  93.                 <i class="fas fa-books fa-fw fa-2x" /></a>
  94.         </li>
  95.  
  96.         <li class="nav-item col px-1">
  97.             <a class="nav-link px-1 py-0" style="border-radius: 1em;" data-toggle="tab" title="Trivia" href="#FOUR">
  98.                 <i class="fas fa-question fa-fw fa-2x" /></a>
  99.         </li>
  100.  
  101.         <li class="nav-item col pl-2">
  102.             <a class="nav-link px-1 py-0" style="border-radius: 1em;" data-toggle="tab" title="Links" href="#FIVE">
  103.                 <i class="fas fa-link fa-fw fa-2x" /></a>
  104.         </li>
  105.     </ul>
  106.     <div class="tab-content">
  107.     <!------------------ TAB ONE ----------- ABOUT ---------------------------->
  108.     <div class="tab-pane fade in active show" id="ONE">
  109.       <!-- header block -------------------->
  110.       <div class="card border-0 text-center d-block px-4 pt-3" style="border-radius: 1em 1em 0 0">
  111.         <h1 class="text-uppercase mb-0" style="font-weight: 400; letter-spacing:1px;">
  112.            About </h1>
  113.         <hr class="mb-0 mt-1">
  114.       </div>
  115.       <!-- content block -------------------->
  116.       <div class="card border-0 d-block px-4 pt-3 pb-md-1 pb-3" style="height: 460px; overflow:auto; border-radius: 0 0 1em 1em;">
  117.           <!--------- OPTIONAL FOCAL IMAGE --------------------------------------->
  118.           <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34328774_JpDIMO8WTiRMskt.jpg"
  119.          class="rounded float-sm-right ml-sm-2 d-block mx-auto mb-1" style="max-height: 380px;">
  120.  
  121.           <p>Itami od poczatku swojego żywota nie był pewny czy napewno chce zostać bohaterem. Przez ignorancję jego rodziców co do jego osoby i skupianiu się na reszcie jego rodzeństwa.Przez to wszytko miał z sobą niemałe problemy emocjonalne i psychiczne. Mimo tego i tak jego droga doprowadziła go do liceum U.A gdzie poszedł z jego przyjacielem Otame.</p>
  122.           <p>Niestety po tragicznym wypadku i śmierci Otame chłopak został sam. Oskarżony o celowe zabójstwo oraz okrzyknięty przez jego rodzinę złoczyńcą miał trafić do poprawczaka. Plan ten pokrzyżował pewien złoczyńca który z swoimi współpracownikami pomógł upozorować mu własne samobójstwo i uciec do ich kryjówki. Od tego czasu chłopak zaczął współpracę wzamian za spłatę długu wdzięczności  </p>
  123.       </div>
  124.     </div>
  125.     <!------------------ TAB TWO ----------- CHARACTER ---------------------------->
  126.     <div class="tab-pane fade" id="TWO">
  127.       <!-- header block -------------------->
  128.       <div class="card border-0 text-center d-block px-4 pt-3" style="border-radius: 1em 1em 0 0">
  129.         <h1 class="text-uppercase mb-0" style="font-weight: 400; letter-spacing:1px;">
  130.            Character </h1>
  131.         <hr class="mb-0 mt-1">
  132.       </div>
  133.       <!-- content block -------------------->
  134.       <div class="card border-0 d-block px-4 pt-3 pb-md-1 pb-3" style="height: 460px; overflow:auto; border-radius: 0 0 1em 1em;">
  135.         <!-- stats -- use "fas" for fill in circle -- "fal" for open circle --->
  136.         <div class="row no-gutters">
  137.           <div class="col-lg-6 pr-md-2">
  138.             <div class="justify-content-between">
  139.               <div class="pr-1 text-muted" style="letter-spacing: 1px;">
  140.                 Charisma
  141.               </div><div>
  142.                  <i class="fas fa-circle fa-fw" />
  143.                  <i class="fal fa-circle fa-fw" />
  144.                  <i class="fal fa-circle fa-fw" />
  145.                  <i class="fal fa-circle fa-fw" />
  146.                  <i class="fal fa-circle fa-fw" />
  147.               </div>
  148.             </div>
  149.             <hr class="my-2">
  150.           </div>
  151.           <div class="col-lg-6 pl-md-2">
  152.             <div class="justify-content-between">
  153.               <div class="pr-1 text-muted" style="letter-spacing: 1px;">
  154.                 Kindness
  155.               </div><div>
  156.                  <i class="fas fa-circle fa-fw" />
  157.                  <i class="fal fa-circle fa-fw" />
  158.                  <i class="fal fa-circle fa-fw" />
  159.                  <i class="fal fa-circle fa-fw" />
  160.                  <i class="fal fa-circle fa-fw" />
  161.               </div>
  162.             </div>
  163.             <hr class="my-2">
  164.           </div>
  165.           <div class="col-lg-6 pr-md-2">
  166.             <div class="justify-content-between">
  167.               <div class="pr-1 text-muted" style="letter-spacing: 1px;">
  168.                 Honesty
  169.               </div><div>
  170.                  <i class="fas fa-circle fa-fw" />
  171.                  <i class="fas fa-circle fa-fw" />
  172.                  <i class="fas fa-circle fa-fw" />
  173.                  <i class="fas fa-circle fa-fw" />
  174.                  <i class="fal fa-circle fa-fw" />
  175.               </div>
  176.             </div>
  177.             <hr class="my-2">
  178.           </div>
  179.           <div class="col-lg-6 pl-md-2">
  180.             <div class="justify-content-between">
  181.               <div class="pr-1 text-muted" style="letter-spacing: 1px;">
  182.                 Courage
  183.               </div><div>
  184.                  <i class="fas fa-circle fa-fw" />
  185.                  <i class="fas fa-circle fa-fw" />
  186.                  <i class="fas fa-circle fa-fw" />
  187.                  <i class="fas fa-circle fa-fw" />
  188.                  <i class="fal fa-circle fa-fw" />
  189.               </div>
  190.             </div>
  191.             <hr class="my-2">
  192.           </div>
  193.           <div class="col-lg-6 pr-md-2">
  194.             <div class="justify-content-between">
  195.               <div class="pr-1 text-muted" style="letter-spacing: 1px;">
  196.                 Intellect
  197.               </div><div>
  198.                  <i class="fas fa-circle fa-fw" />
  199.                  <i class="fas fa-circle fa-fw" />
  200.                  <i class="fas fa-circle fa-fw" />
  201.                  <i class="fal fa-circle fa-fw" />
  202.                  <i class="fal fa-circle fa-fw" />
  203.               </div>
  204.             </div>
  205.             <hr class="my-2">
  206.           </div>
  207.           <div class="col-lg-6 pl-md-2">
  208.             <div class="justify-content-between">
  209.               <div class="pr-1 text-muted" style="letter-spacing: 1px;">
  210.                 Humour
  211.               </div><div>
  212.                  <i class="fas fa-circle fa-fw" />
  213.                  <i class="fas fa-circle fa-fw" />
  214.                  <i class="fal fa-circle fa-fw" />
  215.                  <i class="fal fa-circle fa-fw" />
  216.                  <i class="fal fa-circle fa-fw" />
  217.               </div>
  218.             </div>
  219.             <hr class="my-2">
  220.           </div>
  221.           <!-- likes & dislikes ------------>
  222.           <div class="col-lg-6 pr-md-2">
  223.             <p class="mb-0 text-muted" style="letter-spacing: 1px;">Likes</p>
  224.             <ul class="mb-0">
  225.               <li>cats</li>
  226.               <li>irises</li>
  227.               <li>sakura season</li>        
  228.               <li>rock</li>
  229.               <li>classical music</li>
  230.               <li>liquorice</li>
  231.                        </ul>
  232.           </div>
  233.           <div class="col-lg-6 pl-md-2">
  234.             <p class="mb-0 text-muted" style="letter-spacing: 1px;">Dislikes</p>
  235.             <ul class="mb-0">
  236.               <li>his family</li>
  237.               <li>techno music</li>
  238.               <li>yakuza members</li>      
  239.               <li>summer </li>            
  240.               <li>dogs</li>
  241.             </ul>
  242.           </div>
  243.         </div>
  244.         <hr class="w-50 my-3">
  245.         <!--- write a small character summary here ---------------->
  246.           <div class="col-lg-6 pr-md-2" style="display: flex; flex-direction: row">
  247.             <p class="mb-0 text-muted" style="letter-spacing: 1px;">Pros</p>
  248.                         <ul class="mb-0">
  249.                             <li>delicate</li>
  250.                             <li>pessimist</li>
  251.                             <li>introvert</li>
  252.                             <li>attentive</li>
  253.                             <li>stubborn</li>
  254.                       </ul>
  255.           </div>
  256.                         <div class="col-lg-6 pl-md-2">
  257.                         <p class="mb-0 text-muted" style="letter-spacing: 1px;">Cons</p>
  258.                         <ul class="mb-0">
  259.                             <li>insistent</li>
  260.                             <li>unbearable</li>
  261.                             <li>unpredictable</li>
  262.                             <li>brutal</li>
  263.                             <li>stubborn</li>
  264.                             <li>critical</li>
  265.             </ul>
  266.           </div>
  267.         </div>
  268.         <hr class="w-50 my-3">
  269.     <!------------------ TAB THREE ----------- SUMMARY ---------------------------->
  270.     <div class="tab-pane fade" id="THREE">
  271.       <!-- header block -------------------->
  272.       <div class="card border-0 text-center d-block px-4 pt-3" style="border-radius: 1em 1em 0 0">
  273.         <h1 class="text-uppercase mb-0" style="font-weight: 400; letter-spacing:1px;">
  274.            Story </h1>
  275.         <hr class="mb-0 mt-1">
  276.       </div>
  277.       <!-- content block -------------------->
  278.       <div class="card border-0 d-block px-4 pt-3 pb-md-1 pb-3" style="height: 460px; overflow:auto; border-radius: 0 0 1em 1em;">
  279.         <h4 class="text-uppercase text-muted" style="font-weight: 300; letter-spacing:1px;">Subheader</h4>
  280.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
  281.  
  282.         <h4 class="text-uppercase text-muted" style="font-weight: 300; letter-spacing:1px;">Subheader</h4>
  283.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
  284.  
  285.         <h4 class="text-uppercase text-muted" style="font-weight: 300; letter-spacing:1px;">Subheader</h4>
  286.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. Fusce sit amet lectus nec massa auctor aliquam et molestie metus. Sed at est in ante egestas iaculis. Nullam varius gravida ligula nec malesuada.</p>
  287.       </div>
  288.     </div>
  289.     <!------------------ TAB FOUR ----------- TRIVIA ---------------------------->
  290.     <div class="tab-pane fade" id="FOUR">
  291.       <!-- header block -------------------->
  292.       <div class="card border-0 text-center d-block px-4 pt-3" style="border-radius: 1em 1em 0 0">
  293.         <h1 class="text-uppercase mb-0" style="font-weight: 400; letter-spacing:1px;">
  294.            Trivia </h1>
  295.         <hr class="mb-0 mt-1">
  296.       </div>
  297.       <div class="card border-0 d-block px-4 pt-3 pb-md-1 pb-3" style="height: 460px; overflow:auto; border-radius: 0 0 1em 1em;">
  298.         <!------------ OPTIONAL FOCAL IMAGE ---- just erase if you dont wanna use this --->
  299.         <img src="IMG_URL"
  300.        class="rounded float-right hidden-sm-down ml-2" style="max-height: 350px;">
  301.  
  302.         <ul class="mb-0">
  303.           <li class="mb-3">
  304.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris.
  305.           </li>
  306.           <li class="mb-3">
  307.             Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem.
  308.           </li>
  309.           <li class="mb-3">
  310.             Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit.
  311.           </li>
  312.           <li class="mb-3">
  313.              In vitae nisi eu mi suscipit semper in eget justo.
  314.           </li>
  315.           <li class="mb-3">
  316.             Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.
  317.           </li>
  318.         </ul>
  319.       </div>
  320.     </div>
  321.     <!------------------ TAB FIVE ----------- LINKS ---------------------------->
  322.     <div class="tab-pane fade" id="FIVE">
  323.       <!-- header block -------------------->
  324.       <div class="card border-0 text-center d-block px-4 pt-3" style="border-radius: 1em 1em 0 0">
  325.         <h1 class="text-uppercase mb-0" style="font-weight: 400; letter-spacing:1px;">
  326.            Related </h1>
  327.         <hr class="mb-0 mt-1">
  328.       </div>
  329.       <!-- content block -------------------->
  330.       <div class="card border-0 d-block px-4 pt-4" style="height: 460px; overflow:auto; border-radius: 0 0 1em 1em;">
  331.           <div class="row no-gutters">
  332.           <!--------------------------- CHARACTER LINK -------------------------------------->
  333.           <div class="col-12 mb-3">
  334.               <img src="IMG_URL"
  335.              style="max-height:100px;" class="rounded float-md-left mr-md-2 d-block mx-auto" />
  336.  
  337.               <div class="justify-content-between mb-1">
  338.               <a href="LINK_HERE" style="letter-spacing:1px;">
  339.                 Name Here
  340.               </a><span class="text-muted"style="letter-spacing:1px;">
  341.                 [ relationship ]
  342.               </span> </div>
  343.  
  344.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  345.           </div>
  346.           <!--------------------------- CHARACTER LINK -------------------------------------->
  347.           <div class="col-12 mb-3">
  348.               <img src="IMG_URL"
  349.              style="max-height:100px;" class="rounded float-md-left mr-md-2 d-block mx-auto" />
  350.  
  351.               <div class="justify-content-between mb-1">
  352.               <a href="LINK_HERE" style="letter-spacing:1px;">
  353.                 Name Here
  354.               </a><span class="text-muted"style="letter-spacing:1px;">
  355.                 [ relationship ]
  356.               </span> </div>
  357.  
  358.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  359.           </div>
  360.           <!--------------------------- CHARACTER LINK -------------------------------------->
  361.           <div class="col-12 mb-3">
  362.               <img src="IMG_URL"
  363.              style="max-height:100px;" class="rounded float-md-left mr-md-2 d-block mx-auto" />
  364.  
  365.               <div class="justify-content-between mb-1">
  366.               <a href="LINK_HERE" style="letter-spacing:1px;">
  367.                 Name Here
  368.               </a><span class="text-muted"style="letter-spacing:1px;">
  369.                 [ relationship ]
  370.               </span> </div>
  371.  
  372.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
  373.           </div>
  374.  
  375.           </div>
  376.       </div>
  377.     </div>
  378.  
  379.     </div><!-- end tab content container -->
  380.   </div>
  381. </div>
  382.   </div>
  383. </div>
  384. </div>
  385.  
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!