API tools faq
paste
Advertisement
Kawaii-Lau

My Chance! [PT] levi

Kawaii-Lau
Aug 29th, 2021
1,894
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.20 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#0005).
  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. <html>
  19. <style>
  20. :root {
  21.   --mainBg:#3b334a; /* ACCENT 1 */
  22.   --mainBgPattern:#d47519; /* ACCENT 2 */
  23.   --border:#ff7e00; /* BORDER COLOR */
  24.   --col1Bg:#3b334a; /* SIDEBAR BG COLOR */
  25.   --defaultText:white; /* TEXT COLOR */
  26.   --defaultFont:'Helvetica', sans-serif; /* FONT FAMILY */
  27.   --defaultFontSize:12px; /* FONT SIZE */
  28.  
  29.   --boxHeight:1600px; /* RESIZE ENTIRE BOX SO YOU CAN FIT IN MORE STUFF */
  30. }
  31. /* SCROLL BAR */
  32. ::-webkit-scrollbar {
  33.   width:2px; height:5px;
  34.   background-color:transparent;
  35. }
  36. ::-webkit-scrollbar-thumb {
  37.   background:var(--border);
  38. }
  39.  
  40. main, div, section {box-sizing:border-box;}/* DEFAULT BOX SIZE */
  41.  
  42. /* MAIN BOX */
  43. .mainBox {
  44.   width:650px; min-height:var(--boxHeight);
  45.   margin:20px auto;
  46.   border:1px solid var(--border);
  47.   border-radius:5px;
  48.   background-color:var(--mainBg);
  49. }
  50. .mainBoxBg {
  51.   -webkit-mask-image:url(https://i.imgur.com/N7tf8MC.png);
  52.   -webkit-mask-size:30% auto;
  53.   width:100%; height:var(--boxHeight);
  54.   background-color:var(--mainBgPattern);
  55.   position:relative;
  56. }
  57. .innerMainBox {
  58.   position:relative;
  59.   width:100%;
  60.   height:var(--boxHeight);
  61.   margin-top:calc( var(--boxHeight) - var(--boxHeight) - var(--boxHeight) );
  62.   color:var(--defaultText);
  63.   font-family:var(--defaultFont);
  64.   font-size:var(--defaultFontSize);
  65.   overflow:hidden;
  66. }
  67. .flexBox {
  68.   display:flex; flex-direction:row;
  69.   justify-content:flex-start;
  70.   color:var(--defaultText);
  71. }
  72.  
  73. /* SIDEBOX */
  74. .col1 {
  75.   width:200px; min-height:600px;
  76.   background-color:var(--col1Bg);
  77.   padding:10px;
  78.   color:var(--defaultText);
  79. }
  80. /* BIG BOX */
  81. .col2 {
  82.   width:450px; min-height:600px;
  83.   color:var(--defaultText);
  84.   }
  85.  
  86. /* MUSICAL NOTE */
  87. .note {
  88.   font-size:32px;
  89.   font-style:italic;}
  90.  
  91. /* COLOR STRIP */
  92. .colorStrip {
  93.   border-top:10px solid var(--mainBgPattern);
  94.   border-left:none; border-right:none; border-bottom:none;
  95. }
  96.  
  97. /* PROFILE COLUMN1 */
  98. .pfpImg {
  99.   width:100%; height:auto;
  100.   display:block;
  101.   margin:0px auto;
  102.   box-shadow:-4px 4px rgba(0,0,0,0.4);
  103.   margin-top:-25px;
  104. }
  105.  
  106. /* TABLE IN COLUMN1 */
  107. .col1table td:first-child  {
  108.   width:10px;
  109.   font-size:20px;
  110. }
  111. .col1table td:nth-child(2) {
  112.   width:80px;
  113. }
  114.  
  115. /* OOG IN COLUMN 2 */
  116. .oog {
  117.   margin:0px 10px -14px;
  118.   position:relative;
  119.   font-size:14px;
  120.   text-align:center;
  121. }
  122.  
  123. /* GENERAL INFO BOX */
  124. .infoBox {
  125.   width:95%;
  126.   margin:10px auto;
  127.   padding:10px;
  128.   background:var(--mainBg);
  129.   box-shadow:-3px 3px rgba(0,0,0,0.4);
  130.   border:1px solid rgba(0,0,0,0.4);
  131.   text-align:justify;
  132. }
  133.  
  134. /* QUOTATION MARKS IN QUOTES */
  135. .lquote, .rquote {
  136.   font-size:44px;
  137.   font-style:italic;
  138. }
  139. .lquote {margin:-10px 0px -10px 0px;}
  140. .rquote {margin:0px 20px -20px 0px; text-align:right;}
  141.  
  142.  
  143. /* RELATIONS */
  144. .relationsBox {
  145.   border-bottom:1px solid var(--border);
  146. }
  147.  
  148. .relationsBox, .miscBox {
  149.   height:470px; width:100%;
  150.   overflow:auto;
  151. }
  152.  
  153. .rel button {
  154.   background-color:var(--mainBgPattern);
  155.   border:none;
  156.   border-radius:100%;
  157.   width:30px; height:30px;
  158.   margin:5px;
  159.   color:var(--defaultText);
  160.   font-weight:bold;
  161.   cursor:pointer;
  162. }
  163.  
  164. /* SONGS IN PLAYLIST */
  165. .song img {
  166.   width:80px; height:80px; margin:10px auto; display:block;
  167. }
  168.  
  169. /* AESTHETIC PICTURES */
  170. .aesthetic img {
  171.   width:150px;
  172.   display:block;
  173.   margin:1px auto;
  174. }
  175.  
  176. /* CONTENT PAGES FOR LAYER 2 COLUMN 1 (the one with the buttons) */
  177. .content, .content2 {display:none;}    
  178. </style>
  179. <script>    
  180.     function openInfo(evt, page) {
  181.             var i, tabcontent, tablinks;
  182.             content = document.getElementsByClassName("content");
  183.             for (i = 0; i < content.length; i++) {
  184.                content[i].style.display = "none";
  185.            }
  186.            tablinks = document.getElementsByClassName("tablinks");
  187.            for (i = 0; i < tablinks.length; i++) {
  188.                tablinks[i].className = tablinks[i].className.replace(" active", "");
  189.            }
  190.          document.getElementById(page).style.display = "block";
  191. }
  192.  
  193. function openInfo2(evt, page2) {
  194.            var i, tabcontent, tablinks;
  195.            content = document.getElementsByClassName("content2");
  196.            for (i = 0; i < content.length; i++) {
  197.                content[i].style.display = "none";
  198.            }
  199.            tablinks = document.getElementsByClassName("tablinks");
  200.            for (i = 0; i < tablinks.length; i++) {
  201.                tablinks[i].className = tablinks[i].className.replace(" active", "");
  202.            }
  203.          document.getElementById(page2).style.display = "block";
  204. }
  205. </script>    
  206. <body>
  207.  <div class="mainBox">
  208.    <div class="mainBoxBg"></div><!-- that music pattern -->
  209.    <main class="innerMainBox"><div class="flexBox" style="border-bottom:1px solid var(--border);">
  210.      
  211.      <!-- NAME, PROFILE SECTION -->
  212.       <section class="col1" style="border-right:1px solid var(--border);">
  213.        
  214.       <!-- NAME  -->  
  215.         <h3 style="font-size:18px;"><i>My Chance!<br><!-- FIRST NAME -->
  216.         <span style="font-size:36px">Leviathan</span></i></h3><!-- LAST NAME -->
  217.         <img src="https://static.wikia.nocookie.net/obey-me/images/9/93/My_Chance%21.png" class="pfpImg"/><br><!-- PROFILE PICTURE -->
  218.        
  219.         <table class="col1table"><!-- BASIC INFO PROFILE SHEET -->
  220.           <tr>
  221.             <td>♫</td><td> Nickname</td><td>XXXXX</td>
  222.           </tr>
  223.           <tr>
  224.             <td>♫</td><td> Birthdate</td><td>XX.XX.XXXX</td>
  225.           </tr>
  226.           <tr>
  227.             <td>♫</td><td> Birthplace</td><td>XXXXX</td>
  228.           </tr>
  229.           <tr>
  230.             <td>♫</td><td> Current Residence</td><td>XXXXX</td>
  231.           </tr>
  232.           <tr>
  233.             <td>♫</td><td> Ethnicity</td><td>XXXXX</td>
  234.           </tr>
  235.           <tr>
  236.             <td>♫</td><td> Gender</td><td>XXXXX</td>
  237.           </tr>
  238.           <tr>
  239.             <td>♫</td><td> Sexuality</td><td>XXXXX</td>
  240.           </tr>
  241.           <tr>
  242.             <td>♫</td><td> House</td><td>XXXXX</td>
  243.           </tr>
  244.           <tr>
  245.             <td>♫</td><td> Blood Status</td><td>XXXXX</td>
  246.           </tr>
  247.           <tr>
  248.             <td>♫</td><td> Occupation</td><td>XXXXX</td>
  249.           </tr>
  250.           <tr>
  251.              <td>♫</td><td> Zodiac Sign</td><td>XXXXX</td>
  252.           </tr>
  253.         </table>
  254.       </section>
  255.      
  256.      <!-- OOG, QUOTE, ABOUT ME SECTION -->
  257.      <section class="col2">
  258.        
  259.     <!-- OOG INFO-->    
  260.       <div style="padding:10px 10px 0px;">
  261.         <p class="oog"><b><i>NAME &nbsp;/&nbsp; AGE &nbsp;/&nbsp; TIMEZONE &nbsp;/&nbsp; DISCORD &nbsp;/&nbsp; FACECLAIM</i></b></p>
  262.         <hr class="colorStrip">
  263.       </div>
  264.    
  265.     <!-- QUOTE -->  
  266.       <div class="infoBox">
  267.         <p class="lquote">❝</p>
  268.         <h1 style="text-align:center; margin:0px;"><b><i>This is off record, but everything about you...<br>
  269. ...is more attractive than any anime sequel
  270. </i></b></h1>
  271.         <p class="rquote">❞</p>
  272.         <p style="text-align:right; margin:10px 30px 0px 0px;">- Leviathan</p>
  273.       </div>
  274.        
  275.     <!-- ABOUT ME -->  
  276.        <div class="infoBox">
  277.          <h1 style="margin:0px 10px -20px;"><span class="note">♪&nbsp;</span> About Me</h1>
  278.          <hr class="colorStrip">
  279.          <p> 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.</p>
  280.        </div>
  281.      
  282.     <!-- INSERT LANDSCAPE AESTHETIC PICTURES -->    
  283.        <img src="https://64.media.tumblr.com/fb2ac5525c0522775c40e3c03569776d/7dba73f7d59ddaed-5c/s640x960/007cda9221b13f8f506365555ca2474eaddbd3cc.gif" style="width:100%; display:block; margin:0px auto;"/>
  284.        
  285.      </section>
  286.    </div><!--END OF FLEX BOX-->
  287.      
  288.      <!-- Next Layer -->
  289.    <div class="flexBox" style="border-bottom:1px solid var(--border);">
  290.     <!-- PERSONALITY, APPEARANCE SECTION -->
  291.    <section class="col2">
  292.      <br>
  293.      <!-- SQUARE PICTURES AESTHETIC (change width to smaller size to fit more pictures side by side) -->
  294.      <div class="flexBox" style="justify-content:center;width:100%;">
  295.        <img src="https://i.imgur.com/GmImtNe.png" style="width:200px;"/>
  296.        <img src="https://i.imgur.com/H6aZpXi.png" style="width:200px;"/>
  297.      </div>
  298.      
  299.      <div class="infoBox">
  300.        <h1 style="margin:0px 10px -20px;"><span class="note">♪&nbsp;</span> Personality</h1>
  301.          <hr class="colorStrip">
  302.        
  303.        <!-- POSITIVE TRAITS -->
  304.            <h3 style="margin-left:10px">Positive Traits</h3>
  305.               <p style="margin-left:20px; line-height:20px; text-align:left;">
  306.                  <b>♫ Trait</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
  307.                  <b>♫ Trait</b> - Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. <br>
  308.                 <b>♫ Trait</b> - Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue <br>
  309.                 <b>♫ Trait</b> - non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis.
  310.               </p>
  311.        
  312.        <!-- NEGATIVE TRAITS -->
  313.             <h3 style="margin-left:10px">Negative Traits</h3>
  314.                <p style="margin-left:20px; line-height:20px; text-align:left;">
  315.                  <b>♫ Trait</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
  316.                  <b>♫ Trait</b> - Nunc et arcu faucibus, placerat augue ut, mollis tellus. Aenean quis est orci. <br>
  317.                 <b>♫ Trait</b> - Integer a lorem a tortor scelerisque rhoncus. Nunc posuere augue <br>
  318.                 <b>♫ Trait</b> - non nunc hendrerit, id mollis nisi rhoncus. Mauris tincidunt tincidunt mollis.
  319.               </p>
  320.                
  321.        
  322.      </div><!-- END OF PERSONALITY BOX -->
  323.      
  324.      <div class="infoBox" style="height:285px;">
  325.        <h1 style="margin:0px 10px -20px;"><span class="note">♪&nbsp;</span> Appearance</h1>
  326.          <hr class="colorStrip">
  327.        
  328.        <img src="https://64.media.tumblr.com/77008907e74219aaaa7f580804642183/6c9d3b621e47cd0a-d2/s500x750/4a229cf98b01ea3f7d76ddb6ebff144075e2b1cf.jpg" style="width:120px; float:left; margin:0px 20px 0px 0px;" /><!-- SIDE IMG -->
  329.        <table class="col1table"><!-- APPEARANCE SHEET -->
  330.           <tr>
  331.             <td>♫</td><td> Hair Color</td><td>XXXXX</td>
  332.           </tr>
  333.           <tr>
  334.             <td>♫</td><td> Eye Color</td><td>XXXX</td>
  335.           </tr>
  336.           <tr>
  337.             <td>♫</td><td> Height</td><td>X'Xft</td>
  338.           </tr>
  339.           <tr>
  340.             <td>♫</td><td> Weight</td><td>XXlbs</td>
  341.           </tr>
  342.          <tr>
  343.             <td>♫</td><td> Misc.</td><td>XXXXX</td>
  344.           </tr>
  345.        </table>
  346.      </div><!-- END OF APPEARANCE BOX -->
  347.    </section>
  348.      
  349.      <!-- RELATIONS, PLAYLIST, AESTHETIC SECTION -->
  350.    <section class="col1" style="border-left:1px solid var(--border);">
  351.      
  352.         <!-- RELATIONS START HERE -->
  353.      <div class="relationsBox">
  354.         <div class="relation content" style="display:block" id="relation1">
  355.           <div class="flexBox rel" style="justify-content:center;">
  356.             <button onclick="openInfo(event, 'relation6')"> &#60; </button>
  357.             <button onclick="openInfo(event, 'relation2')"> &#62; </button>
  358.           </div><!-- BUTTONS -->
  359.          
  360.               <img src="https://static.wikia.nocookie.net/obey-me/images/3/3c/The_Glory_Days_Devilgram.png" style="width:150px; height:150px; margin:10px auto; display:block;"/>
  361.             <h1 style="margin:0px auto -15px; text-align:center;">Lucifer</h1>
  362.          <hr class="colorStrip">
  363.           <h1 style="margin:0px; text-align:center;">
  364.             Older Brother</h1>
  365.          
  366.             <p style="text-align:justify">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.</p>
  367.         </div><!--END OF RELATION1-->
  368.        
  369.         <!-- RELATION 2 -->
  370.         <div class="relation content" id="relation2">
  371.           <div class="flexBox rel" style="justify-content:center;">
  372.             <button onclick="openInfo(event, 'relation1')"> &#60; </button>
  373.             <button onclick="openInfo(event, 'relation3')"> &#62; </button>
  374.           </div><!-- BUTTONS -->
  375.          
  376.               <img src="https://static.wikia.nocookie.net/obey-me/images/4/45/Too_Sweet_to_Be_True_Devilgram.png" style="width:150px; height:150px; margin:10px auto; display:block;"/>
  377.             <h1 style="margin:0px auto -15px; text-align:center;">Mammon</h1>
  378.          <hr class="colorStrip">
  379.           <h1 style="margin:0px; text-align:center;">
  380.             Older Brother</h1>
  381.          
  382.             <p style="text-align:justify">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.</p>
  383.         </div><!--END OF RELATION2-->
  384.  
  385.         <!-- RELATION 3 -->
  386.         <div class="relation content" id="relation3">
  387.           <div class="flexBox rel" style="justify-content:center;">
  388.             <button onclick="openInfo(event, 'relation2')"> &#60; </button>
  389.             <button onclick="openInfo(event, 'relation4')"> &#62; </button>
  390.           </div><!-- BUTTONS -->
  391.          
  392.               <img src="https://static.wikia.nocookie.net/obey-me/images/4/41/Demonic_Pajama_Party_Devilgram.png" style="width:150px; height:150px; margin:10px auto; display:block;"/>
  393.             <h1 style="margin:0px auto -15px; text-align:center;">Satan</h1>
  394.          <hr class="colorStrip">
  395.           <h1 style="margin:0px; text-align:center;">
  396.             Younger Brother</h1>
  397.          
  398.             <p style="text-align:justify">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.</p>
  399.         </div><!--END OF RELATION3-->
  400.        
  401.         <!-- RELATION 4 -->
  402.         <div class="relation content" id="relation4">
  403.           <div class="flexBox rel" style="justify-content:center;">
  404.             <button onclick="openInfo(event, 'relation3')"> &#60; </button>
  405.             <button onclick="openInfo(event, 'relation5')"> &#62; </button>
  406.           </div><!-- BUTTONS -->
  407.          
  408.               <img src="https://static.wikia.nocookie.net/obey-me/images/5/54/A_Song_From_the_Heart_Devilgram.png" style="width:150px; height:150px; margin:10px auto; display:block;"/>
  409.             <h1 style="margin:0px auto -15px; text-align:center;">Asmodeus</h1>
  410.          <hr class="colorStrip">
  411.           <h1 style="margin:0px; text-align:center;">
  412.             Younger Brother</h1>
  413.          
  414.             <p style="text-align:justify">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.</p>
  415.         </div><!--END OF RELATION4-->
  416.  
  417.         <!-- RELATION 5 -->
  418.         <div class="relation content" id="relation5">
  419.           <div class="flexBox rel" style="justify-content:center;">
  420.             <button onclick="openInfo(event, 'relation4')"> &#60; </button>
  421.             <button onclick="openInfo(event, 'relation6')"> &#62; </button>
  422.           </div><!-- BUTTONS -->
  423.          
  424.               <img src="https://static.wikia.nocookie.net/obey-me/images/2/2e/Idol_Beel_Devilgram.png" style="width:150px; height:150px; margin:10px auto; display:block;"/>
  425.             <h1 style="margin:0px auto -15px; text-align:center;">Beelzebub</h1>
  426.          <hr class="colorStrip">
  427.           <h1 style="margin:0px; text-align:center;">
  428.             Younger Brother</h1>
  429.          
  430.             <p style="text-align:justify">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.</p>
  431.         </div><!--END OF RELATION5-->
  432.        
  433.         <!-- RELATION 6 -->
  434.         <div class="relation content" id="relation6">
  435.           <div class="flexBox rel" style="justify-content:center;">
  436.             <button onclick="openInfo(event, 'relation5')"> &#60; </button>
  437.             <button onclick="openInfo(event, 'relation1')"> &#62; </button>
  438.           </div><!-- BUTTONS -->
  439.          
  440.               <img src="https://static.wikia.nocookie.net/obey-me/images/3/3c/You_Make_Me_Warm_All_Over_Devilgram.png" style="width:150px; height:150px; margin:10px auto; display:block;"/>
  441.             <h1 style="margin:0px auto -15px; text-align:center;">Belphegor</h1>
  442.          <hr class="colorStrip">
  443.           <h1 style="margin:0px; text-align:center;">
  444.             Younger Brother</h1>
  445.          
  446.             <p style="text-align:justify">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.</p>
  447.         </div><!--END OF RELATION6-->
  448.        
  449.      </div>
  450.      
  451.      
  452.      <div class="miscBox">
  453.        <div class="content2" style="display:block" id="playlist">
  454.          <div class="flexBox rel" style="justify-content:center;">
  455.             <button onclick="openInfo2(event, 'aesthetic')"> &#62; </button></div><!-- BUTTON -->
  456.          
  457.          <div class="song">
  458.            <img src="https://images-na.ssl-images-amazon.com/images/I/51bdTqsKudL._SY445_SX342_QL70_ML2_.jpg" />
  459.            <h1 style="margin:0px auto -15px; text-align:center;">Sinful Indulgence</h1>
  460.          <hr class="colorStrip">
  461.           <h1 style="margin:0px; text-align:center;">
  462.             Miura Ayme</h1>
  463.          </div><!-- END OF SONG -->
  464.          
  465.          <div class="song">
  466.            <img src="https://via.placeholder.com/150.jpg/61396b/fff" />
  467.            <h1 style="margin:0px auto -15px; text-align:center;">Song Title</h1>
  468.          <hr class="colorStrip">
  469.           <h1 style="margin:0px; text-align:center;">
  470.             Artist</h1>
  471.          </div><!-- END OF SONG -->
  472.          
  473.          <div class="song">
  474.            <img src="https://via.placeholder.com/150.jpg/61396b/fff"/>
  475.            <h1 style="margin:0px auto -15px; text-align:center;">Song Title</h1>
  476.          <hr class="colorStrip">
  477.           <h1 style="margin:0px; text-align:center;">
  478.             Artist</h1>
  479.          </div><!-- END OF SONG -->
  480.          
  481.          <div class="song">
  482.            <img src="https://via.placeholder.com/150.jpg/61396b/fff"/>
  483.            <h1 style="margin:0px auto -15px; text-align:center;">Song Title</h1>
  484.          <hr class="colorStrip">
  485.           <h1 style="margin:0px; text-align:center;">
  486.             Artist</h1>
  487.          </div><!-- END OF SONG -->
  488.        </div><!-- END OF RELATIONS -->
  489.        
  490.        <!-- AESTHETIC BOX -->
  491.        <div class="aesthetic content2" id="aesthetic">
  492.          <div class="flexBox rel" style="justify-content:center;">
  493.             <button onclick="openInfo2(event, 'playlist')"> &#60; </button>
  494.           </div><!-- BUTTON -->
  495.          
  496.          <!-- ADD AS MANY PICTURES AS YOU CAN ♡ -->
  497.          <img src="https://static.zerochan.net/Leviathan.%28Obey.Me%21%29.full.3396835.jpg"/>
  498.          <img src="https://cdn.discordapp.com/attachments/868809000832081950/881710075792723988/bf209a1e052075859ac8dcd147762ebd.jpg"/>
  499.          <img src="https://cdn.discordapp.com/attachments/868809000832081950/881710076279283782/e978ae4a01c1b90f9231fc1d1605545c.jpg"/>
  500.        </div>
  501.      </div><!-- END OF AESTHETIC BOX -->
  502.      
  503.    </section>
  504.      
  505.    </div><!--END OF FLEX BOX-->  
  506.      
  507.      <div style="width:100%; box-sizing:border-box; padding:5px 20px;">
  508.        2021 &copy; Coding by <a href="https://kawaii-lau.tumblr.com/" style="color:white; text-decoration:none;" target="_blank">Kawaii-Lau</a>
  509.      </div>
  510.    </main>
  511.  </div>
  512. </body>  
  513. </html>
  514.  
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!