Para Nelly

Kiiroi_sama

Info


Created
3 years, 28 days ago
Creator
Kiiroi_sama
Favorites
0

Profile


  • <!---------------------------------------------->
  • <!---                                        --->
  • <!---        kye's codes: stacked tabs       --->
  • <!---                                        --->
  • <!---        edit however you want, but      --->
  • <!---                  DO NOT                --->
  • <!---            remove my credit!           --->
  • <!---------------------------------------------->
  •  
  • <div class="col-lg-9 mx-auto text-secondary mt-2">
  •  
  •   <!--- header -->
  •   <div class="text-uppercase d-flex justify-content-between display-4 mb-2"><span class="text-info">
  •     <!--- fontawesome icons, find more at fontawesome.com/icon -->
  •     <i class="fas fa-star"></i></span><span>
  •     NOME</span><span class="text-info">
  •     <i class="fas fa-star"></i></span>
  •   </div>
  •   <div class="row no-gutters d-flex">
  •  
  •     <!--- left column -->
  •     <div class="col-lg mb-2 mr-lg-2 order-2 order-lg-1">
  •  
  •       <!--- nav menu -->
  •       <div class="mb-1">
  •         <ul class="nav flex-column flex-lg-row text-uppercase">
  •           <li class="nav-item flex-fill m-1"><a class="nav-link btn btn-outline-secondary active" data-toggle="tab" href="#info">básico</a></li>
  •           <li class="nav-item flex-fill m-1"><a class="nav-link btn btn-outline-secondary" data-toggle="tab" href="#bio">bio</a></li>
  •           <li class="nav-item flex-fill m-1"><a class="nav-link btn btn-outline-secondary" data-toggle="tab" href="#triv">curiosidades</a></li>
  •           <li class="nav-item flex-fill m-1"><a class="nav-link btn btn-outline-secondary" data-toggle="tab" href="#rel">relacionamentos</a></li>
  •           <li class="nav-item flex-fill m-1"><a class="nav-link btn btn-outline-secondary" data-toggle="tab" href="#design">design</a></li>
  •         </ul>
  •       </div>
  •  
  •       <!--- main profile content -->
  •       <div class="card p-2 table-responsive tab-content" style="height:500px;">
  •  
  •         <!--- tab one - basic info -->
  •         <div class="tab-pane fade active show" id="info">
  •  
  •           <!--- basic info header -->
  •           <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •             <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">informação básica</span>
  •             <span class="text-info" style="font-size:20pt;"><i class="fas fa-sticky-note"></i></span>
  •           </div>
  •           <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •           <!--- basic info start -->
  •           <div class="card" style="min-height:430px; background:none; border:0px;">
  •             <div class="card my-auto" style="min-height:10px; background:none; border:0px;">
  •               <div class="p-1 d-flex justify-content-between bg-faded">
  •                 <span class="text-info text-uppercase">
  •                 Nome</span><span><a href="link to designer" class="text-secondary"><u>
  •                 info</u></a></span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between">
  •                 <span class="text-info text-uppercase">
  •                 Espécie</span><span><a href="link to species sheet" class="text-secondary"><u>
  •                 info</u></a></span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between bg-faded">
  •                 <span class="text-info text-uppercase">
  •                 Idade</span><span>
  •                 info</span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between">
  •                 <span class="text-info text-uppercase">
  •                 Altura</span><span>
  •                 info</span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between bg-faded">
  •                 <span class="text-info text-uppercase">
  •                 Aniversário</span><span>
  •                 info</span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between">
  •                 <span class="text-info text-uppercase">
  •                 Gênero sexual</span><span>
  •                 info</span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between bg-faded">
  •                 <span class="text-info text-uppercase">
  •                 Pronomes</span><span>
  •                 info</span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between">
  •                 <span class="text-info text-uppercase">
  •                 Originação</span><span>
  •                 info</span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between bg-faded">
  •                 <span class="text-info text-uppercase">
  •                 Ocupação</span><span>
  •                 info</span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between">
  •                 <span class="text-info text-uppercase">
  •                 OC</span><span>
  •                 info</span>
  •               </div>
  •  
  •               <div class="p-1 d-flex justify-content-between bg-faded">
  •                 <span class="text-info text-uppercase">
  •                 História</span><span>
  •                 info</span>
  •               </div>
  •             </div><!--- add more basic info blocks above this line -->
  •           </div>
  •         </div>
  •  
  •         <!--- tab two - bio -->
  •         <div class="tab-pane fade" id="bio">
  •           <!--- about header -->
  •           <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •             <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">Sobre</span>
  •             <span class="text-info" style="font-size:20pt;"><i class="fas fa-user"></i></span>
  •           </div>
  •           <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •           <!--- about block -->
  •           <div class="p-1 mb-4">
  •             <p>escreva algum texto aqui! use esta seção para dar uma breve visão geral de seu personagem. você pode substituir tags de parágrafo por listas se preferir marcadores.</p>
  •             <p>Lorem ipsum dolor sit amet, diam dicat conclusionemque has ad. Singulis definitionem sed ea, ad detracto referrentur per. No illud maiorum usu. Et case etiam usu, eam ea iisque fierent reformidans. Possim docendi forensibus te nam.</p>
  •           </div>
  •  
  •           <!--- story header -->
  •           <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •             <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">História</span>
  •             <span class="text-info" style="font-size:20pt;"><i class="fas fa-book-alt"></i></span>
  •           </div>
  •           <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •           <!--- story block -->
  •           <div class="p-1 mb-4">
  •             <p>escreva algum texto aqui! use esta seção para dar uma breve visão geral de seu personagem. você pode substituir tags de parágrafo por listas se preferir marcadores.</p>
  •             <p>In sit aeque maiestatis, ad regione habemus eam. Sed ano eligendi voluptatum. Harum utinam recteque an cum, at nam iisque patrioque. Pri quot verear salutatus in.</p>
  •           </div>
  •  
  •           <!--- world header -->
  •           <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •             <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">Mundo</span>
  •             <span class="text-info" style="font-size:20pt;"><i class="fas fa-globe-stand"></i></span>
  •           </div>
  •           <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •           <!--- world block -->
  •           <div class="p-1 mb-4">
  •             <p>escreva algum texto aqui! use esta seção para dar uma breve visão geral de seu personagem. você pode substituir tags de parágrafo por listas se preferir marcadores. </p>
  •             <p>Mea ad dicat nonumes, mei principes vulputate no. Vis an facilisis liberavisse, libris numquam usu et. Ad velit homero graecis pro, quis repudiare nec ne, sed veri officiis in. Mel te consetetur efficiantur, meis modus adipiscing ut has, natum iusto eu his. An dicit convenire est, pri cibo perfecto concludaturque in, ullum probatus gloriatur ad eos.</p>
  •           </div>
  •         </div>
  •  
  •         <!--- tab three - trivia -->
  •         <div class="tab-pane fade" id="triv">
  •           <!--- stats header -->
  •           <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •             <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">Estátisticas</span>
  •             <span class="text-info" style="font-size:20pt;"><i class="fas fa-stars"></i></span>
  •           </div>
  •           <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •           <!--- stats block -->
  •           <div class="p-1 mb-4">
  •             <div class="row no-gutters">
  •  
  •               <!---left side stats -->
  •               <div class="col-lg-6">
  •  
  •                  <div class="row no-gutters my-2">
  •                   <div class="col text-uppercase text-right">
  •                   Força</div><div class="col-7 px-2 mt-1 ml-4 ">
  •                     <div class="progress  mt-1 rounded-0 mr-2">
  •                             <div class="progress-bar bg-info" style="width: 50%; height:8px;"></div>
  •                           </div>
  •                   </div>
  •                 </div>
  •  
  •                 <div class="row no-gutters my-2">
  •                   <div class="col text-uppercase text-right">
  •                   Energia</div><div class="col-7 px-2 mt-1 ml-4 ">
  •                     <div class="progress  mt-1 rounded-0 mr-2">
  •                             <div class="progress-bar bg-info" style="width: 50%; height:8px;"></div>
  •                           </div>
  •                   </div>
  •                 </div>
  •  
  •                 <div class="row no-gutters">
  •                   <div class="col text-uppercase text-right">
  •                   Agilidade</div><div class="col-7 px-2 mt-1 ml-4 ">
  •                     <div class="progress  mt-1 rounded-0 mr-2">
  •                             <div class="progress-bar bg-info" style="width: 50%; height:8px;"></div>
  •                           </div>
  •                   </div>
  •                 </div>
  •               </div><!--- add extra left side stats above this line -->
  •  
  •               <!---right side stats -->
  •               <div class="col-lg-6 mt-2 mt-lg-0">
  •                 <div class="row no-gutters">
  •                   <div class="col text-uppercase text-right">
  •                   sabedoria</div><div class="col-7 px-2 mt-1 ml-4 ">
  •                     <div class="progress  mt-1 rounded-0 mr-2">
  •                             <div class="progress-bar bg-info" style="width: 50%; height:8px;"></div>
  •                           </div>
  •                   </div>
  •                 </div>
  •  
  •                 <div class="row no-gutters my-2">
  •                   <div class="col text-uppercase text-right">
  •                   carisma</div><div class="col-7 px-2 mt-1 ml-4 ">
  •                     <div class="progress  mt-1 rounded-0 mr-2">
  •                             <div class="progress-bar bg-info" style="width: 50%; height:8px;"></div>
  •                           </div>
  •                   </div>
  •                 </div>
  •  
  •                 <div class="row no-gutters">
  •                   <div class="col text-uppercase text-right">
  •                   sorte</div><div class="col-7 px-2 mt-1 ml-4 ">
  •                     <div class="progress  mt-1 rounded-0 mr-2">
  •                             <div class="progress-bar bg-info" style="width: 50%; height:8px;"></div>
  •                           </div>
  •                   </div>
  •                 </div>
  •               </div><!--- add extra right side stats above this line -->
  •             </div>
  •           </div>
  •  
  •           <!--- likes and dislikes section -->
  •           <div class="row no-gutters">
  •             <div class="col-lg-6">
  •  
  •               <!--- likes header -->
  •               <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •                 <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">GOSTA</span>
  •                 <span class="text-info" style="font-size:20pt;"><i class="fas fa-heart"></i></span>
  •               </div>
  •               <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •               <!--- likes block -->
  •               <div class="p-1 mb-4">
  •                 <ul class="pl-4">
  •                 <li>item um</li>
  •                 <li>item dois</li>
  •                 <li>item três</li>
  •                 <li>item quatro</li>
  •                 <li>item cinco</li>
  •                 </ul>
  •               </div>
  •             </div>
  •             <div class="col-lg-6">
  •  
  •               <!--- dislikes header -->
  •               <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •                 <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">não gosta</span>
  •                 <span class="text-info" style="font-size:20pt;"><i class="fas fa-heart-broken fa-swap-opacity"></i></span>
  •               </div>
  •               <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •               <!--- dislikes block -->
  •               <div class="p-1 mb-4">
  •                 <ul class="pl-4">
  •                   <li>item um</li>
  •                   <li>item dois</li>
  •                   <li>item tres</li>
  •                   <li>item quatro</li>
  •                   <li>item five</li>
  •                 </ul>
  •               </div>
  •             </div>
  •           </div>
  •  
  •           <!--- hobbies and favorites section -->
  •           <div class="row no-gutters">
  •             <div class="col-lg-6">
  •  
  •               <!--- favorites header -->
  •               <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •                 <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">favoritos</span>
  •                 <span class="text-info" style="font-size:20pt;"><i class="fas fa-sparkles"></i></span>
  •               </div>
  •               <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •               <!--- favorites block -->
  •               <div class="py-1 px-2 mb-4">
  •                 <div class="p-1 d-flex justify-content-between">
  •                   <span class="text-info text-uppercase">
  •                   comida</span><span>
  •                   info</span>
  •                 </div>
  •  
  •                 <div class="bg-faded p-1 d-flex justify-content-between">
  •                   <span class="text-info text-uppercase">
  •                   bebida</span><span>
  •                   info</span>
  •                 </div>
  •  
  •                 <div class="p-1 d-flex justify-content-between">
  •                   <span class="text-info text-uppercase">
  •                   cor</span><span>
  •                   info</span>
  •                 </div>
  •  
  •                 <div class="bg-faded p-1 d-flex justify-content-between">
  •                   <span class="text-info text-uppercase">
  •                   lanches</span><span>
  •                   info</span>
  •                 </div>
  •  
  •                 <div class="p-1 d-flex justify-content-between">
  •                   <span class="text-info text-uppercase">
  •                   animal</span><span>
  •                   info</span>
  •                 </div>
  •               </div>
  •             </div>
  •             <div class="col-lg-6">
  •  
  •               <!--- hobbies header -->
  •               <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •                 <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">hobbies</span>
  •                 <span class="text-info" style="font-size:20pt;"><i class="fas fa-pencil-alt"></i></span>
  •               </div>
  •               <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •               <!--- hobbies block -->
  •               <div class="p-1 mb-4">
  •                 <ul class="pl-4">
  •                   <li>item um</li>
  •                   <li>item dois</li>
  •                   <li>item tres</li>
  •                   <li>item quatro</li>
  •                   <li>item cinco</li>
  •                 </ul>
  •               </div>
  •             </div>
  •           </div>
  •         </div>
  •  
  •         <!--- tab four - relationships -->
  •         <div class="tab-pane fade" id="rel">
  •  
  •           <!--- relationships header -->
  •           <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •             <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">relacionamentos</span>
  •             <span class="text-info" style="font-size:20pt;"><i class="fas fa-users"></i></span>
  •           </div>
  •           <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •           <!--- relationships block -->
  •  
  •           <!--- row one -->
  •           <div class="row no-gutters mt-2">
  •             <!--- relationship 1 -->
  •             <div class="card col-lg-6 mb-2" style="border:0px;">
  •               <div class="row no-gutters">
  •                 <div class="col-4 text-center">
  •  
  •                   <!--- icon -->
  •                   <img src="https://i.imgur.com/Ru3npF4.png" class="rounded-circle">
  •                 </div>
  •                 <div class="col ml-3">
  •  
  •                   <!--- character info -->
  •                   <span class="display-4 text-uppercase" style="font-size:18pt;">
  •                   <a href="link to character" class="text-info">
  •                   nome</a></span><br><i>
  •                   relação</i>
  •  
  •                   <p>screva um pouco sobre a relação do personagem aqui! sinta-se à vontade para adicionar o quanto quiser, a caixa será esticada para caber todo o texto.</p>
  •                 </div>
  •               </div>
  •             </div>
  •  
  •             <!--- relationship 2 -->
  •             <div class="card col-lg-6 mb-2" style="border:0px;">
  •               <div class="row no-gutters">
  •                 <div class="col-4 text-center">
  •  
  •                   <!--- icon -->
  •                   <img src="https://i.imgur.com/Ru3npF4.png" class="rounded-circle">
  •                 </div>
  •                 <div class="col ml-3">
  •  
  •                   <!--- character info -->
  •                   <span class="display-4 text-uppercase" style="font-size:18pt;">
  •                   <a href="link to character" class="text-info">
  •                   nome</a></span><br><i>
  •                   relação</i>
  •  
  •                   <p>escreva um pouco sobre a relação do personagem aqui!</p>
  •                 </div>
  •               </div>
  •             </div>
  •           </div>
  •  
  •           <!--- row two -->
  •           <div class="row no-gutters mt-2">
  •             <!--- relationship 3 -->
  •             <div class="card col-lg-6 mb-2" style="border:0px;">
  •               <div class="row no-gutters">
  •                 <div class="col-4 text-center">
  •  
  •                   <!--- icon -->
  •                   <img src="https://i.imgur.com/Ru3npF4.png" class="rounded-circle">
  •                 </div>
  •                 <div class="col ml-3">
  •  
  •                   <!--- character info -->
  •                   <span class="display-4 text-uppercase" style="font-size:18pt;">
  •                   <a href="link to character" class="text-info">
  •                   nome</a></span><br><i>
  •                   relação</i>
  •  
  •                   <p>escreva um pouco sobre a relação do personagem aqui!</p>
  •                 </div>
  •               </div>
  •             </div>
  •  
  •             <!--- relationship 4 -->
  •             <div class="card col-lg-6 mb-2" style="border:0px;">
  •               <div class="row no-gutters">
  •                 <div class="col-4 text-center">
  •  
  •                   <!--- icon -->
  •                   <img src="https://i.imgur.com/Ru3npF4.png" class="rounded-circle">
  •                 </div>
  •                 <div class="col ml-3">
  •  
  •                   <!--- character info -->
  •                   <span class="display-4 text-uppercase" style="font-size:18pt;">
  •                   <a href="link to character" class="text-info">
  •                   nome</a></span><br><i>
  •                   relação</i>
  •  
  •                   <p>escreva um pouco sobre a relação do personagem aqui!</p>
  •                 </div>
  •               </div>
  •             </div>
  •           </div>
  •  
  •           <!--- row three -->
  •           <div class="row no-gutters mt-2">
  •             <!--- relationship 5 -->
  •             <div class="card col-lg-6 mb-2" style="border:0px;">
  •               <div class="row no-gutters">
  •                 <div class="col-4 text-center">
  •  
  •                   <!--- icon -->
  •                   <img src="https://i.imgur.com/Ru3npF4.png" class="rounded-circle">
  •                 </div>
  •                 <div class="col ml-3">
  •  
  •                   <!--- character info -->
  •                   <span class="display-4 text-uppercase" style="font-size:18pt;">
  •                   <a href="link to character" class="text-info">
  •                   nome</a></span><br><i>
  •                   relação</i>
  •  
  •                   <p>escreva um pouco sobre a relação do personagem aqui!</p>
  •                 </div>
  •               </div>
  •             </div>
  •  
  •             <!--- relationship 6 -->
  •             <div class="card col-lg-6 mb-2" style="border:0px;">
  •               <div class="row no-gutters">
  •                 <div class="col-4 text-center">
  •  
  •                   <!--- icon -->
  •                   <img src="https://i.imgur.com/Ru3npF4.png" class="rounded-circle">
  •                 </div>
  •                 <div class="col ml-3">
  •  
  •                   <!--- character info -->
  •                   <span class="display-4 text-uppercase" style="font-size:18pt;">
  •                   <a href="link to character" class="text-info">
  •                   nome</a></span><br><i>
  •                   relação</i>
  •  
  •                   <p>escreva um pouco sobre a relação do personagem aqui!</p>
  •                 </div>
  •               </div>
  •             </div>
  •           </div>
  •         </div><!--- add new relationship rows above this line! -->
  •  
  •         <!--- tab five - design -->
  •         <div class="tab-pane fade" id="design">
  •           <div class="row no-gutters">
  •             <div class="col-lg-6">
  •  
  •             <!--- references header -->
  •             <div class="col-lg-9 mx-auto d-flex justify-content-between">
  •               <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">Folha de referência</span>
  •               <span class="text-info" style="font-size:20pt;"><i class="fas fa-image"></i></span>
  •             </div>
  •             <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •             <div class="text-center mb-2">
  •               <!--- reference sheet -->
  •               <a href="link to full view">
  •                 <img src="https://i.imgur.com/jJheYrh.png" style="max-width:250px;">
  •               </a>
  •               </div><!--- if you have additional reference sheets or alternate outfits, put them above this line -->
  •             </div>
  •  
  •             <div class="col-lg-6">
  •               <!--- palette header -->
  •               <div class="col-lg-9 mx-auto d-flex justify-content-between">
  •                 <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">paleta</span>
  •                 <span class="text-info" style="font-size:20pt;"><i class="fas fa-palette"></i></span>
  •               </div>
  •               <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •               <!--- color palette boxes -->
  •               <div class="col text-center mb-2">
  •                 <div class="d-inline-block rounded m-1"
  •                 style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
  •                 title="color title">
  •                 </div>
  •  
  •                 <div class="d-inline-block rounded m-1"
  •                 style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
  •                 title="color title">
  •                 </div>
  •  
  •                 <div class="d-inline-block rounded m-1"
  •                 style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
  •                 title="color title">
  •                 </div>
  •  
  •                 <div class="d-inline-block rounded m-1"
  •                 style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
  •                 title="color title">
  •                 </div>
  •  
  •                 <div class="d-inline-block rounded m-1"
  •                 style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
  •                 title="color title">
  •                 </div>
  •  
  •                 <div class="d-inline-block rounded m-1"
  •                 style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
  •                 title="color title">
  •                 </div>
  •  
  •                 <div class="d-inline-block rounded m-1"
  •                 style="background-color:#727272; height:50px; width:50px;" data-toggle="tooltip"
  •                 title="color title">
  •                 </div>
  •               </div><!--- more color palette boxes above this line -->
  •             </div>
  •           </div>
  •  
  •           <!--- design notes header -->
  •           <div class="col-lg-8 mx-auto d-flex justify-content-between">
  •             <span class="display-4 mt-1 text-uppercase" style="font-size:20pt;">notas de design </span>
  •             <span class="text-info" style="font-size:20pt;"><i class="fas fa-clipboard"></i></span>
  •           </div>
  •           <hr class="col-7 mx-auto bg-faded my-1">
  •  
  •           <!--- design notes block -->
  •           <ul>
  •             <li> notas de design que você pode ter aqui</li>
  •             <li>você pode ter quantos você precisar, a caixa de texto irá rolar</li>
  •             <li>descreva coisas como cicatrizes, acessórios importantes, etc.</li>
  •             <li>ou talvez seus olhos brilhem quando eles estão bravos</li>
  •             <li>sabe, coisas.</li>
  •           </ul>
  •         </div>
  •       </div>
  •     </div>
  •  
  •     <!--- right column -->
  •     <div class="col-lg-3 mb-2 text-center order-1 order-lg-2">
  •       <!--- ICON DO PERSONAGEM, 200x200 px -->
  •       <img src="https://i.imgur.com/Ru3npF4.png" style="max-height:150px; max-width:150px;" class="rounded-circle">
  •  
  •       <!--- imagem estética / personagem, cole duas vezes para visualização no celular -->
  •       <div style="background:url(https://i.imgur.com/61qQZwf.png) center; background-size:cover; border:0px; height:388px;" class="card p-0 mt-2 d-lg-block d-none"></div>
  •       <div style="background:url(https://i.imgur.com/61qQZwf.png) center; background-size:cover; border:0px; height:250px;" class="card p-0 mt-2 d-block d-lg-none"></div>
  •     </div>
  •   </div>
  •  
  •   <!--- coding credits -->
  •   <div class="text-right small">
  •     <a title="icon" href="link to icon artist" class="text-info" data-toggle="tooltip" data-placement="left"><i class="fal fa-image"></i></a> | 
  •     <a title="focal image" href="link to aesthetic source/character image artist" class="text-info" data-toggle="tooltip" data-placement="left"><i class="fal fa-image"></i></a> | 
  •     <a href="https://toyhou.se/6737495.-12-stacked-tabs" class="text-info" data-toggle="tooltip" data-placement="left" title="code by kye"><i class="fal fa-code"></i></a>
  •   </div>
  • </div>