API tools faq
paste
Advertisement
LeafJelly

Outlines Chara Code

LeafJelly
Nov 10th, 2022 (edited)
2,147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.33 KB | Source Code | 0 0
raw download clone embed print report
  1. <!----------------------------------
  2.    Free to Use Chara Code
  3.    Outlines by LeafJelly
  4.  
  5. Border Color: #5ACAE9
  6. Text Accent Color: #009BC6
  7. ------------------------------------>
  8.  
  9. <div class="row no-gutters col-12 col-lg-8 mx-auto" style="width:900px;font-weight:100;font-family:calibri;">
  10.         <!------------------  NAVIGATION BUTTONS  ----------------------->
  11.          <div class="col-2 col-lg-1">
  12.              <div class="nav flex-column">
  13.                  <a class="nav-item btn rounded-0" style="border-radius:2em 0em 0em 1em; border:1px solid #5ACAE9; border-width:1px 0px 1px 1px; color:#5ACAE9;" data-toggle="tab" href="#one">
  14.                  <i class="fal fa-star fa-lg"></i></a>
  15.                
  16.                  <a class="nav-item btn rounded-0 mt-1" style="border-radius:1em 0em 0em 1em; border:1px solid #5ACAE9; border-width:1px 0px 1px 1px; color:#5ACAE9;" data-toggle="tab" href="#two">
  17.                  <i class="fal fa-book fa-lg"></i></a>
  18.                
  19.                  <a class="nav-item btn rounded-0 mt-1" style="border-radius:1em 0em 0em 1em; border:1px solid #5ACAE9; border-width:1px 0px 1px 1px; color:#5ACAE9;" data-toggle="tab" href="#three">
  20.                  <i class="fal fa-image fa-lg"></i></a>
  21.                
  22.                  <a class="nav-item btn rounded-0 mt-1" style="border-radius:1em 0em 0em 1em; border:1px solid #5ACAE9; border-width:1px 0px 1px 1px; color:#5ACAE9;" data-toggle="tab" href="#four">
  23.                  <i class="fal fa-palette fa-lg"></i></a>
  24.                  
  25.                  <a class="nav-item btn rounded-0 mt-1" style="border-radius:1em 0em 0em 1em; border:1px solid #5ACAE9; border-width:1px 0px 1px 1px; color:#5ACAE9;" data-toggle="tab" href="#five">
  26.                  <i class="fal fa-users fa-lg"></i></a>
  27.                  
  28.                  <!-----Music Player
  29.                    Replace l69v6SVoE9k with your youtube ID, but keep the ?controls=0
  30.                    You can find this by clicking share button on the youtube video. The ID is the stuff after .com/
  31.                 ------>
  32.                  <a class="nav-item btn melody-embed rounded-0 mt-1" style="border-radius:1em 0em 0em 2em; border:1px solid #5ACAE9; border-width:1px 0px 1px 1px; color:#5ACAE9;">
  33.                      <iframe style="opacity:.01;position:absolute;right:0;top:200px;height:120px;width:200px;transform:rotate(180deg)"
  34.                    
  35.                      
  36.                      src="https://www.youtube.com/embed/l69v6SVoE9k?controls=0" frameborder="0"></iframe>
  37.                      
  38.                       <i class="fal fa-play-pause fa-fw fa-lg" ></i></a>
  39.              </div>
  40.          </div>
  41.        
  42.          <div class="card col-10 col-lg-11 py-2 px-1 px-lg-3" style="border:1px solid #5ACAE9;border-radius:0em 2em 2em 2em; min-height:450px;">
  43.             <div class="tab-content">
  44.                 <!---------Tab one----------->
  45.                 <div class="tab-pane fade p-1 pb-2 active show" id="one">
  46.                     <div class="row no-gutters">
  47.                         <div class="col-12 col-lg-8 my-auto text-center">
  48.                             <p class="text-uppercase m-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;color:#009BC6">
  49.                                 Character Name</p>
  50.                             <span style="font-weight:400;">
  51.                                 adj &#183; adj &#183; adj &#183; adj
  52.                             </span>
  53.                             <hr class="mt-2">
  54.                            
  55.                             <!----------------Character Basics it goes Left to Right----------------------->
  56.                             <div class="row no-gutters">
  57.                                 <div class="col-12 col-md-6">
  58.                                     <div class="px-1 px-lg-3 justify-content-between">
  59.                                     <p class="text-uppercase" style="font-weight:400; letter-spacing:.1px;color:#009BC6">
  60.                                         Name
  61.                                     </p>
  62.                                         Content Content
  63.                                     </div>
  64.                                     <hr class="col-10 my-1 mx-auto">
  65.                                 </div>
  66.                                
  67.                                 <div class="col-12 col-md-6">
  68.                                     <div class="px-1 px-lg-3 justify-content-between">
  69.                                     <p class="text-uppercase" style="font-weight:400; letter-spacing:.1px;color:#009BC6">
  70.                                         Age
  71.                                     </p>
  72.                                         # Years Old
  73.                                     </div>
  74.                                     <hr class="col-10 my-1 mx-auto">
  75.                                 </div>
  76.                                
  77.                                 <div class="col-12 col-md-6">
  78.                                     <div class="px-1 px-lg-3 justify-content-between">
  79.                                     <p class="text-uppercase" style="font-weight:400; letter-spacing:.1px;color:#009BC6">
  80.                                         Gender
  81.                                     </p>
  82.                                         Content
  83.                                     </div>
  84.                                     <hr class="col-10 my-1 mx-auto">
  85.                                 </div>
  86.                                  
  87.                                 <div class="col-12 col-md-6">
  88.                                     <div class="px-1 px-lg-3 justify-content-between">
  89.                                     <p class="text-uppercase" style="font-weight:400; letter-spacing:.1px;color:#009BC6">
  90.                                         Pronouns
  91.                                     </p>
  92.                                         She/Her &ndash; They/Them
  93.                                     </div>
  94.                                     <hr class="col-10 my-1 mx-auto">
  95.                                 </div>
  96.                                
  97.                                 <div class="col-12 col-md-6">
  98.                                     <div class="px-1 px-lg-3 justify-content-between">
  99.                                     <p class="text-uppercase" style="font-weight:400; letter-spacing:.1px;color:#009BC6">
  100.                                         Orientation
  101.                                     </p>
  102.                                         Content
  103.                                     </div>
  104.                                     <hr class="col-10 my-1 mx-auto">
  105.                                 </div>
  106.                                
  107.                                 <div class="col-12 col-md-6">
  108.                                     <div class="px-1 px-lg-3 justify-content-between">
  109.                                     <p class="text-uppercase" style="font-weight:400; letter-spacing:.1px;color:#009BC6">
  110.                                         Height
  111.                                     </p>
  112.                                         Content
  113.                                     </div>
  114.                                     <hr class="col-10 my-1 mx-auto">
  115.                                 </div>
  116.                                
  117.                                 <div class="col-12 col-md-6">
  118.                                     <div class="px-1 px-lg-3 justify-content-between">
  119.                                     <p class="text-uppercase" style="font-weight:400; letter-spacing:.1px;color:#009BC6">
  120.                                         Race/Species
  121.                                     </p>
  122.                                         Content
  123.                                     </div>
  124.                                     <hr class="col-10 my-1 mx-auto">
  125.                                 </div>
  126.                                
  127.                                 <div class="col-12 col-md-6">
  128.                                     <div class="px-1 px-lg-3 justify-content-between">
  129.                                     <p class="text-uppercase" style="font-weight:400; letter-spacing:.1px;color:#009BC6">
  130.                                         Occupation
  131.                                     </p>
  132.                                         Content
  133.                                     </div>
  134.                                     <hr class="col-10 my-1 mx-auto">
  135.                                 </div>
  136.                                  <!-------Copy and paste above here for more------->
  137.                             </div>
  138.                            
  139.                              <p>This does not scroll don't make it too long. Write a lil about your character here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  140.                                
  141.                              <div>      
  142.                              </div>  
  143.                         </div>
  144.                         <!------ Character Image ------->
  145.                         <div class="col-12 col-lg-4 p-2 h-100" style="top:0px; position: sticky;">
  146.                             <div class="card col-12 p-0" style="border:1px solid #5ACAE9; border-radius:2em;height:400px;
  147.                            
  148.                            background-image: url(https://cdn.discordapp.com/attachments/395263691085316096/1039630377498714203/mmiklu.png);
  149.                            
  150.                            background-position:center; background-repeat:no-repeat; background-size:cover;"></div>
  151.                         </div>
  152.                     </div>
  153.                 </div>
  154.                
  155.                 <!---------Tab two----------->
  156.                 <div class="tab-pane fade p-1 pb-2" id="two" style="height:430px;overflow:auto;">
  157.                
  158.                 <div class="row no-gutters">
  159.                     <p class="text-uppercase m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;color:#009BC6;">
  160.                         <i class="fal fa-book"></i>
  161.                         Trivia</p>
  162.                     <hr class="my-1" width="100%">
  163.                     <ul class="pl-4" style="list-style-type:none;">
  164.                         <li><i class="fa-light fa-chevron-right mr-1"></i>
  165.                             Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  166.                         <li><i class="fa-light fa-chevron-right mr-1"></i>
  167.                             Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
  168.                         <li><i class="fa-light fa-chevron-right mr-1"></i>
  169.                             Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus..</li>
  170.                            
  171.                         <!--------Copy and paste above here for more bulletin points------------->    
  172.                     </ul>
  173.                    
  174.                 <div class="col-12 col-md-6 m-0 p-0">
  175.                     <p class="text-uppercase m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;color:#009BC6;">
  176.                         <i class="fal fa-heart" ></i>
  177.                         Likes</p>
  178.                     <hr class="mx-0 my-1 col-10">
  179.                     <ul class="pl-4" style="list-style-type:none;">
  180.                         <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  181.                             Lorem ipsum dolor sit amet, consectetuer adipiscing.</li>
  182.                         <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  183.                             Aliquam tincidunt mauris eu risus.</li>
  184.                         <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  185.                             Vestibulum auctor dapibus neque.</li>
  186.                         <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  187.                             Nunc dignissim risus id metus.</li>
  188.                         <li><i class="fa-light fa-heart fa-xs mr-1"></i>
  189.                             Cras ornare tristique elit.</li>
  190.                            
  191.                         <!--------Copy and paste above here for more bulletin points------------->    
  192.                     </ul>    
  193.                 </div>
  194.                
  195.                 <div class="col-12 col-md-6 m-0 p-0">
  196.                     <p class="text-uppercase m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;color:#009BC6;">
  197.                         <i class="fal fa-xmark"></i>
  198.                         Disikes</p>
  199.                     <hr class="mx-0 my-1 col-10">
  200.                     <ul class="pl-4" style="list-style-type:none;">
  201.                         <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  202.                             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  203.                         <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  204.                             Aliquam tincidunt mauris eu risus.</li>
  205.                         <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  206.                             Vestibulum auctor dapibus neque.</li>
  207.                         <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  208.                             Nunc dignissim risus id metus.</li>
  209.                         <li><i class="fa-light fa-xmark fa-xs mr-1"></i>
  210.                             Cras ornare tristique elit.</li>
  211.                            
  212.                         <!--------Copy and paste above here for more bulletin points------------->
  213.                     </ul>    
  214.                 </div>
  215.                
  216.                 </div>    
  217.                 </div>
  218.                
  219.                 <!---------Tab three----------->
  220.                 <div class="tab-pane fade p-1 pb-2" id="three">
  221.                     <p class="text-uppercase m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;color:#009BC6;">
  222.                         <i class="fal fa-image"></i>
  223.                         Moodboard</p>
  224.                        
  225.                      <div class="row no-gutters p-0">
  226.                         <!------Image 1------->
  227.                          <div class="col-6 col-md-4 p-1 p-md-1">
  228.                             <div class="col-12" style="height:190px;border:1px solid #5ACAE9;border-radius:1em;background-size:cover; background-position:center;
  229.                            background-image: url(https://64.media.tumblr.com/be48a3834e423b71a32a2455783f643d/523d0614d5e57e2d-d1/s540x810/263baf757917ed12d9307dd99a7a06cc6796aedd.jpg);"></div>
  230.                          </div>
  231.                          
  232.                         <!------Image 2------->
  233.                          <div class="col-6 col-md-4 p-1 p-md-1">
  234.                             <div class="col-12" style="height:190px;border:1px solid #5ACAE9;border-radius:1em;background-size:cover; background-position:center;
  235.                            background-image: url(https://i.pinimg.com/originals/b5/94/c2/b594c21122eca227d7ee918ffb09377f.jpg);"></div>
  236.                          </div>
  237.                        
  238.                         <!------Image 3------->
  239.                          <div class="col-6 col-md-4 p-1 p-md-1">
  240.                             <div class="col-12" style="height:190px;border:1px solid #5ACAE9;border-radius:1em;background-size:cover; background-position:center;
  241.                            background-image: url(https://i.pinimg.com/736x/41/86/e0/4186e0e3dfa39c7cb1b0702ea988d89d--crystal-wallpaper-gem-wallpaper.jpg);"></div>
  242.                          </div>
  243.                        
  244.                         <!------Image 4------->
  245.                          <div class="col-6 col-md-4 p-1 p-md-1">
  246.                             <div class="col-12" style="height:190px;border:1px solid #5ACAE9;border-radius:1em;background-size:cover; background-position:center;
  247.                            background-image: url(https://data.whicdn.com/images/350071668/original.jpg);"></div>
  248.                          </div>
  249.                          
  250.                         <!------Image 5------->
  251.                          <div class="col-6 col-md-4 p-1 p-md-1">
  252.                             <div class="col-12" style="height:190px;border:1px solid #5ACAE9;border-radius:1em;background-size:cover; background-position:center;
  253.                            background-image: url(https://i.pinimg.com/736x/88/65/9e/88659e0bbbe8f2192929a15ed35f250b.jpg);"></div>
  254.                          </div>  
  255.                          
  256.                         <!------Image 6------->
  257.                          <div class="col-6 col-md-4 p-1 p-md-1">
  258.                             <div class="col-12" style="height:190px;border:1px solid #5ACAE9;border-radius:1em;background-size:cover; background-position:center;
  259.                            background-image: url(https://cdna.pcpartpicker.com/static/forever/images/userbuild/254252.42ef8e991ebc34dffd9d3e4e495e1b91.1600.jpg);"></div>
  260.                          </div>
  261.                          
  262.                          
  263.                          
  264.                          <!-----------Copy and Paste above Here--------------->
  265.                      </div>
  266.                      
  267.                 </div>
  268.                
  269.                 <!---------Tab Four----------->
  270.                 <div class="tab-pane fade p-1 p-1" id="four">
  271.                
  272.                     <p class="text-uppercase m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;color:#009BC6;">
  273.                         <i class="fal fa-palette"></i>
  274.                         Design Notes</p>
  275.                    
  276.                     <div class="col-12 px-3 pt-2 my-auto text-center">
  277.                         <ul class="col-12 px-3 text-left" style="list-style-type:none; min-height:150px ;max-height:330px;overflow-y:scroll;overflow-x:hidden">
  278.                             <!------ Reference Image ------->    
  279.                             <img src="https://magicalmirai.com/2016/images/sp_outfit_l.jpg"
  280.                                class="pull-left mr-2" style="width:70%">
  281.                            
  282.                             <!------ Bulletin List ------->
  283.                             <li><i class="fa-light fa-chevron-right mr-1"></i>
  284.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  285.                             <li><i class="fa-light fa-chevron-right mr-1"></i>
  286.                                 Duis sollicitudin elit sed tellus blandit </li>
  287.                             <li><i class="fa-light fa-chevron-right mr-1"></i>
  288.                                 Duis porta eros et velit blandit dapibus.</li>
  289.                             <li><i class="fa-light fa-chevron-right mr-1"></i>
  290.                                 Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  291.                             <li><i class="fa-light fa-chevron-right mr-1"></i>
  292.                                 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. </li>
  293.                             <li><i class="fa-light fa-chevron-right mr-1"></i>
  294.                                 Duis porta eros et velit blandit dapibus.</li>
  295.                             <li><i class="fa-light fa-chevron-right mr-1"></i>
  296.                                 Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  297.                             <li><i class="fa-light fa-chevron-right mr-1"></i>
  298.                                 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>    
  299.                             <!--------Copy and paste abvoe here for more bulletins-------->
  300.                         </ul>
  301.                     </div>
  302.                    
  303.                     <!------ Color Pallete. Change the #Hex codes
  304.                    You can remove or add more colors by copy and pasting/deleting 1 line of code------->
  305.                     <div class="col-12 row no-gutters my-auto" style="height:30px">
  306.                         <div class="col mr-1" style="border-radius:.5em; background:#23272C"></div>
  307.                         <div class="col mr-1" style="border-radius:.5em; background:#373F46"></div>
  308.                         <div class="col mr-1" style="border-radius:.5em; background:#C2CBCC"></div>
  309.                         <div class="col mr-1" style="border-radius:.5em; background:#FFF"></div>
  310.                         <div class="col mr-1" style="border-radius:.5em; background:#FC7AA3"></div>
  311.                         <div class="col mr-1" style="border-radius:.5em; background:#27BDDA"></div>
  312.                         <div class="col mr-1" style="border-radius:.5em; background:#B9FBE9"></div>
  313.                        
  314.                         <!-------Copy and paste above here------->
  315.                     </div>
  316.                 </div>
  317.                
  318.                
  319.                 <!---------Tab five----------->
  320.                 <div class="tab-pane fade p-1 pb-2" id="five" style="max-height:400px; overflow:auto">
  321.                     <p class="text-uppercase m-0 p-0" style="font-size:1.5em; font-weight:300; letter-spacing:.1px;color:#009BC6;">
  322.                         <i class="fal fa-users"></i> Relationships</p>
  323.                     <hr class="my-1">
  324.                    
  325.                     <!----------Relationship 1------------->
  326.                     <div class="row no-gutters my-2">
  327.                         <!----Image----->
  328.                         <div class="rounded-circle mx-auto" style="height:150px;width:150px; border:1px solid #5ACAE9;
  329.                            
  330.                        background: url(https://64.media.tumblr.com/89eabb3c0c26006e7535b425483c8778/63e3060d3fc2ce99-46/s250x400/3be8409148c4f3eb483dd905b30b4b627af9ee66.png) center;
  331.                            
  332.                        background-repeat:no-repeat; background-size:cover;"></div>
  333.                        
  334.                         <div class="col-12 col-lg-8">
  335.                             <a class="text-uppercase" style="font-weight:400; letter-spacing:1px;color:#009BC6"
  336.                            href="URL_HERE">
  337.                             Character Name
  338.                             </a>
  339.                            
  340.                             <!----Info Delete this if you don't it------>  
  341.                             <div>
  342.                                 <span class="mx-2">
  343.                                     <i class="fa-light fa-piano-keyboard"></i>
  344.                                     Relationship Type
  345.                                 </span>
  346.                                
  347.                                 <span class="mx-2">
  348.                                     <i class="fa-light fa-hourglass-end"></i>
  349.                                     Age
  350.                                 </span>
  351.                                
  352.                                 <span class="mx-2">
  353.                                     <i class="fa-light fa-user"></i>
  354.                                     Pronouns
  355.                                 </span>
  356.                                
  357.                             </div>
  358.                         <!--------Info End------->
  359.                        
  360.                         <!-----Text------>
  361.                         <p>
  362.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  363.                         </p>
  364.                         </div>
  365.                        
  366.                     </div>
  367.                     <hr class="my-1">
  368.                     <!----------Relationship 1 END------------->
  369.                    
  370.                    
  371.                     <!----------Relationship 2------------->
  372.                     <div class="row no-gutters my-2 text-right">
  373.                        
  374.                         <div class="col-12 col-lg-8">
  375.                             <a class="text-uppercase" style="font-weight:400; letter-spacing:1px;color:#009BC6"
  376.                            href="URL_HERE">
  377.                             Character Name
  378.                             </a>
  379.                            
  380.                             <!----Info Delete this if you don't it------>  
  381.                             <div>
  382.                                 <span class="mx-2">
  383.                                     <i class="fa-light fa-guitar-electric"></i>
  384.                                     Relationship Type
  385.                                 </span>
  386.                                
  387.                                 <span class="mx-2">
  388.                                     <i class="fa-light fa-hourglass-end"></i>
  389.                                     Age
  390.                                 </span>
  391.                                
  392.                                 <span class="mx-2">
  393.                                     <i class="fa-light fa-user"></i>
  394.                                     Pronouns
  395.                                 </span>
  396.                                
  397.                             </div>
  398.                         <!--------Info End------->
  399.                        
  400.                         <!-----Text------>
  401.                         <p>
  402.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  403.                         </p>
  404.                         </div>
  405.                        
  406.                         <!----Image----->
  407.                         <div class="rounded-circle mx-auto" style="height:150px;width:150px; border:1px solid #5ACAE9;
  408.                            
  409.                        background: url(https://64.media.tumblr.com/72c579478bbe7605fa14aba22c02c5a8/63e3060d3fc2ce99-83/s250x400/856d5f3b6d740aa2411b91e870c065f7ca0a55be.png) center;
  410.                            
  411.                        background-repeat:no-repeat; background-size:cover;"></div>
  412.                        
  413.                     </div>
  414.                     <hr class="my-1">
  415.                     <!----------Relationship 2 END------------->
  416.                    
  417.                    
  418.                     <!----------Relationship 3------------->
  419.                     <div class="row no-gutters my-2">
  420.                         <!----Image----->
  421.                         <div class="rounded-circle mx-auto" style="height:150px;width:150px; border:1px solid #5ACAE9;
  422.                            
  423.                        background: url(https://64.media.tumblr.com/85ec1e14a9d4c550fc1fdfb0e473ff4f/63e3060d3fc2ce99-30/s250x400/b18656d9a307382b51786de45c434feac1532782.png) center;
  424.                            
  425.                        background-repeat:no-repeat; background-size:cover;"></div>
  426.                        
  427.                         <div class="col-12 col-lg-8">
  428.                             <a class="text-uppercase" style="font-weight:400; letter-spacing:1px;color:#009BC6"
  429.                            href="URL_HERE">
  430.                             Character Name
  431.                             </a>
  432.                            
  433.                             <!----Info Delete this if you don't it------>  
  434.                             <div>
  435.                                 <span class="mx-2">
  436.                                     <i class="fa-light fa-drum"></i>
  437.                                     Relationship Type
  438.                                 </span>
  439.                                
  440.                                 <span class="mx-2">
  441.                                     <i class="fa-light fa-hourglass-end"></i>
  442.                                     Age
  443.                                 </span>
  444.                                
  445.                                 <span class="mx-2">
  446.                                     <i class="fa-light fa-user"></i>
  447.                                     Pronouns
  448.                                 </span>
  449.                                
  450.                             </div>
  451.                         <!--------Info End------->
  452.                        
  453.                         <!-----Text------>
  454.                         <p>
  455.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  456.                         </p>
  457.                         </div>
  458.                        
  459.                     </div>
  460.                     <hr class="my-1">
  461.                     <!----------Relationship 3 END------------->
  462.                    
  463.                    
  464.                     <!----------Relationship 4------------->
  465.                     <div class="row no-gutters my-2 text-right">
  466.                        
  467.                         <div class="col-12 col-lg-8">
  468.                             <a class="text-uppercase" style="font-weight:400; letter-spacing:1px;color:#009BC6"
  469.                            href="URL_HERE">
  470.                             Character Name
  471.                             </a>
  472.                            
  473.                             <!----Info Delete this if you don't it------>  
  474.                             <div>
  475.                                 <span class="mx-2">
  476.                                     <i class="fa-light fa-microphone-stand"></i>
  477.                                     Relationship Type
  478.                                 </span>
  479.                                
  480.                                 <span class="mx-2">
  481.                                     <i class="fa-light fa-hourglass-end"></i>
  482.                                     Age
  483.                                 </span>
  484.                                
  485.                                 <span class="mx-2">
  486.                                     <i class="fa-light fa-user"></i>
  487.                                     Pronouns
  488.                                 </span>
  489.                                
  490.                             </div>
  491.                         <!--------Info End------->
  492.                        
  493.                         <!-----Text------>
  494.                         <p>
  495.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  496.                         </p>
  497.                        
  498.                         </div>
  499.                        
  500.                         <!----Image----->
  501.                         <div class="rounded-circle mx-auto" style="height:150px;width:150px; border:1px solid #5ACAE9;
  502.                            
  503.                        background: url(https://64.media.tumblr.com/1b512d99ec25e7aed99434be0b11c382/63e3060d3fc2ce99-a4/s250x400/6875a5791c908157a78ad99b3cf0973a79cfd96c.png) center;
  504.                            
  505.                        background-repeat:no-repeat; background-size:cover;"></div>
  506.                     </div>
  507.                     <hr class="my-1">
  508.                     <!----------Relationship 4 END------------->
  509.                    
  510.                 </div>
  511.                
  512.             </div>    
  513.          </div>
  514.      </div>  
  515.      
  516. <!--------Credit do not remove----------->
  517. <div class="col-12 col-lg-8 text-center my-1 mx-auto">
  518.     <a href="/LeafJelly" title="HTML by LeafJelly"><i class="fal fa-code text-muted mx-1"></i></a>
  519. </div>
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!