API tools faq
paste
Kawaii-Lau

Vivid ViVi [Book Code]

Kawaii-Lau
Jul 5th, 2020 (edited)
1,952
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.20 KB | None | 0 0
raw download clone embed print report
  1. <link href="https://fonts.googleapis.com/css2?family=Assistant&family=Playfair+Display+SC&display=swap" rel="stylesheet">
  2. <style>
  3.   /*  
  4.  
  5.     ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  6.      Thank you for using my code!
  7.     ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
  8. Rules to Follow:
  9.  
  10. ✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
  11. ✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
  12. ✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#6316). Major changes in code is not accepted.
  13. ✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!
  14.  
  15. If you like a custom code, check out my blog to see if commissions are open!
  16.  
  17. XOXO, Lauren.
  18.  
  19.       ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
  20.         2020 © Coding by Kawaii-Lau
  21.       ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝                            
  22. */
  23.  
  24.   /* ╓═══════☆═══════╖
  25.         CSS CHANGES
  26.      ╙═══════☆═══════╜ */
  27.     :root {
  28.        
  29.       /* COLORS */
  30.         --button:#C6C2C6; /* BUTTON */
  31.         --button-hover:#D689E0; /* BUTTON ON HOVER */
  32.         --cover:#EBD1EF; /* COVER COLOR */
  33.         --spine:#BE97C3; /* COVER SPINE (the two lines) */
  34.         --border-corner:#686868; /* BORDER CORNER COLOR  */
  35.        
  36.         --header-font:'Playfair Display SC', serif; /* H1, H2, H3; HEADER FONTS */
  37.         --main-font:'Assistant', sans-serif; /* MAIN TEXT FONT */
  38.         --header-font-size:32px; /* H1, H2, H3 FONT SIZE */
  39.         --main-font-size:12px; /* MAIN FONT SIZE */
  40.      
  41.      
  42. /*      ╓═══════☆═══════╖
  43.           CHANGE IMAGES
  44.         ╙═══════☆═══════╜  
  45.      NOTE: Must be .png  format. You can't change the color of the pages itself.
  46.       */      
  47.      
  48.         --button-image:  url(https://i.imgur.com/WXoMEK7.png); /* BUTTON IMAGE (400x760)*/
  49.         --spine-image:  url(https://i.imgur.com/k8FXK1N.png); /* SPINE IMAGE (300x2200)*/
  50.         --border-corner-img: url(https://i.imgur.com/i3nwM1v.png); /* BORDER CORNER IMAGE (400x400)*/
  51.     }
  52.  
  53.   .background {
  54.     padding:20px;width:880px;
  55.     margin:0px auto;
  56.   }
  57.  
  58.     h1,h2,h3 {
  59.         font-family: var(--header-font);
  60.         font-size:var(--header-font-size);
  61. }
  62.   p {
  63.         font-family: var(--main-font);
  64.         margin:5px 0px;
  65.     }
  66.  
  67.    
  68. </style>
  69. <script>
  70.     function openInfo(evt, contPage) {
  71.         var i, tabcontent, tablinks;
  72.         tabcontent = document.getElementsByClassName("content");
  73.         for (i = 0; i < tabcontent.length; i++) {
  74.            tabcontent[i].style.display = "none";
  75.        }
  76.        tablinks = document.getElementsByClassName("tablinks");
  77.        for (i = 0; i < tablinks.length; i++) {
  78.            tablinks[i].className = tablinks[i].className.replace(" active", "");
  79.        }
  80.        document.getElementById(contPage).style.display = "block";
  81.        evt.currentTarget.className += " active";
  82.    } {}
  83. </script>
  84. <body>
  85.     <div class="background">
  86.         <div class="main-box">
  87.             <div class="content" style="display:block" id="cover">
  88.                 <div class="row">
  89.                     <div class="cover-page">
  90.                         <div class="cover-border"></div>
  91.                         <div class="cover-border" style="transform:rotate(90deg);margin-top:457px"></div>
  92.                         <div class="cover-mask"></div>
  93.                         <div style="top:-630px;position:relative;">
  94.                          
  95.    <!-- ╓═══════☆═══════╖
  96.           COVER IMAGE
  97.        ╙═══════☆═══════╜
  98.    (Must be 500x800 or portrait) -->                  
  99.                             <center>
  100.                                 <img src="https://i.pinimg.com/originals/fc/c8/0d/fcc80de4b5ae5ce916c8fdaf26a3761a.jpg" style="width:500px;margin-left:10px" />
  101.                             </center> <!-- END OF COVER IMAGE -->
  102.                             <div class="cover-fade">
  103.                              
  104.    <!-- ╓═══════☆═══════╖
  105.           COVER TITLE
  106.        ╙═══════☆═══════╜ -->
  107.                               <div style="color:#666;text-align:center;padding:40px 40px 40px 55px;width:420px">
  108.                                   <h1 style="font-size:46px">Vivid ViVi</h1>
  109.                                  
  110.                                   <div style="margin-top:450px;">Lorem Ipsum Dolor ab imo pectore</div>
  111.                                  
  112.                                 </div> <!-- END OF COVER TITLE  -->
  113.                              
  114.                             </div>
  115.                         </div>
  116.                     </div>
  117.                     <button class="btn-mask" style="transform:rotate(180deg);margin-left:20px" onclick="openInfo(event, 'p1')"></button>
  118.                 </div>
  119.             </div> <!-- CONTENT END -->
  120.  
  121.          
  122. <!-- ╓═══════☆═══════╖
  123.          PAGE ONE
  124.     ╙═══════☆═══════╜ -->          
  125.  
  126.             <div class="content fade" id="p1">
  127.                 <div class="row">
  128.                     <button class="btn-mask" style="margin-right:20px" onclick="openInfo(event, 'cover')"></button>
  129.  
  130.                     <div class="row two-page">
  131.                         <div class="left-pg">
  132.                           <div style="height:inherit">
  133. <!-- ╓═══════☆═══════╖
  134.         LEFT PAGE
  135.     ╙═══════☆═══════╜ -->      
  136.                              <br><br><br>
  137.                             <center>
  138.                               <img src="https://data.whicdn.com/images/328796868/original.gif" style="width:80%"/><br><br>
  139.                               <b>Note: Make sure not to write too much in one page, or else the text will float off the pages ^-^ </b><br><br>
  140.                               <img src="https://i.pinimg.com/originals/22/4d/8c/224d8cce0d8afefbe634c685499b39d5.gif" style="width:80%"/><br><br>
  141.                             </center>
  142.                                
  143.                             </div>
  144.                         </div>
  145.                         <div class="right-pg">
  146.                           <div style="height:inherit">
  147. <!-- ╓═══════☆═══════╖
  148.        RIGHT PAGE
  149.     ╙═══════☆═══════╜ -->
  150.                            
  151.                             <p>Lorem impsum dolor varom, ab imo pectore. Potter. Walkers. Thrones. Olympians. Nephilim. Galaxies. Mystic Falls. Alagaesia. Supernaturals. Fairy Tales. Gladers United. Forgotten Dungeons. Legends. Meta Humans. Bending Arts. Jade Mountain. Unseen Arts. High Fae. Middle Earth. Mutants. Narnia Kingdom. Wild West. Eldritch County. Gladiators. Survival Tribes. Coding. HTML &amp; CSS. Gryffindor. Hufflepuff. Ravenclaw. Slytherin. WoX community. Site Bulletin Board. Coding Help. Academia de Villainary. Signature Factory. Discord. Fandoms. Books. Shows. Movies. Fan casts. Dream casts. Tessisamess. w3schools. liveweave. cssdesk. Minister of Magic. Headmaster. Head of House. The Management Team. Chief Editor. Professors/Teachers. Prefects. Journalists. Assistant Teachers. Plot Team. Social-Media Team. Librarian. Backstory Team. Artist. Party Team. Harry Potter. The Walking Dead. Game of Thrones. Percy Jackson and the Olympians. The Mortal Instruments. The Infernal Devices. The Shadowhunters. Star Wars. The Vampire Diaries. Eragon. Inheritance Cycle. Supernatural. Once Upon A Time. The Maze Runner. Dungeons and Dragons. Fantasy and Legends. DC universe. Avatar: the Last Airbender. Wings of Fire. The Chilling Adventures of Sabrina. Throne of Glass. A Court of Thorns and Roses. Lord of the Rights. X-Men. The Narnia Chronicles. Western world in 1700's. H.P Lovecraft. Rome and 300 BC. The 100. </p> <br><br>
  152.                             <center>
  153.                             <img src="https://66.media.tumblr.com/fc5221b8fb84ce48a9033a4694ee0cba/tumblr_opdxnkm3FY1w3x66ko1_400.gif" style="width:90%"/>
  154.                               <p><b>Same with images! Use width percentages to align them with the pages.</b></p>
  155.                             </center>
  156.                            
  157.                           </div>
  158.                         </div>
  159.                     </div> <!-- PAGES END-->
  160.                     <button class="btn-mask" style="transform:rotate(180deg);margin-left:20px" onclick="openInfo(event, 'p2')"></button>
  161.                 </div>
  162.             </div> <!-- CONTENT END-->
  163.          
  164. <!--
  165.  ───── ⋆⋅☆⋅⋆ ─────
  166.  **NOTE: To add more pages, copy from here... (1/2)
  167.  ───── ⋆⋅☆⋅⋆ ───── -->            
  168.          
  169. <!-- ╓═══════☆═══════╖
  170.          PAGE TWO
  171.     ╙═══════☆═══════╜ -->          
  172.  
  173.             <div class="content fade" id="p2">
  174.                 <div class="row">
  175.                     <button class="btn-mask" style="margin-right:20px" onclick="openInfo(event, 'p1')"></button>
  176.  
  177.                     <div class="row two-page">
  178.                         <div class="left-pg">
  179.                           <div style="height:inherit">
  180. <!-- ╓═══════☆═══════╖
  181.         LEFT PAGE
  182.     ╙═══════☆═══════╜ -->      
  183.                                 <br><br><br><br>
  184.                                 <center><img src="https://i.pinimg.com/originals/29/e4/3a/29e43a2ec64feb28d2d86ad0671b0eae.gif" style="width:96%" />
  185.                                 </center>
  186.                             </div>
  187.                         </div>
  188.                         <div class="right-pg">
  189.                           <div style="height:inherit">
  190. <!-- ╓═══════☆═══════╖
  191.        RIGHT PAGE
  192.     ╙═══════☆═══════╜ -->
  193.                             <center style="padding:0px 30px">
  194.                                 <br><br>
  195.                                 <h2>Introduction</h2>
  196.                                 <p>너무나도 멋진 너 아무렇지 않은 척
  197. 나 조금씩 너의 옆에
  198. 너무나도 떨린 걸 너무나도 좋은데
  199. 나 이젠 널 안아볼래
  200.  
  201. 너무나도 멋진 너 아무렇지 않은 척
  202. 나 조금씩 너의 옆에
  203. 너무나도 떨린 걸 너무나도 좋은데
  204. 나 이젠 널 안아볼래
  205.  
  206. I love you I need you
  207. 이대로 영원히 너의 품에
  208. I love you I need you
  209. 이렇게 너에게 반한거야
  210.  
  211. 날 좋아했으면 날 사랑했으면
  212. 널 보고 싶어서 또 볼 수 있도록
  213. 바보처럼 니 생각에
  214. 또 하루가 지나가
  215.  
  216. 날 좋아했으면 날 사랑했으면
  217. 널 보고 싶어서 또 볼 수 있도록
  218. 바보처럼
  219. 또 하루가 지나가
  220.  
  221. 아무 말도 못한 나 아무렇지 않은 척
  222. 널 보며 난 웃는 거야
  223. 이런 내 맘 모를까 이런 내 맘 모르니
  224. 왜 이제 날 안아 줄래
  225.  
  226. I love you I need you
  227. 조금씩 너에게 빠져들어
  228. I love you I need you
  229. 내게도 사랑이 시작된 걸
  230.  
  231. 날 좋아했으면 날 사랑했으면
  232. 널 보고 싶어서 또 볼 수 있도록
  233. 바보처럼 니 생각에
  234. 또 하루가 지나가
  235.  
  236. Ah choo 난 너무나 행복해
  237. Want you 난 너밖에 또 몰라
  238. It's you 넌 너무도 완벽해
  239. 이렇게 내 맘은 영원히 너만 바라봐
  240. 누가 봐도 너무나도 너무 부러울 걸
  241. 우리 사랑 무엇보다 소중할 걸
  242. I want you to want me
  243. 조금씩 우리 사랑 조용히 더 시작될 걸 uh
  244.  
  245. 몰래 다가가 입 맞춰 볼까
  246. 니 손 꼭 잡고 나말해볼까
  247. 니가 좋다고 니가 좋아서
  248. 난 너랑 같이 있고 싶어
  249.  
  250. 날 좋아했으면 날 사랑했으면
  251. 널 보고 싶어서 또 볼 수 있도록
  252. 바보처럼 니 생각에
  253. 또 하루가 지나가
  254.  
  255. 날 좋아했으면 날 사랑했으면
  256. 널 보고 싶어서 또 볼 수 있도록
  257. 바보처럼  
  258. 또 하루가 지나가
  259.                                 </p>
  260.                             </center>
  261.                           </div>
  262.                         </div>
  263.                     </div> <!-- PAGES END-->
  264.                     <button class="btn-mask" style="transform:rotate(180deg);margin-left:20px" onclick="openInfo(event, 'p3')"></button>
  265.                 </div>
  266.             </div> <!-- CONTENT END-->
  267. <!--
  268.  ───── ⋆⋅☆⋅⋆ ─────
  269.  ...Until here** (2/2)
  270.  ───── ⋆⋅☆⋅⋆ ───── -->    
  271.        
  272.  
  273. <!-- PASTE IT BELOW THIS MESSAGE.
  274.  
  275.  See this coding when you paste it?
  276. ```      ───── ⋆⋅☆⋅⋆ ─────
  277. <div class="content fade" id="p2">
  278.                <div class="row">
  279.                    <button class="btn-mask" style="margin-right:20px" onclick="openInfo(event, 'p1')"></button>
  280.          ───── ⋆⋅☆⋅⋆ ─────
  281. ```
  282.  
  283.  TO BE ABLE TO SWITCH PAGES, CHANGE `id="p2"` into `id="p#"` with " # " being the number AFTER the your PREVIOUS page number (ex. "p3" for p2).
  284.  
  285.  IN `<button class="btn-mask" style="margin-right:20px" onclick="openInfo(event, 'p1')"></button>`
  286.  
  287.  CHANGE `openInfo(event, 'p1')"` INTO `onclick="openInfo(event, 'p#')" with " # " being the number BEFORE your CURRENT page number. (ex. "p2" for p3)
  288.  
  289.  AT THE OTHER BUTTON:
  290. ```        ───── ⋆⋅☆⋅⋆ ─────
  291.  <button class="btn-mask" style="transform:rotate(180deg);margin-left:20px" onclick="openInfo(event, 'p3')"></button>
  292. ``         ───── ⋆⋅☆⋅⋆ ─────
  293.  
  294.  CHANGE `id="p3"` into `id="p#"` with " # " = the number AFTER the current page number (ex. "p4" for p3).
  295.  
  296. -->              
  297.          
  298.          
  299. <!-- PASTE over here! -->  
  300.          
  301.          
  302.          
  303.          
  304. <!-- ╓═══════☆═══════╖
  305.         PAGE THREE
  306.     ╙═══════☆═══════╜ -->          
  307.  
  308.             <div class="content fade" id="p3">
  309.                 <div class="row">
  310.                  
  311. <!-- REMEMBER TO CHANGE THE BUTTON ID TO THE PREVIOUS PAFE YOU HAVE ADDED. -->                    
  312.                     <button class="btn-mask" style="margin-right:20px" onclick="openInfo(event, 'p2')"></button>
  313.  
  314.                     <div class="row two-page">
  315.                         <div class="left-pg">
  316.                           <div style="height:inherit">
  317. <!-- ╓═══════☆═══════╖
  318.         LEFT PAGE
  319.     ╙═══════☆═══════╜ --> <br><br>
  320.                             <br><br><br><br>
  321.                            
  322.                             <center>
  323.                               <h1>Chapter One</h1>
  324.                               <img src="https://media1.tenor.com/images/ad4cff3a9e5d9f52c1045952c38b0eb3/tenor.gif?itemid=17025593" style="width:90%"/>
  325.                               <!-- TEXT DIVIDER -->
  326.                               <div style="-webkit-mask-image:url(https://i.imgur.com/xELIOXl.png); -webkit-mask-size:100% 100%; width:50%; height:30px; margin:0px auto; background:#F0C3F0; "></div>
  327.                               <p>Free image divider above!
  328.     <!-- TO CHANGE COLOR, find a HEX Value of the color for "background" property. Don't try to change anything else except for the height and width. -->
  329.                               </p>
  330.                             </center>
  331.                                
  332.                             </div>
  333.                         </div>
  334.                         <div class="right-pg">
  335.                           <div style="height:inherit">
  336. <!-- ╓═══════☆═══════╖
  337.        RIGHT PAGE
  338.     ╙═══════☆═══════╜ -->
  339.                            
  340.                             <br><br><br><br><br><br><br><br><br><br><br><br>
  341.                            
  342.                            <!--  QUOTE TEMPLATE  -->
  343.                             <div>
  344.                                 <h1 style="margin:0px 0px -50px 50px;position:relative;font-size:56px">❝</h1>
  345.                                 <center>
  346.                                     <h2 style="font-size:22px"> <i>I miss you,<br> I hope I can<br> see you again.</i> </h2>
  347.                                     <h1 style="margin:-30px 0px 0px 220px;position:relative;font-size:56px">❞</h1>
  348.                                 </center>
  349.                           </div><!--  END OF QUOTE TEMPLATE  -->
  350.                              
  351.                            
  352.                             </div>
  353.                         </div>
  354.                     </div> <!-- PAGES END-->
  355.                     <button class="btn-mask" style="transform:rotate(180deg);margin-left:20px" onclick="openInfo(event, 'cover-end')"></button>
  356.                 </div>
  357.             </div> <!-- CONTENT END-->              
  358.          
  359.             <div class="content" id="cover-end">
  360.                 <div class="row">
  361.                     <button class="btn-mask" style="margin-right:20px" onclick="openInfo(event, 'cover')"></button>
  362.  
  363.  
  364.                     <div class="cover-page" style="border-radius: 20px 0px 0px 20px;">
  365.                         <div class="cover-border" style="transform:rotate(270deg);margin-left:5px"></div>
  366.                         <div class="cover-border" style="transform:rotate(180deg);margin-top:454px;margin-left:5px"></div>
  367.                         <div class="cover-mask" style="transform:rotate(180deg);margin-left:450px"></div>
  368.                     </div>
  369.                 </div>
  370.             </div>
  371.         </div> <!-- MAINBOX END-->
  372.  
  373.      
  374. <!-- ╓═══════☆═══════╖
  375.  CREDITS: DO NOT REMOVE
  376.     ╙═══════☆═══════╜ -->      
  377.         <div class="credits" style="text-align:center;margin-left:-10%;margin-top:30px;font-family:serif">
  378.             2020 &copy; Coding by <a href="https://kawaii-lau.tumblr.com" target="_blank" style="color:#DC4BB2;text-decoration:none">Kawaii-Lau</a>
  379.         </div>
  380.     </div>
  381. </body>
  382.  
  383. <!-- ADVANCED CSS (uh... you don't need to change any of these unless you know what you are doing) -->
  384. <style>
  385.   .btn-mask {
  386.         -webkit-mask-image:var(--button-image);
  387.         -webkit-mask-size: 100% 100%;
  388.         cursor: pointer;
  389.         background: var(--button);
  390.         width: 50px;
  391.         height: 70px;
  392.         outline: none;
  393.         border: none;
  394.         transition: 0.5s ease;
  395.     }
  396.  
  397.     .btn-mask:hover {
  398.         background: var(--button-hover);
  399.     }
  400.  
  401.     .content {
  402.         display: none;
  403.         font-size:var(--main-font-size);
  404.     }
  405.  
  406.     .cover-page {
  407.         background-size: 100% 100%;
  408.         border-radius: 0px 20px 20px 0px;
  409.         overflow: hidden;
  410.         background:var(--cover) center;
  411.         box-shadow:0px 0px 15px black;
  412.         width:500px;height:650px
  413.     }
  414.  
  415.     .cover-mask {
  416.         -webkit-mask-image:var(--spine-image);
  417.         -webkit-mask-size: 100% 100%;
  418.         background-size: 100% 100%;
  419.         background:var(--spine);
  420.         width: 50px;
  421.         height: 640px;
  422.         padding:5px 5px 5px 10px;
  423.         margin-left:-20px;
  424.         position:relative;
  425.         z-index:5;
  426.     }
  427.  
  428.     .cover-border {
  429.       -webkit-mask-image:url(https://i.imgur.com/ts5squR.png);
  430.         -webkit-mask-size:100% 100%;
  431.         background-size:100% 100%;
  432.         background:var(--spine);
  433.         position:absolute;z-index:6;
  434.         width:190px;height:190px;
  435.         margin:3px 0px 0px 307px;
  436.   }
  437.  
  438.     .cover-fade {
  439.       background-image:radial-gradient(transparent, transparent, var(--cover), var(--cover));
  440.       width:550px;height:680px;
  441.       margin-top:-800px;
  442.       position:absolute;
  443.       z-index:4;
  444.   }
  445.  
  446.     .left-pg {
  447.         width:calc(50% - 30px);
  448.         height: calc(100% - 30px);
  449.         margin-left: -21px;
  450.         margin-right: 5px;
  451.     }
  452.  
  453.     .left-pg::before {
  454.         content: '';
  455.         -webkit-mask-image: var(--border-corner-img);
  456.         -webkit-mask-size: 100% 100%;
  457.         background: var(--border-corner);
  458.         position: absolute;
  459.         width: 50px; height: 50px;
  460.         z-index: 3;
  461.     }
  462.  
  463.     .left-pg::after {
  464.         content: '';
  465.         -webkit-mask-image: var(--border-corner-img);
  466.         -webkit-mask-size: 100% 100%;
  467.         background: var(--border-corner);
  468.         width: 50px; height: 50px;
  469.         position: absolute;
  470.         margin-top: -15px;
  471.         transform: rotate(270deg);
  472.         z-index: 3;
  473.     }
  474.  
  475.     .right-pg {
  476.         width:calc(50% - 40px);
  477.         height: calc(100% - 30px);
  478.         margin-right: -20px;
  479.     }
  480.  
  481.     .right-pg::before {
  482.         content: '';
  483.         -webkit-mask-image: var(--border-corner-img);
  484.         -webkit-mask-size: 100% 100%;
  485.         background: var(--border-corner);
  486.         position: absolute;
  487.         width: 50px;
  488.         height: 50px;
  489.         margin-left: 295px;
  490.         transform: rotate(90deg);
  491.         z-index: 3
  492.     }
  493.  
  494.     .right-pg::after {
  495.         content: '';
  496.         -webkit-mask-image: var(--border-corner-img);
  497.         -webkit-mask-size: 100% 100%;
  498.         background: var(--border-corner);
  499.         position: absolute;
  500.         width: 50px;
  501.         height: 50px;
  502.         margin-top: -15px;
  503.         margin-left: 295px;
  504.         transform: rotate(180deg);
  505.         z-index: 3
  506.     }
  507.  
  508.     .two-page {
  509.       background:url(https://i.imgur.com/DuAi6FE.png);
  510.       width:850px;height:650px;
  511.       background-size:100% 100%;
  512.   }
  513.  
  514.     .row {
  515.         flex-direction: row;
  516.         display: flex;
  517.         align-items: center;
  518.         justify-content: center
  519.     }
  520.  
  521.     .col {
  522.         flex-direction: column;
  523.         display: flex
  524.     }
  525.  
  526.     .fade {
  527.         -webkit-animation-name: fade;
  528.         -webkit-animation-duration: 1.2s;
  529.         animation-name: fade;
  530.         animation-duration: 1.2s;
  531.         position: relative
  532.     }
  533.  
  534.     @-webkit-keyframes fade {
  535.         0% {left: 0px; opacity: 0.1}
  536.         100% {opacity: 1}
  537.     }
  538.  
  539.     @keyframes fade {
  540.         0% {left: 0px; opacity: 0.1}
  541.         100% {opacity: 1}
  542.     }
  543. </style>
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!