API tools faq
paste
Kawaii-Lau

Exotic Green [PT] var1

Kawaii-Lau
Aug 4th, 2021 (edited)
818
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 25.80 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. <!--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:#7da18c;
  23.   --accent1hover:#9ed9b7;
  24.   --infoboxBgColor:#7da18c;
  25.   --infoboxBgColorDark:rgba(0,0,0,0.4);
  26.   --borderColor:#7da18c;
  27.  
  28.   --fullNameColor:white;
  29.   --fullNameShadowColor:#132923;
  30.   --defaultTextColor:white;
  31.  
  32.   --scrollbarBgColor:#132923;
  33.   --scrollbarThumb:#7da18c;
  34.  
  35.   --fullNameFontFamily:'Roboto Condensed', san-serif;
  36.   --defaultFontFamily:'Roboto Condensed', san-serif;
  37.  
  38.   --bodyBackgroundColor:#132923;
  39.   --bodyBackgroundImg: url(https://i.imgur.com/epqEZBZ.jpg); /* 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>
  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 have no idea what I am doing, but I know I'm doing it really, really well.</i></b></p>
  391.             <p style="text-align:right;margin-top:10px;">~ Andy Samberg</p>
  392.           </div>  
  393.           <div class="imgSide">
  394.             <img src="https://i.imgur.com/oOioPJx.png" 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: Chris Pratt </p></div>
  431.           <div class="tooltip">
  432.  <!-- ♡♡♡ DO NOT REMOVE CREDITS OR ELSE MAMA T-REX WILL CRASH INTO YOUR CAR WINDOW AND EAT YOU ♡♡♡ -->  
  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://64.media.tumblr.com/d9a8af798ce7ba162501b3710a8c6467/tumblr_o3jn8dYIL81utx67fo1_500.gif" style="width:100%; max-height:260px;" alt="Header Img"/>
  442.           <div class="fullName"><p><b>Christopher Michael Pratt</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">★ ESTP</div>
  532.               </div>
  533.              
  534.               <table class="taCol3">
  535.                 <tr>
  536.                   <td>↳ Strengths</td>
  537.                   <td>Strong Leader<br> Cunning<br> Creative<br> Has a sense of Humor</td>
  538.                 </tr>
  539.                 <tr>
  540.                   <td>↳ Weakness</td>
  541.                   <td>Sometimes Irrational<br> Easily-Agitated<br> Too Laidback<br> Other weakness I can't think of</td>
  542.                 </tr>
  543.                 <tr>
  544.                   <td>↳ Quirks</td>
  545.                   <td> Makes too many old-school references<br> Is a dinosaur park tourist, office guy, and galaxy saver</td>
  546.                 </tr>
  547.                 <tr>
  548.                   <td>↳ Pet Peeves</td>
  549.                   <td>Hates being the least favorite Chris<br> "WHERE IS GAMORA"<br> "I'll do you one better, WHO IS GAMORA"<br> "I'll do you one better, <i>WHY IS GAMORA</i>"</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://data.whicdn.com/images/205612941/original.gif"/>
  559.             </div>
  560.             <div class="p2-images">
  561.             <img src="https://i.pinimg.com/originals/95/17/73/9517736cb015ae55579d304194ed1416.gif"/>
  562.             </div>
  563.             <div class="p2-images">
  564.             <img src="http://images6.fanpop.com/image/photos/39000000/Chris-Pratt-chris-pratt-39072042-160-160.gif"/>
  565.             </div>
  566.             <div class="p2-images">
  567.             <img src="https://64.media.tumblr.com/f8b6a310175534bc4bee21af737ca5f6/tumblr_inline_p8fjkxfkDf1s7fx81_250.gif"/>
  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="http://www.photogriffon.com/photos-du-monde/5-chris-pratt-sexy-actor/chris-pratt-sexy-actor-espana-junior-2015-6.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:#81a984;">
  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:#68946c;">
  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:#4c7450;">
  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:#416044;">
  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:#355438;">
  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:#1e3320;">
  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.      
  705.      
  706. <!--PLAYLIST SECTION-->      
  707.       <section class="content divPlaylist" id="page6">
  708.         <div class="songList">
  709.          
  710.           <div class="song" style="background-color:#81a984;">
  711.             <img src="https://via.placeholder.com/70"/>
  712.             <h3>Song Name</h3>
  713.             <p>Artist</p>
  714.           </div><!--END OF SONG-->
  715.          
  716.           <div class="song" style="background-color:#68946c;">
  717.             <img src="https://via.placeholder.com/70"/>
  718.             <h3>Song Name</h3>
  719.             <p>Artist</p>
  720.           </div><!--END OF SONG-->
  721.          
  722.           <div class="song" style="background-color:#4c7450;">
  723.             <img src="https://via.placeholder.com/70"/>
  724.             <h3>Song Name</h3>
  725.             <p>Artist</p>
  726.           </div><!--END OF SONG-->
  727.          
  728.           <div class="song" style="background-color:#416044;">
  729.             <img src="https://via.placeholder.com/70"/>
  730.             <h3>Song Name</h3>
  731.             <p>Artist</p>
  732.           </div><!--END OF SONG-->
  733.          
  734.           <div class="song" style="background-color:#355438;">
  735.             <img src="https://via.placeholder.com/70"/>
  736.             <h3>Song Name</h3>
  737.             <p>Artist</p>
  738.           </div><!--END OF SONG-->
  739.         </div>
  740.       </section>
  741.     </main>
  742.   </div>
  743. </body>
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!