API tools faq
paste
Miss_Dany

La vie en rose

Miss_Dany
May 12th, 2023 (edited)
996
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.50 KB | None | 0 0
raw download clone embed print report
  1. <!-- PLEASE, SEND THE CUSTOM CODE HERE:
  2.  
  3. https://forms.gle/MgAxav1MYMjpkYcQA      -->
  4.  
  5. <!DOCTYPE html>
  6. <html>
  7. <head><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="-1"><style type="text/css">:root {
  8.   --bg : #eee;
  9.   --orange :  #D7875F;
  10.   --rose : #FCACB4;
  11.   --police :  Amita;
  12. }
  13. .bg {
  14.   position: relative;
  15.   width: 98%;
  16.   margin: 20px auto;
  17.   padding: 10px;
  18.   box-sizing: border-box;
  19.   height: 600px;
  20.   background: var(--bg);
  21.   box-shadow: 0 0 5px var(--orange);;
  22. }
  23. .bg:before{
  24.   content: '';
  25.   position: absolute;
  26.   top: 0;
  27.   left: 0;
  28.   width: 100%;
  29.   height: 100%;
  30.   background: linear-gradient(to top, white, var(--rose));
  31.   clip-path: circle(25% at 10% 10%);
  32. }
  33. .bg:after {
  34.   content: '';
  35.   position: absolute;
  36.   top: 0;
  37.   left: 0;
  38.   width: 100%;
  39.   height: 100%;
  40.   background: linear-gradient(to bottom, white, var(--rose));
  41.   clip-path: circle(30% at 100% 85%);
  42. }
  43. .container {
  44.   width: 100%;
  45.   height: 100%;
  46.   position: relative;
  47.   display: flex;
  48.   z-index: 1;
  49. }
  50. nav {
  51.   width: 20%;
  52.   height: 100%;
  53.   display: flex;
  54.   flex-direction: column;
  55.   justify-content: center;
  56.   align-items: center;
  57.   gap: 10px;
  58. }
  59. .content {
  60.   width: 60%;
  61.   height: 100%;
  62.   overflow: hidden;
  63. }
  64. button {
  65.   width: 90%;
  66.   border-radius: 50px;
  67.   font-family: var(--police);
  68.   font-weight: 500;
  69.   font-size: 15px;
  70.   border: none;
  71.   background: linear-gradient(to bottom, #D9C9BF, white);
  72.   box-shadow: 1px 1px 5px #D9C9BF;
  73.   padding: 10px;
  74.  
  75. }
  76. .active, .btn:hover {
  77.   background: linear-gradient(to bottom, var(--rose), white);
  78.   box-shadow: 1px 1px 5px var(--rose);
  79. }
  80. section {
  81.   width: 100%;
  82.   height: 100%;
  83.   padding-top: 50px;
  84.   box-sizing: border-box;
  85. }
  86. .title {
  87.   width: 90%;
  88.   margin: auto;
  89.   display: flex;
  90.   justify-content: center;
  91.   align-items: center;
  92.   font: 20px var(--police);
  93.   color: #8B352C;
  94.   backdrop-filter: blur(5px);
  95.   background: rgba(255, 255, 255, 0.5);
  96.   border-radius: 50px;
  97.   padding: 10px;
  98.   box-sizing: border-box;
  99.   outline: var(--rose) dotted 5px;
  100. }
  101. article {
  102.   width: 100%;
  103.   border-radius: 10px;
  104.   outline: var(--rose) solid 1px;
  105.   outline-offset: -10px;
  106.   height: 400px;
  107.   padding: 20px;
  108.   box-sizing: border-box;
  109.   text-align: justify;
  110.   backdrop-filter: blur(5px);
  111.   background: rgba(255, 255, 255, 0.5);
  112.   margin: 50px 0 0 0;
  113. }
  114. .text {
  115.   width: 100%;
  116.   height: 100%;
  117.   padding: 0 10px 0 0;
  118.   box-sizing: border-box;
  119.   overflow: auto;
  120. }
  121. .text::-webkit-scrollbar {width: 7px;}  
  122. .text::-webkit-scrollbar-track {
  123.   background: rgba(255, 255, 255, 0.7);
  124.   border-radius: 10px;  }
  125. .text::-webkit-scrollbar-thumb {
  126.   background: var(--rose);
  127.   border-radius: 10px;
  128. }
  129.  .credits {text-decoration: none;
  130.             font-family: 'courier new';
  131.             font-size: 15px;
  132.             color: #000;
  133.             letter-spacing: 0.3em;
  134.             font-weight: 900;}
  135.  
  136.  
  137.  
  138.  
  139. </style>
  140.  
  141.  
  142. <title>La vie en rose</title>
  143.   <link href="https://fonts.googleapis.com/css?family=Amita" rel="stylesheet">
  144. </head>
  145. <body>
  146.   <div class="bg">
  147.     <div class="container">
  148.      
  149.       <!--MENU G-->
  150.       <nav id="menu">
  151.         <button class="btn active" onclick="show('Page1');">Chap. n°1</button>
  152.           <button class="btn" onclick="show('Page2');">Chap. n°2</button>
  153.           <button class="btn" onclick="show('Page3');">Chap. n°3</button>
  154.       </nav>
  155.      
  156.       <!--CONTENU-->
  157.       <div class="content">
  158.         <section class="page" id="Page1">
  159.           <div class="title">~ Titre du premier chapitre ~</div>
  160.           <article>
  161.             <div class="text">
  162.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  163.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  164.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  165.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  166.             </div>
  167.            
  168.          
  169.           </article>
  170.         </section>
  171.        
  172.        
  173.        
  174.         <section class="page" id="Page2">
  175.           <div class="title">~ Titre du second chapitre ~</div>
  176.           <article>
  177.             <div class="text">
  178.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  179.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  180.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  181.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  182.             </div>
  183.            
  184.           </article>
  185.         </section>
  186.        
  187.        
  188.        
  189.         <section class="page" id="Page3">
  190.           <div class="title">~ Titre du troisième chapitre ~</div>
  191.           <article>
  192.             <div class="text">
  193.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  194.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  195.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  196.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  197.             </div>
  198.            
  199.          
  200.           </article>
  201.         </section>
  202.        
  203.        
  204.        
  205.        
  206.         <section class="page" id="Page4">
  207.           <div class="title">~ Titre du quatrième chapitre ~</div>
  208.           <article>
  209.             <div class="text">
  210.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  211.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  212.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  213.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  214.             </div>
  215.            
  216.          
  217.           </article>
  218.         </section>
  219.        
  220.        
  221.        
  222.         <section class="page" id="Page5">
  223.           <div class="title">~ Titre du cinquième chapitre ~</div>
  224.           <article>
  225.             <div class="text">
  226.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  227.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  228.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  229.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  230.             </div>
  231.            
  232.          
  233.           </article>
  234.         </section>
  235.        
  236.        
  237.        
  238.         <section class="page" id="Page6">
  239.           <div class="title">~ Titre du sixième chapitre ~</div>
  240.           <article>
  241.             <div class="text">
  242.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  243.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  244.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  245.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium fusce id velit ut. Facilisi nullam vehicula ipsum a arcu cursus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.<br><br>
  246.             </div>
  247.            
  248.          
  249.           </article>
  250.         </section>
  251.       </div>
  252.      
  253.       <!--MENU D-->
  254.       <nav id="menu2">
  255.         <button class="btn" onclick="show('Page4');">Chap. n°4</button>
  256.           <button class="btn" onclick="show('Page5');">Chap. n°5</button>
  257.           <button class="btn" onclick="show('Page6');">Chap. n°6</button>
  258.       </nav>
  259.     </div>
  260.   </div>
  261.   <!--DO NOT REMOVE THE CREDIT OR I EAT YOU -->
  262.  
  263.     <center><a href="https://missy-dany.tumblr.com/" target="_blank" class="credits">*--Miss Dany--*</a></center>
  264.  
  265. <script>var header = document.getElementById("menu");
  266. var btns = header.getElementsByClassName("btn");
  267. for (var i = 0; i < btns.length; i++) {
  268.  btns[i].addEventListener("click", function() {
  269.  var current = document.getElementsByClassName("active");
  270.  current[0].className = current[0].className.replace(" active", "");
  271.  this.className += " active";
  272.  });}
  273. var header = document.getElementById("menu2");
  274. var btns = header.getElementsByClassName("btn");
  275. for (var i = 0; i < btns.length; i++) {
  276.  btns[i].addEventListener("click", function() {
  277.  var current = document.getElementsByClassName("active");
  278.  current[0].className = current[0].className.replace(" active", "");
  279.  this.className += " active";
  280.  });}
  281.  
  282. function show(elementID) {
  283.  
  284.            var ele = document.getElementById(elementID);
  285.            if (!ele) {alert("This page do not exist");
  286.            return;}
  287.            var pages = document.getElementsByClassName('page');
  288.            for(var i = 0; i < pages.length; i++) {pages[i].style.display = 'none';}
  289.                ele.style.display = 'block';
  290.        }
  291.  
  292. </script></body>
Advertisement
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!