API tools faq
paste
Kawaii-Lau

January Embers [Profile Text]

Kawaii-Lau
Jun 15th, 2020 (edited)
2,426
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.09 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <!-- CUSTOM FONTS -->
  3. <link href="https://fonts.googleapis.com/css2?family=Alegreya&family=Ramabhadra&display=swap" rel="stylesheet">
  4.  
  5. <style>
  6.  
  7. /*  
  8.  
  9.     ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  10.      Thank you for using my code!
  11.     ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  12. Rules to Follow:
  13.  
  14. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  15. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  16. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316). Major changes in code is not accepted.
  17. ✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  18.  
  19. If you like a custom code, check out my blog to see if commissions are open!
  20.  
  21. XOXO, Kawaii-Lau.
  22.  
  23.       ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  24.         2020 © Coding by Kawaii-Lau
  25.       ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝                            
  26. */
  27.  
  28.     :root {
  29.  
  30.         /*  COLORS */
  31.         --border: #600808; /* Borders */
  32.         --bg-color: #000; /* Background Color */
  33.         --subtitle-color: #DDD; /* SUBTITLE Color */
  34.         --main-text-color: #fff; /* MAIN FONT COLOR */
  35.         --artist:#F47C47; /* PLAYLIST ARTIST COLOR */
  36.  
  37.         --box-header: linear-gradient(to right, #600808, #CA0B0B); /*BOX HEADER COLORS */
  38.         --bh-text-color: white; /* BOX HEADER FONT COLOR */
  39.  
  40.         /* FONTS */
  41.         --main-font: 'Alegreya', serif;
  42.         --subtitle-font: 'Alegreya', serif;
  43.         --header-font: 'Alegreya', serif;
  44.     }
  45.  
  46. /* SCROLLBAR */
  47.     ::-webkit-scrollbar {
  48.         width: 6px;
  49.         height: 6px;
  50.         background: transparent
  51.     }
  52.  
  53.     ::-webkit-scrollbar-thumb {
  54.         background: var(--border)
  55.     }
  56.  
  57. </style>
  58.  
  59. <body>
  60.  
  61.     <div class="main-box border1" style="background:var(--bg-color);">
  62.  
  63.         <header class="hXX border1 row">
  64.             <div class="fade">
  65.                 <div class="hXI">
  66.  
  67.                     <!-- FONT USED: https://fontmeme.com/fonts/hvd-bodedo-font/ -->
  68.                     <img src="https://fontmeme.com/permalink/200614/73c30ed99097481bfc75b77ae4564118.png" style="width:400px;margin:5px 0px 10px" />
  69.                     <p>"My heart burns there too."</p>
  70.                 </div>
  71.             </div>
  72.  
  73. <!---♛┈⛧┈┈•༶
  74.                 HEADER IMAGE
  75.                                 ༶•┈┈⛧┈♛ --->
  76.             <div class="hImg" style="background-image:url(https://66.media.tumblr.com/0d430cbc5cb1d04b50395927607a0aa5/tumblr_n1961iIMLH1se9t5zo1_500.gif)">
  77.  
  78.             </div>
  79.         </header>
  80.  
  81.         <article style="padding:15px">
  82.  
  83.             <div id="basics-row" class="profile row">
  84.                 <div class="picture">
  85.                     <div class="pic-border"></div>
  86.  
  87.                     <!-- FIRST PICTURE -->
  88.                     <div class="pic-img" style="background-image:url(https://em.wattpad.com/d3908f4adbfcabc0ef460113acf963abd799dce1/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f627779634468774d54525a6d77513d3d2d3239333235373736352e313436613932343837636133653538353435333935383332323032392e676966);"></div>
  89.                 </div>
  90.  
  91.  
  92. <!---♛┈⛧┈┈•༶
  93.                 BASIC INFORMATION
  94.                                     ༶•┈┈⛧┈♛ --->
  95.                 <div id="basics" class="information">
  96.                     <header class="hPTBi">
  97.                         <h1>☆ Basic Information ☆</h1>
  98.                     </header>
  99.  
  100.                     <div class="row">
  101.                         <div>
  102.                             <table>
  103.                                 <tr>
  104.                                     <td>Full Name.</td>
  105.                                     <td>Jay Ryan</td>
  106.                                 </tr>
  107.                                 <tr>
  108.                                     <td>Alias.</td>
  109.                                     <td>Ben Hanscom</td>
  110.                                 </tr>
  111.                                 <tr>
  112.                                     <td>Age.</td>
  113.                                     <td>38 years old.</td>
  114.                                 </tr>
  115.                                 <tr>
  116.                                     <td>Birthdate.</td>
  117.                                     <td>June XX, XXXX</td>
  118.                                 </tr>
  119.                                 <tr>
  120.                                     <td>Star Sign.</td>
  121.                                     <td>Leo</td>
  122.                                 </tr>
  123.                                 <tr>
  124.                                     <td>Hometown.</td>
  125.                                     <td>Derry</td>
  126.                                 </tr>
  127.                                 <tr>
  128.                                     <td>Camp.</td>
  129.                                     <td>Warrior</td>
  130.                                 </tr>
  131.                                 <tr>
  132.                                     <td>Occupation.</td>
  133.                                     <td>Architect</td>
  134.                                 </tr>
  135.                                 <tr>
  136.                                     <td>Nationality.</td>
  137.                                     <td>American</td>
  138.                                 </tr>
  139.  
  140.                             </table>
  141.  
  142.  
  143.                         </div> <!-- END OF 1ST COLUMN -->
  144.                         <div>
  145.                             <table>
  146.                                 <tr>
  147.                                     <td>Status.</td>
  148.                                     <td>Clown Killer</td>
  149.                                 </tr>
  150.                                 <tr>
  151.                                     <td>Sexuality.</td>
  152.                                     <td>Straight</td>
  153.                                 </tr>
  154.                                 <tr>
  155.                                     <td>Relationship Status.</td>
  156.                                     <td>Dating Beverly Marsh</td>
  157.                                 </tr>
  158.                                 <tr>
  159.                                     <td>...</td>
  160.                                     <td></td>
  161.                                 </tr>
  162.                                 <tr>
  163.                                     <td>...</td>
  164.                                     <td></td>
  165.                                 </tr>
  166.                                 <tr>
  167.                                     <td>...</td>
  168.                                     <td></td>
  169.                                 </tr>
  170.                                 <tr>
  171.                                     <td>...</td>
  172.                                     <td></td>
  173.                                 </tr>
  174.                                 <tr>
  175.                                     <td>...</td>
  176.                                     <td></td>
  177.                                 </tr>
  178.                             </table>
  179.                         </div> <!-- END OF 1ST COLUMN -->
  180.                     </div>
  181.  
  182.  
  183.                 </div>
  184.  
  185.             </div><!-- END OF PROFILE BASICS -->
  186.  
  187.  
  188.  
  189. <!---♛┈⛧┈┈•༶
  190.                 MOODBOARD
  191.                             ༶•┈┈⛧┈♛ --->
  192.             <br><br>
  193.             <div id="moodboard" class="">
  194.                 <div class="row">
  195.  
  196.                     <div class="col" style="margin-top:7px;">
  197.                         <div class="mood1 row">
  198.  
  199.                             <!-- TOP 1ST PIC -->
  200.                             <img src="https://66.media.tumblr.com/4b4c2093a08f4f14b300d766bf1d19fe/dc71490ab3d78651-c3/s1280x1920/756e9bbd6c85e82a56c0a4dd94f76aff262836f2.png" style="filter:grayscale(90%)" />
  201.  
  202.                             <!-- TOP 2ND PIC -->
  203.                             <img src="https://66.media.tumblr.com/29ee330e1250b9065976ee9c268e1c52/tumblr_pigut8Dtu31xdzaeqo1_500.jpg" />
  204.                         </div>
  205.                         <div class="mood1 row">
  206.  
  207.                             <!-- BOTTOM 1ST PIC -->
  208.                             <img src="https://i.pinimg.com/originals/13/7d/23/137d2350fad79899e45a03ee362be796.jpg" />
  209.  
  210.                             <!-- BOTTOM 2ND PIC -->
  211.                             <img src="https://www.aceshowbiz.com/images/photo/jay_ryan.jpg" style="filter:grayscale(100%)" />
  212.                         </div>
  213.                     </div>
  214.  
  215.  
  216.                     <!-- 210px WIDTH & 280px HEIGHT PIC -->
  217.                     <div>
  218.                         <img src="https://i.pinimg.com/564x/f8/82/fb/f882fb4b49cb44cea0d02c6bd5f96d5f.jpg" style="width:210px;filter:grayscale(90%)" />
  219.                     </div>
  220.  
  221.  
  222.                     <div class="col">
  223.                         <div class="row" style="height:170px;">
  224.  
  225.                             <!-- 100px WIDTH & 170px HEIGHT PIC -->
  226.                             <img src="https://i.pinimg.com/originals/70/d6/bc/70d6bcb97ee35d7b1441b13c382bac0e.jpg" style="width:100px;" />
  227.  
  228.                             <!-- 180px WIDTH & HEIGHT PIC -->
  229.                             <img src="https://media.tenor.com/images/ce7a100294aaa4658f380fe176bc57fc/tenor.gif" style="width:180px" />
  230.                         </div>
  231.  
  232.  
  233.                         <!-- 280 WIDTH x 145 HEIGHT PIC -->
  234.                         <div>
  235.                             <img src="https://img.huffingtonpost.com/asset/5c9a7ded2400007e064f4608.jpeg?ops=scalefit_630_noupscale" style="width:280px;height:145px;filter:grayscale(90%)" />
  236.                         </div>
  237.  
  238.  
  239.                     </div>
  240.                 </div>
  241.  
  242.             </div> <!-- ♪♪♪ END OF MOODBOARD ♪♪♪ -->
  243.             <br>
  244.  
  245. <!---♛┈⛧┈┈•༶
  246.             APPEARANCE & PERSONALITY
  247.                                     ༶•┈┈⛧┈♛ --->        
  248.        
  249.         <div class="row border1" style="border-bottom:5px solid transparent;padding-bottom:10px;">
  250.                 <div id="appearance" class="information" style="width:340px;">
  251.  
  252.                     <header class="hPTBi" style="text-align:center;">
  253.                         <h1>☆ Appearance ☆</h1>
  254.                     </header>
  255.  
  256.                     <div class="row" style="width:360px;">
  257.                         <div style="width:200px;height:300px;">
  258.                             <table>
  259.                                 <tr>
  260.                                     <td>Height.</td>
  261.                                     <td>X'X</td>
  262.                                 </tr>
  263.                                 <tr>
  264.                                     <td>Weight.</td>
  265.                                     <td>XXX</td>
  266.                                 </tr>
  267.                                 <tr>
  268.                                     <td>Hair Color.</td>
  269.                                     <td>Brown.</td>
  270.                                 </tr>
  271.                                 <tr>
  272.                                     <td>Eye Color.</td>
  273.                                     <td>Blue</td>
  274.                                 </tr>
  275.                                 <tr>
  276.                                     <td>Scars</td>
  277.                                     <td>None</td>
  278.                                 </tr>
  279.                                 <tr>
  280.                                     <td>Misc.</td>
  281.                                     <td>X</td>
  282.                                 </tr>
  283.                             </table>
  284.                         </div><!-- END TABLE -->
  285.                         <div style="width:240px;height:300px;overflow:auto;padding-left:10px">
  286.                             <p style="font-weight:bold">Place Appearance description here...</p><br>
  287.                             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.
  288.  
  289.  
  290.                         </div>
  291.  
  292.                     </div>
  293.  
  294.                 </div><!-- END DESC -->
  295.  
  296.                 <div id="appearance" class="information" style="width:340px;">
  297.  
  298.                     <header class="hPTBi" style="text-align:center;">
  299.                         <h1>☆ Personality ☆</h1>
  300.                     </header>
  301.  
  302.                     <div class="row" style="width:360px;">
  303.                         <div style="overflow:auto;height:300px;width:240px;margin-right:10px">
  304.                             <p style="font-weight:bold;">Place Personality description here...</p><br>
  305.                             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.
  306.  
  307.  
  308.                         </div> <!-- END DESC -->
  309.  
  310.                         <div>
  311.                             <h3 style="text-align:center;">Strengths</h3>
  312.                         <p>X... X... X..</p>
  313.                             <h3 style="text-align:center;">Weaknesses</h3>
  314.                         <p>X... X... X..</p>
  315.                             <h3 style="text-align:center;">Quirks</h3>
  316.                         <p>X... X... X..</p>
  317.                             <h3 style="text-align:center;">Pet Peeves</h3>
  318.                         <p>X... X... X..</p>
  319.                         </div> <!-- END TABLE -->
  320.                     </div>
  321.                 </div>
  322.             </div> <!-- END OF APPEARANCE & PERSONALITY -->
  323. <br>
  324.        
  325.        
  326. <!---♛┈⛧┈┈•༶
  327.             INTERESTS & PLAYLIST
  328.                                     ༶•┈┈⛧┈♛ --->  
  329.             <div class="row">
  330.             <div id="interests" class="information">
  331.                     <header class="hPTBi">
  332.                         <h1>☆ Interests ☆</h1>
  333.                     </header>
  334.  
  335.                     <div class="row">
  336.                         <div>
  337.                             <table>
  338.                                 <tr>
  339.                                     <td>Favorite Color.</td>
  340.                                     <td>Red, Black</td>
  341.                                 </tr>
  342.                                 <tr>
  343.                                     <td>Favorite Season.</td>
  344.                                     <td>Autumn</td>
  345.                                 </tr>
  346.                                 <tr>
  347.                                     <td>Favorite Food.</td>
  348.                                     <td>Fried Shrimps</td>
  349.                                 </tr>
  350.                                 <tr>
  351.                                     <td>Favorite Drink.</td>
  352.                                     <td>Red Bull</td>
  353.                                 </tr>
  354.                                 <tr>
  355.                                     <td>Favorite Person.</td>
  356.                                     <td>You</td>
  357.                                 </tr>
  358.                                 <tr>
  359.                                     <td>...</td>
  360.                                     <td>...</td>
  361.                                 </tr>
  362.                                 <tr>
  363.                                     <td>...</td>
  364.                                     <td>...</td>
  365.                                 </tr>
  366.                                 <tr>
  367.                                     <td>...</td>
  368.                                     <td>...</td>
  369.                                 </tr>
  370.                                 <tr>
  371.                                     <td>...</td>
  372.                                     <td>...</td>
  373.                                 </tr>
  374.  
  375.                             </table>
  376.  
  377.  
  378.                         </div> <!-- END OF 1ST COLUMN -->
  379.                         <div>
  380.                             <table>
  381.                                 <tr>
  382.                                     <td>Hobbies.</td>
  383.                                     <td>☆ Building Things<br>☆ Looking at Beverly's Pictures<br>☆ Surfing
  384.                                     <br><br></td>
  385.                                 </tr>
  386.                          
  387.                                 <tr>
  388.                                     <td>Likes.</td>
  389.                                     <td>☆ Beverly<br> ☆ Architecture<br> ☆ His Friends<br>☆ Stanley's Well-Being
  390.                                 <br><br></td>
  391.                                 </tr>
  392.                                 <tr>
  393.                                     <td>Dislikes.</td>
  394.                                     <td>☆ Pennywise<br> ☆ His Fears<br> ☆ Being called Fatboy</td>
  395.                                 </tr>
  396.                             </table>
  397.                         </div> <!-- END OF 1ST COLUMN -->
  398.                     </div>
  399.  
  400.  
  401.                 </div>
  402.  
  403. <!---♛┈⛧┈┈•༶
  404.                 PLAYLIST
  405.                             ༶•┈┈⛧┈♛ --->
  406.                 <div id="playlist" class="playlist border1" style="background:url(https://data.whicdn.com/images/331484950/original.jpg);">
  407.                     <div style="background-color:rgba(0, 0, 0, 0.7);height:94%;padding:10px;overflow:auto;">
  408.                     <h2 style="text-align:center">Playlist</h2>
  409.                     <br>
  410.                     <table>
  411.                         <tr>
  412.                             <td>Hum Hallelujah<br>
  413.                             <span>Fall Out Boy</span></td>
  414.                          </tr>
  415.                          <tr>
  416.                             <td>XO<br>
  417.                             <span>Fall Out Boy</span></td>
  418.                          </tr>
  419.                          <tr>
  420.                              <td>Some Kind of Disaster<br>
  421.                              <span>All Time Low</span></td>
  422.                          </tr>
  423.                          <tr>
  424.                             <td>Partners in Crime<br>
  425.                             <span>Set It Off (ft. Ash Costello)</span></td>
  426.                          </tr>
  427.                          <tr>
  428.                             <td>Hush Hush<br>
  429.                             <span>Set It Off</span></td>
  430.                          </tr>
  431.                         <tr>
  432.                             <td>King For A Day<br>
  433.                             <span>Pierce The Veil (ft. Kellin Quinn)</span></td>
  434.                          </tr>
  435.                     </table>
  436.  
  437.                     </div>
  438.                 </div> <!--- END OF PLAYLIST -->
  439.             </div> <!--- END OF INTERESTS & PLAYLIST --->
  440.         <br>
  441. <!---♛┈⛧┈┈•༶
  442.                 OOG & ABILITIES
  443.                                     ༶•┈┈⛧┈♛ --->  
  444.             <div class="row">
  445. <!---♛┈⛧┈┈•༶
  446.                 PLAYLIST
  447.                             ༶•┈┈⛧┈♛ --->
  448.                 <div id="playlist" class="playlist border1" style="background:url(https://data.whicdn.com/images/331484950/original.jpg);">
  449.                     <div style="background-color:rgba(0, 0, 0, 0.7);height:94%;padding:10px;overflow:auto;font-size:16px;">
  450.                     <h2 style="text-align:center">OOG</h2>
  451.                    
  452.                     <center>
  453.                    
  454.                     <img src="https://38.media.tumblr.com/1f1d93b997abe7f8f9c886f5c6bbb26d/tumblr_nqcoz9vUOp1qi82fbo2_250.gif" style="width:120px;height:120px;"/><br><br>
  455.                     <p><b>Lauren</b><br>
  456.                         GMT +8<br>
  457.                         XX years old<br>
  458.                         https://kawaii-lau.tumblr.com<br><br>
  459.                         Nicolette Gosvintha (WoHF)<br>
  460.                         Keaton Rocquemore (WoMH)<br>
  461.                         Yura Mei (WoBA)</p>
  462.                    
  463.                     </center>
  464.  
  465.                     </div>
  466.                 </div> <!--- END OF PLAYLIST -->
  467.            
  468.            
  469.             <div id="interests" class="information">
  470.                     <header class="hPTBi">
  471.                         <h1>☆ Abilities ☆</h1>
  472.                     </header>
  473.  
  474.                     <div class="row">
  475.                         <div>
  476.                             <table class="abilities">
  477.                                 <tr>
  478.                                     <td>☆ Clown Killing</td>
  479.                                 </tr>
  480.                                 <tr>
  481.                                     <td>☆ Master Architect</td>
  482.                                 </tr>
  483.                                 <tr>
  484.                                     <td>☆ Intelligence</td>
  485.                                 </tr>
  486.                                 <tr>
  487.                                     <td>☆ Tracks Team Speciality</td>
  488.                                 </tr>
  489.  
  490.                             </table>
  491.  
  492.  
  493.                         </div> <!-- END OF 1ST COLUMN -->
  494.                         <div>
  495.                             <table>
  496.                                 <tr>
  497.                                     <td>Learnt Skills.</td>
  498.                                     <td>☆ Craftsmanship<br>☆ Melee Fighting<br>☆ Enhanced Durability
  499.                                     <br><br></td>
  500.                                 </tr>
  501.                          
  502.                                 <tr>
  503.                                     <td>Born Skills.</td>
  504.                                     <td>☆ Enhanced Intelligence<br>
  505.                                 <br><br></td>
  506.                                 </tr>
  507.                                 <tr>
  508.                                     <td>Vulnerabilies.</td>
  509.                                     <td>☆ His Fears<br>☆ Losing Beverly<br>☆ Losing Confidence</td>
  510.                                 </tr>
  511.                             </table>
  512.                         </div> <!-- END OF 1ST COLUMN -->
  513.                     </div>
  514.  
  515.  
  516.                 </div>
  517.  
  518.  
  519.             </div> <!--- END OF INTERESTS & PLAYLIST --->
  520.        
  521.        
  522. <br>
  523. <!---♛┈┈┈•༶
  524.                     RELATIONS
  525.                                     ༶•┈┈┈♛ --->          
  526.             <div id="relation" class="information" style="width:750px;height:auto;">
  527.            
  528.                 <header>
  529.                     <h1 style="text-align:center">☆ Relations ☆</h1>
  530.                 </header>
  531.            
  532.                 <div class="row">
  533.                     <div class="relation-pic" style="width:170px">
  534.                         <div class="pic-border"></div>
  535.                    
  536. <!-- -ˋˏ *.·:·. RELATION PIC .·:·.* ˎˊ- -->
  537.                     <div><img src="https://i.pinimg.com/originals/00/96/d4/0096d4c593eb31b0a565e8b4e62ffe4d.gif"/></div>
  538.                     </div>
  539.                     <div class="relation-info" style="width:550px;">
  540.  
  541. <!-- -ˋˏ *.·:·. RELATION INFO .·:·.* ˎˊ- -->
  542.                         <p>Beverly Marsh || Lover</p>
  543.                         <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. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales. <br><br>
  544.                         </p>
  545.                     </div>
  546.                 </div> <!-- END OF RELATION1 -->
  547.            
  548.                 <div class="row">  
  549.               <div class="relation-pic" style="width:170px">
  550.               <div class="pic-border"></div>
  551.              
  552. <!-- -ˋˏ *.·:·. RELATION PIC .·:·.* ˎˊ- -->              
  553.               <div><img src="https://media1.tenor.com/images/cdcacbb3ef7e99444d9717703b2c3090/tenor.gif?itemid=15812867"/></div>
  554.               </div>
  555.               <div class="relation-info" style="width:550px;">
  556.              
  557. <!-- -ˋˏ *.·:·. RELATION INFO .·:·.* ˎˊ- -->              
  558.               <p>Stanley Uris || Best Friend ✝</p>
  559.               <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. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales. <br><br>
  560.                 </p>
  561.                </div>
  562.            </div> <!-- END OF RELATION2 -->
  563.            
  564.                 <div class="row">  
  565.               <div class="relation-pic" style="width:170px">
  566.               <div class="pic-border"></div>
  567.              
  568. <!-- -ˋˏ *.·:·. RELATION PIC .·:·.* ˎˊ- -->              
  569.                     <div><img src="https://media2.giphy.com/media/NEF1hWMxt8pBS/source.gif"/></div>
  570.                     </div>
  571.                
  572. <!-- -ˋˏ *.·:·. RELATION INFO .·:·.* ˎˊ- -->                
  573.                     <div class="relation-info" style="width:550px;">
  574.                         <p>Bill Denbrough || Best Friend</p>
  575.                         <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. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales. <br><br>
  576.                         </p>
  577.                     </div>
  578.                 </div> <!-- END OF RELATION3 -->
  579.                
  580.                 <div class="row">  
  581.               <div class="relation-pic" style="width:170px">
  582.               <div class="pic-border"></div>
  583.              
  584. <!-- -ˋˏ *.·:·. RELATION PIC .·:·.* ˎˊ- -->              
  585.                     <div><img src="https://i.pinimg.com/originals/06/16/14/061614ffd2fc647c738001bf7170424b.gif"/></div>
  586.                     </div>
  587.                     <div class="relation-info" style="width:550px;">
  588.                     <p>Richie Tozier || Best Friend</p>
  589.                     <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. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales. <br><br>
  590.                         </p>
  591.                     </div>
  592.                 </div> <!-- END OF RELATION4 -->
  593.            
  594.                 <div class="row">  
  595.               <div class="relation-pic" style="width:170px">
  596.               <div class="pic-border"></div>
  597.              
  598. <!-- -ˋˏ *.·:·. RELATION PIC .·:·.* ˎˊ- -->              
  599.                     <div><img src="https://66.media.tumblr.com/cf02bb982a5ebca6dd8cb31ca7cfb2f2/tumblr_pyv9yok0ak1qcqsdso1_500.gif"/></div>
  600.                     </div>
  601.                     <div class="relation-info" style="width:550px;">
  602.                    
  603. <!-- -ˋˏ *.·:·. RELATION INFO .·:·.* ˎˊ- -->                    
  604.                     <p>Eddie Kaspbrak || Best Friend ✝</p>
  605.                     <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. Fusce tempus dolor eu magna elementum, quis faucibus velit sodales. <br><br>
  606.                         </p>
  607.                     </div>
  608.                 </div> <!-- END OF RELATION5 -->
  609.             </div> <!-- END OF RELATIONS BOX -->
  610.         </article>
  611.     </div>
  612.  
  613. <!-- -ˋˏ *.·:·. PLEASE DO NOT REMOVE CREDITS <3 .·:·.* ˎˊ- -->  
  614. <div class="credits" style="text-align:center;opacity:0.8;font-family:serif;font-size:13px;">2020 &copy; Coding by <a href="https://kawaii-lau.tumblr.com" target="_blank" style="color:#BD3B24;text-decoration:none;font-weight;bold;">Kawaii-Lau</a></div>
  615. </body>
  616.  
  617. <!-- -ˋˏ *.·:·. ADVANCED CSS .·:·.* ˎˊ- -->  
  618. <style>
  619.  
  620.  
  621. /* GENERAL CSS */
  622.     p,
  623.     h1,
  624.     h2,
  625.     h3 {
  626.         margin: 0px
  627.     }
  628.  
  629.     .main-box {
  630.         width: 820px;
  631.         margin: 0px auto;
  632.         border: 10px solid transparent;
  633.         color: var(--main-text-color);
  634.         font-family: var(--main-font)
  635.     }
  636.  
  637.     .border1 {
  638.         border-image: url(https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/blood-red-flowers-paul-velasco.jpg) 40 round;
  639.     }
  640.  
  641.     header.hXX {
  642.         width: 100%;
  643.         height: 260px;
  644.         border-bottom: 4px solid transparent;
  645.     }
  646.  
  647.     header>.fade {
  648.         background: linear-gradient(to right, var(--bg-color), var(--bg-color), transparent, var(--bg-color));
  649.         width: inherit;
  650.         height: inherit;
  651.         position: relative;
  652.         z-index: 2;
  653.     }
  654.  
  655.     .fade>div {
  656.         padding: 60px 40px;
  657.         color: var(--subtitle-color);
  658.         font-style: italic;
  659.         font-size: 18px;
  660.         font-family: var(--subtitle-font)
  661.     }
  662.  
  663.     .fade>div p {
  664.         margin: 0px
  665.     }
  666.  
  667.     header>.hImg {
  668.         width: 550px;
  669.         height: inherit;
  670.         background-size: 100% 100%;
  671.         position: absolute;
  672.         margin-left: 250px;
  673.     }
  674.  
  675.     .profile {
  676.         height: 315px;
  677.     }
  678.  
  679.     .picture {
  680.         width: 245px;
  681.         height: 315px;
  682.         padding: 5px;
  683.         border: 4px double var(--border)
  684.     }
  685.  
  686.     .pic-img {
  687.         width: inherit;
  688.         height: inherit;
  689.         background-size: 99% 100%;
  690.         background-repeat: no-repeat;
  691.     }
  692.  
  693.     .pic-border {
  694.         -webkit-mask-image: url(https://i.imgur.com/OruQd5f.png);
  695.         -webkit-mask-size: 90% 95%;
  696.         -webkit-mask-position: 10px 10px;
  697.         background: red url(https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/blood-red-flowers-paul-velasco.jpg);
  698.         background-size: 70% 70%;
  699.         width: inherit;
  700.         height: inherit;
  701.         position: absolute;
  702.     }
  703.  
  704.     .information {
  705.         padding: 0px 20px;
  706.         width: 500px;
  707.         height: inherit;
  708.         overflow: auto;
  709.     }
  710.  
  711.     .information>header {
  712.         background: var(--box-header);
  713.         color: var(--bh-text-color);
  714.         font-family: var(--header-font);
  715.         margin-bottom: 10px;
  716.         font-size: 22px;
  717.         padding: 5px 10px;
  718.         width: 100%;
  719.     }
  720.  
  721.     .information table {
  722.         color: var(--main-text-color);
  723.         border-collapse: collapse;
  724.         text-align: right;
  725.     }
  726.  
  727.     .information table td:first-child {
  728.         font-weight: bold;
  729.         font-size: 20px;
  730.         width: 120px;
  731.         text-align: left;
  732.     }
  733.  
  734.     .information>.row>div {
  735.         width: 49%;
  736.         margin-right: 5px;
  737.     }
  738.  
  739.     .mood1 img, .mood2 img {
  740.         width: 150px;
  741.         height: 150px;
  742. }
  743.     .playlist {
  744.         margin-left:5px;
  745.         background-size:100% 100%;
  746.         width:210px;
  747.         border-bottom:5px solid transparent;
  748.         border-left:5px solid transparent;
  749.         border-top:5px solid transparent;
  750.         border-right:5px solid transparent;
  751.  
  752. }
  753.     .playlist table {
  754.         border-collapse:collapse;
  755. }
  756.  
  757.     .playlist table td {
  758.         color:white;
  759. }
  760.  
  761.     .playlist table td span {
  762.         color:var(--artist);
  763.         margin-left:20px;
  764.         font-weight:bold;
  765. }
  766.  
  767.     .abilities tr td:first-child {
  768.             width:400px;
  769. }
  770.  
  771.     .relation-pic {
  772.         width:170px;height:170px;
  773. }
  774.  
  775.     .relation-pic img {
  776.         width:160px;height:160px;
  777.         margin-top:10px
  778. }
  779.  
  780.     .relation-info {
  781.         width:680px;
  782.         padding:10px;
  783. }
  784.     .relation-info p:first-child {
  785.         font-weight:bold;
  786.         font-size:24px;
  787.         margin-bottom:10px;
  788. }
  789.  
  790. .row {display: flex;flex-direction: row}
  791. .col {display: flex;flex-direction: column}
  792.  
  793. .credits {transition:1s ease}
  794. .credits:hover {letter-spacing:3px;color:gray}
  795.  
  796. </style>
  797.  
  798. </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!