API tools faq
paste
terakun

winters are cuter

terakun
May 24th, 2025
110
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.54 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>title here</title>
  8.   <link rel="stylesheet" href="filename.css">
  9.   <link rel="icon" href="filename.png" type="image/x-icon">
  10. </head>
  11.  
  12. <body>
  13.  
  14.   <div class="wrap">
  15.     <div class="container">
  16.       <!--header-->
  17.       <div class="head">
  18.         <h1>Winters are cuter.</h1>
  19.       </div>
  20.       <div class="m">
  21.         <marquee>put anything here!</marquee>
  22.       </div>
  23.  
  24.       <div class="flex">
  25.         <div class="sidebar">
  26.           <div class="clock">
  27.             <img src="https://64.media.tumblr.com/bd82f5bd9dcf2073b5ad71fb77f276be/2560c9d1d2d874bf-7c/s75x75_c1/093ee732da12bc3e5e35d6764ae060bfeaab5653.gifv">
  28.             <p class="time" id="time"></p><img src="https://64.media.tumblr.com/aef1f99198cee9de6a0751d97a5d7944/2560c9d1d2d874bf-d0/s75x75_c1/180215c58720303fac2f24d477aeb63235d884a0.gifv">
  29.             <script>
  30.               function updateTime() {
  31.                 const now = new Date();
  32.                 const hours = now.getHours();
  33.                 const minutes = now.getMinutes();
  34.                 const seconds = now.getSeconds();
  35.                 document.getElementById("time").innerText = `${hours}:${
  36.     minutes < 10 ? "0" + minutes : minutes
  37.  }:${seconds < 10 ? "0" + seconds : seconds}`;
  38.              }
  39.              setInterval(updateTime, 1000);
  40.            </script>
  41.           </div>
  42.           <!--navi-->
  43.           <div id="sidebg">
  44.             <a href="">placeholder</a>
  45.           </div>
  46.           <div id="sidebg">
  47.             <a href="">placeholder</a>
  48.           </div>
  49.           <div id="sidebg">
  50.             <a href="">placeholder</a>
  51.           </div>
  52.           <div id="sidebg">
  53.             <a href="">placeholder</a>
  54.           </div>
  55.           <div id="sidebg">
  56.             <a href="">placeholder</a>
  57.           </div>
  58.           <div id="sidebg">
  59.             <a href="">placeholder</a>
  60.           </div>
  61.           <div id="sidebg">
  62.             <a href="">placeholder</a>
  63.           </div>
  64.           <div id="sidebg">
  65.             <a href="">placeholder</a>
  66.           </div>
  67.           <div id="sidebg">
  68.             <a href="">placeholder</a>
  69.           </div>
  70.         </div>
  71.         <!--main-->
  72.         <div class="main">
  73.           <h2><img src="https://64.media.tumblr.com/93795bc287e2bdd1383fcbe6593dc115/db7ce6708c01e3ab-fc/s75x75_c1/13f1142bad5fb8b57860962f79a5d1f16786c6aa.gifv">
  74.             <font color="red"> w</font>elcome to placeholder .𖥔 ݁ ˖⋆
  75.           </h2>
  76.           <div style="display: flex">
  77.             <img src="https://files.catbox.moe/p2hkk4.png" class="pagedoll">
  78.  
  79.             <div id="textbox">
  80.               Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
  81.             </div>
  82.           </div>
  83.  
  84.         </div>
  85.  
  86.       </div>
  87.  
  88.     </div>
  89.  
  90.     <footer id="footer">
  91.       <a href="">contact</a>
  92.       |
  93.       <a href="">sitemap</a>
  94.       |
  95.       <!--credits, do NOT remove-->
  96.       credits to <a href="https://terakun.nekoweb.org" style="color: red">rice/alex™</a>
  97.     </footer>
  98.  
  99.   </div>
  100. </body>
  101.  
  102. </html>
  103.  
  104. <!--style-->
  105. <style>
  106.   /* Start https://www.cursors-4u.com */
  107.   * {
  108.     cursor: url(https://cur.cursors-4u.net/holidays/hol-1/hol91.ani),
  109.       url(https://cur.cursors-4u.net/holidays/hol-1/hol91.png), auto !important;
  110.   }
  111.  
  112.   /* End https://www.cursors-4u.com */
  113.   body {
  114.     font-family: ms gothic;
  115.     margin-top: 60px;
  116.     background: url("https://files.catbox.moe/sta9zz.png");
  117.     background-size: 200px;
  118.   }
  119.  
  120.   h1,
  121.   h2,
  122.   h3 {
  123.     margin: 0;
  124.   }
  125.  
  126.   a {
  127.     color: #677a9f;
  128.     text-decoration: none;
  129.   }
  130.  
  131.   a:hover {
  132.     text-decoration: underline;
  133.   }
  134.  
  135.   .wrap {
  136.     position: relative;
  137.     margin: auto;
  138.     width: 700px;
  139.     max-height: 600px;
  140.   }
  141.  
  142.   .container {
  143.     border: solid 1.4px #616c8a;
  144.     background: linear-gradient(0deg, #ebf3ff 0%, #fff 8%);
  145.     box-shadow: 1px 1px 4px #00000050;
  146.   }
  147.  
  148.   #footer {
  149.     border: solid 1.4px #616c8a;
  150.     background: linear-gradient(0deg, #ebf3ff 0%, #fff 50%);
  151.     box-shadow: 1px 1px 4px #00000050;
  152.     margin-top: 10px;
  153.     padding: 12px;
  154.     text-align: center;
  155.   }
  156.  
  157.   .head {
  158.     width: 100%;
  159.     height: 160px;
  160.     background-image: url("https://files.catbox.moe/qnu67f.png");
  161.     background-size: cover;
  162.     border-bottom: solid 1.8px #616c8a;
  163.   }
  164.  
  165.   .head h1 {
  166.     color: #fff;
  167.     filter: drop-shadow(0 -1px 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(1px 0 0 #000);
  168.     font-size: 40px;
  169.     font-weight: 200;
  170.   }
  171.  
  172.   .m {
  173.     width: 100%;
  174.     height: 26px;
  175.     border-bottom: solid 1.6px #616c8a;
  176.     background: linear-gradient(90deg, #e0edff 0%, #fff 50%, #e0edff 100%);
  177.   }
  178.  
  179.   .m marquee {
  180.     padding: 4px;
  181.     text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
  182.       1px 1px 0 #fff;
  183.   }
  184.  
  185.   .flex {
  186.     display: flex;
  187.   }
  188.  
  189.   .sidebar {
  190.     width: 160px;
  191.     border-right: solid 1.8px #616c8a;
  192.     height: 100%;
  193.   }
  194.  
  195.   #sidebg {
  196.     background-image: linear-gradient(to bottom,
  197.         #fff 1%,
  198.         #d7e2f5 49%,
  199.         #ceddf9 51%,
  200.         #f1f9fe 100%);
  201.     padding: 8px;
  202.     border-bottom: solid 1px #616c8a;
  203.   }
  204.  
  205.   #sidebg:hover {
  206.     filter: brightness(1.06);
  207.     text-shadow: -1px -1px 0 #b6cbe5, 1px -1px 0 #b6cbe5, -1px 1px 0 #b6cbe5,
  208.       1px 1px 0 #b6cbe5;
  209.   }
  210.  
  211.   .clock {
  212.     display: flex;
  213.     justify-content: center;
  214.     align-items: center;
  215.     border-bottom: solid 1px #616c8a;
  216.     background: linear-gradient(180deg, #dbecff 4%, #fff 40%);
  217.   }
  218.  
  219.   .time {
  220.     color: red;
  221.     font-size: 20px;
  222.     margin: 4px;
  223.   }
  224.  
  225.   .main {
  226.     padding: 12px;
  227.   }
  228.  
  229.   .pagedoll {
  230.     flex: 1;
  231.     width: 220px;
  232.   }
  233.  
  234.   #textbox {
  235.     background-color: #f1f6fe;
  236.     padding: 10px;
  237.     margin: 20px;
  238.     width: 220px;
  239.     height: 140px;
  240.     overflow: auto;
  241.   }
  242.  
  243.   ::-webkit-scrollbar {
  244.     width: 10px;
  245.   }
  246.  
  247.   ::-webkit-scrollbar-track {
  248.     box-shadow: inset 0 0 4px #9aa7c4;
  249.     border-radius: 4px;
  250.   }
  251.  
  252.   ::-webkit-scrollbar-thumb {
  253.     background: #fff;
  254.     box-shadow: inset 0 0 4px #cbcdd2;
  255.     border-radius: 10px;
  256.   }
  257. </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!