API tools faq
paste
Advertisement
Miss_Dany

Little Liar Spencer PT

Miss_Dany
May 26th, 2022
1,409
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Futur post</title>
  7.     <link href='https://fonts.googleapis.com/css?family=Aladin' rel='stylesheet'>
  8. </head>
  9. <body>
  10.  
  11.     <style type="text/css">
  12.        
  13.         ::-webkit-scrollbar {width: 3px;}
  14.         ::-webkit-scrollbar-track {background-color: #fbdcd9;}
  15.         ::-webkit-scrollbar-thumb {background-color: #87042b;}
  16.  
  17.         /*MAIN BOX*/
  18.  
  19.         .container {width: 700px;
  20.            height: 600px;
  21.            margin: auto;
  22.            display: flex;
  23.            overflow: hidden;
  24.            box-shadow: 0 0 10px #87042b;
  25.            box-sizing: border-box;}
  26.  
  27.          /*CHARACTER NAME*/
  28.  
  29.         aside {width: 100px;
  30.             height: 600px;
  31.             background: #fbdcd9;
  32.             border: 1px solid #fbdcd9;
  33.             border-left: none;
  34.             box-sizing: border-box;
  35.             transform: rotate(180deg);
  36.             writing-mode: vertical-lr;
  37.             text-align: center;          
  38.             font-family: aladin;
  39.             font-size: 80px;}
  40.  
  41.         aside span {background:url('https://cdn.pixabay.com/photo/2017/01/23/07/23/pink-leather-2001739_960_720.jpg')center;
  42.             background-size:cover;
  43.             -webkit-background-clip:text;
  44.             -webkit-text-fill-color:transparent;}
  45.  
  46.         /*BODY*/
  47.  
  48.         main {width: 600px;
  49.             height: 600px;
  50.             box-sizing: border-box;
  51.             position: relative;}
  52.  
  53.         /*COVER*/
  54.  
  55.         .cover {width: 600px;
  56.            height: 600px;
  57.            border: 1px solid #fbdcd9;
  58.            border-left: none;
  59.            box-sizing: border-box;
  60.            background: rgb(135,4,43);
  61.            background: radial-gradient(circle, rgba(135,4,43,1) 0%, rgba(251,220,217,1) 100%);
  62.            position: absolute;
  63.            right: 0px;
  64.            top: 0px;
  65.            z-index: 99;
  66.            transition: 2.5s all ease-in-out;}
  67.  
  68.         #top {width: 150px;
  69.             box-sizing: border-box;
  70.             outline-offset: -5px;
  71.             outline: 1px dashed #fbdcd9;
  72.             background: #e5ceb1 url('https://cdn.pixabay.com/photo/2017/01/23/07/23/pink-leather-2001739_960_720.jpg')center;
  73.             margin: auto;
  74.             height: 200px;
  75.             padding-top: 20px}
  76.  
  77.         #bottom {width: 150px;
  78.             box-sizing: border-box;
  79.             outline-offset: -5px;
  80.             outline: 1px dashed #fbdcd9;
  81.             background: #e5ceb1 url('https://cdn.pixabay.com/photo/2017/01/23/07/23/pink-leather-2001739_960_720.jpg')center;
  82.             margin: auto;
  83.             height: 194px;
  84.             padding-top: 65px}
  85.  
  86.         .cc {width: 25px;
  87.             height: 25px;
  88.             background: rgb(251,220,217);
  89.             background: radial-gradient(circle, rgba(251,220,217,1) 0%, rgba(135,4,43,1) 100%);
  90.             margin: auto;}
  91.  
  92.         #cov {width: 300px;
  93.             height: 300px;
  94.             background:#e5ceb1 url('https://zupimages.net/up/21/52/l468.gif')center;
  95.             background-size: cover;
  96.             border: 1px solid #5c3c3c;
  97.             outline-offset: -5px;
  98.             outline: 1px dashed #5c3c3c;
  99.             margin: -48px auto;
  100.             position: relative;
  101.             border-radius: 300px;}
  102.  
  103.         .container main:hover .cover {
  104.            transition: 1s all ease-in-out;
  105.            top: 600px;}
  106.  
  107.  
  108.         /*PT INFORMATION*/
  109.  
  110.         .pt {width: 600px;
  111.             height: 600px;
  112.             border: 1px solid #fbdcd9;
  113.             border-left: none;
  114.             background:url('https://cdn.pixabay.com/photo/2017/01/09/02/02/pink-wine-1964457_960_720.jpg') center;
  115.             background-size: cover;
  116.             box-sizing: border-box;
  117.             overflow: hidden;}
  118.  
  119.         /*NAVIGATION*/
  120.  
  121.         nav {width: 150px;
  122.             height: 22px;
  123.             margin-top: 10px;
  124.             display: inline-flex;
  125.             box-sizing: border-box;}
  126.  
  127.         .nav {width: 25px;
  128.             background: rgb(251,220,217);
  129.             background: radial-gradient(circle, rgba(251,220,217,1) 0%, rgba(135,4,43,1) 100%);
  130.             border: 1px solid #fab1b7;
  131.             cursor: pointer;
  132.             margin-left: 10px;}
  133.  
  134.         .nav:hover {width: 30px;}
  135.  
  136.         /*ALL PAGES*/
  137.  
  138.         .page {width: 100%;
  139.             height: 645px;
  140.             margin-top: -66px;
  141.             background: rgb(0, 0, 0, 0.3);
  142.             box-sizing: border-box;}
  143.  
  144.         h1 {font-family: aladin;
  145.             color: #fab1b7;
  146.             padding-top: 5px;
  147.             letter-spacing: 0.5em;
  148.             text-align: right;
  149.             font-size: 30px;}
  150.  
  151.         .border {outline-offset: -5px;
  152.             outline: 1px dashed #fbdcd9;}
  153.  
  154.         .overlay {width: 100%;
  155.             height: 100%;
  156.             background: rgba(255, 255, 255, 0.5);}
  157.  
  158.         /*IDENTITY*/
  159.  
  160.         .frame {-webkit-mask-box-image: url('https://zupimages.net/up/21/52/gysb.png');
  161.             width: 70%;
  162.             height: 150px;
  163.             margin: auto;}
  164.  
  165.         .fc {background: url('https://capricho.abril.com.br/wp-content/uploads/2016/12/troian.gif') center;
  166.             background-size:cover;
  167.             background-position: center;
  168.             width: 100%;
  169.             height: 100%;}
  170.  
  171.         blockquote {text-align: center;
  172.             font-style: italic;
  173.             color: #fbdcd9;}
  174.  
  175.         .about {width: 550px;
  176.             margin: auto;
  177.             background: #e5ceb1 url('https://cdn.pixabay.com/photo/2017/01/23/07/23/pink-leather-2001739_960_720.jpg')center;
  178.             height: 280px;
  179.             border-left: 3px solid #87042b;
  180.             border-right: 3px solid #87042b;  
  181.             box-sizing: border-box;}
  182.  
  183.         .about div {padding: 10px;
  184.             overflow: auto;
  185.             box-sizing: border-box;}
  186.  
  187.         .about b {font-family: aladin;
  188.             color: #87042b;
  189.             letter-spacing: 0.5em;}
  190.  
  191.         .about i {display: block;
  192.             color: #662833;
  193.             text-align: right;}
  194.  
  195.  
  196.         /*PERSONALITY*/
  197.  
  198.         table {width: 98%;
  199.             height: 130px;
  200.             text-align: center;
  201.             margin: auto;}
  202.  
  203.         td {width: 150px;
  204.             background: rgba(255, 255, 255, 0.5);
  205.             box-shadow: 0 0 5px #fbdcd9;
  206.             font-family: aladin;
  207.             color: #87042b;
  208.             font-size: 20px;}
  209.  
  210.  
  211.         article {width: 98%;
  212.             height: 200px;
  213.             margin: auto;
  214.             text-align: justify;
  215.             overflow: auto;
  216.             background: rgba(255, 255, 255, 0.5);
  217.             padding: 10px;
  218.             box-shadow: 0 0 5px #fbdcd9;
  219.             box-sizing: border-box;}
  220.  
  221.         .pst {width: 98%;
  222.             height: 150px;
  223.             display: inline-flex;
  224.             margin: auto;}
  225.  
  226.         fieldset {width: 50%;
  227.             margin-left: 10px;
  228.             background: rgba(255, 255, 255, 0.5);
  229.             padding: 10px;
  230.             color: #87042b;
  231.             font-family: aladin;
  232.             overflow: auto;
  233.             box-shadow: 0 0 5px #fbdcd9;
  234.             border: none;}
  235.  
  236.         legend {font-size: 20px;}
  237.  
  238.  
  239.         /*APPAREANCE*/
  240.  
  241.         .grid {width: 98%;
  242.             height: 500px;
  243.             margin: auto;
  244.             display: grid;
  245.             grid-template-columns: 1fr 1fr 1fr 1fr;
  246.             grid-template-rows: 1fr 1fr 1fr;
  247.             grid-gap: 1%;}
  248.  
  249.         #img1 {grid-column: span 2;
  250.             grid-row: span 2;
  251.             background: url('http://images6.fanpop.com/image/photos/34900000/-troian-bellisario-34933710-245-245.gif')center;
  252.             background-size: cover;}
  253.  
  254.         #img2 {grid-row: 3;
  255.             background: url('http://images6.fanpop.com/image/photos/38300000/Troian-Bellisario-troian-bellisario-38315117-245-230.gif')center;
  256.             background-size: cover;}
  257.  
  258.         #img3 {grid-row: 3;
  259.             grid-column: 2;
  260.             background: url('https://i.pinimg.com/originals/bb/95/3f/bb953fe58c9c366495670a8f3d36d62a.gif')center;
  261.             background-size: cover;}
  262.  
  263.         #img4 {grid-row: 1;
  264.             grid-column: 3;
  265.             background: url('https://i.skyrock.net/6989/67126989/pics/3113386775_1_3_hezNRaJ2.gif')center;
  266.             background-size: cover;}
  267.  
  268.         #img5 {grid-row: 1;
  269.             grid-column: 4;
  270.             background: url('https://i.pinimg.com/originals/51/1c/15/511c15162a1c93835264bfdd4fc28520.gif')center;
  271.             background-size: cover;}
  272.  
  273.         #img6 {grid-column-start: 3;
  274.             grid-row-start: 2;
  275.             grid-column-end: 5;
  276.             grid-row-end: 4;
  277.             background: #e5ceb1 url('https://cdn.pixabay.com/photo/2017/01/23/07/23/pink-leather-2001739_960_720.jpg')center;
  278.             box-sizing: border-box;
  279.             text-align: justify;}
  280.  
  281.         /*SKILLS*/
  282.  
  283.         .graph {background: rgba(255, 255, 255, 0.5);
  284.             box-shadow: 0 0 5px #fbdcd9;
  285.             width: 380px;
  286.             height: 230px;
  287.             margin: auto;
  288.             display: flex;}
  289.  
  290.         .axis {width: 60px;
  291.             height: 210px;
  292.             margin-top: 10px;
  293.             text-align: right;
  294.             border-right: 1px dashed #87042b;
  295.             font-family: aladin;
  296.             color: #87042b;}
  297.  
  298.         .scale {height: 20px;}
  299.  
  300.         .histogram {display: flex;
  301.             gap: 10px;
  302.             height: 200px;
  303.             margin-top: 23px;
  304.             border-top: 1px dashed #87042b;
  305.             transform: rotate(180deg);}
  306.  
  307.         .bar {width: 20px;
  308.             background: rgb(251,220,217);
  309.             background: radial-gradient(circle, rgba(251,220,217,1) 0%, rgba(135,4,43,1) 100%);
  310.             border: 1px solid #fab1b7;
  311.             border-bottom: none;}
  312.  
  313.         .x-axis {width: 380px;
  314.             margin: auto;
  315.             font-family: aladin;
  316.             color: #fab1b7;
  317.             display: flex;}
  318.  
  319.         .legend {transform: rotate(-45deg);
  320.             margin-left: -12px;}
  321.  
  322.  
  323.         /*RELATIONS*/
  324.  
  325.         .rel {width: 98%;
  326.             height: 500px;
  327.             margin: auto;
  328.             overflow: auto;
  329.             padding-right: 10px;
  330.             box-sizing: border-box;}
  331.  
  332.         .char {width: 100%;
  333.             height: 200px;
  334.             background: rgba(255, 255, 255, 0.5);
  335.             box-shadow: 0 0 5px #fbdcd9;
  336.             display: flex;}
  337.  
  338.         .one {width: 200px;
  339.             background: #e5ceb1 url('https://cdn.pixabay.com/photo/2017/01/23/07/23/pink-leather-2001739_960_720.jpg')center;  
  340.             padding: 10px;
  341.             box-sizing: border-box;}
  342.  
  343.         .two {width: 400px;
  344.             overflow: auto;
  345.             text-align: justify;
  346.             padding: 10px;
  347.             box-sizing: border-box;}
  348.  
  349.         .two span {display: block;
  350.             font-family: aladin;
  351.             text-align: right;
  352.             color: #87042b;
  353.             font-size: 20px;}
  354.  
  355.  
  356.         /*CREDITS - DO NOT REMOVE*/
  357.  
  358.         .credits {text-decoration: none;
  359.             font-family: 'courier new';
  360.             font-size: 15px;
  361.             color: #000;
  362.             letter-spacing: 0.3em;
  363.             font-weight: 900;}
  364.  
  365.     </style>
  366.  
  367.     <div class="container">
  368.        
  369.         <!--CHARACTER NAME -->
  370.         <aside><span>Spencer Hastings</span></aside>
  371.  
  372.         <main>
  373.            
  374.             <!--COVER -->
  375.             <div class="cover">
  376.                
  377.                 <section id="top">         
  378.                     <div class="cc"></div><br>
  379.                     <div class="cc"></div><br>
  380.                     <div class="cc"></div>
  381.                 </section>
  382.  
  383.                 <!--FACE CLAIM -->
  384.                 <div id="cov"></div>
  385.  
  386.                 <section id="bottom">          
  387.                     <div class="cc"></div><br>
  388.                     <div class="cc"></div><br>
  389.                     <div class="cc"></div>
  390.                 </section>
  391.             </div>
  392.  
  393.  
  394.             <!--PT INFORMATION -->
  395.             <div class="pt">
  396.                
  397.                 <!--NAVIGATION-->
  398.                 <nav>
  399.                     <div class="nav" style="margin: none;" onclick="show('Page1');"></div>
  400.                     <div class="nav" onclick="show('Page2');"></div>
  401.                     <div class="nav" onclick="show('Page3');"></div>
  402.                     <div class="nav" onclick="show('Page4');"></div>
  403.                     <div class="nav" onclick="show('Page5');"></div>
  404.                 </nav>
  405.  
  406.                 <!--IDENTITY -->
  407.                 <section class="page" id="Page1">
  408.                    
  409.                     <h1>Identity</h1>
  410.  
  411.                     <!--FACE CLAIM-->
  412.                     <div class="frame">
  413.  
  414.                         <div class="fc"></div>
  415.                     </div>
  416.  
  417.                     <!--SHORT QUOTE-->
  418.                     <blockquote>
  419.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  420.                     </blockquote>
  421.  
  422.                     <div class="about">
  423.  
  424.                         <div class="overlay">
  425.                             <b>Full name</b> <i>Spencer Jill Hastings</i>
  426.  
  427.                             <b>Nickname</b> <i>Spence, Jane Bond, Veronica Mars, Nikita, Miss Marple</i>
  428.  
  429.                             <b>Birthday</b> <i>April 11, 1994</i>
  430.  
  431.                             <b>Hogwart house</b> <i>Slytherin</i>
  432.  
  433.                             <b>Marital status</b> <i>Married to Toby Cavanaugh</i>
  434.  
  435.                             <b>Occupation</b> <i>White House Press Secretary</i>
  436.  
  437.                             <b>Face claim</b> <i>Troian Bellisario</i>
  438.                         </div>
  439.                        
  440.                        
  441.                     </div>
  442.  
  443.                 </section>
  444.  
  445.                 <!--PERSONALITY -->
  446.                 <section class="page" id="Page2">
  447.                    
  448.                     <h1>Personality</h1>
  449.  
  450.                     <table>
  451.                            
  452.                         <tr>
  453.                             <td>Trait</td>
  454.                             <td>Trait</td>
  455.                             <td>Trait</td>
  456.                         </tr>
  457.  
  458.                         <tr>
  459.                             <td>100%</td>
  460.                             <td>50%</td>
  461.                             <td>25%</td>
  462.                         </tr>
  463.  
  464.                     </table><br>
  465.  
  466.                     <article>
  467.  
  468.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  469.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  470.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  471.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  472.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  473.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  474.  
  475.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  476.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  477.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  478.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  479.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  480.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  481.                        
  482.                        
  483.                     </article><br>
  484.  
  485.                     <div class="pst">
  486.                        
  487.                         <fieldset>
  488.  
  489.                             <legend>Like</legend>
  490.  
  491.                             <ul>
  492.                                 <li>Things</li>
  493.                                 <li>Things</li>
  494.                                 <li>Things</li>
  495.                             </ul>
  496.                            
  497.                         </fieldset>
  498.  
  499.                         <fieldset>
  500.  
  501.                             <legend style="text-align: right;">Dislike</legend>
  502.  
  503.                             <ul>
  504.                                 <li>Things</li>
  505.                                 <li>Things</li>
  506.                                 <li>Things</li>
  507.                             </ul>
  508.                            
  509.                         </fieldset>
  510.                     </div>
  511.                 </section>
  512.  
  513.                 <!--Apparence -->
  514.                 <section class="page" id="Page3">
  515.                    
  516.                     <h1>Appareance</h1>
  517.  
  518.                     <div class="grid">
  519.                        
  520.                         <div id="img1" class="border"></div>
  521.  
  522.                         <div id="img2" class="border"></div>
  523.  
  524.                         <div id="img3" class="border"></div>
  525.  
  526.                         <div id="img4" class="border"></div>
  527.  
  528.                         <div id="img5" class="border"></div>
  529.  
  530.                         <div id="img6">
  531.                            
  532.                             <div class="overlay" style="overflow: auto; padding: 10px; box-sizing: border-box;">
  533.                                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  534.                             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  535.                             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  536.                             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  537.                             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  538.                             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  539.  
  540.                             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  541.                             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  542.                             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  543.                             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  544.                             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  545.                             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  546.                             </div>
  547.                         </div>
  548.                     </div>
  549.                 </section>
  550.  
  551.                 <!--SKILLS -->
  552.                 <section class="page" id="Page4">
  553.                    
  554.                     <h1>Skills</h1>
  555.  
  556.                     <div class="graph">
  557.  
  558.                         <div class="axis">
  559.  
  560.                             <div class="scale">100%...</div>
  561.                             <div class="scale">90%...</div>
  562.                             <div class="scale">80%...</div>
  563.                             <div class="scale">70%...</div>
  564.                             <div class="scale">60%...</div>
  565.                             <div class="scale">50%...</div>
  566.                             <div class="scale">40%...</div>
  567.                             <div class="scale">30%...</div>
  568.                             <div class="scale">20%...</div>
  569.                             <div class="scale">10%...</div>
  570.                             <div class="scale">0...</div>
  571.                         </div>
  572.  
  573.                         <div class="histogram">
  574.  
  575.                             <!-- 10% = height: 20px;
  576.                                  20% = height: 40px;
  577.                                  ...
  578.                                  90% = height: 180px;
  579.                                  100% = height: 200px;-->
  580.  
  581.                             <!--LAST--><div class="bar" style="height: 200px;  margin-left: 10px;"></div>
  582.                             <div class="bar" style="height: 180px;"></div>
  583.                             <div class="bar" style="height: 160px;"></div>
  584.                             <div class="bar" style="height: 140px;"></div>
  585.                             <div class="bar" style="height: 120px;"></div>
  586.                             <div class="bar" style="height: 100px;"></div>
  587.                             <div class="bar" style="height: 80px;"></div>
  588.                             <div class="bar" style="height: 60px;"></div>
  589.                             <div class="bar" style="height: 40px;"></div>
  590.                             <!--FIRST--><div class="bar" style="height: 20px;margin-right: 20px;"></div>
  591.                         </div>
  592.                     </div>
  593.  
  594.                     <div class="x-axis">
  595.                        
  596.                         <p style="transform: rotate(-45deg); margin-left: 30px">Archery</p>
  597.                         <p class="legend">Archery</p>
  598.                         <p class="legend">Archery</p>
  599.                         <p class="legend">Archery</p>
  600.                         <p class="legend">Archery</p>
  601.                         <p class="legend">Archery</p>
  602.                         <p class="legend">Archery</p>
  603.                         <p class="legend">Archery</p>
  604.                         <p class="legend">Archery</p>
  605.                         <p class="legend">Archery</p>
  606.  
  607.                     </div><br>
  608.  
  609.                     <article>
  610.  
  611.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  612.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  613.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  614.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  615.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  616.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  617.  
  618.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  619.                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  620.                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  621.                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  622.                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  623.                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  624.                        
  625.                        
  626.                     </article>
  627.  
  628.                 </section>
  629.  
  630.                 <!--RELATIONS -->
  631.                 <section class="page" id="Page5">
  632.                    
  633.                     <h1>Relations</h1>
  634.  
  635.                     <div class="rel">
  636.  
  637.                         <!--REL 1-->
  638.                        
  639.                         <div class="char">
  640.                            
  641.                             <div class="one">
  642.                                
  643.                                 <div style="background: url('https://static.tumblr.com/p0lenc8/UXYmbb0ex/keegan-allen.gif')center; background-size: cover; width: 100%; height: 100%;"></div>
  644.                             </div>
  645.  
  646.                             <div class="two">
  647.                                
  648.                                 <span>Toby</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  649.                                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  650.                                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  651.                                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  652.                                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  653.                                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  654.                             </div>
  655.                         </div><br>
  656.  
  657.                         <!--REL 2-->
  658.                        
  659.                         <div class="char">
  660.  
  661.                             <div class="two">
  662.                                
  663.                                 <span>Hanna</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  664.                                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  665.                                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  666.                                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  667.                                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  668.                                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  669.                             </div>
  670.                            
  671.                             <div class="one">
  672.                                
  673.                                 <div style="background: url('http://emmafabien2.e.m.pic.centerblog.net/27d7303e.gif')center; background-size: cover; width: 100%; height: 100%;"></div>
  674.                             </div>
  675.  
  676.                         </div><br>
  677.  
  678.                         <!--REL 3-->
  679.                        
  680.                         <div class="char">
  681.                            
  682.                             <div class="one">
  683.                                
  684.                                 <div style="background: url('http://emmafabien2.e.m.pic.centerblog.net/27d7303e.gif')center; background-size: cover; width: 100%; height: 100%;"></div>
  685.                             </div>
  686.  
  687.                             <div class="two">
  688.                                
  689.                                 <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  690.                                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  691.                                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  692.                                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  693.                                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  694.                                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  695.                             </div>
  696.                         </div><br>
  697.  
  698.                         <!-- More rel -->
  699.  
  700.                     </div>
  701.                 </section>
  702.  
  703.             </div>
  704.         </main>
  705.     </div>
  706.  
  707.     <!--DO NOT REMOVE THE CREDIT OR I EAT YOU -->
  708.  
  709.     <center><a href="https://missy-dany.tumblr.com/" target="_blank" class="credits">*--Miss Dany--*</a></center>
  710.  
  711.     <!--NAVIGATION -->
  712.  
  713.     <script type="text/javascript">
  714.  
  715.         function show(elementID) {
  716.  
  717.             var ele = document.getElementById(elementID);
  718.            
  719.             if (!ele) {alert("no such element");
  720.  
  721.             return;}
  722.  
  723.             var pages = document.getElementsByClassName('page');
  724.            
  725.             for(var i = 0; i < pages.length; i++) {pages[i].style.display = 'none';}
  726.  
  727.             ele.style.display = 'block';}
  728.        
  729.    </script>
  730.  
  731. </body>
  732. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!