API tools faq
paste
Guest User

Untitled

a guest
Dec 11th, 2025
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.93 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.0">
  6.     <title>Insert webpage title here</title>
  7.     <style>
  8.         @font-face {
  9.             font-family: header;
  10.             src: url('https://file.garden/aNy90GYmaWI-Okj1/ROMANTIC.TTF');
  11.         }
  12.         body{
  13.         font-family:Georgia, 'Times New Roman', Times, serif;
  14.         font-size: 16px;
  15.         background-color: #334185;
  16.         }
  17.         a{
  18.         color:white;
  19.         letter-spacing: 4px;
  20.         -o-transition:.5s;
  21.         -ms-transition:.5s;
  22.         -moz-transition:.5s;
  23.         -webkit-transition:.5s;
  24.         transition:.5s;
  25.         }
  26.         a:visited{
  27.         color: #d5cfb9;
  28.         }
  29.         a:hover{
  30.         letter-spacing: 8px;  
  31.         }
  32.         b{
  33.         color:#334185;
  34.         font-size: 16px;
  35.         letter-spacing: normal;
  36.         }
  37.         button{
  38.         background-color:#334185;
  39.         width:90px;
  40.         height:35px;
  41.         border:none;
  42.         font-family: inherit;
  43.         margin-top: 5px;
  44.         margin-bottom: 5px;
  45.         }
  46.         button, a{
  47.         letter-spacing: normal;
  48.         }
  49.         button, a:hover{
  50.         letter-spacing:4px;
  51.         }
  52.         .grid{
  53.         display:grid;
  54.         grid-template-columns: 20% 65% 15%;
  55.         grid-template-rows: 3% 20% 77%;
  56.         max-width: 700px;
  57.         height: 1000px;
  58.         margin: auto;
  59.         }
  60.             .headertop{
  61.             grid-row: 1;
  62.             grid-column: 2;
  63.             background-color: #747c9d;
  64.             padding:5px;
  65.             box-sizing: border-box;
  66.             }
  67.             .sidebar{
  68.             grid-row: 2;
  69.             grid-column: 1;
  70.             width: 100%;
  71.             height: 100%;
  72.             background-color: #747c9d;
  73.             padding:10px;
  74.             box-sizing: border-box;
  75.             overflow: auto;
  76.             }
  77.             .header{
  78.             grid-row: 2;
  79.             grid-column: 2;
  80.             width: 100%;
  81.             height: 100%;
  82.             background-color: #ede7d3;
  83.             }
  84.             .websitetitle{
  85.             grid-row-start: 1;
  86.             grid-row-end: 2;
  87.             grid-column: 3;
  88.             font-family: 'header';
  89.             color:white;
  90.             writing-mode: vertical-rl;
  91.             text-orientation: mixed;
  92.             font-size: 100px;
  93.             letter-spacing: 4px;
  94.             }
  95.             .main{
  96.             grid-row: 3;
  97.             grid-column: 2;
  98.             width: 100%;
  99.             height:100%;
  100.             background-color: #ede7d3;
  101.             padding: 15px;
  102.             box-sizing: border-box;
  103.             }
  104.         @media only screen and (max-width: 700px){
  105.         .grid{
  106.         grid-template-rows: 3% 13% 12% 77%;
  107.         grid-template-columns: 5fr 1fr;  
  108.         }
  109.             .headertop{
  110.             grid-row:1;
  111.             grid-column: 1;
  112.             }
  113.             .sidebar{
  114.             grid-row: 3;
  115.             grid-column: 1;
  116.             }
  117.             .header{
  118.             grid-row:2;
  119.             grid-column:1;
  120.             overflow: hidden;
  121.             }
  122.             .websitetitle{
  123.             grid-row-start:1;
  124.             grid-row-end:5;
  125.             grid-column: 2;
  126.             }
  127.             .main{
  128.             grid-row:4;
  129.             grid-column:1;
  130.             }
  131.         }
  132.     </style>
  133. </head>
  134. <body>
  135.     <div class="grid">
  136.         <div class="sidebar">
  137.             <a href="https://neocities.org/site/ol1vi4s-corner">home</a> <br>
  138.             <a href="https://neocities.org/site/ol1vi4s-corner">about</a> <br>
  139.             <a href="https://neocities.org/site/ol1vi4s-corner">blog</a> <br>
  140.             <a href="https://neocities.org/site/ol1vi4s-corner">archive</a> <br>
  141.         </div>
  142.        
  143.         <div class="headertop">
  144.             <I>instert quote here</I>
  145.         </div>
  146.        
  147.        
  148.         <div class="header">
  149.             <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" width="100%">
  150.         </div>
  151.         <div class="main">
  152.             <style>
  153.                 <!--this is the for the content within the main column space-->
  154.                 .grid2{
  155.                 display:grid;
  156.                 grid-template-rows: 1fr 1fr;
  157.                 grid-template-columns: 1fr 1fr;
  158.                 width: 100%;
  159.                 height:36%;
  160.                 gap: 10px;
  161.                 overflow: hidden;
  162.                 }
  163.                     .updates{
  164.                     grid-row: 1;
  165.                     grid-column: 1;
  166.                     width:100%;
  167.                     height:100%;
  168.                     overflow:hidden;
  169.                     font-size: 20px;
  170.                     letter-spacing: 3px;
  171.                     border-top: #747c9d 2px solid;
  172.                     }
  173.                     .aff{
  174.                     grid-row: 1;
  175.                     grid-column: 2;
  176.                     width:100%;
  177.                     height:100%;
  178.                     overflow:hidden;
  179.                     font-size: 20px;
  180.                     letter-spacing: 3px;
  181.                     border-top: #747c9d 2px solid;
  182.                     }
  183.                     .about{
  184.                     grid-row:2;
  185.                     grid-column-start:1;
  186.                     grid-column-end:3;
  187.                     border-top: #747c9d 2px solid;
  188.                     }
  189.                 .post{
  190.                 width:100%;
  191.                 height:55%;
  192.                 overflow:auto;
  193.                 border-top: #747c9d 5px solid;
  194.                 }
  195.                 .post a{
  196.                 color:#334185;
  197.                 }
  198.                 @media only screen and (max-width: 500px) {
  199.                 .grid2{
  200.                 height:40%;
  201.                 grid-template-rows: 1fr 1fr 1fr;
  202.                 grid-template-columns: 1fr;
  203.                 }
  204.                     .updates{
  205.                     grid-row:1;
  206.                     grid-column:1;
  207.                     }
  208.                     .aff{
  209.                     grid-row: 2;
  210.                     grid-column: 1;
  211.                     }
  212.                     .about{
  213.                     grid-row:3;
  214.                     grid-column: 1;
  215.                     }
  216.                     .websitetitle{
  217.                     font-size:25px;
  218.                     }
  219.                 .post{
  220.                 height:50%;
  221.                 }
  222.                 }
  223.             </style>
  224.             <div class="grid2">
  225.                 <div class="updates">
  226.                     <span style="font-size: 20px;letter-spacing: 3px;">updates</span>  
  227.                     <div style="width:100%;height:80%;background-color: #c3c6d4;border-top:#747c9d 5px solid;padding:5px;box-sizing: border-box;overflow: scroll;">
  228.                         <b>dd/mm/yy:</b> <br>
  229.                         <b>dd/mm/yy:</b> <br>
  230.                         <b>dd/mm/yy:</b> <br>
  231.                         <b>dd/mm/yy:</b> <br>
  232.                         <b>dd/mm/yy:</b> <br>
  233.                     </div>
  234.                 </div>
  235.                 <div class="aff">
  236.                     <span style="font-size: 20px;letter-spacing: 3px;">affiliates</span>  
  237.                     <div style="width:100%;height:80%;background-color: #c3c6d4;border-top:#747c9d 5px solid;padding:5px;box-sizing:border-box;overflow: scroll;text-align: center;">
  238.                         <button><a href="https://neocities.org/site/ol1vi4s-corner">link 1</a></button>
  239.                         <button><a href="https://neocities.org/site/ol1vi4s-corner">link 2</a></button>
  240.                         <button><a href="https://neocities.org/site/ol1vi4s-corner">link 3</a></button>
  241.                         <button><a href="https://neocities.org/site/ol1vi4s-corner">link 4</a></button>
  242.                         <button><a href="https://neocities.org/site/ol1vi4s-corner">link 5</a></button>
  243.                         <button><a href="https://neocities.org/site/ol1vi4s-corner">link 6</a></button>
  244.                     </div>
  245.                 </div>
  246.                 <div class="about">
  247.                     <span style="font-size: 20px;letter-spacing: 3px;">about me</span>  
  248.                         <div style="width:100%;height:100%;background-color: #c3c6d4;border-top:#747c9d 5px solid;padding:5px;box-sizing: border-box;overflow: scroll;">
  249.                             <b>name:</b> <br>
  250.                             <b>age:</b> <br>
  251.                             <b>likes:</b> <br>
  252.                             <b>dislikes:</b>
  253.                         </div>
  254.                 </div>
  255.             </div>
  256.             <br>
  257.             <span style="font-family: 'header';font-size: 20px;letter-spacing: 3px;color: #747c9d;">dd/mm/yy @ xx:xx am</span>
  258.             <div class="post">
  259.                 <a href="https://neocities.org/site/ol1vi4s-corner">link </a> <b>bold</b> <i>italic</i>
  260.                 <br><br>
  261.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat est at lectus vestibulum molestie.
  262.                 Integer sed pellentesque purus. Donec dignissim feugiat nisi nec imperdiet. Maecenas eget maximus justo, sit amet elementum ipsum.
  263.                 Donec non mattis ligula. Nunc hendrerit urna ut velit condimentum, et imperdiet turpis euismod. Morbi fringilla dapibus arcu non pulvinar.
  264.                 Phasellus vel urna a massa molestie dignissim. Donec ullamcorper sem nec quam pellentesque efficitur. Pellentesque rutrum porttitor facilisis.
  265.                 Etiam cursus sem id enim porta sodales. Nam dapibus luctus tempor. Quisque euismod ipsum vitae diam vestibulum, eget elementum velit placerat.
  266.                 Morbi vitae eros velit. Nullam dapibus gravida nisi et fermentum.
  267.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat est at lectus vestibulum molestie.
  268.                 Integer sed pellentesque purus. Donec dignissim feugiat nisi nec imperdiet. Maecenas eget maximus justo, sit amet elementum ipsum.
  269.                 Donec non mattis ligula. Nunc hendrerit urna ut velit condimentum, et imperdiet turpis euismod. Morbi fringilla dapibus arcu non pulvinar.
  270.                 Phasellus vel urna a massa molestie dignissim. Donec ullamcorper sem nec quam pellentesque efficitur. Pellentesque rutrum porttitor facilisis.
  271.                 Etiam cursus sem id enim porta sodales. Nam dapibus luctus tempor. Quisque euismod ipsum vitae diam vestibulum, eget elementum velit placerat.
  272.                 Morbi vitae eros velit. Nullam dapibus gravida nisi et fermentum.
  273.                 <br><br>
  274.  
  275.             </div>
  276.             <i style="font-size:14px">layout by <a href="https://neocities.org/site/ol1vi4s-corner" style="color:#334185">ol1vi4s-corner</a> do not remove credits!</i>
  277.  
  278.         </div>                
  279.  
  280.         <div class="websitetitle">
  281.             websitename.neocities.org
  282.         </div>
  283.     </div>
  284. </body>
  285. </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!