API tools faq
paste
Advertisement
Kawaii-Lau

RoseCHappiness

Kawaii-Lau
Dec 25th, 2019
606
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.70 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.  
  3.     <!-- Custom Fonts -->
  4.     <link href="https://fonts.googleapis.com/css?family=Lora|Gochi Hand|Kalam" rel="stylesheet" />
  5.  
  6.     <style>
  7. /*
  8.  
  9. Hello!
  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!
  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.  
  22. xoxo, Kawaii-lau
  23.  
  24. */
  25.         .main-box {
  26.             border: 9px double transparent;
  27.             background: #C0A3A5;
  28.             font-family: Lora;
  29.             font-size: 14px
  30.         }
  31.  
  32.         .bookTitle {
  33.             font-family: 'Kalam';
  34.             font-size: 32px;
  35.             margin: -20px;
  36.             color: #FAD0DC
  37.         }
  38.  
  39.         .ft-nav {
  40.             width: 100%;
  41.             border: 2px solid #FAD0DC;
  42.             background-color: #FAD0DC;
  43.         }
  44.  
  45.         .ftbtn {
  46.             border-radius: 100px;
  47.             background-color: #FAD0DC;
  48.             width: 50px;
  49.             height: 50px;
  50.             border: none;
  51.             outline: none;
  52.             cursor: pointer;
  53.             margin-right: 20px;
  54.             padding: 10px;
  55.             overflow: hidden;
  56.             transition: 0.5s ease;
  57.             white-space: nowrap;
  58.             font-family: 'Gochi Hand';
  59.             font-size: 26px;
  60.             color: #504863
  61.         }
  62.  
  63.         .ftbtn>img {
  64.             margin: -5px 5px 0px 0px
  65.         }
  66.  
  67.         .ftbtn:hover {
  68.             background-color: #F9C5C8;
  69.             transition: 0.5s ease;
  70.             width: 180px
  71.         }
  72.  
  73.         .pageheader {
  74.             background-color: #E0DA79;
  75.             color: white;
  76.             position: sticky;
  77.             top: 0px;
  78.         }
  79.  
  80.         .pageheader>h1 {
  81.             font-family: 'Gochi Hand';
  82.             color: rgb(100, 100, 100);
  83.             margin: -10px 0px 0px 0px;
  84.             letter-spacing: 2px;
  85.         }
  86.  
  87.         .single-col {
  88.             width: 100%;
  89.             height: 600px;
  90.             background-color: #FCFBEB;
  91.             color: rgb(100, 100, 100);
  92.             overflow: auto
  93.         }
  94.  
  95.         .col1,
  96.         .col2 {
  97.             width: 49%;
  98.             margin-bottom: 5px;
  99.             background-color: #FCFBEB;
  100.             color: rgb(100, 100, 100)
  101.         }
  102.  
  103.  
  104.  
  105.         .footer {
  106.             color: rgb(255, 255, 255);
  107.             font-style: italic;
  108.             font-size: 12px;
  109.             letter-spacing: 0.5px;
  110.             padding-left: 5px;
  111.             border-left: 2px solid #DCCDFF;
  112.             /* Disable background-color */
  113.  
  114.         }
  115.  
  116.         .credits {
  117.             color: #583F8F;
  118.             text-decoration: none;
  119.             font-weight: bold;
  120.             transition: 0.4s ease
  121.         }
  122.  
  123.         .credits:hover {
  124.             color: #188EE4
  125.         }
  126.  
  127.         ::selection {
  128.             background-color: #EFEEE0
  129.         }
  130.  
  131.         /* Selection */
  132.  
  133.         ::-webkit-scrollbar {
  134.             width: 10px;
  135.             height: 6px;
  136.             background-color: #FCFBEB
  137.         }
  138.  
  139.         ::-webkit-scrollbar-thumb {
  140.             background-color: #E0DA79
  141.         }
  142.  
  143.         /* Scrollbar CSS */
  144.  
  145.  
  146.         /* DONT TOUCH BEYOND THIS LINE */
  147.  
  148.         .fade {
  149.             -webkit-animation-name: fade;
  150.             -webkit-animation-duration: 1.5s;
  151.             animation-name: fade;
  152.             animation-duration: 1.5s;
  153.         }
  154.  
  155.         @-webkit-keyframes fade {
  156.             from {
  157.                 opacity: .4
  158.             }
  159.  
  160.             to {
  161.                 opacity: 1
  162.             }
  163.         }
  164.  
  165.         @keyframes fade {
  166.             from {
  167.                 opacity: .4
  168.             }
  169.  
  170.             to {
  171.                 opacity: 1
  172.             }
  173.         }
  174.  
  175.  
  176.         .content {
  177.             display: none
  178.         }
  179.  
  180.         .text>img {
  181.             margin-left: auto;
  182.             margin-right: auto;
  183.             display: block
  184.         }
  185.  
  186.         @media screen and (max-width: 700px) {
  187.             .ft-nav {
  188.                 width: 200%
  189.             }
  190.  
  191.             .col1,
  192.             .col2 {
  193.                 width: 100%;
  194.             }
  195.  
  196.             .bookTitle {
  197.                 font-size: 24px
  198.             }
  199.         }
  200.     </style>
  201.     <script>
  202.         function openInfo(evt, page) {
  203.             var i, tabcontent, tablinks;
  204.             tabcontent = document.getElementsByClassName("content");
  205.             for (i = 0; i < tabcontent.length; i++) {
  206.                tabcontent[i].style.display = "none";
  207.            }
  208.            tablinks = document.getElementsByClassName("tablinks");
  209.            for (i = 0; i < tablinks.length; i++) {
  210.                tablinks[i].className = tablinks[i].className.replace(" active", "");
  211.            }
  212.            document.getElementById(page).style.display = "block";
  213.            evt.currentTarget.className += " active";
  214.        } {}
  215.    </script>
  216. </head>
  217.  
  218. <body>
  219.  
  220.     <div style="max-width:800px;margin-right:auto;margin-left:auto;padding:10px;overflow:hidden;background-clip:padding-box;" class="main-box">
  221.  
  222.         <center class="bookTitle">
  223.             <h1>Rose-colored Happiness</h1>
  224.         </center>
  225.  
  226.         <div style="height:60px;padding-top:5px;overflow:auto;width:110%">
  227.             <div style="position:relative;height:10px;margin:15px 0px 30px -10px;" class="ft-nav">
  228.                 <div style="width:100%;height:50px;display:flex;flex-direction:row;margin-top:-20px;">
  229.  
  230.                     <!--- NAVIGATION BUTTONS --->
  231.  
  232.                     <button style="margin-left:50px;" class="ftbtn" onclick="openInfo(event, 'page-one')">
  233.  
  234.                         <!-- Replace Image Icon, does not work for large images -->
  235.  
  236.                         <img src="https://image.flaticon.com/icons/png/512/774/774920.png" style="width:40px;height:40px;float:left;margin-left:-5px;" />Intro
  237.                     </button>
  238.  
  239.                     <button class="ftbtn" onclick="openInfo(event, 'page-two')">
  240.  
  241.  
  242.                         <img src="https://image.flaticon.com/icons/png/512/774/774920.png" style="width:40px;height:40px;float:left;margin-left:-5px;" />
  243.                               General
  244.                     </button>
  245.  
  246.                     <button class="ftbtn" onclick="openInfo(event, 'page-three')">
  247.                         <img src="https://image.flaticon.com/icons/png/512/774/774920.png" style="width:40px;height:40px;float:left;margin-left:-5px;" />3
  248.                     </button>
  249.                     <button class="ftbtn" style="font-size:22px" onclick="openInfo(event, 'page-four')">
  250.                         <img src="https://image.flaticon.com/icons/png/512/774/774920.png" style="width:40px;height:40px;float:left;margin-left:-5px;" />4
  251.                     </button>
  252.  
  253.                     <button class="ftbtn" onclick="openInfo(event, 'page-five')">
  254.                         <img src="https://image.flaticon.com/icons/png/512/774/774920.png" style="width:40px;height:40px;float:left;margin-left:-5px;" />5
  255.                     </button>
  256.  
  257.                     <button class="ftbtn" onclick="openInfo(event, 'page-six')">
  258.                         <img src="https://image.flaticon.com/icons/png/512/774/774920.png" style="width:40px;height:40px;float:left;margin-left:-5px;" />6
  259.  
  260.                     </button>
  261.  
  262.                     <button class="ftbtn" onclick="openInfo(event, 'page-seven')">
  263.                         <img src="https://image.flaticon.com/icons/png/512/774/774920.png" style="width:40px;height:40px;float:left;margin-left:-5px;" />7
  264.                     </button>
  265.  
  266.                     <button class="ftbtn" onclick="openInfo(event, 'page-eight')">
  267.                         <img src="https://image.flaticon.com/icons/png/512/774/774920.png" style="width:40px;height:40px;float:left;margin-left:-5px;" />Conclusion
  268.  
  269.                     </button>
  270.                 </div>
  271.             </div>
  272.         </div>
  273.  
  274.         <!------    PAGE ONE     ------>
  275.         <!--- Page Header --->
  276.         <div class="content fade" id="page-one" style="display:block">
  277.             <div class="single-col">
  278.  
  279.  
  280.  
  281.                 <div style="height:45px;text-align:center;" class="pageheader"><br>
  282.                     <h1>Page One</h1>
  283.                 </div>
  284.                 <!--- Page Content --->
  285.                 <div style="padding:15px">
  286.                     <center>
  287.  
  288.                         <img src="https://i.pinimg.com/564x/55/4a/1a/554a1ae01eeaa6e562da5f990f875a27.jpg" style="width:300px" />
  289.                         <h2><b>Maknae Im Yeojin (임여진)</b></h2>
  290.                     </center>
  291.                 </div>
  292.             </div>
  293.         </div>
  294.  
  295.         <!------    PAGE TWO     ------>
  296.  
  297.         <div class="content fade" id="page-two">
  298.             <div style="position:relative;float:left;height:600px;overflow:auto;margin-right:10px;text-align:justify" class="col1">
  299.                 <div style="height:45px;text-align:center;" class="pageheader"><br>
  300.                     <h1>Page Two</h1>
  301.                 </div>
  302.                 <div style="padding:10px" class="text">
  303.                     <!--- CONTENT HERE  --->
  304.                     <img src="https://i.pinimg.com/564x/83/7a/8f/837a8f4e26f9600ef2f7d4a6bcbe32f5.jpg" style="width:300px" /><br><br>
  305.  
  306.                     Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet.<br><br>
  307.  
  308.                     Pretium lectus quam id leo. Sit amet nisl purus in mollis nunc sed id. Praesent elementum facilisis leo vel fringilla est ullamcorper. Accumsan tortor posuere ac ut. Vestibulum lectus mauris ultrices eros in cursus turpis. Vestibulum morbi blandit cursus risus. Fusce id velit ut tortor pretium viverra. Vitae suscipit tellus mauris a diam maecenas. Massa sed elementum tempus egestas. Sit amet tellus cras adipiscing enim. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Quis lectus nulla at volutpat. Urna duis convallis convallis tellus id interdum. Nullam vehicula ipsum a arcu. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo quis imperdiet massa tincidunt.
  309.  
  310.  
  311.  
  312.                 </div>
  313.             </div>
  314.  
  315.             <div style="position:relative;float:left;height:600px;text-align:justify;overflow:auto" class="col2">
  316.                 <div style="padding:10px" class="text">
  317.                     <!--- CONTENT HERE  --->
  318.  
  319.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  320.  
  321.                     Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet.<br><br>
  322.  
  323.                     Pretium lectus quam id leo. Sit amet nisl purus in mollis nunc sed id. Praesent elementum facilisis leo vel fringilla est ullamcorper. Accumsan tortor posuere ac ut. Vestibulum lectus mauris ultrices eros in cursus turpis. Vestibulum morbi blandit cursus risus. Fusce id velit ut tortor pretium viverra. Vitae suscipit tellus mauris a diam maecenas. Massa sed elementum tempus egestas. Sit amet tellus cras adipiscing enim. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Quis lectus nulla at volutpat. Urna duis convallis convallis tellus id interdum. Nullam vehicula ipsum a arcu. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo quis imperdiet massa tincidunt.
  324.  
  325.  
  326.                 </div>
  327.             </div>
  328.         </div>
  329.  
  330.         <!------    PAGE THREE   ------>
  331.  
  332.         <div class="content fade" id="page-three">
  333.             <div style="position:relative;float:left;height:600px;overflow:auto;margin-right:10px;text-align:justify" class="col1">
  334.                 <div style="height:45px;text-align:center;" class="pageheader"><br>
  335.                     <h1>Page Three</h1>
  336.                 </div>
  337.                 <div style="padding:10px" class="text">
  338.                     <!--- CONTENT HERE  --->
  339.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  340.  
  341.                     Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet.<br><br>
  342.  
  343.                     Pretium lectus quam id leo. Sit amet nisl purus in mollis nunc sed id. Praesent elementum facilisis leo vel fringilla est ullamcorper. Accumsan tortor posuere ac ut. Vestibulum lectus mauris ultrices eros in cursus turpis. Vestibulum morbi blandit cursus risus. Fusce id velit ut tortor pretium viverra. Vitae suscipit tellus mauris a diam maecenas. Massa sed elementum tempus egestas. Sit amet tellus cras adipiscing enim. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Quis lectus nulla at volutpat. Urna duis convallis convallis tellus id interdum. Nullam vehicula ipsum a arcu. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo quis imperdiet massa tincidunt.
  344.  
  345.  
  346.  
  347.                 </div>
  348.             </div>
  349.  
  350.             <div style="position:relative;float:left;height:600px;text-align:justify;overflow:auto" class="col2">
  351.                 <div style="padding:10px" class="text">
  352.                     <!--- CONTENT HERE  --->
  353.  
  354.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  355.  
  356.  
  357.                     <img src="https://i.pinimg.com/564x/80/63/5a/80635a1917db7698dce63f98b8859223.jpg" style="width:300px" />
  358.  
  359.                 </div>
  360.             </div>
  361.         </div>
  362.  
  363.         <!------    PAGE FOUR    ------>
  364.  
  365.         <div class="content fade" id="page-four">
  366.             <div style="position:relative;float:left;height:600px;overflow:auto;margin-right:10px;text-align:justify" class="col1">
  367.                 <div style="height:45px;text-align:center;" class="pageheader"><br>
  368.                     <h1>Page Four</h1>
  369.                 </div>
  370.                 <div style="padding:10px" class="text">
  371.                     <!--- CONTENT HERE  --->
  372.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  373.  
  374.                     Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet.<br><br>
  375.  
  376.                     Pretium lectus quam id leo. Sit amet nisl purus in mollis nunc sed id. Praesent elementum facilisis leo vel fringilla est ullamcorper. Accumsan tortor posuere ac ut. Vestibulum lectus mauris ultrices eros in cursus turpis. Vestibulum morbi blandit cursus risus. Fusce id velit ut tortor pretium viverra. Vitae suscipit tellus mauris a diam maecenas. Massa sed elementum tempus egestas. Sit amet tellus cras adipiscing enim. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Quis lectus nulla at volutpat. Urna duis convallis convallis tellus id interdum. Nullam vehicula ipsum a arcu. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo quis imperdiet massa tincidunt.
  377.  
  378.  
  379.  
  380.                 </div>
  381.             </div>
  382.  
  383.             <div style="position:relative;float:left;height:600px;text-align:justify;overflow:auto" class="col2">
  384.                 <div style="padding:10px" class="text">
  385.                     <!--- CONTENT HERE  --->
  386.  
  387.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  388.  
  389.  
  390.  
  391.  
  392.                 </div>
  393.             </div>
  394.         </div>
  395.  
  396.         <!------    PAGE FIVE    ------>
  397.  
  398.         <div class="content fade" id="page-five">
  399.             <div style="position:relative;float:left;height:600px;overflow:auto;margin-right:10px;text-align:justify" class="col1">
  400.                 <div style="height:45px;text-align:center;" class="pageheader"><br>
  401.                     <h1>Page Five</h1>
  402.                 </div>
  403.                 <div style="padding:10px" class="text">
  404.                     <!--- CONTENT HERE  --->
  405.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  406.  
  407.                     Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet.<br><br>
  408.  
  409.                     Pretium lectus quam id leo. Sit amet nisl purus in mollis nunc sed id. Praesent elementum facilisis leo vel fringilla est ullamcorper. Accumsan tortor posuere ac ut. Vestibulum lectus mauris ultrices eros in cursus turpis. Vestibulum morbi blandit cursus risus. Fusce id velit ut tortor pretium viverra. Vitae suscipit tellus mauris a diam maecenas. Massa sed elementum tempus egestas. Sit amet tellus cras adipiscing enim. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Quis lectus nulla at volutpat. Urna duis convallis convallis tellus id interdum. Nullam vehicula ipsum a arcu. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo quis imperdiet massa tincidunt.
  410.  
  411.  
  412.  
  413.                 </div>
  414.             </div>
  415.  
  416.             <div style="position:relative;float:left;height:600px;text-align:justify;overflow:auto" class="col2">
  417.                 <div style="padding:10px" class="text">
  418.                     <!--- CONTENT HERE  --->
  419.  
  420.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  421.  
  422.  
  423.  
  424.  
  425.                 </div>
  426.             </div>
  427.         </div>
  428.  
  429.         <!------    PAGE SIX     ------>
  430.  
  431.         <div class="content fade" id="page-six">
  432.             <div style="position:relative;float:left;height:600px;overflow:auto;margin-right:10px;text-align:justify" class="col1">
  433.                 <div style="height:45px;text-align:center;" class="pageheader"><br>
  434.                     <h1>Page SIX</h1>
  435.                 </div>
  436.                 <div style="padding:10px" class="text">
  437.                     <!--- CONTENT HERE  --->
  438.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  439.  
  440.                     Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet.<br><br>
  441.  
  442.                     Pretium lectus quam id leo. Sit amet nisl purus in mollis nunc sed id. Praesent elementum facilisis leo vel fringilla est ullamcorper. Accumsan tortor posuere ac ut. Vestibulum lectus mauris ultrices eros in cursus turpis. Vestibulum morbi blandit cursus risus. Fusce id velit ut tortor pretium viverra. Vitae suscipit tellus mauris a diam maecenas. Massa sed elementum tempus egestas. Sit amet tellus cras adipiscing enim. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Quis lectus nulla at volutpat. Urna duis convallis convallis tellus id interdum. Nullam vehicula ipsum a arcu. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo quis imperdiet massa tincidunt.
  443.  
  444.  
  445.  
  446.                 </div>
  447.             </div>
  448.  
  449.             <div style="position:relative;float:left;height:600px;text-align:justify;overflow:auto" class="col2">
  450.                 <div style="padding:10px" class="text">
  451.                     <!--- CONTENT HERE  --->
  452.  
  453.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  454.  
  455.  
  456.  
  457.  
  458.                 </div>
  459.             </div>
  460.         </div>
  461.  
  462.         <!------    PAGE SEVEN   ------>
  463.  
  464.         <div class="content fade" id="page-seven">
  465.             <div style="position:relative;float:left;height:600px;overflow:auto;margin-right:10px;text-align:justify" class="col1">
  466.                 <div style="height:45px;text-align:center;" class="pageheader"><br>
  467.                     <h1>Page SEVEN</h1>
  468.                 </div>
  469.                 <div style="padding:10px" class="text">
  470.                     <!--- CONTENT HERE  --->
  471.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  472.  
  473.                     Pellentesque id nibh tortor id aliquet lectus. Varius morbi enim nunc faucibus. Pretium nibh ipsum consequat nisl vel. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Suspendisse interdum consectetur libero id faucibus. Accumsan lacus vel facilisis volutpat est. Magna ac placerat vestibulum lectus mauris. Pulvinar etiam non quam lacus suspendisse. Curabitur vitae nunc sed velit dignissim. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Justo laoreet sit amet cursus sit amet.<br><br>
  474.  
  475.                     Pretium lectus quam id leo. Sit amet nisl purus in mollis nunc sed id. Praesent elementum facilisis leo vel fringilla est ullamcorper. Accumsan tortor posuere ac ut. Vestibulum lectus mauris ultrices eros in cursus turpis. Vestibulum morbi blandit cursus risus. Fusce id velit ut tortor pretium viverra. Vitae suscipit tellus mauris a diam maecenas. Massa sed elementum tempus egestas. Sit amet tellus cras adipiscing enim. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Quis lectus nulla at volutpat. Urna duis convallis convallis tellus id interdum. Nullam vehicula ipsum a arcu. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo quis imperdiet massa tincidunt.
  476.  
  477.  
  478.  
  479.                 </div>
  480.             </div>
  481.  
  482.             <div style="position:relative;float:left;height:600px;;text-align:justify;overflow:auto" class="col2">
  483.                 <div style="padding:10px" class="text">
  484.                     <!--- CONTENT HERE  --->
  485.  
  486.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  487.  
  488.  
  489.  
  490.  
  491.                 </div>
  492.             </div>
  493.         </div>
  494.  
  495.         <!----- PAGE EIGHT ----->
  496.         <div class="content fade" id="page-eight">
  497.             <div class="single-col">
  498.  
  499.                 <div style="height:45px;text-align:center;" class="pageheader"><br>
  500.                     <h1>Page Eight</h1>
  501.                 </div>
  502.                 <div style="padding:15px">
  503.                     <center>
  504.  
  505.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus eget nunc scelerisque viverra mauris in aliquam. Dictum non consectetur a erat. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Varius vel pharetra vel turpis nunc. Et tortor at risus viverra adipiscing at in.<br><br>
  506.  
  507.  
  508.                     </center>
  509.                 </div>
  510.             </div>
  511.         </div>
  512.  
  513.         <!--- FOOTER --->
  514.  
  515.         <div style="margin:15px 10px 10px 10px;float:left" class="footer">
  516.             Written by : <span style="color:#c06616 ;font-weight:bold">Author</span> &amp; <span style="color:#E2DA2D;font-weight:bold">Leader</span><br>
  517.             Coded by : <a href="kawaii-lau.tumblr.com/" class="credits">Kawaii-Lau</a><br>
  518.             Datum : DD.MM.YY<br>
  519.             Updated on : DD.MM.YY
  520.  
  521.         </div>
  522.  
  523.  
  524.     </div>
  525. </body>
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!