API tools faq
paste
Guest User

Untitled

a guest
Oct 21st, 2025
82
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.16 KB | None | 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.0">
  6.     <title>Insert webpage title here</title>
  7. </head>
  8. <style>
  9. .body::-webkit-scrollbar {
  10. display: none;
  11. }
  12. ::-webkit-scrollbar {
  13. width: 15px;
  14. }
  15. ::-webkit-scrollbar-track {
  16. box-shadow: inset 0 0 5px grey;
  17. border-radius: 5px;
  18. }
  19.  ::-webkit-scrollbar-thumb {
  20. background:linear-gradient(to right, #b2ceeb, #73a8e0, #5494d8,#73a8e0,#a1c6ef );
  21. border-radius: 7px;
  22. border: 1px rgba(128, 128, 128, 0.73) solid;
  23. }
  24.  
  25. a{
  26. color: #5b9bdf;
  27. }
  28. th{
  29. font-weight: normal;
  30. padding: 0%;
  31. width: fit-content;
  32. }
  33. body{
  34. font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
  35. background-image: url('https://file.garden/aNy90GYmaWI-Okj1/os-x-cheetah-blue-3840x2160-24084.jpg');
  36. background-size:fill;
  37. margin: 0;
  38. font-size: 20px;
  39. color: black;
  40. }
  41. .header{
  42. width: 100%;
  43. background-color: rgba(237, 237, 237, 0.894);
  44. position: sticky;
  45. height:25px;
  46. background-image: url('https://www.fancyparts.com/fancyparts/cg/pattern/strip_01/strip_01_310.gif');
  47. color: black;
  48. }
  49.  
  50. .main{
  51. width: 1000px;
  52. height:700px;
  53. margin-top:40px;
  54. position:relative;
  55. margin-bottom: 100px;
  56. margin-left:auto;
  57. margin-right:auto;
  58. box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  59. border: 1px solid #ffffff00;
  60. border-radius: 9px;
  61. }
  62. .grid{
  63. display: grid;
  64. grid-template-rows:8fr 1fr;
  65. grid-template-columns: 1fr 2fr 4fr;
  66. margin-top:20px;
  67. width:1000px;
  68. margin-left:-8px;
  69.  
  70. }
  71. .left{
  72. grid-column: 1;
  73. grid-row: 1;
  74. background-color: #e5e8ea;
  75. height:600px;
  76.  
  77. }
  78. .center{
  79. grid-column: 2;
  80. grid-row: 1;
  81. background-color: #ededed;
  82. height:600px;
  83. padding:10px;
  84. box-sizing: border-box;
  85. text-align:center;
  86. }
  87. .right{
  88. grid-column: 3;
  89. grid-row:1;
  90. background-color:rgb(244, 244, 244);
  91. height:600px;
  92. box-sizing: border-box;
  93. width: 100%;
  94. text-align: left;
  95. overflow-y: auto;
  96. }
  97. .footer{
  98. grid-column-start: 1;
  99. grid-column-end:4;
  100. grid-row:2;
  101. }
  102. </style>
  103. <body>
  104.     <div class="header">
  105.         <style>
  106.         .header a{
  107.         text-decoration: none;
  108.         color:black;
  109.         }
  110.         .header a:hover{
  111.         background:linear-gradient(#8cbcef, #5b9bdf, #5494d8,#5b9bdf,#8cbcef );
  112.         color: white;
  113.         }
  114.         </style>
  115.         <table style="width:200px;height:100%;position: relative;float:left;">
  116.             <tr>
  117.             <th>
  118.             <!-- feel free to change link names -->
  119.             <img src="https://cdn-icons-png.flaticon.com/512/0/747.png" alt="applelogo" style="width:20px;margin-left: 5px;">
  120.             </th>
  121.             <th>
  122.             <b>Out</b>
  123.             </th>
  124.             <th>
  125.             <div style="margin-left:15px;position: relative;width: max-content;">
  126.                 <a href="">guestbook</a>
  127.             </th>
  128.             <th>
  129.             <div style="margin-left:15px;position: relative;width: max-content;">
  130.                 <a href="">social media</a>
  131.             </div>
  132.             </th>  
  133.             <th>              
  134.             <div style="margin-left:15px;position: relative;width: max-content;">
  135.                 <a href="">neocities profile</a>
  136.             </div>
  137.             </th>
  138.             </tr>
  139.         </table>
  140.         <div style="float:right;position:relative;margin-top:0px;">
  141.             <p id="day" style="margin-top:2px;float:left;"></p> &nbsp; <p id="txt2" style="margin-top:2px;float:right;"></p>
  142.             <script>
  143.                 const weekday = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
  144.  
  145.                 const d = new Date();
  146.                 let day = weekday[d.getDay()];
  147.                 document.getElementById("day").innerHTML = day;
  148.             </script>
  149.             <script>
  150.                 var today=new Date();
  151.                 var h=today.getHours();
  152.                 var m=today.getMinutes();
  153.                 document.getElementById('txt2').innerHTML=h+":"+m;
  154.             </script>
  155.         </div>
  156.    </div>
  157.    <div class="main">
  158.     <div style="background: linear-gradient(#eff2f2,#cdcccc,#a2a3a3);height:40px;border-radius: 9px 9px 0px 0px;padding:8px;">
  159.     <table style="width:100%;">
  160.     <tr>
  161.     <th>
  162.     <style>
  163.         .sphere1{
  164.         border-radius: 50%;
  165.         background: linear-gradient(#ffe0e0, #ff9191, #fb3e3e, #ff9191, #ffe0e0);
  166.         border:1px #980f0f solid;
  167.         width:20px;
  168.         height:20px;
  169.         position:relative;
  170.         float:left;
  171.         margin-right: 5px;
  172.         }
  173.         .sphere2{
  174.         border-radius: 50%;
  175.         background: linear-gradient(#fcf9ec, #feec81, #fbdf3e, #feec81, #fcf9ec);
  176.         border:1px #bca524 solid;
  177.         width:20px;
  178.         height:20px;
  179.         position:relative;
  180.         float:left;
  181.         margin-right: 5px;    
  182.         }
  183.         .sphere3{
  184.         border-radius: 50%;
  185.         background: linear-gradient(#eaffe6, #acfd9a, #52e032, #acfd9a, #eaffe6);
  186.         border:1px #7db73e solid;
  187.         width:20px;
  188.         height:20px;
  189.         position:relative;
  190.         float:left;        
  191.         }
  192.     </style>
  193.     <div class="sphere1"></div>  <div class="sphere2"></div> <div class="sphere3"></div>
  194.     </div>
  195.     </th>
  196.     <th style="float:right;">
  197.         yourwebsite.neocities.org
  198.     </th>
  199.  
  200.     </tr>
  201.     </table>
  202.         <div class="grid">
  203.             <!--navigation-->
  204.            <div class="left">
  205.             <style>
  206.                 .left h4{
  207.                 color:grey;
  208.                 margin-top: 5px;
  209.                 margin-bottom: 5px;
  210.                 margin-left: 5px;
  211.                 }
  212.                 .left a{
  213.                 color:black;
  214.                 text-decoration: none;
  215.                 }
  216.                 .left ul{
  217.                 margin-top: 0px;
  218.                 margin-bottom: 0px;
  219.                 border-top:#989797 1px solid;
  220.                 border-bottom: #c1c0c0 1px solid;
  221.                 }
  222.                 .left ul:hover{
  223.                 background:linear-gradient(#8cbcef, #5b9bdf, #5494d8,#5b9bdf,#8cbcef )
  224.                 }
  225.                 .triangle {
  226.                 width: 0px;
  227.                 height: 0px;
  228.                 border-style: solid;
  229.                 border-width: 0 8px 13px 8px;
  230.                 border-color: transparent transparent #989797 transparent;
  231.                 transform: rotate(90deg);
  232.                 position: relative;
  233.                 float:left;
  234.                 margin-top:5px;
  235.                 }
  236.  
  237.             </style>
  238.             <p style="margin-top:0;margin-bottom:0;margin-left:5px;"><b>Sitemap</b></p>
  239.             <h4><div class="triangle"></div>Header</h4>
  240.                 <ul><a href="">link</a></ul>
  241.                 <ul><a href="">link</a></ul>
  242.                 <ul><a href="">link</a></ul>
  243.  
  244.             <h4><div class="triangle"></div>Header</h4>
  245.                 <ul><a href="">link</a></ul>
  246.                 <ul><a href="">link</a></ul>
  247.                 <ul><a href="">link</a></ul>
  248.            
  249.             <h4><div class="triangle"></div>Header</h4>
  250.                 <ul><a href="">link</a></ul>
  251.                 <ul><a href="">link</a></ul>
  252.                 <ul><a href="">link</a></ul>
  253.  
  254.             <h4><div class="triangle"></div>Header</h4>
  255.                 <ul><a href="">link</a></ul>
  256.                 <ul><a href="">link</a></ul>
  257.                 <ul><a href="">link</a></ul>
  258.            </div>
  259.            <!--status and updates-->
  260.            <div class="center">
  261.             <style>
  262.             .icon{
  263.             width:100px;
  264.             height:100px;
  265.             background:white;
  266.             border:6px double rgb(165, 164, 164);
  267.             position: relative;
  268.             margin: auto;
  269.             box-shadow: rgba(0, 0, 0, 0.163) 2px 2px 7px 2px;
  270.             }
  271.             .updates{
  272.             width:80%;
  273.             background-color:white;
  274.             border: 1px solid rgb(165, 164, 164);
  275.             overflow-y: scroll;
  276.             padding:5px;
  277.             box-sizing: border-box;
  278.             margin: auto;
  279.             height:280px;
  280.             font-size: 15px;
  281.             text-align: left;
  282.             box-shadow: rgba(0, 0, 0, 0.297) 0px 2px 4px 0cqmax inset;            
  283.             }
  284.             </style>
  285.             <div class="icon">
  286.                 <img src="https://64.media.tumblr.com/32d55608f6eb9bd6ceef1b245864bc7d/0e38ed59b096a83f-82/s400x600/7698ae005cada87e69b4dfa465bbab2c12830208.pnj" width="100%">
  287.             </div>
  288.             <h4 style="margin-top: 5px;margin-bottom: 5px;margin-left: 5px;">Status</h4>
  289.             <span style="color:rgb(165, 164, 164);font-size: 15px;">date</span><br>
  290.             <span style="font-size: 15px;">
  291.                 <b>mood:</b> happy <br>
  292.                 <b>currently:</b> activity <br>
  293.                 <b></b>
  294.             </span>
  295.             <hr>
  296.             <!--feel free to use this for purposes other than updates-->
  297.             <h4 style="margin-top: 5px;margin-bottom: 5px;margin-left: 5px;">Updates</h4>
  298.             <div class="updates">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  299.             </div>
  300.             </div>
  301.             <!--main content-->
  302.             <div class="right">
  303.                 <style>
  304.                     .title{
  305.                     width: 100%;
  306.                     height:fit-content;
  307.                     background-color: #ccd5dcbd;
  308.                     padding:5px;
  309.                     box-sizing: border-box;
  310.                     font-weight: bold;
  311.                     }
  312.                     .searchbar{
  313.                     width:80%;
  314.                     height:25px;
  315.                     padding:5px;
  316.                     border: 1px grey solid;
  317.                     border-radius: 15px;
  318.                     background-color: white;
  319.        
  320.                     }
  321.                     .textbox{
  322.                     width:90%;
  323.                     margin-left:auto;
  324.                     margin-right: auto;
  325.                     margin-top:10px;
  326.                     margin-bottom: 10px;
  327.                     height:auto;
  328.                     }
  329.                 </style>
  330.                 <div class="title">
  331.                    <div class="searchbar">
  332.                     <img src="https://file.garden/aNy90GYmaWI-Okj1/1486564716-magnifying-glass-search_81527.png" width="15px" alt="search">
  333.                     Title 1
  334.                     </div>
  335.                 </div>
  336.                 <div class="textbox">
  337.                     layout is <i>not mobile friendly!</i> <br>
  338.                     feel free to alter the code, but <b>do not remove the credits </b>if you retain more than 50% ~ of the original code <br><br>
  339.                     if there are any bugs or issues please contact me on my neocities profile.
  340.                 </div>
  341.                 <div class="title">
  342.                    <div class="searchbar">
  343.                     <img src="https://file.garden/aNy90GYmaWI-Okj1/1486564716-magnifying-glass-search_81527.png" width="15px" alt="search">
  344.                     Title 2
  345.                     </div>
  346.                 </div>  
  347.                 <div class="textbox">
  348.                     add in your webrings, buttons, chatbox etc
  349.                 </div>            
  350.             </div>
  351.             <div class="footer">
  352.                 <div style="background: linear-gradient(#eff2f2,#cdcccc,#a2a3a3);height:45px;border-radius: 0px 0px 9px 9px;padding:8px;box-sizing: border-box;width:100%;font-size:12px;">
  353.                     credits: coded by <a href="https://ol1vi4s-corner.neocities.org">ol1vi4s-corner</a> // <a href="https://www.fancyparts.com/fancyparts/pattern.html">header background</a> // do NOT remove
  354.                 </div>
  355.             </div>
  356.             </div>
  357.            </div>
  358.         </div>
  359.  
  360. </body>
  361. </html>
Advertisement
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!