API tools faq
paste
Advertisement
punkwasp

Pastel Template

punkwasp
Sep 1st, 2023 (edited)
909
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.48 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous" />
  7.         <!-- Replace the description, title, and the icon with whatever you're using. -->
  8.         <meta name="description" content="A pastel-themed website template!" />
  9.         <title>Pastel</title>
  10.         <link rel="icon" type="image/x-icon" href="/images/atom.png" />
  11.         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  12.         <link rel="stylesheet" href="https://unpkg.com/freezeframe@3.0.10/build/css/freezeframe_styles.min.css" />
  13.         <style>
  14.             /* If you're using a custom font, you'll want to set it up in the CSS like this, replacing the font name and source file with the name and source file of the font you're using: @font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Regular.otf);} */
  15.             /* The name you use for font-family is what you'll put into the value attribute of the option you add in the font selector for this */
  16.             .ff-container {
  17.                 display:inline-flex;
  18.             }
  19.  
  20.             /* ===== Scrollbar CSS ===== */
  21.             /* Firefox */
  22.             * {
  23.                 scrollbar-width: thin;
  24.                 scrollbar-color: #d78a96 #fff;
  25.             }
  26.  
  27.             /* Chrome, Edge, and Safari */
  28.             *::-webkit-scrollbar {
  29.                 width: 10px;
  30.             }
  31.  
  32.             *::-webkit-scrollbar-track {
  33.                 background: #fff;
  34.             }
  35.  
  36.             *::-webkit-scrollbar-thumb {
  37.                 background-color: #d78a96;
  38.             }
  39.  
  40.             body {
  41.               background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/33306534_A5htslLMboAMqI3.png');
  42.               background-attachment:fixed;
  43.               line-height: 133%;
  44.               font-size: 1em;
  45.               font-family: "Open Sans", "Droid Sans", Calibri, sans-serif;
  46.             }
  47.             a {
  48.               color:#825561;
  49.               transition:0.4s;
  50.               font-weight:bold;
  51.             }
  52.             a:hover, a:focus {
  53.               letter-spacing: 0.15em;
  54.               color:black;
  55.             }
  56.             a.btn {
  57.               color:#342227;
  58.               font-weight:bold;
  59.               transition:0.4s;
  60.             }
  61.             a.btn:hover, a.btn:focus {
  62.               letter-spacing: 0.05em;
  63.               color:black;
  64.             }
  65.             /* This is the custom list bullets I use, search up CSS entities to replace it with your own custom symbols */
  66.             .transbullets li::marker {
  67.               content: "\26A7\2003";
  68.             }
  69.             img, svg {
  70.               vertical-align: inherit;
  71.             }
  72.  
  73.             code {
  74.               background-color: #eee;
  75.               font-family: courier, monospace;
  76.               border-radius: 3px;
  77.               color:#000;
  78.               padding: 2px;
  79.             }
  80.             pre {
  81.               background-color: #eee;
  82.               display: block;
  83.               border-radius: 6px;
  84.               font-family: Courier, monospace;
  85.               white-space: pre-wrap;
  86.               margin: 1em 0;
  87.               padding: 10px;
  88.               color:#000;
  89.             }
  90.             kbd {
  91.               border-radius: 3px;
  92.               background-color: #eee;
  93.               font-family: Courier, monospace;
  94.               padding: 2px;
  95.               border: 1px solid #aaa;
  96.               color:#000;
  97.             }
  98.  
  99.             blockquote {
  100.               margin-top: 10px;
  101.               margin-bottom: 10px;
  102.               margin-left: 2.5%;
  103.               padding-left: 15px;
  104.               border-left: 3px solid #825561;
  105.             }
  106.         </style>
  107.         <script src="https://unpkg.com/freezeframe@3.0.10/build/js/freezeframe.pkgd.min.js"></script>
  108.         <script>
  109.             $(function() {
  110.                 third = new freezeframe('.freezeframe').capture().setup();
  111.                 $('.play').click(function(e) {
  112.                     e.preventDefault();
  113.                     third.trigger();
  114.                 });
  115.                 $('.stop').click(function(e) {
  116.                     e.preventDefault();
  117.                     third.release();
  118.                 });
  119.             })
  120.         </script>
  121.     </head>
  122.     <body>
  123.         <div class="container-fluid p-2 mx-auto" style="font-size:1rem;">
  124.             <div class="row justify-content-center m-1">
  125.                 <div
  126.                     class="col-md-7 m-1 p-3 justify-content-center"
  127.                     style="border-style:solid;border-color:white;background-image:url(https://img.freepik.com/free-vector/gradient-pastel-sky-background_23-2148917404.jpg?w=996&t=st=1693256266~exp=1693256866~hmac=5bd7fc6fa8daed2d68b2bd25ddf4f7a75e51ed1332350e0028cebeda6c84a37f);background-size:cover;box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"
  128.                 >
  129.                     <h1
  130.                         class="display-1 text-center"
  131.                         style="font-weight:bold;font-variant:small-caps;color:#ffc7d3;filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black) drop-shadow(0px 1px white) drop-shadow(0 -1px white) drop-shadow(1px 0 white) drop-shadow(-1px 0 white);"
  132.                     >
  133.                         Pastel Template
  134.                     </h1>
  135.                 </div>
  136.                 <div class="col-md-2 m-1 p-3" style="border-style:solid;border-color:white;background-color:rgba(254,224,232,0.8);box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
  137.                     <p>Put some content here</p>
  138.                 </div>
  139.                 <div class="col-md-2 m-1 p-3" style="border-style:solid;border-color:white;background-color:rgba(254,224,232,0.8);box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
  140.                     <noscript>The below options require JavaScript to function!</noscript>
  141.                     <label for="fontFamily">Font:</label>
  142.                     <!-- If you want to add a custom font here, make sure the value attribute is set to whatever name you're using for the font, and that you've set it up in your CSS -->
  143.                     <select name="fontFamily" id="fontFamily">
  144.                         <option value="Arial">Arial</option>
  145.                         <option value="Times">Times</option>
  146.                         <option value="Helvetica">Helvetica</option>
  147.                         <option value="Tahoma">Tahoma</option>
  148.                         <option value="Calibri">Calibri</option>
  149.                         <option value="Verdana">Verdana</option>
  150.                     </select>
  151.                     <br />
  152.                     <br />
  153.                     <button class="play">Play GIFs</button>
  154.                     <button class="stop">Stop GIFs</button>
  155.                 </div>
  156.             </div>
  157.             <div class="row justify-content-center m-1">
  158.                 <div
  159.                     class="col-md-3 m-1 p-3"
  160.                     style="border-style:solid;border-color:white;background-color:rgba(254,224,232,0.8);box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);max-height:600px;overflow:auto;"
  161.                 >
  162.                     <h2 class="text-center">Explore the site!</h2>
  163.                     <!-- Put links to each page here! -->
  164.                     <ul class="nav nav-tabs row" style="border-bottom: none;">
  165.                         <li class="col-12 mb-2 d-grid gap-2 nav-item">
  166.                             <a href="#" style="border-color:#d88d91;border-width:3px;border-style:outset;background:#ffc8d3;" class="btn bg-faded btn-block btn-outline-primary nav-link">Link</a>
  167.                         </li>
  168.                         <li class="col-12 mb-2 d-grid gap-2 nav-item">
  169.                             <a href="#" style="border-color:#d88d91;border-width:3px;border-style:outset;background:#ffc8d3;" class="btn bg-faded btn-block btn-outline-primary nav-link">Link</a>
  170.                         </li>
  171.                         <li class="col-12 mb-2 d-grid gap-2 nav-item">
  172.                             <a href="#" style="border-color:#d88d91;border-width:3px;border-style:outset;background:#ffc8d3;" class="btn bg-faded btn-block btn-outline-primary nav-link">Link</a>
  173.                         </li>
  174.                     </ul>
  175.                 </div>
  176.                 <div
  177.                     class="col-md-5 m-1 p-3"
  178.                     style="border-style:solid;border-color:white;background-color:rgba(254,224,232,0.8);box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);max-height:600px;overflow:auto;"
  179.                 >
  180.                     <h2
  181.                         class="display-4 text-center"
  182.                         style="font-weight:bold;color:#ffc7d3;filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black) drop-shadow(0px 1px white) drop-shadow(0 -1px white) drop-shadow(1px 0 white) drop-shadow(-1px 0 white);"
  183.                     >
  184.                         Pastel!
  185.                     </h2>
  186.                     <p>Put your site content here, whatever you want. These boxes will all scroll, and they will match each other's heights.</p>
  187.                     <p>This template should be optimized for mobile, try zooming in and out! It also comes with freezeframe.js (so to make that GIF toggle affect the images, just add class="freezeframe" to them or to a div containing only GIFs), a working font selector, and space for a pagedoll.</p>
  188.                     <p><a href="https://pastebin.com/eBEyhJ6a">Get the code!</a></p>
  189.                 </div>
  190.                 <div
  191.                     class="col-md-3 m-1 p-3"
  192.                     style="border-style:solid;border-color:white;background-color:rgba(254,224,232,0.8);box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);max-height:600px;overflow:auto;"
  193.                 >
  194.                     <h2 class="text-center">Updates and Status</h2>
  195.                     <!-- This doesn't have to be updates and status, put whatever you want here -->
  196.                     <h3>Updates</h3>
  197.                     <div
  198.                         id="updates"
  199.                         class="p-2"
  200.                         style="border: 5px solid;border-image-slice: 1;border-image-source: linear-gradient(#ff8bbf,#cdf5ff 14.3%,#9aedff 28.6%,#76e0ff 50%,#9aedff 71.5%,#cdf5ff 85.8%,#ff8bbf 100%);width:auto;max-height:250px;overflow:auto;text-align:center;background-color:white;"
  201.                     >
  202.                         <h4>Date</h4>
  203.                         <p>Update content</p>
  204.                     </div>
  205.                     <!-- Fill this sidebar up with whatever you want, it will scroll -->
  206.                 </div>
  207.             </div>
  208.             <div class="row justify-content-center m-1">
  209.                 <div class="col-md-4 m-1 p-3" style="border-style:solid;border-color:white;background-color:rgba(254,224,232,0.8);box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
  210.                     <h2 class="text-center">Most recent</h2>
  211.                     <p><strong>Blog post:</strong> <a href="#">put blog post here</a> - date</p>
  212.                     <p>Put more recent stuff here or change this to be something else</p>
  213.                 </div>
  214.                 <div class="col-md-3 m-1 p-3 text-center" style="border-style:solid;border-color:white;background-color:rgba(254,224,232,0.8);box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
  215.                     <p>Template made by <a href="https://punkwasp.leprd.space">PunkWasp</a>. Background from <a href="https://toyhou.se/10569034.f2u-tile-patterns/gallery#33306534">AtomicAdopts</a> on Toyhouse.</p>
  216.                     <p>You can put copyright information, where your site is hosted, etc. here if you want</p>
  217.                 </div>
  218.                 <div class="col-md-4 m-1 p-3" style="border-style:solid;border-color:white;background-color:rgba(254,224,232,0.8);box-shadow:0 4px 8px 0 rgba(213,148,150, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
  219.                     <h2 class="text-center">Currently</h2>
  220.                     <p><strong>Playing:</strong> video game</p>
  221.                     <p><strong>Watching:</strong> show/movie</p>
  222.                 </div>
  223.             </div>
  224.         </div>
  225.         <!-- Replace the below image source with the image link for your own pagedoll, and replace the title with the appropriate credits -->
  226.         <div class="position-fixed bottom-0 end-0 hidden-sm-down tooltipster" style="z-index:3;" title="Art by OddMoss on Toyhouse, character belongs to PunkWasp on Toyhouse">
  227.             <img style="max-width:100px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/31525546_YpE6rlLapAOalaU.png?1663601146" />
  228.         </div>
  229.         <!-- This is the script for the font selector. -->
  230.         <script>
  231.                         var bodyElem = document.querySelector('body');
  232.             var fontForm = document.getElementById('fontFamily');
  233.             if (!localStorage.getItem('fontFamily')) {
  234.                 populateStorage()
  235.             } else {
  236.                 setStyles()
  237.             }
  238.  
  239.             function populateStorage() {
  240.                 localStorage.setItem('fontFamily', document.getElementById('fontFamily').value);
  241.                 setStyles()
  242.             }
  243.  
  244.             function setStyles() {
  245.                 var currentFont = localStorage.getItem('fontFamily');
  246.                 document.getElementById('fontFamily').value = currentFont;
  247.                 bodyElem.style.fontFamily = currentFont
  248.             }
  249.             fontForm.onchange = populateStorage
  250.         </script>
  251.     </body>
  252. </html>
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!