Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ♡ hola my favorite people! i'm back once again and i will always be back to bring you another code!! this code is a book template for our aspiring authors out there or anyone who would like to use it :) anyways, let me just say I AM SO FREAKING PROUD of our amazing coder, Izzy. She is AMAZING and WONDERFUL and colorful just like the code she made! so don't forget to flood her with love and positive messages!! have fun coding and don't you dare remove the credits or i'll send Bruno after you ;) ♡
- best dreams,
- kay <3
- --CODE STARTS BELOW THIS TEXT--
- <html>
- <style>
- /*Scrollbar*/
- ::-webkit-scrollbar {width: 0px;}
- ::-webkit-scrollbar-thumb {background: #fff;}
- ::-webkit-scrollbar-thumb:hover {background: #fff;}
- .box{
- position: relative;
- text-align: center;
- }
- .tab button {
- background:rgba(0,0,0,.0);
- width:50%;
- height:70px;
- margin-top:1px;
- float:left;
- overflow: auto;
- border: 0px
- }
- .booktitle{
- font-family:'Sacramento';
- font-size:80px;
- color:#00539c;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .page{
- text-decoration: none;
- color:black;
- overflow: auto;
- }
- </style>
- <a name="one">
- <div style="background:#f4b8ff;border:10px solid #729c72">
- <div class="box">
- <img src="https://i.ibb.co/5krg5P3/Abstract-Watercolor-Background-Hot-Pink-Magenta-Plum.jpg" style="width:100%;height:200px;">
- <center><div class="booktitle"><img src="https://fontmeme.com/permalink/220304/96e225337b7c4a5c2e8b4ff846a9eeeb.png" alt="style-script-font" border="0" style="margin-top:10px;width:300px"></center></div>
- <div class="tab">
- <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"><img src="https://fontmeme.com/permalink/220304/fee2b39de605e4931d9da359deb54d9e.png" alt="style-script-font" border="0" style="margin-top:10px;width:150px"></button>
- <button class="tablinks" onclick="openCity(event, 'two')"><img src="https://fontmeme.com/permalink/220304/83a30c8a419429aa18eac2bad618a37f.png" alt="style-script-font" border="0" style="margin-top:10px;width:150px"></button>
- <div id="one" class="tabcontent">
- <div style="margin-left: 10px ">
- <h2>Subtitle</h2>
- <p>hihi there! :) thank you for using kay kodes, this is izzy at your service! i would first like to say thank you so much to the person that requested this code! they asked for a book with bright and fun colors based off of encanto, two pages, images, and a spot for their signature! :D i tried hehe, this is actually my very first successful book code! i do hope this meets your expectations, enjoy this code!</p>
- <img src="https://i.ibb.co/ryt51Qt/images-q-tbn-ANd9-Gc-Tafqz-Pxi1rw-Lfj-DZ6-BKzi-YFx-Mkdm-Uyd5ntd-Q-usqp-CAU.jpg" style="float:right;width:40%;margin-left: 10px;margin-right: 5px;border: 6px #eded02 double">
- <p>but even if you didn't request this, you can still use the code as it's for everyone! just remember that you should <b>keep the credits </b>no matter how much you change here! if not, <i>i will give you nightmares.</i> of course i'm just kidding <s>but not really</s>. <b>also i couldn't have done this without <a href="https://issiecodes.tumblr.com" style="color:black;">Issie</a>, one of my inspirations and a really cool person! so really thank you Issie!</b> in this page you may put an introduction to your book or well, whatever you want! this also doesn't have to be a book, it could be adjusted to other things like profile text and backstory so change it accordingly if you wish! this code might be a little confusing so i'm happy to help if you need a helping hand!</p>
- <p><b>if the text cuts off, edit the height of the first box or div in px and change it until it's good enough for you! to make sure that the other page is hidden well, make its height and padding the same as the first box's</b>, which i once again learned from Issie so thanks again! :3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget velit aliquet sagittis id. Pellentesque dignissim enim sit amet. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. At consectetur lorem donec massa sapien faucibus et molestie ac. A iaculis at erat pellentesque adipiscing. Porttitor rhoncus dolor purus non enim praesent elementum. Tortor at auctor urna nunc id. A erat nam at lectus. Leo urna molestie at elementum eu. Fusce id velit ut tortor pretium viverra suspendisse potenti nullam.</p>
- <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNBMj3bOSGjOecXVqG-r_HVb4CiLXKkSu07g&usqp=CAU" style="float:left;width:40%;margin-right: 10px;border: 6px #eded02 double">
- <p>Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Ullamcorper dignissim cras tincidunt lobortis. Ultrices in iaculis nunc sed augue. In dictum non consectetur a erat nam at. Turpis cursus in hac habitasse. Massa id neque aliquam vestibulum morbi blandit. Accumsan sit amet nulla facilisi morbi tempus iaculis. Feugiat nisl pretium fusce id velit ut. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Aenean et tortor at risus. Lacus vel facilisis volutpat est velit egestas dui id ornare. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Volutpat maecenas volutpat blandit aliquam etiam erat velit. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. At tempor commodo ullamcorper a.
- <p>Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Ullamcorper dignissim cras tincidunt lobortis. Ultrices in iaculis nunc sed augue. In dictum non consectetur a erat nam at. Turpis cursus in hac habitasse. Massa id neque aliquam vestibulum morbi blandit. Accumsan sit amet nulla facilisi morbi tempus iaculis. Feugiat nisl pretium fusce id velit ut. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Aenean et tortor at risus. Lacus vel facilisis volutpat est velit egestas dui id ornare. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Volutpat maecenas volutpat blandit aliquam etiam erat velit. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. At tempor commodo ullamcorper a.
- </div>
- </div>
- <br>
- <div id="two" class="tabcontent">
- <div style="margin-left: 10px">
- <h2>Subtitle</h2>
- <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/encanto-mirabel-1643636737.jpg?crop=0.838xw:0.774xh;0.0799xw,0.0602xh&resize=1200:*" style="width:40%;float:left;margin-right: 10px;border: 6px #eded02 double"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor.</p>
- <p>Massa sapien faucibus et molestie ac feugiat. Id donec ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nibh tellus molestie nunc non blandit massa enim nec dui. Id consectetur purus ut faucibus. Nulla pharetra diam sit amet nisl suscipit. Arcu non sodales neque sodales. Massa tempor nec feugiat nisl. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Fringilla ut morbi tincidunt augue interdum velit. Elit sed vulputate mi sit amet mauris commodo quis. Iaculis eu non diam phasellus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Nulla posuere sollicitudin aliquam ultrices. Pharetra sit amet aliquam id diam maecenas. Libero enim sed faucibus turpis in eu mi. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed tempus urna et pharetra pharetra massa.</p>
- <img src="https://media.distractify.com/brand-img/b8sGmv-A5/0x0/mirabel-madrigal-1637699679531.png" style="width:40%;float:right;margin-left: 10px;margin-right: 5px;border: 6px #eded02 double">
- <p>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque massa. Aliquam faucibus purus in massa tempor nec feugiat nisl. Donec ac odio tempor orci dapibus ultrices in. Lacus sed viverra tellus in. Vel pharetra vel turpis nunc. Eget dolor morbi non arcu. Magna fermentum iaculis eu non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada. Adipiscing bibendum est ultricies integer quis. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Facilisis volutpat est velit egestas dui id ornare arcu. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Varius vel pharetra vel turpis nunc eget.</p>
- <p>Purus sit amet luctus venenatis lectus magna. Pulvinar elementum integer enim neque volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt. Cursus mattis molestie a iaculis at erat. Risus quis varius quam quisque. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Senectus et netus et malesuada fames ac. Sit amet facilisis magna etiam tempor. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Magna sit amet purus gravida quis blandit turpis cursus.</p>
- <img src="https://c.tenor.com/plBCipGhdzIAAAAC/encanto-disney.gif" style="width:40%;float:left;margin-right: 10px;border: 6px #eded02 double">
- <p>Semper feugiat nibh sed pulvinar proin gravida. Libero volutpat sed cras ornare arcu. Blandit cursus risus at ultrices mi tempus imperdiet. Nec ultrices dui sapien eget mi proin sed libero enim. Diam phasellus vestibulum lorem sed. Consequat ac felis donec et odio pellentesque diam. Fermentum odio eu feugiat pretium nibh ipsum. Sit amet risus nullam eget felis eget nunc lobortis. Turpis in eu mi bibendum. Vitae semper quis lectus nulla at volutpat diam ut venenatis. Auctor elit sed vulputate mi sit amet mauris commodo quis. Fermentum iaculis eu non diam. Eros in cursus turpis massa tincidunt dui. Blandit volutpat maecenas volutpat blandit aliquam etiam erat. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Iaculis urna id volutpat lacus laoreet non curabitur. Ac tortor vitae purus faucibus.
- <p>
- <center>
- <img src="https://c.tenor.com/aZ6ZEBM45LkAAAAd/mirabel-madrigal-encanto.gif"style="width:150px;height:150px;margin-top:30px;border-radius:50%">
- <img src="https://fontmeme.com/permalink/220304/79149b6542777c08da35fc4acb18c477.png"style="width:350px;margin-left:10px;margin-bottom:45px">
- <center><a href="https://kkodes.wixsite.com/dreamer" style="color:#000;font-size:12px;"><b><u>kay kodes</u></b><div>
- </div>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
- <script>
- function openCity(evt, cityName) {
- var i, tabcontent, tablinks;
- tabcontent = document.getElementsByClassName("tabcontent");
- for (i = 0; i < tabcontent.length; i++) {
- tabcontent[i].style.display = "none";
- }
- tablinks = document.getElementsByClassName("tablinks");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- document.getElementById(cityName).style.display = "block";
- evt.currentTarget.className += " active";
- }
- // Get the element with id="defaultOpen" and click on it
- document.getElementById("defaultOpen").click();
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement