API tools faq
paste
Kawaii-Lau

The Darkling [Profile Text]

Kawaii-Lau
Jul 11th, 2021 (edited)
1,632
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 27.43 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.   ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  3.    Thank you for using my code!
  4.   ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  5. Rules to Follow:
  6.  
  7. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  8. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  9. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#4770).
  10. ✶ If you like to share this code, send to your friends the link of my blog, https://kawaii-lau.tumblr.com , and support me!
  11.  
  12. If you like a custom code, check out my blog to see if requests are open!
  13. XOXO, Lauren.
  14.     ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  15.       2021 © Coding by Kawaii-Lau
  16.     ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  17. -->
  18.  
  19. <html>
  20.   <style>
  21.    
  22. /* EASY CUSTOM COLOR CHANGE CSS */    
  23.     :root {
  24.       --body-bgcolor:black;
  25.       --accent1:#424f54;
  26.       --accent2:#276a6e;
  27.       --infobox-bgcolor:#b5b5b5;
  28.       --font-color:black;
  29.    
  30.       --box-shadow1:#736c6f;
  31.       --infobox-border:;
  32.      
  33.       --title-color1:darkgray;
  34.       --title-color2:#f1f1f1;
  35.       --title-shadow:black;
  36.       --button-font-color:white;
  37.       --button-font-colorH:lightgray;
  38.    
  39. /* You can alter the colors as you please. Just DONT REMOVE THE CREDIT */  
  40.       --credits-color:white;
  41.       --credits-color-name:#599b9e;
  42.     }
  43.    
  44. /* SCROLLBAR CSS */    
  45.     ::-webkit-scrollbar {width:5px}
  46.     ::-webkit-scrollbar-thumb {
  47.       background-color:var(--accent1)
  48.     }
  49.     ::-webkit-scrollbar-thumb:hover {
  50.       background-color:(--accent2)
  51.     }
  52.    
  53. /* DEFAULT PARAGRAPH MARGINS */
  54.     p, h1, h2, h3, h4, h5, h6 {
  55.       margin:0px;
  56.     }
  57.    
  58.     .ibdiv { /* BOX THAT PUTS THE MAIN BODY DIV AND NAV TOGETHER */
  59.       display:flex;
  60.       flex-direction:row;
  61.       width:540px;height:800px;
  62.       margin:30px auto;
  63.     }
  64.    
  65.     .b0 { /* MAIN BODY DIV */
  66.       background-size:100% 100%;
  67.       width:500px;height:100%;
  68.       overflow:hidden;
  69.       box-shadow:2px 2px 5px var(--box-shadow1), -2px -2px 5px var(--box-shadow1), -2px 2px 5px var(--box-shadow1), 2px -2px 5px var(--box-shadow1);
  70.       color:var(--font-color)
  71.     }
  72.    
  73.     nav {
  74.       width:40px;height:100%
  75.     }
  76.    
  77.     /* NAVIGATION BUTTONS */
  78.     button {
  79.       border:none;
  80.       margin:0px 0px 5px 0px;
  81.       transition:1s ease;
  82.       background-color:var(--accent1);
  83.       color:var(--button-font-color);
  84.       font-size:14px;
  85.       font-family:Lora;
  86.     }
  87.    
  88.     button:hover {
  89.       background-color:var(--accent2);
  90.       color:var(--button-font-colorH);
  91.       cursor:pointer;
  92.     }
  93.    
  94.     .prpic {/* PROFILE PICTURE*/
  95.       overflow:hidden;
  96.       width:150px;height:150px;
  97.       border-radius:100%;
  98.       position:absolute;
  99.       z-index:5;
  100.       margin:-130px 0px 0px -30px
  101.     }
  102.    
  103.     h1.title { /* NAME / TITLE */
  104.       font-family:Lora;
  105.       font-size:40px;
  106.       color:var(--title-color1);
  107.       text-shadow:1px 1px var(--title-shadow), -1px 1px var(--title-shadow), 1px -1px var(--title-shadow), -1px -1px var(--title-shadow);
  108.       margin:10px 0px;
  109.     }
  110.     h2.subtitle { /*QUOTE / SUBTITLE*/
  111.       width:350px;
  112.       font-family:'Sedgwick Ave';
  113.       color:var(--title-color2);
  114.       margin:10px 0px;
  115.       letter-spacing:2px;
  116.     }
  117.    
  118. /* CONTENT PAGES CSS */    
  119.     .content {display:none}
  120.     .info { /* INFO PAGE */
  121.       height:600px;
  122.       margin:-100px 20px 20px 20px;
  123.       border:4px double var(--infobox-bgcolor);
  124.       background-clip:padding-box;
  125.       overflow:auto;
  126.       padding:10px;
  127.     }
  128.    
  129.     .iM  { /* INFO MARKUP */
  130.       background-color:var(--infobox-bgcolor);
  131.       padding:10px;
  132.       font-family:'Lora';
  133.       margin:10px 0px;
  134.     }
  135.    
  136. /* PAGE1: PROFILE PAGE CSS */
  137.     .p1 { /* ICONS ROW*/
  138.       display:flex;
  139.       flex-direction:row;
  140.       justify-content:center;
  141.       position:relative;
  142.       top:-45px;}
  143.    
  144.     .p1 img { /* ICONS ROW IMAGES CSS */
  145.       width:90px;
  146.       height:90px;
  147.       border-radius:3px;
  148.       margin-right:10px;
  149.     }
  150.  
  151. /* General INFO TABLE */
  152.   table.gTable {
  153.   font-size:12px;
  154.     }
  155.   table.gTable td:first-child {
  156.   padding-right:10px;
  157.   width:160px;
  158.   box-sizing:border-box;
  159.     }
  160.   table.gTable td:first-child span:first-child {
  161.   font-size:10px;
  162.     }
  163.    
  164.  /* INFO TABLE: INTERESTS AND GOALS */
  165.   table.tInG td {
  166.       padding:5px 0px ;
  167.       border-bottom:1px solid var(--accent1)
  168.     }
  169.   table.tInG tr:last-child td {
  170.       border-bottom:none;
  171.     }
  172.    
  173.  /* INFO TABLE: ABILITIES */    
  174.     table.tAb td, table.tAb td:first-child {
  175.       width:120px;
  176.     }
  177.    
  178.     table.tAb img {
  179.       width:30px; height:30px;
  180.       border:1px solid;
  181.       border-radius:5px;
  182.       float:left;
  183.       margin:0px 5px 5px 5px;
  184.     }
  185.    
  186.     table.tAbm td, table.tAbm td:first-child {
  187.       width:170px;
  188.     }
  189.  
  190.  /* INFO TABLE: RELATIONS */    
  191.  .tRel {
  192.   margin:0px auto;
  193.   width:400px;
  194.   font-size:12px;
  195. }
  196. .tRel .col1, .tRel .col2 {
  197.   width:190px;
  198.   box-sizing:border-box;
  199. }
  200. .tRel .col1 {
  201.   margin-right:10px;
  202. }
  203. .tRel .col1 div, .tRel .col2 div {
  204.   padding:5px;
  205.   box-sizing:border-box;
  206.   background-color:var(--accent1);
  207.   color:var(--button-font-color);
  208.   border-radius:5px;
  209.   margin:0px 0px 10px
  210. }
  211.    
  212.     .tRel .col1 div img, .tRel .col2 div img {
  213.       width:100px ; height:100px;
  214.     }
  215. /* INFO TABLE: PLAYLIST */    
  216.    
  217.  .song {
  218.   display:flex; flex-direction:row;
  219.   margin-bottom:10px;
  220. }
  221. .song img {
  222.   width:80px; height 80px;
  223.   margin-right:1px;
  224. }
  225. .song div {
  226.   background-color:var(--infobox-bgcolor);
  227.   width:100%;
  228.   box-sizing:border-box;
  229.   padding:10px;
  230. }
  231. .song div h3 {
  232.   margin-bottom:5px;
  233.   font-size:22px;
  234. }  
  235.    
  236. /* APPEARANCE AESTHETIC GRID */    
  237.     .aAes {
  238.       display:flex;
  239.       flex-direction:row;
  240.       justify-content:center
  241.     }
  242.     .aAes img {
  243.       width:120px;height:120px;
  244.     }    
  245.    
  246. /* ADVANCED CSS DECORATIONS */    
  247.     /* DECORATION MASK */
  248.      .mask {
  249.   position: relative;
  250.   z-index: 3;
  251.   -webkit-mask-size: 100% 100%;
  252.     }
  253.     .m1 {
  254.   -webkit-mask-image:
  255.   url(https://i.imgur.com/mBVNS04.png);
  256.   width: 600px;
  257.   height: 200px;
  258.   background: var(--accent1);
  259.   margin: -100px 0px 0px -70px;
  260.         }
  261.   </style>
  262.  
  263. <!-- CUSTOM FONTS -->  
  264.   <link href="https://fonts.googleapis.com/css2?family=Lora" rel="stylesheet">
  265.   <link href="https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap" rel="stylesheet">
  266.  
  267.    <script>
  268.         function openInfo(evt, page) {
  269.             var i, tabcontent, tablinks;
  270.             content = document.getElementsByClassName("content");
  271.             for (i = 0; i < content.length; i++) {
  272.                content[i].style.display = "none";
  273.            }
  274.            tablinks = document.getElementsByClassName("tablinks");
  275.            for (i = 0; i < tablinks.length; i++) {
  276.                tablinks[i].className = tablinks[i].className.replace(" active", "");
  277.            }
  278.            document.getElementById(page).style.display = "block";
  279.            evt.currentTarget.className += " active";
  280.  
  281.        } {}
  282.    </script>
  283.  
  284.   <body style="background-color:var(--body-bgcolor);">
  285.     <div class="ibdiv">
  286.    
  287.       <!-- MAIN BOX BACKGROUND-->
  288.       <div class="b0" style="background-image:url(https://wallpapercave.com/wp/wp6290525.jpg)">
  289.         <div class="mask m1"></div>
  290.      
  291.       <!-- PROFILE PICTURE -->
  292.       <div class="prpic"><img src="https://i.imgur.com/DCOuDfL.jpg" style="width:100%;height:100%;"/></div>
  293.       <div style="position:relative;top:-100px;left:130px;z-index:7">
  294.        
  295.         <h1 class="title"><i>The Darkling</i></h1>
  296.        
  297.         <h2 class="subtitle"><i>"Make me your villain.... I've seen what you truly are"</i></h2>
  298.       </div>
  299.      
  300. <!-- !!START OF DIFFERENT PAGES!! -->    
  301. <!--★★★ PAGE1: BASIC PROFILE ★★★-->
  302.       <div class="content info"
  303.           id="page1" style="display:block;">
  304.          
  305.         <!-- FIRST BOX SEGMENT --><div class="iM" style="margin-top:40px;">
  306.             <div class="p1">
  307.              <!-- ICONS ROW -->
  308.  <!--ICON1--><img src="https://i.pinimg.com/originals/2f/89/9e/2f899ed38c37906f132f6f23d069181c.jpg"/>
  309. <!--ICON2--><img src="https://64.media.tumblr.com/c5befca40699aec888d7081f1a86415f/fbfdf73850782a93-2a/s500x750/4134123bb8330bec4cd3afb99b2395ae1ae3be3c.png"/>
  310. <!--ICON3--><img src="https://data.whicdn.com/images/332273850/original.jpg"/>
  311. <!--ICON4--><img src="https://i.pinimg.com/564x/35/eb/b2/35ebb2d120da0fe0a2808661e1d6e526.jpg"/>
  312.             </div>
  313.            
  314.  <!-- BASIC PROFILE INFO TABLE -->
  315.             <table class="gTable tPr" style="margin:-30px 10px 0px;">
  316.               <tr>
  317.                 <td>
  318.                   <span>➤ &nbsp;</span> Full name</td><td> here</td>
  319.               </tr>
  320.               <tr>
  321.                 <td>
  322.                   <span>➤ &nbsp;</span> Aliases</td><td>here</td>
  323.               </tr>
  324.               <tr>
  325.                 <td>
  326.                   <span>➤ &nbsp;</span> Date of Birth </td><td>here</td>
  327.               </tr>
  328.               <tr>
  329.                 <td>
  330.                   <span>➤ &nbsp;</span> Hogwarts House</td><td> here</td>
  331.               </tr>
  332.               <tr>
  333.                 <td>
  334.                   <span>➤ &nbsp;</span> Blood Status</td><td> here</td>
  335.               </tr>
  336.               <tr>
  337.                 <td>
  338.                   <span>➤ &nbsp;</span> Occupation </td><td>here</td>
  339.               </tr>
  340.               <tr>
  341.                 <td>
  342.                   <span>➤ &nbsp;</span> Orientation </td><td>here</td>
  343.               </tr>
  344.               <tr>
  345.                 <td>
  346.                   <span>➤ &nbsp;</span> Birth place </td><td>here</td>
  347.               </tr>
  348.               <tr>
  349.                 <td>
  350.                   <span>➤ &nbsp;</span> Extra </td><td>here</td>
  351.               </tr>
  352.             </table>
  353.            
  354.            
  355.           </div><!-- END OF FIRST BOX SEGMENT-->
  356.      
  357. <!-- SECOND BOX SEGMENT--><div class="iM">
  358.            
  359.         <div style="display:flex;flex-direction:row;">
  360.          
  361.           <div style="width:220px;">
  362.            
  363.  <!-- BIOGRAPHY -->          
  364.             <p style="text-align:center;">Short Biography</p>
  365.             <p style="font-size:11px;text-align:justify"><span style="font-size:26px;">P</span>otter. Walkers. Thrones. Olympians. Nephilim. Galaxies. Mystic Falls. Alagaesia. Supernaturals. Fairy Tales. Gladers United. Forgotten Dungeons. Legends. Meta Humans. Bending Arts. Jade Mountain. Unseen Arts. High Fae. Middle Earth. Mutants. Narnia Kingdom. Wild West. Eldritch County. Gladiators. Survival Tribes. Monarchs. Coding. HTML. CSS. Gryffindor. Hufflepuff. Ravenclaw. Slytherin. WoX community. Site Bulletin Board. Coding Help. Academia de Villainary. Signature Factory. Discord. Fandoms. </p>
  366.           </div><!-- END OF COLUMN 1-->
  367.          
  368.           <div style="background:var(--accent1); padding:10px; margin-left:20px; width:150px;">
  369.             <center><img src="https://i.pinimg.com/originals/5b/c0/98/5bc0984dc44b334e69b84da795670ed1.gif" style="width:90px;height:90px;margin:40px auto 10px"/>
  370.               <p style="color:white;font-size:12px;letter-spacing:2px;">☆ ☆ ☆ ☆<br><i><b>A dark edgy quote</b></i><br>☆ ☆ ☆ ☆</p>
  371.             </center>
  372.           </div><!-- END OF COLUMN 2-->
  373.          
  374.         </div>
  375.          
  376.      </div> <!-- END OF SECOND BOX SEGMENT-->
  377.        
  378. <!-- THIRD BOX SEGMENT--><div class="iM">
  379.        
  380.         <table class="gTable tInG" style="margin:0px 10px 0px;">
  381.               <tr>
  382.                 <td>
  383.                   <span>➤ &nbsp;</span> Likes </td><td> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean quis est orci.</td>
  384.               </tr>
  385.               <tr>
  386.                 <td>
  387.                   <span>➤ &nbsp;</span> Dislikes </td><td> Nunc et arcu faucibus, placerat augue ut, mollis tellus. </td>
  388.               </tr>
  389.               <tr>
  390.                 <td>
  391.                   <span>➤ &nbsp;</span> Hobbies </td><td>Lorem ipsum dolor Nunc et arcu faucibus, placerat augue ut, mollis tellus.</td>
  392.               </tr>
  393.               <tr>
  394.                 <td>
  395.                   <span>➤ &nbsp;</span> Goals </td><td> Aliquam in mattis massa. Nunc eget ornare orci. Nulla </td>
  396.               </tr>
  397.               <tr>
  398.                 <td>
  399.                   <span>➤ &nbsp;</span> Fears </td><td>mattis purus a posuere sodales. Nullam sit amet leo felis. Duis sit amet consequat arcu,</td>
  400.               </tr>
  401.             </table>
  402.         </div><!-- END OF BOX SEGMENT-->
  403.       </div><!-- END OF PAGE1: PROFILE-->
  404.      
  405. <!--★★★ PAGE2: APPEARANCE ★★★-->      
  406.       <div class="content info" id="page2">  
  407. <!--AESTHETIC APPEARANCE GRID->
  408.        <!--ROW 1-->
  409.         <div class="aAes">
  410.           <img src="https://data.whicdn.com/images/336892116/original.jpg"/>
  411.           <img src="https://gamblincolors.com/wp-content/uploads/2016/04/Ivory-Black-1.jpg"/>
  412.           <img src="https://gamblincolors.com/wp-content/uploads/2016/04/Ivory-Black-1.jpg"/>
  413.         </div>
  414.        
  415.        
  416.         <!--ROW 2-->
  417.         <div class="aAes">
  418.           <img src="https://gamblincolors.com/wp-content/uploads/2016/04/Ivory-Black-1.jpg"/>
  419.           <img src="https://i.imgur.com/Ej3usWB.jpg"/>
  420.           <img src="https://gamblincolors.com/wp-content/uploads/2016/04/Ivory-Black-1.jpg"/>
  421.         </div>
  422.        
  423.        
  424.         <!--ROW 3-->
  425.         <div class="aAes">
  426.           <img src="https://gamblincolors.com/wp-content/uploads/2016/04/Ivory-Black-1.jpg"/>
  427.           <img src="https://gamblincolors.com/wp-content/uploads/2016/04/Ivory-Black-1.jpg"/>
  428.           <img src="https://i.pinimg.com/474x/80/6a/f0/806af0cbbc240821d9e00f66190ae735.jpg"/>
  429.          
  430.         </div>
  431.        
  432.         <div class="iM">
  433.           <div style="display:flex;flex-direction:row;justify-content:center;">
  434.            
  435.             <div style="width:220px;">
  436.           <p style="font-size:14px;"><b>Appearance</b></p><br>
  437.           <p style="font-size:11px; text-align:justify">
  438. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam in mattis massa. Nunc eget ornare orci. Nulla mattis purus a posuere sodales. Nullam sit amet leo felis. Duis sit amet consequat arcu, sed sollicitudin nunc. Phasellus id accumsan dui. Mauris tristique metus vitae urna malesuada pellentesque. Aliquam pretium nec dolor vel hendrerit.</p>
  439.           </div><!-- END OF COLUMN1 -->
  440.           <div style="width:220px;">
  441.             <table class="gTable tPr" style="margin:0px 10px 0px;">
  442.               <tr>
  443.                 <td>
  444.                   <span>➤ &nbsp;</span> Height</td><td> here</td>
  445.               </tr>
  446.               <tr>
  447.                 <td>
  448.                   <span>➤ &nbsp;</span> Weight</td><td>here</td>
  449.               </tr>
  450.               <tr>
  451.                 <td>
  452.                   <span>➤ &nbsp;</span> Hair Color </td><td>here</td>
  453.               </tr>
  454.               <tr>
  455.                 <td>
  456.                   <span>➤ &nbsp;</span> Eye color </td><td> here</td>
  457.               </tr>
  458.               <tr>
  459.                 <td>
  460.                   <span>➤ &nbsp;</span> Body Type  </td><td> here</td>
  461.               </tr>
  462.             </table>
  463.            
  464.             <div style="height:250px;">
  465.               <center><img src="https://www.pngkit.com/png/detail/94-941102_black-roses-png-black-rose-white-background.png" style="width:60%;margin-top:30px;"/></center>
  466.             </div>
  467.            
  468.           </div><!-- END OF COLUMN2 -->
  469.            
  470.           </div>
  471.         </div> <!-- END OF BOX  SEGMENT -->
  472.       </div> <!-- END OF PAGE 2: APPEARANCE -->
  473.        
  474.  <!--★★★ PAGE3: PERSONALITY ★★★-->      
  475.         <div class="content info" id="page3">
  476.           <div class="iM" style="margin-top:30px;">
  477.               <h1 style="text-align:center; font-size:48px; margin-top:-40px; color: white; text-shadow:1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 2px 2px black, -2px 2px black, 2px -2px black, -2px -2px black; ">ISTJ</h1>
  478.            
  479.             <div>
  480.               <table class="gTable tPr" style="margin:0px auto 10px;">
  481.               <tr>
  482.                 <td style="font-size:18px;"><b>Strengths</b></td>
  483.                 <td style="font-size:18px;"><b>Weaknesses</b></td>
  484.               </tr>
  485.              
  486.     <tr>
  487.       <td><span>✔ &nbsp;</span> Positive</td>
  488.       <td><span>☒ &nbsp;</span> Negative</td>
  489.      </tr>
  490.     <tr>
  491.       <td><span>✔ &nbsp;</span> Positive</td>
  492.       <td><span>☒ &nbsp;</span> Negative</td>
  493.      </tr>
  494.     <tr>
  495.       <td><span>✔ &nbsp;</span> Positive</td>
  496.       <td><span>☒ &nbsp;</span> Negative</td>
  497.      </tr>            
  498.     <tr>
  499.       <td><span>✔ &nbsp;</span> Positive</td>
  500.       <td><span>☒ &nbsp;</span> Negative</td>
  501.      </tr>        
  502.               </table>
  503.             </div>
  504.            
  505.           </div> <!-- END OF BOX SEGMENT -->
  506.          
  507.          
  508.           <div style="margin:20px 0px">
  509.             <center><img src="https://pbs.twimg.com/media/DPA2X7xX0AcQ3f1.jpg" style="width:200px;"/></center>
  510.           </div><!-- END OF BOX SEGMENT -->
  511.          
  512.          
  513.           <div class="iM">
  514.             <h3 style="text-align:center">Personality</h3>
  515.             <p style="text-align:justify; font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis. Fusce tempus dolor eu magna elementum</p>
  516.           </div> <!-- END OF BOX SEGMENT -->
  517.          
  518.         </div> <!-- END OF PAGE 3: PERSONALITY -->
  519. <!--★★★ PAGE4: ABILITIES ★★★-->        
  520.         <div class="content info" id="page4">
  521.           <div class="iM" style="margin-top:50px;">
  522.             <h2 style="text-align:center">Abilities</h2>
  523.      
  524.            
  525. <!-- MAJOR ABILITIES TABLE -->
  526.       <table class="gTable tAb tAbm" style="margin:10px auto">
  527.         <tr>
  528.          <td style="font-size:16px;"><b>Status</b></td>
  529.          <td style="font-size:16px;"><b>Weapon of Choice</b></td>
  530.         </tr>
  531.         <tr>
  532.           <td><img src="https://via.placeholder.com/30"/>
  533.             <p>None</p>
  534.           </td>
  535.           <td><img src="https://data.whicdn.com/images/267753023/original.jpg"/>
  536.             <p>Magic</p></td>
  537.         </tr>
  538.       </table>
  539.  
  540. <!-- INDIVIDUAL ABILITIES LIST -->            
  541.       <table class="gTable tAb" style="margin:10px auto">
  542.         <tr>
  543.           <td style="font-size:16px;"><b>Born Skills</b></td>
  544.            <td style="font-size:16px;"><b>Learnt Skills</b></td>
  545.           <td style="font-size:16px;"><b>Vulnerabilities</b></td>
  546.         </tr>
  547.         <tr>
  548.            <!--BornSkills--><td><img src="https://i.imgur.com/h9yTbvs.png"/>
  549.             <p>Dark Power</p></td>
  550.            <!--LearntSkills--><td><img src="https://i.imgur.com/WXmaanI.png"/>
  551.             <p>Enhanced Darkness</p></td>
  552.           <!--Vulnerabilities--><td><img src="https://i.imgur.com/zjikDTT.png"/>
  553.             <p>Darkness Consumption</p></td>  
  554.         </tr>
  555.         <tr>
  556.            <!--BornSkills--><td><img src="https://via.placeholder.com/30"/>
  557.             <p> here</p></td>
  558.            <!--LearntSkills--><td><img src="https://via.placeholder.com/30"/>
  559.             <p> here</p></td>
  560.           <!--Vulnerabilities--><td><img src="https://via.placeholder.com/30"/>
  561.             <p> here</p></td>  
  562.         </tr>
  563.         <tr>
  564.            <!--BornSkills--><td><img src="https://via.placeholder.com/30"/>
  565.             <p> here</p></td>
  566.            <!--LearntSkills--><td><img src="https://via.placeholder.com/30"/>
  567.             <p> here</p></td>
  568.           <!--Vulnerabilities--><td><img src="https://via.placeholder.com/30"/>
  569.             <p> here</p></td>  
  570.         </tr>
  571.         <tr>
  572.            <!--BornSkills--><td><img src="https://via.placeholder.com/30"/>
  573.             <p> here</p></td>
  574.            <!--LearntSkills--><td><img src="https://via.placeholder.com/30"/>
  575.             <p> here</p></td>
  576.           <!--Vulnerabilities--><td><img src="https://via.placeholder.com/30"/>
  577.             <p> here</p></td>  
  578.         </tr>
  579.       </table>
  580.           </div><!--END OF BOX SEGMENT-->
  581.          
  582.           <center>
  583.             <img src="https://i.pinimg.com/originals/c8/2c/e0/c82ce079491bb3f4a26c83ac54f347a9.gif" style="width:95%; margin: 20px 0px"/>
  584.           </center>
  585.          
  586.         </div><!--END OF PAGE4: ABILITIES-->
  587.        
  588. <!--★★★ PAGE5: RELATIONS ★★★-->        
  589.         <div class="content info" id="page5">
  590.           <div class="iM">
  591.            
  592.             <!-- RELATIONS START -->
  593.             <div class="tRel" style="display:flex; flex-direction:row">
  594.              
  595.    <!-- COLUMN 1-->          
  596.               <div class="col1">
  597.                 <div>
  598.                   <center><img src="https://via.placeholder.com/100"/></center>
  599.                   <p style="text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus.</p>
  600.                 </div><!--END OF RELATION-->
  601.                
  602.                 <div>
  603.                   <center><img src="https://via.placeholder.com/100"/></center>
  604.                   <p style="text-align:justify">Mattis purus a posuere sodales. Nullam sit amet leo felis. Duis sit amet consequat arcu, sed sollicitudin nunc. Phasellus id accumsan dui. Mauris tristique metus</p>
  605.                 </div><!--END OF RELATION-->
  606.                
  607.                 <div>
  608.                   <center><img src="https://via.placeholder.com/100"/></center>
  609.                   <p style="text-align:justify">Fum, quis faucibus velit sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam</p>
  610.                 </div><!--END OF RELATION-->
  611.                
  612.               </div><!--END OF COLUMN1-->
  613.              
  614.   <!-- COLUMN 2-->            
  615.               <div class="col2">
  616.                 <div>
  617.                   <center><img src="https://via.placeholder.com/100"/></center>
  618.                   <p style="text-align:justify"> Aenean quis est orci. Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales.</p>
  619.                 </div><!--END OF RELATION-->
  620.                
  621.                 <div>
  622.                   <center><img src="https://via.placeholder.com/100"/></center>
  623.                   <p style="text-align:justify">Fum, quis faucibus velit sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam</p>
  624.                 </div><!--END OF RELATION-->
  625.                
  626.                 <div>
  627.                   <center><img src="https://via.placeholder.com/100"/></center>
  628.                   <p style="text-align:justify">Fum, quis faucibus velit sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam</p>
  629.                 </div><!--END OF RELATION-->
  630.                
  631.               </div><!--END OF COLUMN2-->
  632.              
  633.             </div><!--END OF RELATIONS-->
  634.           </div>
  635.          
  636.         </div><!--END OF PAGE5: RELATIONS-->
  637.  
  638. <!--★★★ PAGE6: PLAYLIST ★★★-->                
  639.         <div class="content info" id="page6">
  640.           <center>
  641.             <h1 style="color:white">Playlist</h1>
  642.             <p style="color:white">
  643.               <i>"favorite lyrics line"</i>
  644.             </p>
  645.           </center>
  646. <!-- SONGS -->          
  647.           <br>
  648.           <div class="song">
  649.             <img src="https://via.placeholder.com/80"/>
  650.             <div>
  651.               <h3>Song Title</h3>
  652.               <p>Artist</p>
  653.             </div>
  654.           </div><!--End of SONG-->
  655.          
  656.           <div class="song">
  657.             <img src="https://via.placeholder.com/80"/>
  658.             <div>
  659.               <h3>Song Title</h3>
  660.               <p>Artist</p>
  661.             </div>
  662.           </div><!--End of SONG-->
  663.          
  664.           <div class="song">
  665.             <img src="https://via.placeholder.com/80"/>
  666.             <div>
  667.               <h3>Song Title</h3>
  668.               <p>Artist</p>
  669.             </div>
  670.           </div><!--End of SONG-->
  671.          
  672.           <div class="song">
  673.             <img src="https://via.placeholder.com/80"/>
  674.             <div>
  675.               <h3>Song Title</h3>
  676.               <p>Artist</p>
  677.             </div>
  678.           </div><!--End of SONG-->
  679.          
  680.         </div><!--END OF PAGE6: PLAYLIST-->
  681.        
  682. <!--★★★ PAGE6: OOG ★★★-->                
  683.         <div class="content info" id="page7">
  684.          
  685.         <div style="display:flex; flex-direction:row; justify-content:center;">
  686.          
  687.    <!--ROSE--><div><img src="https://i.imgur.com/GPQdduD.png" style="width:80px; margin:30px 10px 0px"/></div>
  688.          
  689. <!--OOG DETAILS-->    
  690.          <div style="margin-top:50px; background:var(--infobox-bgcolor); width:180px; padding:10px;">
  691.             <img src="https://64.media.tumblr.com/ebb6872deecce02f2953eb4f8916f68f/fce0f7be6c4c997b-78/s540x810/726794a27882a5a8d17105777eb19fe05a01ce03.gif" style="width:160px; height:160px; margin-bottom:20px"/>
  692.             <div>
  693.               <p style="font-size:18px; color:var(--font-color); text-align:center">
  694.           <b style="font-size:24px;">You</b><br><br>
  695.             Timezone<br>
  696.             Discord<br>
  697.             Extra<br><br>
  698.                 Faceclaim: Ben Barnes
  699.                 <p>
  700.             </div>
  701.            
  702.           </div><!--END OF BOX SEGMENT-->
  703.          
  704.    <!--ROSE--><div><img src="https://i.imgur.com/GPQdduD.png" style="width:80px; transform:rotateY(180deg); margin:90px 0px 0px 10px"/></div>
  705.          
  706.          </div><!--END OF FLEXBOX-->
  707.         </div><!--END OF PAGE7: OOG-->
  708.       </div><!-- END OF INFO BOX -->
  709. <!--NAVIGATION BUTTONS-->
  710.       <nav>
  711.         <button onclick="openInfo(event, 'page1')">Profile</button>
  712.         <button onclick="openInfo(event, 'page2')">Appearance</button>
  713.         <button onclick="openInfo(event, 'page3')">Personality</button>
  714.         <button onclick="openInfo(event, 'page4')">Abilities</button>
  715.         <button onclick="openInfo(event, 'page5')">Relations</button>
  716.         <!-- (unable other pages here) -->
  717.         <button onclick="openInfo(event, 'page6')">Playlist</button>
  718.         <!-- (to here) -->
  719.         <button onclick="openInfo(event, 'page7')">OOG</button>
  720.        
  721.   <!-- CREDITS ★★ DO NOT REMOVE OR ELSE I WILL BREAK YOUR KNEES♡♡♡ ★★-->      
  722.         <div style="color:var(--credits-color);height:200px;"><p style="transform:rotate(90deg);width:200px;margin:500px 0px 0px -90px">2021 &copy; Coding by <a style="color:var(--credits-color-name);text-decoration:none" href="https://kawaii-lau.tumblr.com" target="_blank">Kawaii-Lau</a></p></div>
  723.       </nav>
  724.     </div>
  725.   </body>
  726. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!