API tools faq
paste
Advertisement
Guest User

fear.garden :: Yourspace HTML/CSS

a guest
May 21st, 2025
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.99 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">
  6.         <title>yourspace</title>
  7.         <style>
  8.             /**
  9.             YOURSPACE PAGE - made by Nyar @ https://fear.garden
  10.  
  11.             I originally made this for personal use in 2019, and I've been messing around with it ever since. Quality is a bit meh, but hey, it works!
  12.  
  13.             Feel free to customise to your heart's content -- however, you will need basic HTML and CSS knowledge for this. Since this is just a code I was gonna waste I am not really offering support of any kind, but if you're super stuck feel free to email me at [email protected] and I can see what I can do.
  14.             **/
  15.  
  16.             /** general **/
  17.             body, html {
  18.                 margin: 0;
  19.                 padding: 0;
  20.             }
  21.             body {
  22.                 background: #BADEFC;
  23.                 color: #000;
  24.             }
  25.             body, table {font: 14px sans-serif;}
  26.             a {color: #003399;}
  27.             h1, h2, h3 {background: #426bba;}
  28.             h1, h2, h3, th {
  29.                 box-sizing: border-box;
  30.                 color: #000;
  31.                 margin: 0;
  32.                 padding: 2px 4px;
  33.             }
  34.             h1, h2 {
  35.                 font-size: 16px;
  36.                 width: 100%;
  37.             }
  38.             h3 {
  39.                 display: inline-block;
  40.                 font-size: 15px;
  41.                 margin: 2px 3px;
  42.                 padding: 2px 4px;
  43.             }
  44.             img, iframe {max-width: 100%;}
  45.             table {width: 100%;}
  46.             th {
  47.                 background: #97beec;
  48.                 color: #203670;
  49.                 text-align: left;
  50.                 width: auto;
  51.             }
  52.  
  53.             /** class **/
  54.             .box {
  55.                 background: #fff;
  56.                 border: #426bba 2px solid;
  57.                 margin: 10px 0;
  58.                 padding: 3px;
  59.             }
  60.             .center {text-align: center;}
  61.             .container, .footer, .header {
  62.                 background: #fff;
  63.                 box-sizing: border-box;
  64.                 border-left: #426bba 2px solid;
  65.                 border-right: #426bba 2px solid;
  66.                 box-sizing: border-box;
  67.                 margin: 0 auto;
  68.                 width: 850px;
  69.             }
  70.             .container {
  71.                 height: 100%;
  72.                 padding: 0 1em 1em;
  73.             }
  74.             .columns {
  75.                 display: grid;
  76.                 grid-column-gap: 1em;
  77.                 grid-template-columns: 292px auto;
  78.                 width: 100%;
  79.             }
  80.             .curve {border-radius: 7px;}
  81.             .footer, .header {
  82.                 background: #d7e4ff;
  83.                 box-sizing: border-box;
  84.                 font-family: sans-serif;
  85.             }
  86.             .footer {
  87.                 border-top: #426bba 2px solid;
  88.                 padding: 10px 30px 10px;
  89.             }
  90.             .header {
  91.                 border-bottom: #426bba 2px solid;
  92.                 padding: 0 30px 10px;
  93.             }
  94.             .header span {
  95.                 padding: 0 15px;
  96.             }
  97.             .header .title {
  98.                 color: #000;
  99.                 font-size: 200% ;
  100.                 text-align: left;
  101.                 text-decoration: none;
  102.             }
  103.             .profimg {
  104.                 float: left;
  105.                 padding: 5px 5px 0 0;
  106.             }
  107.  
  108.             /** id **/
  109.             #contact a {
  110.                 font-weight: bold;
  111.                 text-decoration: none;
  112.             }
  113.             #contact a::before {
  114.                 content: url('https://placehold.co/16');
  115.                 padding: 0 1em 0 0;
  116.             }
  117.             #interests td, #details td {width: 70%;}
  118.             #url span {font: 12px monospace;}
  119.  
  120.             /** Small screens **/
  121.             @media (max-width: 865px) {
  122.                 .container, .navbar, .footer, .header {width: 100%;}
  123.                 .columns {grid-template-columns: 100%;}
  124.                 .box {margin: 1em 0;}
  125.                 .box:last-child {margin: 0;};
  126.             }
  127.         </style>
  128.     </head>
  129.     <body>
  130.         <div class="header">
  131.             <a href="#" class="title">yourspace</a>
  132.             <br><span>cool tagline goes here</span>
  133.         </div>
  134.         <div class="container">
  135.             <div class="columns">
  136.                 <!-- Left column, will show first on mobile layouts -->
  137.                 <div class="left">
  138.                     <!-- Basic information box -->
  139.                     <div class="box" id="intro">
  140.                         <h1>NAME</h1>
  141.                         <img src="https://placehold.co/125" class="profimg" alt="Profile image" width="125">
  142.                         <p>Silly text!</p>
  143.                         <p>
  144.                             Gender
  145.                             <br>Pro/nouns
  146.                             <br>500 years old
  147.                             <br>Location
  148.                             <br><img src="layout/onlinenow.gif" alt="Online Now!">
  149.                         </p>
  150.                         <p>Last login: 2025-05-19</p>
  151.                     </div>
  152.                     <!-- Contact box-->
  153.                     <!-- If you want to change the icon before links in the custom link box, in the CSS stylesheet change the image URL under the "#contact a::before" section! -->
  154.                     <div class="box" id="contact">
  155.                         <h2>Contacting NAME</h2>
  156.                         <table>
  157.                             <tr>
  158.                                 <td><a href="#">Link 1</a></td>
  159.                                 <td><a href="#">Link 2</a></td>
  160.                             </tr>
  161.                             <tr>
  162.                                 <td><a href="#">Link 3</a></td>
  163.                                 <td><a href="#" >Link 4</a></td>
  164.                             </tr>
  165.                         </table>
  166.                     </div>
  167.                     <!-- Alternate contact box-->
  168.                     <!-- If you plan to use this one, please make sure to upload the images to your site! The image links are relative to the directory!! -->
  169.                     <div class="box" id="contact-alt">
  170.                         <h2>Contacting NAME</h2>
  171.                         <table>
  172.                         <tr>
  173.                             <td><a href="#"><img src="layout/con1.gif" alt="Send Message"></a></td>
  174.                             <td><a href="#"><img src="layout/con2.gif" alt="Forward to Friend"></a></td>
  175.                         </tr>
  176.                         <tr>
  177.                             <td><a href="#"><img src="layout/con3.gif" alt="Add to Friends"></a></td>
  178.                             <td><a href="#"><img src="layout/con4.gif" alt="Add to Favourites"></a></td>
  179.                         </tr>
  180.                         <tr>
  181.                             <td><a href="#"><img src="layout/con5.gif" alt="Add to Group"></a></td>
  182.                             <td><a href="#"><img src="layout/con6.gif" alt="Block User"></a></td>
  183.                         </tr>
  184.                     </table>
  185.                     </div>
  186.                     <!-- Interests box, feel free to change the headers and whatnot! -->
  187.                     <div class="box" id="interests">
  188.                         <h2>NAME's Interests</h2>
  189.                         <table>
  190.                             <tr>
  191.                                 <th>General</th>
  192.                                 <td>Stuff</td>
  193.                             </tr>
  194.                             <tr>
  195.                                 <th>Music</th>
  196.                                 <td>Stuff</td>
  197.                             </tr>
  198.                             <tr>
  199.                                 <th>Movies</th>
  200.                                 <td>Stuff</td>
  201.                             </tr>
  202.                             <tr>
  203.                                 <th>Television</th>
  204.                                 <td>Stuff</td>
  205.                             </tr>
  206.                             <tr>
  207.                                 <th>Anime/Manga</th>
  208.                                 <td>Stuff</td>
  209.                             </tr>
  210.                             <tr>
  211.                                 <th>Games</th>
  212.                                 <td>Stuff</td>
  213.                             </tr>
  214.                             <tr>
  215.                                 <th>Heroes</th>
  216.                                 <td>Stuff</td>
  217.                             </tr>
  218.                         </table>
  219.                     </div>
  220.                     <!-- Details box, feel free to change the headers and whatnot!-->
  221.                     <div class="box" id="details">
  222.                         <h2>NAME's Details</h2>
  223.                         <table>
  224.                             <tr>
  225.                                 <th>Here for...</th>
  226.                                 <td>Stuff</td>
  227.                             </tr>
  228.                             <tr>
  229.                                 <th>Weight</th>
  230.                                 <td>Stuff</td>
  231.                             </tr>
  232.                             <tr>
  233.                                 <th>Height</th>
  234.                                 <td>Stuff</td>
  235.                             </tr>
  236.                             <tr>
  237.                                 <th>Orientation</th>
  238.                                 <td>Stuff</td>
  239.                             </tr>
  240.                             <tr>
  241.                                 <th>Hometown</th>
  242.                                 <td>Stuff</td>
  243.                             </tr>
  244.                             <tr>
  245.                                 <th>Ethinicity</th>
  246.                                 <td>Stuff</td>
  247.                             </tr>
  248.                             <tr>
  249.                                 <th>Education</th>
  250.                                 <td>Stuff</td>
  251.                             </tr>
  252.                             <tr>
  253.                                 <th>Occupation</th>
  254.                                 <td>Stuff</td>
  255.                             </tr>
  256.                             <tr>
  257.                                 <th>Status</th>
  258.                                 <td>Stuff</td>
  259.                             </tr>
  260.                             <tr>
  261.                                 <th>Member since</th>
  262.                                 <td>Stuff</td>
  263.                             </tr>
  264.                         </table>
  265.                     </div>
  266.                     <!-- I usually just put a cool Youtube video here-->
  267.                     <div class="box" id="Music">
  268.                         <iframe width="560" height="160" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  269.                     </div>
  270.                 </div>
  271.                 <!-- Righj column, will show second on mobile layouts -->
  272.                 <div class="right">        
  273.                     <!-- 1st blurb box -->
  274.                     <div class="box" id="blurbs">
  275.                         <h2>NAME's Blurbs</h2>
  276.                         <h3>About me:</h3>
  277.                         <p>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.</p>
  278.                         <h3>Another cool header:</h3>
  279.                         <p>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.</p>
  280.                     </div>
  281.                     <!-- 2nd blurb box -->
  282.                     <div class="box" id="blurbs2">
  283.                         <h2>NAME's 2nd box</h2>
  284.                         <p>Put whatever you want here! Or you can remove it. Or add another box. Go nuts.</p>
  285.                         <p>More boxes can be added by adding more divs with the "box" class.</p>
  286.                     </div>
  287.                 </div> 
  288.             </div>
  289.         </div>
  290.         <!-- Footer, I usually put my site button or whatever here -->
  291.         <div class="footer center">
  292.             <!-- You don't have to leave the credit in, as long as you leave it in the CSS or something so other people can find it that's cool with me. -->
  293.             <a href="https://fear.garden">Layout by fear.garden</a>
  294.         </div>
  295.     </body>
  296. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!