API tools faq
paste
Kawaii-Lau

Violet-Simple-Origins

Kawaii-Lau
Jul 27th, 2019
478
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.78 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3. /* EASY ACCESSIBLE CSS */
  4.    
  5.     .main-box {border:7px double rgb(80, 84, 110);}
  6.    
  7.     .content {
  8.         display:none;
  9.         background:linear-gradient(to bottom, rgb(84, 62, 99), rgb(80, 84, 110));
  10.         border:5px solid transparent;
  11.         width:auto; height:550px;
  12.         background-clip:padding-box;
  13.         color:white;
  14.         font-family:serif   }
  15.  
  16.     .cover {width:100%;height:70%;background-color:rgb(85, 67, 67);
  17.     -webkit-mask-image:url(https://i.imgur.com/vXplWLr.png);
  18.     -webkit-mask-size:100% 100%;
  19.     -webkit-mask-position:top;position:relative;}
  20.    
  21.     .nav {
  22.         left:0px;
  23.         transition:1.5s ease
  24.     }
  25.     .nav-content {
  26.         color:white;
  27.         font-family:'Playfair Display';
  28.         left:-300px;
  29.         transition:1.5s ease
  30.     }
  31.     .nav:hover {
  32.         left:305px;
  33.         transition:1.5s ease
  34.     }
  35.  
  36.     .nav-content button {
  37.         border:none;
  38.         background-color:transparent;
  39.         color:white;
  40.         outline:none;
  41.         font-family:'Playfair Display';
  42.         cursor:pointer;
  43.         font-size:24px;
  44.         transition:1s;
  45.         margin-bottom:5px
  46.     }
  47.     .nav-content button:hover {
  48.         text-shadow:0px 0px 5px red;
  49.         transition:1s;
  50.         margin-left:10px
  51.     }
  52.    
  53.     .CHP {
  54.         font-family:'Courgette';
  55.         font-size:20px;
  56.     }
  57.    
  58.     .credit {color:inherit;transition:1s}
  59.     .credit:hover {color:red;transition:1s}
  60.    
  61. /* CUSTOMIZED SCROLLBAR */ 
  62.  
  63.     ::-webkit-scrollbar {
  64.             background-color:rgb(84, 62, 99);
  65.             height:7px;
  66. }
  67.     ::-webkit-scrollbar-thumb {
  68.             background-color:rgba(59, 85, 143, 0.3);
  69.             width:4px;
  70. }
  71.  
  72.  
  73. .fade {
  74.   -webkit-animation-name: fade;
  75.   -webkit-animation-duration: 1.5s;
  76.   animation-name: fade;
  77.   animation-duration: 1.5s;}
  78. @-webkit-keyframes fade {from {opacity: .5} to {opacity: 1}}
  79. @keyframes fade {from {opacity: .5} to {opacity: 1}}
  80. </style>
  81.  
  82. <script>
  83. function openInfo(evt, contPage) {
  84.     var i, tabcontent, tablinks;
  85.     tabcontent = document.getElementsByClassName("content");
  86.     for (i = 0; i < tabcontent.length; i++) {
  87.        tabcontent[i].style.display = "none";
  88.    }
  89.    tablinks = document.getElementsByClassName("tablinks");
  90.    for (i = 0; i < tablinks.length; i++) {
  91.        tablinks[i].className = tablinks[i].className.replace(" active", "");
  92.    }
  93.    document.getElementById(contPage).style.display = "block";
  94.    evt.currentTarget.className += " active";
  95. }
  96. {}
  97. </script>
  98.  
  99. <!-- CUSTOM FONTS LINK -->
  100.  
  101. <link href='https://fonts.googleapis.com/css?family=Playfair Display|Courgette' rel='stylesheet'>
  102.  
  103. <body>
  104.   <div style="height:560px;width:900px;overflow:hidden;margin-top:30px;margin-left:auto;margin-right:auto;position:relative;z-index:5;" class="main-box">
  105.    
  106.         <div class="nav" style="width:100px;height:100%;position:absolute;z-index:6;" >
  107.             <div style="width:300px;height:560px;position:absolute;background-color:rgba(33, 32, 38,0.8)" class="nav-content">
  108.             <div style="padding:20px">
  109.             <center>
  110.                 <hr style="border-width:5px 0px 0px 0px;border-style:double;border-color:white">
  111.                
  112.                 <button onclick="openInfo(event, 'page1')">Beginning</button><br>
  113.                 <button onclick="openInfo(event, 'page2')">Childhood</button><br>
  114.                 <button onclick="openInfo(event, 'page3')">Discovery</button><br>
  115.                 <button onclick="openInfo(event, 'page4')">Climax</button><br>
  116.                 <button onclick="openInfo(event, 'page5')">Resolution</button><br>
  117.                 <button onclick="openInfo(event, 'page6')">Aftermath</button><br>
  118.                
  119.                 <hr style="border-width:5px 0px 0px 0px;border-style:double;border-color:white">
  120.            
  121.             <p>"Place Beautiful Quote Here"</p>
  122.            
  123.             </center>
  124.             </div>
  125.             </div>
  126.         </div>
  127.    
  128.     <!---- FRONT PAGE ---->
  129.    
  130.       <div class="content" style="display:block" id="front" style="margin-left:auto;margin-right:auto">
  131.        
  132.             <center>
  133.             <p style="font-size:40px;width:40%;margin:20px 0px 0px 0px">The Origins of <span style="font-size:60px;font-family:'Courgette';">Jane Rose</span></p>
  134.             </center>
  135.            
  136.             <div class="cover">
  137.        
  138.     <!---- CHARACTER IMAGE ---->   
  139.                 <img src="https://i.imgur.com/1GbzRN8.jpg" style="width:100%;height:130%"/>
  140.             </div>
  141.         </div>
  142.        
  143.        
  144.        
  145.     <!---- CHAPTER ONE ---->   
  146.        
  147.         <div class="content fade" id="page1" style="overflow:hidden;position:relative;z-index:4">
  148.             <div style="width:535px;height:100%;position:relative;float:left; z-index:2;padding:25px;">
  149.            
  150.             <div class="CHP">
  151.             Chapter One
  152.             </div>
  153.            
  154.             <div style="overflow:auto;width:90%;height:80%;text-align:justify;padding:0px 10px;position:relative;top:20px">
  155.                
  156.             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed velit dignissim sodales ut eu sem integer. Purus in mollis nunc sed id semper risus in. Nisi vitae suscipit tellus mauris. Est velit egestas dui id ornare arcu odio ut. Cras sed felis eget velit aliquet sagittis id consectetur purus. Quam adipiscing vitae proin sagittis nisl rhoncus. Sit amet dictum sit amet justo donec. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Eros in cursus turpis massa tincidunt dui ut. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Mauris cursus mattis molestie a. Lectus urna duis convallis convallis. Semper eget duis at tellus at urna condimentum mattis. Sagittis eu volutpat odio facilisis mauris sit. Amet consectetur adipiscing elit pellentesque habitant morbi. Tristique senectus et netus et malesuada fames ac turpis egestas.<br><br>
  157.  
  158. Consectetur a erat nam at lectus. Nulla posuere sollicitudin aliquam ultrices. Eu feugiat pretium nibh ipsum consequat. Nisl pretium fusce id velit ut tortor. Varius duis at consectetur lorem donec massa sapien faucibus. Tristique magna sit amet purus gravida quis blandit turpis. Elementum tempus egestas sed sed risus. Urna nunc id cursus metus aliquam. Auctor eu augue ut lectus arcu bibendum at varius vel. Justo donec enim diam vulputate ut pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Tortor posuere ac ut consequat semper viverra nam libero. Habitasse platea dictumst quisque sagittis purus sit amet. Eget dolor morbi non arcu risus quis varius quam. Egestas congue quisque egestas diam in. Proin sed libero enim sed faucibus turpis in.<br><br>
  159.  
  160. Ornare arcu odio ut sem nulla pharetra. At elementum eu facilisis sed odio morbi quis. Ultrices tincidunt arcu non sodales. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Integer eget aliquet nibh praesent tristique magna. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Quis eleifend quam adipiscing vitae proin sagittis. Sagittis id consectetur purus ut. Habitasse platea dictumst vestibulum rhoncus. Etiam tempor orci eu lobortis. Sem nulla pharetra diam sit. Leo urna molestie at elementum eu facilisis sed odio. Cras adipiscing enim eu turpis egestas pretium aenean. Nunc aliquet bibendum enim facilisis gravida neque convallis. Turpis egestas sed tempus urna. Tincidunt dui ut ornare lectus sit amet est placerat in. Purus gravida quis blandit turpis cursus in hac habitasse. Arcu vitae elementum curabitur vitae nunc. Integer vitae justo eget magna.
  161.            
  162.             </div>
  163.             </div>
  164.            
  165.             <div style="width:400px;height:110%;position:absolute; left:550px; top:-40px;transform:rotate(-5deg); z-index:3; overflow:hidden">
  166.             <div style="transform:rotate(5deg);">
  167.            
  168.     <!--- CHARACTER IMAGE --->      
  169.                 <img src="https://iv1.lisimg.com/image/16781651/740full-vanja-jagnic.jpg" style="width:100%;height:100%;margin-left:-30px;opacity:0.7"/>
  170.                
  171.             </div>
  172.             </div>
  173.          </div>
  174.    
  175.     <!---- CHAPTER TWO ---->
  176.    
  177.         <div class="content fade" id="page2" style="overflow:hidden;position:relative;z-index:4">
  178.           <div style="width:400px;height:110%;position:absolute; left:-30px; top:-40px;transform:rotate(5deg); z-index:3; overflow:hidden">
  179.             <div style="transform:rotate(-5deg);">
  180.            
  181.     <!--- CHARACTER IMAGE --->          
  182.                 <img src="https://i.pinimg.com/originals/1e/18/17/1e1817981ee90a416ce851add6cf7ed9.jpg" style="width:100%;height:100%;margin-left:30px;opacity:0.7"/>
  183.                
  184.             </div>
  185.             </div>
  186.            
  187.             <div style="width:435px;height:100%;position:relative;float:right; z-index:2;padding:25px;">
  188.             <div style="font-family:'Courgette';font-size:20px;">
  189.            
  190.             Chapter Two
  191.            
  192.             </div>
  193.            
  194.             <div style="overflow:auto;width:90%;height:80%;text-align:justify;padding:0px 10px;position:relative;top:20px">
  195.            
  196.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed velit dignissim sodales ut eu sem integer. Purus in mollis nunc sed id semper risus in. Nisi vitae suscipit tellus mauris. Est velit egestas dui id ornare arcu odio ut. Cras sed felis eget velit aliquet sagittis id consectetur purus. Quam adipiscing vitae proin sagittis nisl rhoncus. Sit amet dictum sit amet justo donec. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Eros in cursus turpis massa tincidunt dui ut. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Mauris cursus mattis molestie a. Lectus urna duis convallis convallis. Semper eget duis at tellus at urna condimentum mattis. Sagittis eu volutpat odio facilisis mauris sit. Amet consectetur adipiscing elit pellentesque habitant morbi. Tristique senectus et netus et malesuada fames ac turpis egestas.<br><br>
  197.  
  198. Consectetur a erat nam at lectus. Nulla posuere sollicitudin aliquam ultrices. Eu feugiat pretium nibh ipsum consequat. Nisl pretium fusce id velit ut tortor. Varius duis at consectetur lorem donec massa sapien faucibus. Tristique magna sit amet purus gravida quis blandit turpis. Elementum tempus egestas sed sed risus. Urna nunc id cursus metus aliquam. Auctor eu augue ut lectus arcu bibendum at varius vel. Justo donec enim diam vulputate ut pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Tortor posuere ac ut consequat semper viverra nam libero. Habitasse platea dictumst quisque sagittis purus sit amet. Eget dolor morbi non arcu risus quis varius quam. Egestas congue quisque egestas diam in. Proin sed libero enim sed faucibus turpis in.<br><br>
  199.  
  200. Ornare arcu odio ut sem nulla pharetra. At elementum eu facilisis sed odio morbi quis. Ultrices tincidunt arcu non sodales. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Integer eget aliquet nibh praesent tristique magna. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Quis eleifend quam adipiscing vitae proin sagittis. Sagittis id consectetur purus ut. Habitasse platea dictumst vestibulum rhoncus. Etiam tempor orci eu lobortis. Sem nulla pharetra diam sit. Leo urna molestie at elementum eu facilisis sed odio. Cras adipiscing enim eu turpis egestas pretium aenean. Nunc aliquet bibendum enim facilisis gravida neque convallis. Turpis egestas sed tempus urna. Tincidunt dui ut ornare lectus sit amet est placerat in. Purus gravida quis blandit turpis cursus in hac habitasse. Arcu vitae elementum curabitur vitae nunc. Integer vitae justo eget magna.
  201.             </div>
  202.         </div>    
  203.     </div>
  204.    
  205.     <!---- CHAPTER THREE ----> 
  206.        
  207.         <div class="content fade" id="page3" style="overflow:hidden;position:relative;z-index:4">
  208.             <div style="width:535px;height:100%;position:relative;float:left; z-index:2;padding:25px;">
  209.            
  210.             <div class="CHP">
  211.             Chapter Three
  212.             </div>
  213.            
  214.             <div style="overflow:auto;width:90%;height:80%;text-align:justify;padding:0px 10px;position:relative;top:20px">
  215.                
  216.             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed velit dignissim sodales ut eu sem integer. Purus in mollis nunc sed id semper risus in. Nisi vitae suscipit tellus mauris. Est velit egestas dui id ornare arcu odio ut. Cras sed felis eget velit aliquet sagittis id consectetur purus. Quam adipiscing vitae proin sagittis nisl rhoncus. Sit amet dictum sit amet justo donec. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Eros in cursus turpis massa tincidunt dui ut. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Mauris cursus mattis molestie a. Lectus urna duis convallis convallis. Semper eget duis at tellus at urna condimentum mattis. Sagittis eu volutpat odio facilisis mauris sit. Amet consectetur adipiscing elit pellentesque habitant morbi. Tristique senectus et netus et malesuada fames ac turpis egestas.<br><br>
  217.  
  218. Consectetur a erat nam at lectus. Nulla posuere sollicitudin aliquam ultrices. Eu feugiat pretium nibh ipsum consequat. Nisl pretium fusce id velit ut tortor. Varius duis at consectetur lorem donec massa sapien faucibus. Tristique magna sit amet purus gravida quis blandit turpis. Elementum tempus egestas sed sed risus. Urna nunc id cursus metus aliquam. Auctor eu augue ut lectus arcu bibendum at varius vel. Justo donec enim diam vulputate ut pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Tortor posuere ac ut consequat semper viverra nam libero. Habitasse platea dictumst quisque sagittis purus sit amet. Eget dolor morbi non arcu risus quis varius quam. Egestas congue quisque egestas diam in. Proin sed libero enim sed faucibus turpis in.<br><br>
  219.  
  220. Ornare arcu odio ut sem nulla pharetra. At elementum eu facilisis sed odio morbi quis. Ultrices tincidunt arcu non sodales. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Integer eget aliquet nibh praesent tristique magna. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Quis eleifend quam adipiscing vitae proin sagittis. Sagittis id consectetur purus ut. Habitasse platea dictumst vestibulum rhoncus. Etiam tempor orci eu lobortis. Sem nulla pharetra diam sit. Leo urna molestie at elementum eu facilisis sed odio. Cras adipiscing enim eu turpis egestas pretium aenean. Nunc aliquet bibendum enim facilisis gravida neque convallis. Turpis egestas sed tempus urna. Tincidunt dui ut ornare lectus sit amet est placerat in. Purus gravida quis blandit turpis cursus in hac habitasse. Arcu vitae elementum curabitur vitae nunc. Integer vitae justo eget magna.
  221.            
  222.             </div>
  223.             </div>
  224.            
  225.             <div style="width:400px;height:110%;position:absolute; left:550px; top:-40px;transform:rotate(-5deg); z-index:3; overflow:hidden">
  226.             <div style="transform:rotate(5deg);">
  227.            
  228.     <!--- CHARACTER IMAGE --->      
  229.                 <img src="http://modelsintro.com/gallery/loadimage.php?token=vanjajagnic%2BBriWtVbHDiI&width=362" style="width:100%;height:100%;margin-left:-30px;opacity:0.7"/>
  230.                
  231.             </div>
  232.             </div>
  233.          </div>
  234.    
  235.     <!---- CHAPTER FOUR ---->
  236.    
  237.         <div class="content fade" id="page4" style="overflow:hidden;position:relative;z-index:4">
  238.           <div style="width:400px;height:110%;position:absolute; left:-30px; top:-40px;transform:rotate(5deg); z-index:3; overflow:hidden">
  239.             <div style="transform:rotate(-5deg);">
  240.            
  241.     <!--- CHARACTER IMAGE --->          
  242.                 <img src="https://orig00.deviantart.net/1d01/f/2019/197/7/2/xxx_by_thefirebomb-ddbtgy3.png" style="width:100%;height:100%;margin-left:30px;opacity:0.7"/>
  243.                
  244.             </div>
  245.             </div>
  246.            
  247.             <div style="width:435px;height:100%;position:relative;float:right; z-index:2;padding:25px;">
  248.             <div style="font-family:'Courgette';font-size:20px;">
  249.            
  250.             Chapter Four
  251.            
  252.             </div>
  253.            
  254.             <div style="overflow:auto;width:90%;height:80%;text-align:justify;padding:0px 10px;position:relative;top:20px">
  255.            
  256.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed velit dignissim sodales ut eu sem integer. Purus in mollis nunc sed id semper risus in. Nisi vitae suscipit tellus mauris. Est velit egestas dui id ornare arcu odio ut. Cras sed felis eget velit aliquet sagittis id consectetur purus. Quam adipiscing vitae proin sagittis nisl rhoncus. Sit amet dictum sit amet justo donec. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Eros in cursus turpis massa tincidunt dui ut. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Mauris cursus mattis molestie a. Lectus urna duis convallis convallis. Semper eget duis at tellus at urna condimentum mattis. Sagittis eu volutpat odio facilisis mauris sit. Amet consectetur adipiscing elit pellentesque habitant morbi. Tristique senectus et netus et malesuada fames ac turpis egestas.<br><br>
  257.  
  258. Consectetur a erat nam at lectus. Nulla posuere sollicitudin aliquam ultrices. Eu feugiat pretium nibh ipsum consequat. Nisl pretium fusce id velit ut tortor. Varius duis at consectetur lorem donec massa sapien faucibus. Tristique magna sit amet purus gravida quis blandit turpis. Elementum tempus egestas sed sed risus. Urna nunc id cursus metus aliquam. Auctor eu augue ut lectus arcu bibendum at varius vel. Justo donec enim diam vulputate ut pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Tortor posuere ac ut consequat semper viverra nam libero. Habitasse platea dictumst quisque sagittis purus sit amet. Eget dolor morbi non arcu risus quis varius quam. Egestas congue quisque egestas diam in. Proin sed libero enim sed faucibus turpis in.<br><br>
  259.  
  260. Ornare arcu odio ut sem nulla pharetra. At elementum eu facilisis sed odio morbi quis. Ultrices tincidunt arcu non sodales. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Integer eget aliquet nibh praesent tristique magna. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Quis eleifend quam adipiscing vitae proin sagittis. Sagittis id consectetur purus ut. Habitasse platea dictumst vestibulum rhoncus. Etiam tempor orci eu lobortis. Sem nulla pharetra diam sit. Leo urna molestie at elementum eu facilisis sed odio. Cras adipiscing enim eu turpis egestas pretium aenean. Nunc aliquet bibendum enim facilisis gravida neque convallis. Turpis egestas sed tempus urna. Tincidunt dui ut ornare lectus sit amet est placerat in. Purus gravida quis blandit turpis cursus in hac habitasse. Arcu vitae elementum curabitur vitae nunc. Integer vitae justo eget magna.
  261.             </div>
  262.         </div>    
  263.     </div>
  264.    
  265.     <!---- CHAPTER FIVE ---->  
  266.        
  267.         <div class="content fade" id="page5" style="overflow:hidden;position:relative;z-index:4">
  268.             <div style="width:535px;height:100%;position:relative;float:left; z-index:2;padding:25px;">
  269.            
  270.             <div class="CHP">
  271.             Chapter Five
  272.             </div>
  273.            
  274.             <div style="overflow:auto;width:90%;height:80%;text-align:justify;padding:0px 10px;position:relative;top:20px">
  275.                
  276.             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed velit dignissim sodales ut eu sem integer. Purus in mollis nunc sed id semper risus in. Nisi vitae suscipit tellus mauris. Est velit egestas dui id ornare arcu odio ut. Cras sed felis eget velit aliquet sagittis id consectetur purus. Quam adipiscing vitae proin sagittis nisl rhoncus. Sit amet dictum sit amet justo donec. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Eros in cursus turpis massa tincidunt dui ut. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Mauris cursus mattis molestie a. Lectus urna duis convallis convallis. Semper eget duis at tellus at urna condimentum mattis. Sagittis eu volutpat odio facilisis mauris sit. Amet consectetur adipiscing elit pellentesque habitant morbi. Tristique senectus et netus et malesuada fames ac turpis egestas.<br><br>
  277.  
  278. Consectetur a erat nam at lectus. Nulla posuere sollicitudin aliquam ultrices. Eu feugiat pretium nibh ipsum consequat. Nisl pretium fusce id velit ut tortor. Varius duis at consectetur lorem donec massa sapien faucibus. Tristique magna sit amet purus gravida quis blandit turpis. Elementum tempus egestas sed sed risus. Urna nunc id cursus metus aliquam. Auctor eu augue ut lectus arcu bibendum at varius vel. Justo donec enim diam vulputate ut pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Tortor posuere ac ut consequat semper viverra nam libero. Habitasse platea dictumst quisque sagittis purus sit amet. Eget dolor morbi non arcu risus quis varius quam. Egestas congue quisque egestas diam in. Proin sed libero enim sed faucibus turpis in.<br><br>
  279.  
  280. Ornare arcu odio ut sem nulla pharetra. At elementum eu facilisis sed odio morbi quis. Ultrices tincidunt arcu non sodales. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Integer eget aliquet nibh praesent tristique magna. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Quis eleifend quam adipiscing vitae proin sagittis. Sagittis id consectetur purus ut. Habitasse platea dictumst vestibulum rhoncus. Etiam tempor orci eu lobortis. Sem nulla pharetra diam sit. Leo urna molestie at elementum eu facilisis sed odio. Cras adipiscing enim eu turpis egestas pretium aenean. Nunc aliquet bibendum enim facilisis gravida neque convallis. Turpis egestas sed tempus urna. Tincidunt dui ut ornare lectus sit amet est placerat in. Purus gravida quis blandit turpis cursus in hac habitasse. Arcu vitae elementum curabitur vitae nunc. Integer vitae justo eget magna.
  281.            
  282.             </div>
  283.             </div>
  284.            
  285.             <div style="width:400px;height:110%;position:absolute; left:550px; top:-40px;transform:rotate(-5deg); z-index:3; overflow:hidden">
  286.             <div style="transform:rotate(5deg);">
  287.            
  288.     <!--- CHARACTER IMAGE --->      
  289.                 <img src="https://i7.lisimg.com/16781677/176full.jpg" style="width:100%;height:100%;margin-left:-30px;opacity:0.7"/>
  290.                
  291.             </div>
  292.             </div>
  293.          </div>
  294.    
  295.     <!---- CHAPTER SIX ---->
  296.    
  297.         <div class="content fade" id="page6" style="overflow:hidden;position:relative;z-index:4">
  298.           <div style="width:400px;height:110%;position:absolute; left:-30px; top:-40px;transform:rotate(5deg); z-index:3; overflow:hidden">
  299.             <div style="transform:rotate(-5deg);">
  300.            
  301.     <!--- CHARACTER IMAGE --->          
  302.                 <img src="https://pbs.twimg.com/media/Dt6NtnJW4AAkDaL.jpg" style="width:100%;height:100%;margin-left:30px;opacity:0.7"/>
  303.                
  304.             </div>
  305.             </div>
  306.            
  307.             <div style="width:435px;height:100%;position:relative;float:right; z-index:2;padding:25px;">
  308.             <div style="font-family:'Courgette';font-size:20px;">
  309.            
  310.             Chapter Six
  311.            
  312.             </div>
  313.            
  314.             <div style="overflow:auto;width:90%;height:80%;text-align:justify;padding:0px 10px;position:relative;top:20px">
  315.            
  316.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed velit dignissim sodales ut eu sem integer. Purus in mollis nunc sed id semper risus in. Nisi vitae suscipit tellus mauris. Est velit egestas dui id ornare arcu odio ut. Cras sed felis eget velit aliquet sagittis id consectetur purus. Quam adipiscing vitae proin sagittis nisl rhoncus. Sit amet dictum sit amet justo donec. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Eros in cursus turpis massa tincidunt dui ut. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Mauris cursus mattis molestie a. Lectus urna duis convallis convallis. Semper eget duis at tellus at urna condimentum mattis. Sagittis eu volutpat odio facilisis mauris sit. Amet consectetur adipiscing elit pellentesque habitant morbi. Tristique senectus et netus et malesuada fames ac turpis egestas.<br><br>
  317.  
  318. Consectetur a erat nam at lectus. Nulla posuere sollicitudin aliquam ultrices. Eu feugiat pretium nibh ipsum consequat. Nisl pretium fusce id velit ut tortor. Varius duis at consectetur lorem donec massa sapien faucibus. Tristique magna sit amet purus gravida quis blandit turpis. Elementum tempus egestas sed sed risus. Urna nunc id cursus metus aliquam. Auctor eu augue ut lectus arcu bibendum at varius vel. Justo donec enim diam vulputate ut pharetra. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Tortor posuere ac ut consequat semper viverra nam libero. Habitasse platea dictumst quisque sagittis purus sit amet. Eget dolor morbi non arcu risus quis varius quam. Egestas congue quisque egestas diam in. Proin sed libero enim sed faucibus turpis in.<br><br>
  319.  
  320. Ornare arcu odio ut sem nulla pharetra. At elementum eu facilisis sed odio morbi quis. Ultrices tincidunt arcu non sodales. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Integer eget aliquet nibh praesent tristique magna. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Quis eleifend quam adipiscing vitae proin sagittis. Sagittis id consectetur purus ut. Habitasse platea dictumst vestibulum rhoncus. Etiam tempor orci eu lobortis. Sem nulla pharetra diam sit. Leo urna molestie at elementum eu facilisis sed odio. Cras adipiscing enim eu turpis egestas pretium aenean. Nunc aliquet bibendum enim facilisis gravida neque convallis. Turpis egestas sed tempus urna. Tincidunt dui ut ornare lectus sit amet est placerat in. Purus gravida quis blandit turpis cursus in hac habitasse. Arcu vitae elementum curabitur vitae nunc. Integer vitae justo eget magna.
  321.             </div>
  322.         </div>    
  323.     </div>
  324.    
  325.    
  326.     </div> <!-- END OF WHOLE BOX -->
  327.    
  328.     <footer style="background-color:transparent;color:rgb(70,70,70);padding:5px;font-size:13px;font-family:courier;margin:0px;margin-left:auto;margin-right:auto;width:85%">
  329.     &copy; Coding by <a class="credit" href="https://kawaii-lau.tumblr.com" style="text-decoration:none;">Kawaii-lau</a> @ https://kawaii-lau.tumblr.com
  330.     </footer>
  331.    
  332. </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!