Kawaii-Lau

Icy Blue [PT] var2

Aug 4th, 2021 (edited)
646
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. <!--CUSTOM FONTS-->
  19. <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Lora&display=swap" rel="stylesheet">
  20. <style>
  21. :root {
  22.   --accent1:#b3dbe3;
  23.   --accent1hover:#a5c3c9;
  24.   --infoboxBgColor:#b5dde6;
  25.   --infoboxBgColorDark:#a5c3c9;
  26.   --borderColor:#90a0a3;
  27.  
  28.   --fullNameColor:white;
  29.   --fullNameShadowColor:#132923;
  30.   --defaultTextColor:#555;
  31.  
  32.   --scrollbarBgColor:white;
  33.   --scrollbarThumb:#73c1c9;
  34.  
  35.   --fullNameFontFamily:'Roboto Condensed', san-serif;
  36.   --defaultFontFamily:'Roboto Condensed', san-serif;
  37.  
  38.   --bodyBackgroundColor:#f2f4f5;
  39.   --bodyBackgroundImg:; /* leave blank for no bg img */
  40.  
  41. }
  42.  
  43. ::-webkit-scrollbar {
  44.   width:5px; height:5px;
  45.   background:var(--scrollbarBgColor);
  46. }
  47. ::-webkit-scrollbar-thumb {
  48.   background:var(--scrollbarThumb);
  49. }
  50.  
  51. p, h1, h2, h3, h4, h5, h6 {
  52.   margin:2px;
  53. }
  54.  
  55. .credits {
  56.   text-decoration:none;
  57.   color:var(--defaultTextColor);
  58.   font-size:18px; }
  59.  
  60. .bodyBackground {
  61.   width:900px; height:auto;
  62.   background-color:var(--bodyBackgroundColor);
  63.   background-image:var(--bodyBackgroundImg);
  64.   background-size:100% 100%;
  65.   padding:20px;
  66.   margin:0px auto;
  67. }
  68. .mainFlexBox {
  69.   display:flex;
  70.   flex-direction:row;
  71.   width:100%; height:500px;
  72.   border:1px solid var(--borderColor);
  73.   font-family:var(--defaultFontFamily);
  74. }
  75.  
  76. /* SIDEBAR TOP DIV SECTION */
  77. .sideBar {
  78.   width:250px; height:100%;
  79.   box-sizing:border-box;
  80.   border-right:1px solid var(--borderColor);
  81. }
  82. .sideDiv1 {
  83.   width:100%; height:170px;
  84.   box-sizing:border-box;
  85.   padding:10px;
  86.   margin-bottom:120px;
  87.  
  88.   background-color:var(--accent1);
  89.   color:var(--defaultTextColor);
  90. }
  91. .sideDiv2 {
  92.   background-color:var(--accent1);
  93.   width:100%; padding:5px;
  94.   font-size:11px;
  95.   display:flex; flex-direction:row;
  96.   justify-content:center; align-items:center;
  97.   box-sizing:border-box;
  98.  
  99.   color:var(--defaultTextColor);
  100. }
  101. .imgSide {
  102.   background:var(--accent1);
  103.   width:90px; height:90px;
  104.   padding:7px;
  105.   border-radius:100%;
  106.   overflow:hidden;
  107.   margin:0px auto;
  108. }
  109. .imgSideCSS {
  110.   width:100%; height:100%;
  111.   border-radius:100%;
  112. }
  113.  
  114. .quote { height:105px; }
  115. .quotationMark {
  116.   float:left;
  117.   font-size:50px;
  118.   margin:-15px 10px 10px 0px;
  119. }
  120.  
  121. /* NAVIGATION SECTION */
  122. .sideNav {
  123.   display:flex; flex-direction:row;
  124.   align-items:flex-start;
  125.   flex-wrap:wrap;
  126.   justify-content:center;
  127.   width:100%; height:160px;
  128. }
  129. .sideNav button {
  130.   width:70px; height:70px;
  131.   background-color:var(--accent1);
  132.   margin:0px 5px;
  133.   border:none;
  134.  
  135.   font-size:52px;
  136.   color:var(--defaultTextColor);
  137.   cursor:pointer;
  138.   transition:1s ease;
  139. }
  140. .sideNav button:hover {
  141.   background-color:var(--accent1hover);
  142. }
  143.  
  144. .tooltip {
  145.   position: relative;
  146.   z-index:2;
  147. }
  148. .tooltipBox {
  149.   min-width:70px;
  150.   padding:5px;
  151.   border-radius:2px;
  152.   margin-top:-30px; margin-left:-47px;
  153.   transition:1s ease;
  154.   position:absolute;
  155.   z-index:10;
  156.   visibility:hidden;
  157.   opacity:0;
  158.  
  159.   background-color:#333;
  160.   box-shadow:0px 1px 5px rgba(0,0,0,0.5);
  161.   color:white;
  162.   font-size:12px;
  163.   text-align:center;
  164. }
  165. .tooltip .tooltipBox:after {
  166.   content: " ";
  167.   position: absolute;
  168.   top: 100%; left: 50%;
  169.   margin-left: -5px;
  170.   border-width: 5px;
  171.   border-style: solid;
  172.   border-color: #333 transparent transparent transparent;
  173. }
  174. .tooltip:hover .tooltipBox {
  175.   opacity:1;
  176.   visibility:visible;
  177. }
  178.  
  179. .t1 {margin-left:-56px} .t2 {margin-left:-62px} .t3 {margin-left:-60px} .t4 {margin-left:-56px} .t5 {margin-left:-57px;} .t6 {margin-left:-56px}
  180.  
  181. /* PAGES SECTION */
  182. .content {
  183.   display:none;
  184.   width:650px; height:100%;
  185.   overflow:auto;
  186.   box-sizing:border-box;
  187.   padding:1px;
  188. }
  189.  
  190. /* PROFILE SECTION */
  191. .fullName {
  192.   margin-top:-60px;
  193.   color:var(--fullNameColor); font-size:42px;
  194.   text-shadow:1px 1px var(--fullNameShadowColor), 1px -1px var(--fullNameShadowColor), -1px 1px var(--fullNameShadowColor), -1px -1px var(--fullNameShadowColor), 2px 2px var(--fullNameShadowColor), 2px -2px var(--fullNameShadowColor), -2px 2px var(--fullNameShadowColor), -2px -2px var(--fullNameShadowColor);
  195.   letter-spacing:1px;
  196.   font-family:var(--fullNameFontFamily);
  197. }
  198. .p1-dib1 {/*PAGE 1 DIV INFOBOX 1*/
  199.   background-color:var(--infoboxBgColor);
  200.   margin:10px 10px; width:250px;
  201.   padding:10px;
  202.   box-sizing:border-box;
  203.   color:var(--defaultTextColor);
  204. }
  205. .p1-dib2 {/*PAGE 1 DIV INFOBOX 2*/
  206.   border:1px solid var(--borderColor);
  207.   background-color:var(--infoboxBgColorDark);
  208.   margin:10px 10px; width:340px;
  209.   box-sizing:border-box;
  210.   padding:5px;
  211.   color:var(--defaultTextColor);
  212. }
  213.  
  214. /* PERSONALITY SECTION */
  215. .p2-dib1 {/*PAGE 2 DIV INFOBOX 1*/
  216.   width:480px;
  217.   background-color:var(--infoboxBgColor);
  218.   box-sizing:border-box;
  219.   padding:10px;
  220.   margin:10px;
  221.   color:var(--defaultTextColor);
  222. }
  223. .p2-images {
  224.   padding:10px;
  225.   border:1px solid var(--borderColor);
  226.   width:100px; height:100px;
  227.   margin:10px 0px;
  228. }
  229. .p2-images img {
  230.   width:100%; height:100%;
  231. }
  232. .briggsMeyer {
  233.   transform:rotate(-90deg);
  234.   font-size:42px;
  235.   position:relative;
  236.   left:-50px; top:40px;
  237.   width:160px;
  238. }
  239.  
  240. /* APPEARANCE SECTION */
  241. .p3-dib1 {/*PAGE 3 DIV INFOBOX 1*/
  242.   width:330px; height:450px;
  243.   margin:20px 0px;
  244.   padding:10px;
  245.   box-sizing:border-box;
  246.   border:1px solid var(--borderColor);
  247.   background-color:var(--infoboxBgColorDark);
  248.   color:var(--defaultTextColor);
  249. }
  250. .p3-image {
  251.   width:280px; height:450px;
  252.   margin:20px 10px 20px 10px;
  253. }
  254. .p3-image img {
  255.   width:100%; height:100%;
  256. }
  257. .p3-ainfo { /* Appearance Info Table */
  258.   width:90%; height:30px;
  259.   margin:5px auto;
  260.   box-sizing:border-box;
  261.   padding:5px;
  262.   overflow:hidden;
  263.  
  264.   text-align:left;
  265.   font-size:16px;
  266.   text-indent:10px;
  267. }
  268. .p3-ainfo>div {
  269.   width:25px; height:25px;
  270. }
  271.  
  272. /* RELATIONS SECTION */
  273. .relation {
  274.   width:75%; height:140px;
  275.   margin:10px auto;
  276.   padding:10px;
  277.   box-sizing:border-box;
  278.   position:relative;
  279.   left:40px;
  280.  
  281.   color:var(--defaultTextColor);
  282.   background-color:var(--infoboxBgColor);
  283. }
  284. .relImg {
  285.   padding:10px;
  286.   background-color:var(--infoboxBgColor);
  287.   width:100px; height:100px;
  288.   margin:0px 10px 0px -80px;
  289.   float:left;
  290.   border-radius:100%;
  291. }
  292. .relImg img {
  293.   width:100%; height:100%;
  294.   border-radius:100%;
  295. }
  296. .relInfo {
  297.   overflow:auto;
  298.   height:100%;
  299. }
  300.  
  301. /* AESTHETIC SECTION */
  302. .aestheticGrid {
  303.   display:flex; flex-direction:row;
  304.   flex-wrap:wrap;
  305.   justify-content:center;
  306.   align-items:center;
  307.   width:90%; height:90%;
  308.   box-sizing:border-box;
  309.   padding:5px;
  310.   position: relative;
  311.   top: 50%; left: 50%;
  312.   transform: translate(-50%, -50%);
  313.  
  314.   border:1px solid var(--borderColor);
  315.   background-color:var(--infoboxBgColorDark);
  316. }
  317. .aestheticGrid img {
  318.   width:130px; height:130px;
  319.   margin:5px;
  320. }
  321.  
  322. /* PLAYLIST SECTION */
  323. .songList {
  324.   width:90%; height:90%;
  325.   box-sizing:border-box;
  326.   padding:5px; overflow:auto;
  327.   position: relative;
  328.   top: 50%; left: 50%;
  329.   transform: translate(-50%, -50%);  
  330.  
  331.   border:1px solid var(--borderColor);
  332.   background-color:var(--infoboxBgColorDark);
  333.   color:var(--defaultTextColor);
  334. }
  335. .song {
  336.   width:95%; height:80px;
  337.   margin:5px auto;
  338.   box-sizing:border-box;
  339.   padding:10px;
  340. }
  341. .song img {
  342.   width:60px; height:60px;
  343.   margin-right:20px;
  344.   float:left;
  345. }
  346.  
  347. /* TABLES CSS */
  348. .taCol1 td, .taCol2 td {border-collapse: collapse;}
  349. .taCol1 td:first-child, .taCol2 td:first-child, .taCol3 td:first-child {
  350.   font-weight:bold;
  351.   vertical-align:text-top;
  352. }
  353. .taCol2 td, .taCol3 td {
  354.   padding:7px 0px; text-align:justify }
  355.  
  356. .taCol1 td:first-child {width:135px;}
  357. .taCol2 td:first-child {width:105px;}
  358. .taCol3 td:first-child {width:135px;}
  359.  
  360. .taCol3 {
  361.   width:400px;
  362.   background-color:var(--infoboxBgColorDark);
  363.   padding:5px;
  364.   box-sizing:border-box;
  365. }
  366. </style>
  367. <script>
  368. function openInfo(evt, page) {
  369.             var i, tabcontent, tablinks;
  370.             content = document.getElementsByClassName("content");
  371.             for (i = 0; i < content.length; i++) {
  372.                content[i].style.display = "none";
  373.            }
  374.            tablinks = document.getElementsByClassName("tablinks");
  375.            for (i = 0; i < tablinks.length; i++) {
  376.                tablinks[i].className = tablinks[i].className.replace(" active", "");
  377.            }
  378.          document.getElementById(page).style.display = "block";
  379. }
  380. </script>
  381. <body style="background-color:#999">
  382.   <div class="bodyBackground">
  383.     <main class="mainFlexBox">
  384.  
  385. <!-- SIDEBAR SECTION -->      
  386.       <aside class="sideBar">
  387.         <div class="sideDiv1">
  388.           <div class="quote">
  389.             <div class="quotationMark"></div>
  390.             <p style="text-align:left; letter-spacing:1px;"><b><i>I am a witty quote that you will find me inspiring.</i></b></p>
  391.             <p style="text-align:right;margin-top:10px;">~ Source</p>
  392.           </div>  
  393.           <div class="imgSide">
  394.             <img src="https://www.writeups.org/wp-content/uploads/White-Witch-Narnia-Tilda-Swinton-b.jpg" class="imgSideCSS" alt="sideImgMain"/>
  395.           </div>
  396.         </div>
  397.         <nav class="sideNav">
  398.           <button onclick="openInfo(event, 'page1');">
  399.             <div class="tooltip">1
  400.               <span class="tooltipBox t1">PROFILE</span>      
  401.             </div>
  402.           </button>
  403.           <button onclick="openInfo(event, 'page2');">
  404.             <div class="tooltip">2
  405.               <span class="tooltipBox t2">PERSONALITY</span>
  406.             </div>
  407.           </button>
  408.           <button onclick="openInfo(event, 'page3')">
  409.             <div class="tooltip">3
  410.               <span class="tooltipBox t3">APPEARANCE</span>
  411.             </div>    
  412.           </button>
  413.           <button onclick="openInfo(event, 'page4')">
  414.             <div class="tooltip">4
  415.               <span class="tooltipBox t4">RELATIONS</span>
  416.             </div>
  417.           </button>
  418.           <button onclick="openInfo(event, 'page5')">
  419.             <div class="tooltip">5
  420.               <span class="tooltipBox t5">AESTHETICS</span>
  421.             </div>
  422.           </button>
  423.           <button onclick="openInfo(event, 'page6')">
  424.             <div class="tooltip">6
  425.               <span class="tooltipBox t6">PLAYLIST</span>
  426.             </div>        
  427.         </button>
  428.         </nav>
  429.         <div class="sideDiv2">
  430.           <div style="margin-right:5px; font-size:12px;"><p>NAME / AGE / TIMEZONE / CONTACT /<br> FC: Name </p></div>
  431.           <div class="tooltip">
  432.  <!-- ♡♡♡ DO NOT REMOVE CREDITS OR HELL WILL BE FROZEN WITH YOU IN IT ♡♡♡ -->  
  433.             <a class="credits" href="https://kawaii-lau.tumblr.com/" target="_blank">&copy; <span class="tooltipBox">Kawaii-Lau</span></a></div>
  434.         </div>
  435.       </aside>
  436.      
  437.      
  438.  <!--PROFILE SECTION-->    
  439.       <section class="content divProfile" id="page1" style="display:block">
  440.         <div>
  441.           <img src="https://i.imgur.com/ZYcOHRc.jpg" style="width:100%; max-height:260px;" alt="Header Img"/>
  442.           <div class="fullName"><p><b>Jadis the White Witch</b></p></div>
  443.         </div><!--END OF HEADER IMAGE BOX-->
  444.        
  445.         <div style="display:flex; flex-direction:row; justify-content:center;">
  446.           <div class="p1-dib1">
  447.              <h1 style="margin-bottom:10px;">Profile</h1>
  448.               <table class="taCol1">
  449.                 <tr>
  450.                   <td>Age.</td>
  451.                   <td>input here</td>
  452.                 </tr>
  453.                 <tr>
  454.                   <td>Birth Date.</td>
  455.                   <td>input here</td>
  456.                 </tr>
  457.                 <tr>
  458.                   <td>Birth Place.</td>
  459.                   <td>input here</td>
  460.                 </tr>
  461.                 <tr>
  462.                   <td>Ethnicity.</td>
  463.                   <td>input here</td>
  464.                 </tr>
  465.                 <tr>
  466.                   <td>Orientation.</td>
  467.                   <td>input here</td>
  468.                 </tr>
  469.                 <tr>
  470.                   <td>Relationship Status.</td>
  471.                   <td>input here</td>
  472.                 </tr>
  473.                 <tr>
  474.                   <td>Star Sign.</td>
  475.                   <td>input here</td>
  476.                 </tr>
  477.                 <tr>
  478.                   <td>House.</td>
  479.                   <td>input here</td>
  480.                 </tr>
  481.                 <tr>
  482.                   <td>Blood Status.</td>
  483.                   <td>input here</td>
  484.                 </tr>
  485.                 <tr>
  486.                   <td>Extra.</td>
  487.                   <td>input here</td>
  488.                 </tr>
  489.               </table>
  490.           </div><!--END OF PROFILE DIV INFOBOX COLUMN 1-->
  491.           <div class="p1-dib2">
  492.             <table class="taCol2">
  493.               <tr>
  494.                   <td>↳ Likes.</td>
  495.                   <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis est orci.</td>
  496.              </tr>
  497.               <tr>
  498.                 <td>↳ Dislikes.</td>
  499.                   <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis est orci.</td>
  500.              </tr>
  501.               <tr>
  502.                 <td>↳ Hobbies.</td>
  503.                   <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis est orci.</td>
  504.               </tr>
  505.               <tr>
  506.                 <td>↳ Goals.</td>
  507.                   <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis est orci.</td>
  508.               </tr>
  509.               <tr>
  510.                 <td>↳ Fears.</td>
  511.                   <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis est orci.</td>              
  512.                 </tr>
  513.             </table>
  514.           </div>
  515.          
  516.         </div><!--FLEXBOX-->
  517.       </section>
  518.  
  519. <!--PERSONALITY SECTION-->      
  520.       <section class="content divPersonality" id="page2">
  521.         <div style="display:flex; flex-direction:row;">
  522.           <div class="p2-dib1">
  523.             <h1 style="margin-bottom:10px;">Personality</h1>
  524.            
  525.             <p style="text-align:justify;"><b>Short Personality Description Here....</b> 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>
  526.             <br>
  527.            
  528.             <div style="display:flex; flex-direction:row;">
  529.              
  530.               <div style="width:60px;">
  531.                 <div class="briggsMeyer">★ ESFP</div>
  532.               </div>
  533.              
  534.               <table class="taCol3">
  535.                 <tr>
  536.                   <td>↳ Strengths</td>
  537.                   <td>lorem ipsum<br> dolor sit amet <br> consectetur<br> adipiscing elit</td>
  538.                 </tr>
  539.                 <tr>
  540.                   <td>↳ Weakness</td>
  541.                   <td>lorem ipsum<br> dolor sit amet <br> consectetur<br> adipiscing elit</td>
  542.                 </tr>
  543.                 <tr>
  544.                   <td>↳ Quirks</td>
  545.                   <td>can growl since 14 years old<br> dolor sit amet <br> consectetur<br> adipiscing elit</td>
  546.                 </tr>
  547.                 <tr>
  548.                   <td>↳ Pet Peeves</td>
  549.                   <td>hates being ran over by a bulldozer<br> dolor sit amet <br> consectetur<br> adipiscing elit</td>
  550.                 </tr>
  551.               </table>
  552.             </div><!--END OF TABLE FLEXBOX-->
  553.           </div><!--END OF p2-dib1-->
  554.          
  555.  <!--IMAGES COLUMN-->        
  556.           <div style="display:flex; flex-direction:column;">
  557.             <div class="p2-images">
  558.             <img src="https://via.placeholder.com/200"/>
  559.             </div>
  560.             <div class="p2-images">
  561.             <img src="https://via.placeholder.com/200"/>
  562.             </div>
  563.             <div class="p2-images">
  564.             <img src="https://via.placeholder.com/200"/>
  565.             </div>
  566.             <div class="p2-images">
  567.             <img src="https://via.placeholder.com/200"/>
  568.             </div>
  569.           </div><!--END OF IMAGES COLUMN-->
  570.         </div>
  571.       </section>
  572.  
  573. <!--APPEARANCE SECTION-->      
  574.       <section class="content divAppearance" id="page3">
  575.         <div style="display:flex; flex-direction:row;">
  576.          
  577.           <div class="p3-image">
  578.             <img src="https://pbs.twimg.com/media/ETQhJFmWAAEC_Qs.jpg"/><!--SIDE IMAGE-->
  579.           </div>
  580.          
  581.           <div class="p3-dib1">
  582.             <h1 style="margin-bottom:10px;">Appearance</h1>
  583.            
  584.             <p>Character appearance description here... 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><br>
  585.            
  586.             <div class="p3-ainfo" style="background-color:#cfdfe8;">
  587.               <div style="font-size:46px; margin:-15px 10px 0px 0px; float:left;">1</div>
  588.               <p><b> input HEIGHT</b></p>
  589.             </div><!--END OF APPEARANCE INFO-->
  590.            
  591.             <div class="p3-ainfo" style="background-color:#b8cfdb;">
  592.               <div style="font-size:46px; margin:-15px 10px 0px 0px; float:left;">2</div>
  593.               <p><b>input WEIGHT</b></p>
  594.             </div><!--END OF APPEARANCE INFO-->
  595.            
  596.             <div class="p3-ainfo" style="background-color:#95b6c7;">
  597.               <div style="font-size:46px; margin:-15px 10px 0px 0px; float:left;">3</div>
  598.               <p><b>input HAIR COLOR</b></p>
  599.             </div><!--END OF APPEARANCE INFO-->
  600.            
  601.             <div class="p3-ainfo" style="background-color:#8cacbd;">
  602.               <div style="font-size:46px; margin:-15px 10px 0px 0px; float:left;">4</div>
  603.               <p><b>input EYE COLOR</b></p>
  604.             </div><!--END OF APPEARANCE INFO-->
  605.            
  606.             <div class="p3-ainfo" style="background-color:#7f94b5;">
  607.               <div style="font-size:46px; margin:-15px 10px 0px 0px; float:left;">5</div>
  608.               <p><b>input BODY TYPE</b></p>
  609.             </div><!--END OF APPEARANCE INFO-->
  610.            
  611.             <div class="p3-ainfo" style="background-color:#657fa6;">
  612.               <div style="font-size:46px; margin:-15px 10px 0px 0px; float:left;">6</div>
  613.               <p><b>input EXTRA</b></p>
  614.             </div><!--END OF APPEARANCE INFO-->
  615.            
  616.            
  617.           </div><!--END OF p3-dib1-->
  618.         </div>
  619.       </section>
  620.    
  621. <!--RELATIONS SECTION-->      
  622.       <section class="content divRelations" id="page4">
  623.        
  624.         <div class="relation">
  625.           <div class="relImg">
  626.             <img src="https://via.placeholder.com/150"/>
  627.           </div>
  628.          
  629.           <div class="relInfo">
  630.             <h3 style="margin-bottom:10px;">NAME - <i>input RELATION</i></h3>
  631.             <p><b>input RELATION DESCRIPTION</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. 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>
  632.           </div>
  633.         </div><!--END OF RELATION-->
  634.        
  635.         <div class="relation">
  636.           <div class="relImg">
  637.             <img src="https://via.placeholder.com/150"/>
  638.           </div>
  639.          
  640.           <div class="relInfo">
  641.             <h3 style="margin-bottom:10px;">NAME - <i>input RELATION</i></h3>
  642.             <p><b>input RELATION DESCRIPTION</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. 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>
  643.           </div>
  644.         </div><!--END OF RELATION-->
  645.        
  646.         <div class="relation">
  647.           <div class="relImg">
  648.             <img src="https://via.placeholder.com/150"/>
  649.           </div>
  650.          
  651.           <div class="relInfo">
  652.             <h3 style="margin-bottom:10px;">NAME - <i>input RELATION</i></h3>
  653.             <p><b>input RELATION DESCRIPTION</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. 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>
  654.           </div>
  655.         </div><!--END OF RELATION-->
  656.        
  657.         <div class="relation">
  658.           <div class="relImg">
  659.             <img src="https://via.placeholder.com/150"/>
  660.           </div>
  661.          
  662.           <div class="relInfo">
  663.             <h3 style="margin-bottom:10px;">NAME - <i>input RELATION</i></h3>
  664.             <p><b>input RELATION DESCRIPTION</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. 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>
  665.           </div>
  666.         </div><!--END OF RELATION-->
  667.        
  668.         <div class="relation">
  669.           <div class="relImg">
  670.             <img src="https://via.placeholder.com/150"/>
  671.           </div>
  672.          
  673.           <div class="relInfo">
  674.             <h3 style="margin-bottom:10px;">NAME - <i>input RELATION</i></h3>
  675.             <p><b>input RELATION DESCRIPTION</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et arcu faucibus, placerat augue ut, mollis tellus. 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>
  676.           </div>
  677.         </div><!--END OF RELATION-->
  678.        
  679.       </section>
  680.      
  681. <!--AESTHETICS SECTION-->      
  682.       <section class="content divAesthetics" id="page5">
  683.        
  684.         <div class="aestheticGrid">
  685.           <img src="https://via.placeholder.com/130"/>
  686.           <img src="https://via.placeholder.com/130"/>
  687.           <img src="https://via.placeholder.com/130"/>
  688.           <img src="https://via.placeholder.com/130"/>
  689.           <!--break-->
  690.           <img src="https://via.placeholder.com/130"/>
  691.           <img src="https://via.placeholder.com/130"/>
  692.           <img src="https://via.placeholder.com/130"/>
  693.           <img src="https://via.placeholder.com/130"/>
  694.           <!--break-->
  695.           <img src="https://via.placeholder.com/130"/>
  696.           <img src="https://via.placeholder.com/130"/>
  697.           <img src="https://via.placeholder.com/130"/>
  698.           <img src="https://via.placeholder.com/130"/>
  699.           <!--break-->
  700.         </div>
  701.        
  702.       </section>
  703.      
  704. <!--PLAYLIST SECTION-->      
  705.       <section class="content divPlaylist" id="page6">
  706.         <div class="songList">
  707.          
  708.           <div class="song" style="background-color:#cfdfe8;">
  709.             <img src="https://via.placeholder.com/70"/>
  710.             <h3>Song Name</h3>
  711.             <p>Artist</p>
  712.           </div><!--END OF SONG-->
  713.          
  714.           <div class="song" style="background-color:#b8cfdb;">
  715.             <img src="https://via.placeholder.com/70"/>
  716.             <h3>Song Name</h3>
  717.             <p>Artist</p>
  718.           </div><!--END OF SONG-->
  719.          
  720.           <div class="song" style="background-color:#95b6c7;">
  721.             <img src="https://via.placeholder.com/70"/>
  722.             <h3>Song Name</h3>
  723.             <p>Artist</p>
  724.           </div><!--END OF SONG-->
  725.          
  726.           <div class="song" style="background-color:#8cacbd;">
  727.             <img src="https://via.placeholder.com/70"/>
  728.             <h3>Song Name</h3>
  729.             <p>Artist</p>
  730.           </div><!--END OF SONG-->
  731.          
  732.           <div class="song" style="background-color:#7f94b5;">
  733.             <img src="https://via.placeholder.com/70"/>
  734.             <h3>Song Name</h3>
  735.             <p>Artist</p>
  736.           </div><!--END OF SONG-->
  737.         </div>
  738.       </section>
  739.     </main>
  740.   </div>
  741. </body>
RAW Paste Data