API tools faq
paste
terakun

strawberry shortcake

terakun
Mar 28th, 2025 (edited)
151
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.26 KB | None | 0 0
raw download clone embed print report
  1. <!--template by https://terakun.nekoweb.org-->
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5.  
  6. <head>
  7.   <meta charset="UTF-8">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.   <title>title here</title>
  10.   <link rel="stylesheet" href="filename.css">
  11.   <link rel="icon" href="filename.png" type="image/x-icon">
  12.  
  13.   <!--style-->
  14.   <style>
  15.     body {
  16.       background: url("https://i.pinimg.com/736x/78/cb/ee/78cbeed6dd0e107980065ee2c0766285.jpg");
  17.       background-size: 200px;
  18.       font-family: "ms gothic";
  19.       color: #845543;
  20.     }
  21.  
  22.     ::selection {
  23.       background: #ffeced;
  24.     }
  25.  
  26.     h1,
  27.     h2,
  28.     h3 {
  29.       margin: 0;
  30.       filter: drop-shadow(20px 10px 4px #e1434340);
  31.     }
  32.  
  33.     textarea {
  34.       color: #fe9da4;
  35.       border: dashed 2px #fe9da4;
  36.       border-radius: 15px;
  37.     }
  38.  
  39.     a {
  40.       color: #fe9da4;
  41.     }
  42.  
  43.     footer {
  44.       text-shadow: #fff 1px 0px 0px, #fff 1px 1px 0px, #fff 1px 1px 0px,
  45.         #fff 0px 1px 0px, #fff -1px 1px 0px, #fff -1px 1px 0px, #fff -1px 0px 0px,
  46.         #fff -1px -1px 0px, #fff -1px -1px 0px, #fff 0px -1px 0px, #fff 1px -1px 0px,
  47.         #fff 1px -1px 0px, #fff 1px -1px 0px;
  48.       font-weight: bold;
  49.       text-align: center;
  50.     }
  51.  
  52.     .sidebar {
  53.       background: url("https://files.catbox.moe/kpgdjb.webp");
  54.       background-size: 30px;
  55.       top: 0;
  56.       left: 0;
  57.       position: fixed;
  58.       background-repeat: repeat-y;
  59.       background-position: top right;
  60.       width: 250px;
  61.       height: 100%;
  62.     }
  63.  
  64.     .inside {
  65.       background: #fffefc;
  66.       width: 75%;
  67.       height: 100%;
  68.       padding: 20px;
  69.       text-align: center;
  70.     }
  71.  
  72.     .flex {
  73.       display: flex;
  74.       gap: 20px;
  75.     }
  76.  
  77.     .wrapper {
  78.       margin: auto;
  79.       width: 700px;
  80.       height: 700px;
  81.     }
  82.  
  83.     .col {
  84.       flex: 1;
  85.     }
  86.  
  87.     .col2 {
  88.       flex: 1.5;
  89.     }
  90.  
  91.     .container {
  92.       border: solid 1px #e36556;
  93.       overflow: auto;
  94.       padding: 15px;
  95.       background: #fff;
  96.       height: 190px;
  97.     }
  98.  
  99.     .desc {
  100.       margin-top: 20px;
  101.       margin-bottom: 20px;
  102.     }
  103.  
  104.     .button {
  105.       padding-top: 5px;
  106.       padding-right: 5px;
  107.       text-align: right;
  108.     }
  109.  
  110.     .button img:hover {
  111.       filter: brightness(1.2);
  112.     }
  113.  
  114.     .window {
  115.       background: #f8d0c0;
  116.       background: url("https://i.pinimg.com/736x/d4/49/0e/d4490edbd880560c4f7073b5078553bd.jpg");
  117.       background-size: 100px;
  118.       height: 250px;
  119.       border: solid 1px #845543;
  120.       border-radius: 5px;
  121.       margin-bottom: 15px;
  122.       filter: drop-shadow(20px 10px 4px #e1434340);
  123.     }
  124.  
  125.     .main {
  126.       border: solid 2px #e36556;
  127.       border-radius: 5px;
  128.       width: 100%;
  129.       margin-bottom: 15px;
  130.     }
  131.  
  132.     .header {
  133.       width: 100%;
  134.       height: 90px;
  135.       text-shadow: #fff 1px 0px 0px, #fff 1px 1px 0px, #fff 1px 1px 0px,
  136.         #fff 0px 1px 0px, #fff -1px 1px 0px, #fff -1px 1px 0px, #fff -1px 0px 0px,
  137.         #fff -1px -1px 0px, #fff -1px -1px 0px, #fff 0px -1px 0px, #fff 1px -1px 0px,
  138.         #fff 1px -1px 0px, #fff 1px -1px 0px;
  139.     }
  140.  
  141.     /*scrollbar*/
  142.     ::-webkit-scrollbar-track {
  143.       background: url("https://i.pinimg.com/736x/c6/84/fe/c684feed39a7457a4614117ebc28c4c7.jpg");
  144.       background-size: 100px;
  145.       border-left: dashed 2px #e36556;
  146.     }
  147.  
  148.     ::-webkit-scrollbar {
  149.       width: 25px;
  150.       background: transparent;
  151.     }
  152.  
  153.     ::-webkit-scrollbar-thumb {
  154.       background: url("https://files.catbox.moe/m7z7gu.png");
  155.       background-size: 25px;
  156.       height: 25px;
  157.       border: solid 2px #e36556;
  158.       border-radius: 20px;
  159.     }
  160.  
  161.     li {
  162.       list-style-type: katakana;
  163.       margin: 5px;
  164.       transition: margin-left 0.2s;
  165.       text-shadow: #fff 1px 0px 0px, #fff 1px 1px 0px, #fff 1px 1px 0px,
  166.         #fff 0px 1px 0px, #fff -1px 1px 0px, #fff -1px 1px 0px, #fff -1px 0px 0px,
  167.         #fff -1px -1px 0px, #fff -1px -1px 0px, #fff 0px -1px 0px, #fff 1px -1px 0px,
  168.         #fff 1px -1px 0px, #fff 1px -1px 0px;
  169.     }
  170.  
  171.     li:hover {
  172.       margin-left: 15px;
  173.       font-style: italic;
  174.     }
  175.  
  176.     .first {
  177.       background: #ffeced;
  178.     }
  179.  
  180.     .title {
  181.       margin-bottom: 10px;
  182.       padding: 5px;
  183.       overflow: auto;
  184.       background: url("https://i.pinimg.com/736x/7a/39/0f/7a390fb7e8ffc3aaa660d949d45aaf07.jpg");
  185.       background-size: 100px;
  186.       border: dashed 1px #c9b7ac;
  187.       border-radius: 50%;
  188.       text-align: center;
  189.       font-weight: bold;
  190.     }
  191.  
  192.     .doll {
  193.       position: absolute;
  194.       right: -200px;
  195.       bottom: -50px;
  196.       animation: fun 0.5s step-end infinite;
  197.     }
  198.  
  199.     @keyframes fun {
  200.       0% {
  201.         transform: rotate(1deg);
  202.       }
  203.  
  204.       50% {
  205.         transform: rotate(-1deg);
  206.       }
  207.     }
  208.   </style>
  209.  
  210. </head>
  211.  
  212. <body>
  213.  
  214.   <!--sidebar-->
  215.   <div class="sidebar">
  216.     <div class="inside">
  217.  
  218.       <img src="https://i.pinimg.com/736x/eb/b0/4c/ebb04c81344a8050aabdf59505620794.jpg" width="150">
  219.       <div class="desc">
  220.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.
  221.       </div>
  222.  
  223.       <div class="title">
  224.         <h2>navi</h2>
  225.       </div>
  226.       <ul>
  227.         <li class="first"><a href=""><img src="https://files.catbox.moe/mlb004.gif"> link</a></li>
  228.         <li><a href=""><img src="https://files.catbox.moe/mlb004.gif"> link</a></li>
  229.         <li class="first"><a href=""><img src="https://files.catbox.moe/mlb004.gif"> link</a></li>
  230.         <li><a href=""><img src="https://files.catbox.moe/mlb004.gif"> link</a></li>
  231.         <li class="first"><a href=""><img src="https://files.catbox.moe/mlb004.gif"> link</a></li>
  232.       </ul>
  233.     </div>
  234.   </div>
  235.  
  236.   <div class="wrapper">
  237.  
  238.     <div class="header">
  239.       <h1>title here</h1>
  240.     </div>
  241.  
  242.     <div class="flex">
  243.  
  244.       <div class="col">
  245.  
  246.         <img src="https://i.pinimg.com/736x/65/e9/71/65e971179374f2c2473dfb9e49a9a689.jpg" class="main">
  247.  
  248.         <div class="window">
  249.           <div class="button">
  250.             <img src="https://files.catbox.moe/pd6kfn.png"><img src="https://files.catbox.moe/k3gwg7.png"><img src="https://files.catbox.moe/uqn9zj.png">
  251.           </div>
  252.           <div class="container">
  253.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet.
  254.           </div>
  255.         </div>
  256.  
  257.         <!--you can move credits somewhere else as long as it's still there-->
  258.         <footer>template by <a href="https://terakun.nekoweb.org">rice/alex ™</a><br>do not remove!</footer>
  259.  
  260.       </div>
  261.  
  262.       <div class="col2">
  263.  
  264.         <div class="window">
  265.           <div class="button">
  266.             <img src="https://files.catbox.moe/pd6kfn.png"><img src="https://files.catbox.moe/k3gwg7.png"><img src="https://files.catbox.moe/uqn9zj.png">
  267.           </div>
  268.           <div class="container">
  269.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet.
  270.           </div>
  271.         </div>
  272.  
  273.         <div class="window">
  274.           <div class="button">
  275.             <img src="https://files.catbox.moe/pd6kfn.png"><img src="https://files.catbox.moe/k3gwg7.png"><img src="https://files.catbox.moe/uqn9zj.png">
  276.           </div>
  277.           <div class="container">
  278.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet.
  279.           </div>
  280.  
  281.           <div class="doll">
  282.             <img src="https://files.catbox.moe/2a3v23.png" width="250">
  283.           </div>
  284.  
  285.         </div>
  286.       </div>
  287.     </div>
  288.   </div>
  289.  
  290. </body>
  291.  
  292. </html>
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!