API tools faq
paste
Guest User

Untitled

a guest
Nov 23rd, 2025
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.96 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>Webpage title here</title>
  7.     <style>
  8.     @font-face {
  9.         font-family: header;
  10.         src: url('https://file.garden/aNy90GYmaWI-Okj1/Synkopy-Flipside.otf');
  11.     }
  12.     @font-face {
  13.         font-family: body;
  14.         src: url('https://file.garden/aNy90GYmaWI-Okj1/04B_20__.TTF');
  15.     }
  16.     body{
  17.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
  18.     background-color: rgb(230, 84, 84);
  19.     background-image: url('https://file.garden/aNy90GYmaWI-Okj1/14113%20copy.png'), url('https://file.garden/aNy90GYmaWI-Okj1/14113%20copy.png');
  20.     background-position: top right, top left;
  21.     background-repeat: no-repeat;
  22.     background-size: 20%;
  23.     margin:0;
  24.     }
  25.     h3{
  26.     font-family: "header";
  27.     font-size: 1em;
  28.     margin:0;
  29.     }
  30.     a{
  31.     color:rgb(91, 102, 221);
  32.     text-decoration: none;
  33.     }
  34.     b{
  35.     color:rgb(91, 102, 221);
  36.     letter-spacing: 10%;
  37.     }
  38.     .header{
  39.     width:100%;
  40.     height:70px;
  41.     position:sticky;
  42.     top:0;
  43.     background-color: white;
  44.     z-index: 1
  45.     }
  46.     .grid{
  47.     display: grid;
  48.     grid-template-columns: 24% 6% 70%;
  49.     grid-template-rows: 6% 62% 33%;
  50.     max-width: 700px;
  51.     height: 1050px;
  52.     max-height:fit-content;
  53.     margin:auto;
  54.     }
  55.     .leftheader{
  56.     grid-column: 1;
  57.     grid-row: 1;
  58.     background-color: rgb(159, 159, 159);
  59.     clip-path: polygon(0 0,calc(100% - 42px) 0,100% 42px,100% 100%,0 100%);
  60.     padding:10px;
  61.     box-sizing: border-box;
  62.     color:white;
  63.     }
  64.     .left{
  65.     grid-column: 1;
  66.     grid-row:2;
  67.     background:rgba(229, 236, 235, 0.843);
  68.     background-repeat: no-repeat;
  69.     background-position: right bottom;
  70.     background-size: 90px;
  71.     clip-path: polygon(
  72.     0 0%,
  73.     10% 0,
  74.     10% 0,
  75.     100% 0%,
  76.     100% 80%,
  77.     -300% 10%,
  78.     0% 00%,
  79.     0% 90%,
  80.     0% 10%
  81.     );
  82.     padding:10px;
  83.     box-sizing: border-box;
  84.     }
  85.     .mainheader{
  86.     grid-column: 3;
  87.     grid-row: 1;
  88.     color:white;
  89.     }
  90.     .main1{
  91.     grid-column:3;
  92.     grid-row-start:2;
  93.     grid-row-end:3;
  94.     background-color: rgba(229, 236, 235, 0.843);
  95.     clip-path: polygon(0 28px,28px 0,100% 0,100% 100%,0 100%);
  96.     }
  97.     .main2{
  98.     grid-column-start: 2;
  99.     grid-column-end: 4;
  100.     grid-row: 3;
  101.     background-color: rgba(229, 236, 235, 0.843);
  102.     clip-path: polygon(0 42px,42px 0,100% 0,100% calc(100% - 42px),calc(100% - 42px) 100%,42px 100%,0 calc(100% - 42px));
  103.     padding:10px;
  104.     box-sizing: border-box;
  105.     }
  106.     @media only screen and (max-width: 600px){
  107.     .grid{
  108.     display: grid;
  109.     grid-template-columns: 10% 90% ;
  110.     grid-template-rows: 70px 50% 70px 55% 30%;
  111.     }
  112.     .leftheader {
  113.     grid-row: 1;
  114.     grid-column: 2;
  115.     width: 60%;
  116.     }
  117.     .left {
  118.     grid-row: 2;
  119.     grid-column: 2;
  120.     }
  121.     .mainheader {
  122.     grid-row: 3;
  123.     grid-column: 2;
  124.     }
  125.     .main1{
  126.     grid-row: 4;
  127.     grid-column: 2;
  128.     border-top: 1px solid rgb(230, 84, 84);
  129.     }
  130.     .main2{
  131.     grid-row: 5;
  132.     grid-column-start:1 ;
  133.     grid-column-end: 3;
  134.     }
  135.     }
  136.     </style>
  137. </head>
  138. <body>
  139. <div class="grid">
  140.     <!--left column-->
  141.     <div class="leftheader">
  142.             <img src="https://file.garden/aNy90GYmaWI-Okj1/14113%20copy%203.png" style="height:20px;">
  143.             <h3>navigation</h3>
  144.     </div>
  145.     <div class="left">
  146.         <style>
  147.            /** customisation for link buttons**/
  148.            .link{
  149.             background-color: white;
  150.             clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  151.             width:100%;
  152.             height:10%;
  153.             padding:5px;
  154.             box-sizing: border-box;
  155.             margin-bottom:8px;
  156.             border-left: 8px rgb(91, 102, 221) solid;
  157.            }
  158.         </style>
  159.         <div style="height: 90%;overflow-y: auto;">
  160.             <div class="link">
  161.                 001
  162.                 <br>
  163.                 <a href="">link</a>
  164.             </div>
  165.             <div class="link">
  166.                 002
  167.                 <br>
  168.                 <a href="">link</a>
  169.             </div>
  170.             <div class="link">
  171.                 003
  172.                 <br>
  173.                 <a href="">link</a>
  174.             </div>
  175.             <div class="link">
  176.                 004
  177.                 <br>
  178.                 <a href="">link</a>
  179.             </div>
  180.             <div class="link">
  181.                 005
  182.                 <br>
  183.                 <a href="">link</a>
  184.             </div>
  185.             <div class="link">
  186.                 006
  187.                 <br>
  188.                 <a href="">link</a>
  189.             </div>        
  190.         </div>
  191.  
  192.     </div>
  193.    
  194.     <!--main area upper tab-->
  195.     <div class="mainheader">
  196.         <div style="height:100%;width:60%;background-color: rgb(159, 159, 159);clip-path: polygon(0 42px,42px 0,100% 0,100% 100%,0 100%);text-align: right;padding:10px;box-sizing: border-box;position:relative;float:right;">
  197.                <img src="https://file.garden/aNy90GYmaWI-Okj1/14113%20copy%206.png" style="height:20px;position:relative;float:right;"><br>
  198.                <h3>news</h3>        
  199.         </div>
  200.     </div>
  201.  
  202.     <!--main contents-->
  203.     <div class="main1">
  204.         <!--grey circles-->
  205.         <div style="position: relative;float:right;height:5%;width: 100%;overflow: hidden;">
  206.              <img src="https://file.garden/aNy90GYmaWI-Okj1/dots1.png" height="100%" style="opacity: 30%;">
  207.              <img src="https://file.garden/aNy90GYmaWI-Okj1/dots1.png" height="100%" style="opacity: 30%;">
  208.              <img src="https://file.garden/aNy90GYmaWI-Okj1/dots1.png" height="100%" style="opacity: 30%;">
  209.         </div>
  210.         <div style="width:10%;height:40%;position: relative;float:left;">
  211.             <!--vertical line decorations on the left-->
  212.             <div style="height:50%;
  213.                width:22%;
  214.                border-right:2px solid rgb(230, 84, 84);
  215.                position: relative;
  216.                float:left;"></div>
  217.             <div style="height:70%;
  218.                width:22%;
  219.                border-right:2px solid rgb(230, 84, 84);
  220.                position: relative;
  221.                float:left;"></div>
  222.             <div style="height:90%;
  223.                width:22%;
  224.                border-right:2px solid rgb(230, 84, 84);
  225.                position: relative;
  226.                float:left;">
  227.             </div>  
  228.         </div>
  229.         <div style="width:90%;height:45%;position:relative;margin-left:10%;border-left:2px solid rgb(230, 84, 84);border-bottom:2px solid rgb(230, 84, 84);border-left-color: 10%;overflow:hidden;padding:5px;box-sizing:border-box;">
  230.             <div style="background-color:white;width:80%;height:60%;position:relative;margin-left:20%;margin-top:1%;border-left:2px solid rgb(230, 84, 84);border-bottom:2px solid rgb(230, 84, 84);border-top:2px solid rgb(230, 84, 84);">
  231.                 <div style="width:20%;height:100%;position: relative;float:left;border-right:2px solid rgb(230, 84, 84);font-size: 2vh;word-break: break-all;">
  232.                     featured page: <br>
  233.                     insert webpage title
  234.                 </div>
  235.             </div>
  236.             <br>
  237.             <div style="height:30%; width:100%;overflow-y:scroll">
  238.                 DD.MM.YY latest update
  239.                 <br>
  240.                 DD.MM.YY second latest update
  241.                 <br>
  242.                 DD.MM.YY third latest update
  243.                 <br>
  244.                 DD.MM.YY latest update
  245.                 <br>
  246.                 DD.MM.YY latest update
  247.                 <br>
  248.             </div>
  249.         </div>
  250.             <!--marquee area-->
  251.         <div style="width:100%;height:5%;background-color:rgba(255, 255, 255, 0.486);box-sizing:border-box;margin-top:10px;">
  252.             <marquee width="75%" height="100%" direction="right">
  253.                 insert quote/disclaimer here
  254.             </marquee>
  255.             <!--grey circles-->
  256.             <img src="https://file.garden/aNy90GYmaWI-Okj1/dots1.png"  width="21%" style="position: relative;float:right;opacity:30%;">
  257.         </div>
  258.        
  259.         <br>
  260.  
  261.         <style>
  262.             .bracket{
  263.             height: 100%;
  264.             position: relative;
  265.             overflow: hidden;
  266.             }
  267.                 .bracket::before,
  268.                 .bracket::after {
  269.                 position: absolute;
  270.                 top: 0;
  271.                 bottom: 0;
  272.                 width: 20px;
  273.                 border: 8px solid #e65454fa;
  274.                 content: "";
  275.                 }
  276.                 .bracket::before {
  277.                 left: 0;
  278.                 border-right-width: 0;
  279.                    
  280.                 }
  281.                 .bracket::after {
  282.                 right: 0;
  283.                 border-left-width: 0;
  284.                 }
  285.             /** white header/title area of bracket**/
  286.             .tab{
  287.             width:90%;
  288.             height: 20%;
  289.             background-color: white;
  290.             clip-path: polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);    
  291.             border-left:  8px #e65454fa solid;
  292.             text-align: left;
  293.             box-sizing: border-box;
  294.             border-top: 8px solid #e65454fa ;
  295.             border-image: linear-gradient(to right, #e65454fa 11%, rgba(0,0,0,0) 11%);
  296.             border-image-slice: 1;
  297.             background-clip: content-box;
  298.             }
  299.             /** gradient of bracket**/
  300.             .innergrad{
  301.             width:100%;
  302.             height:80%;
  303.             background: linear-gradient( #ffe8e830, #efcaca30,#e9bbbb43,#e0a5a56c,#e0a5a5a1,#e48a8abb,#e67070e4);
  304.             padding:15px;
  305.             box-sizing: border-box;
  306.             overflow:scroll;
  307.             }
  308.         </style>
  309.         <div style="display:grid;grid-template-columns: 1fr 1fr;width:100%;height:39%;gap:3%;padding-left:3%;padding-right:3%;box-sizing: border-box;">
  310.             <div class="bracket">
  311.                 <div class="tab">
  312.                     <b>welcome!</b>
  313.                 </div>
  314.                 <div class="innergrad">
  315.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed dui erat. Aenean non velit ipsum. Integer sed orci ut eros dictum dapibus. Maecenas fermentum porta nibh, sed maximus est maximus a. Donec ullamcorper sapien vestibulum, volutpat tellus a, rutrum leo. Nulla in porta enim, sit amet finibus lectus. Phasellus varius imperdiet augue, eu scelerisque urna porttitor non. Suspendisse quis metus quis nulla blandit finibus. Suspendisse pharetra, mi ut cursus sodales, arcu lectus consequat sapien, vel posuere risus arcu in felis. Vivamus cursus ultricies risus eu pellentesque. Fusce quis odio dui. Ut rutrum orci eu dui dignissim feugiat. Sed bibendum, purus sit amet molestie feugiat, risus lectus malesuada lorem, vitae ultrices tortor odio vitae diam.
  316.  
  317.                     Vivamus vitae ullamcorper lectus. Proin luctus hendrerit urna, ac commodo arcu hendrerit at. Vestibulum sit amet orci dui. In hac habitasse platea dictumst. Pellentesque ut ipsum ligula. Nulla erat elit, lobortis eget leo vel, scelerisque ornare erat. Suspendisse nulla risus, venenatis non felis luctus, ullamcorper maximus mauris. Etiam faucibus nisl felis, blandit vestibulum lorem interdum ut. Nulla vestibulum vehicula sagittis.
  318.                 </div>
  319.             </div>
  320.  
  321.             <div class="bracket">
  322.                 <div class="tab">
  323.                     <b>webrings/cbox</b>
  324.                 </div>
  325.                 <div class="innergrad">
  326.                     <!--add content here-->
  327.                 </div>
  328.             </div>
  329.         </div>
  330.     </div>
  331.  
  332.     <!--bottom half of the main contents-->
  333.     <div class="main2">
  334.  
  335.         <!-- left side tab of the main -->
  336.         <div style="position: relative; float:left;height:100%;width:6%;writing-mode: vertical-rl;text-orientation: mixed;border-left:10px dotted rgb(230, 84, 84);border-top:10px dotted rgb(230, 84, 84);margin-top:10px；">
  337.             <h3 style="color:rgb(230, 84, 84);font-size:2em;">
  338.                 about  
  339.             </h3>
  340.         </div>
  341.         <div style="display:grid;grid-template-columns: 70% 30%;width:90%;height:100%;gap:3%;padding-left:3%;padding-right:3%;box-sizing: border-box;">
  342.             <div style="border-top:10px dotted rgb(230, 84, 84);grid-column: 1;height:100%;overflow-y:scroll;">
  343.                 <style>
  344.                     .statusbox{
  345.                     height:fit-content;
  346.                     background-color: white;
  347.                     padding:5px;
  348.                     box-sizing: border-box;
  349.                     clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  350.                     margin-top: 10px;
  351.                     }
  352.                 </style>
  353.                
  354.                 <div class="statusbox" style="width:50%;">
  355.                     <b>name:</b> xxxx
  356.                 </div>
  357.                 <div class="statusbox" style="width:60%;">
  358.                     <b>pronouns:</b> xx/xx
  359.                 </div>
  360.                 <div class="statusbox" style="width:70%;">
  361.                     <b>location:</b> xxxxx
  362.                 </div>
  363.                 <div class="statusbox" style="width:80%">
  364.                     <b>currently watching:</b> xxxxxx xxxxxxx
  365.                 </div>
  366.                 <div class="statusbox" style="width:90%">
  367.                     <b>likes:</b> xxxxxx xxxxxxx xxxxxxx  xxx xxx xxx      
  368.                 </div>
  369.                 <div class="statusbox" style="width:100%">
  370.                     <b>dislikes:</b> xxxxxx xxxxxxx xxxxxxx                
  371.                 </div>
  372.    
  373.             </div>
  374.  
  375.             <div style="grid-column: 2;max-height:100%;">
  376.                 <style>
  377.                     .outlink{
  378.                     width:100%;
  379.                     height:25%;
  380.                     border: 3px solid rgb(230, 84, 84);
  381.                     background-color: white;
  382.                     overflow: hidden;
  383.                     margin-bottom:10px;
  384.                     padding: 5px;
  385.                     box-sizing: border-box;
  386.                     font-size:10px;
  387.                     }
  388.                 </style>
  389.                 <div class="outlink">
  390.                     <img src="https://file.garden/aNy90GYmaWI-Okj1/webdingstyle_17.png" width="100%" height="50%">
  391.                     <hr>
  392.                     <a href="">guestbook</a>
  393.                 </div>
  394.                 <div class="outlink">
  395.                     <img src="https://file.garden/aNy90GYmaWI-Okj1/webdingstyle_17.png" width="100%" height="50%">
  396.                     <hr>
  397.                     <a href="">neocities profile</a>
  398.                 </div>
  399.                     <img src="https://file.garden/aNy90GYmaWI-Okj1/hgbw20_04.png" width="100%;" height="30%" >
  400.                
  401.             </div>
  402.         </div>
  403.     </div>
  404. </div>
  405. coded by <a href="ol1vi4s-corner.neocities.org">ol1vi4s-corner</a> | <a href="https://salvaged.nu/">brushes</a>
  406. </body>
  407. </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!