← Back to Layouts
wip testing / my layout version 2

Name: FriendRewind
Author: FriendRewind
Author: Bloomie
Category: Personal
Created: June 30, 2026
wip 2
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>yourspace</title>
        <style>
            /** 
            YOURSPACE PAGE - made by Nyar @ https://fear.garden
 
            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!
 
            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 nyar@fear.garden and I can see what I can do.
            **/
 
            /** general **/
            body, html {
                margin: 0;
                padding: 0;
            }
            body {
                background: #BADEFC;
                color: #000;
            }
            body, table {font: 14px sans-serif;}
            a {color: #003399;}
            h1, h2, h3 {background: #426bba;}
            h1, h2, h3, th {
                box-sizing: border-box;
                color: #000;
                margin: 0;
                padding: 2px 4px;
            }
            h1, h2 {
                font-size: 16px;
                width: 100%;
            }
            h3 {
                display: inline-block;
                font-size: 15px;
                margin: 2px 3px; 
                padding: 2px 4px;
            }
            img, iframe {max-width: 100%;}
            table {width: 100%;}
            th {
                background: #97beec;
                color: #203670;
                text-align: left;
                width: auto;
            }
 
            /** class **/
            .box {
                background: #fff;
                border: #426bba 2px solid;
                margin: 10px 0;
                padding: 3px;
            }
            .center {text-align: center;}
            .container, .footer, .header {
                background: #fff;
                box-sizing: border-box;
                border-left: #426bba 2px solid;
                border-right: #426bba 2px solid;
                box-sizing: border-box;
                margin: 0 auto;
                width: 850px;
            }
            .container {
                height: 100%;
                padding: 0 1em 1em;
            }
            .columns {
                display: grid;
                grid-column-gap: 1em;
                grid-template-columns: 292px auto;
                width: 100%;
            }
            .curve {border-radius: 7px;}
            .footer, .header {
                background: #d7e4ff;
                box-sizing: border-box;
                font-family: sans-serif;
            }
            .footer {
                border-top: #426bba 2px solid;
                padding: 10px 30px 10px;
            }
            .header {
                border-bottom: #426bba 2px solid;
                padding: 0 30px 10px;
            }
            .header span {
                padding: 0 15px;
            }
            .header .title {
                color: #000;
                font-size: 200% ;
                text-align: left;
                text-decoration: none;
            }
            .profimg {
                float: left;
                padding: 5px 5px 0 0;
            }
 
            /** id **/
            #contact a {
                font-weight: bold;
                text-decoration: none;
            }
            #contact a::before {
                content: url('https://placehold.co/16');
                padding: 0 1em 0 0;
            }
            #interests td, #details td {width: 70%;}
            #url span {font: 12px monospace;}
 
            /** Small screens **/
            @media (max-width: 865px) {
                .container, .navbar, .footer, .header {width: 100%;}
                .columns {grid-template-columns: 100%;}
                .box {margin: 1em 0;}
                .box:last-child {margin: 0;};
            }
        </style>
    </head>
    <body>
        <div class="header">
            <a href="#" class="title">yourspace</a>
            <br><span>cool tagline goes here</span>
        </div>
        <div class="container">
            <div class="columns">
                <!-- Left column, will show first on mobile layouts -->
                <div class="left">
                    <!-- Basic information box -->
                    <div class="box" id="intro">
                        <h1>NAME</h1>
                        <img src="https://placehold.co/125" class="profimg" alt="Profile image" width="125">
                        <p>Silly text!</p>
                        <p>
                            Gender
                            <br>Pro/nouns
                            <br>500 years old
                            <br>Location
                            <br><img src="layout/onlinenow.gif" alt="Online Now!">
                        </p>
                        <p>Last login: 2025-05-19</p>
                    </div>
                    <!-- Contact box-->
                    <!-- 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! -->
                    <div class="box" id="contact">
                        <h2>Contacting NAME</h2>
                        <table>
                            <tr>
                                <td><a href="#">Link 1</a></td>
                                <td><a href="#">Link 2</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">Link 3</a></td>
                                <td><a href="#" >Link 4</a></td>
                            </tr>
                        </table>
                    </div>
                    <!-- Alternate contact box-->
                    <!-- 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!! -->
                    <div class="box" id="contact-alt">
                        <h2>Contacting NAME</h2>
                        <table>
                        <tr>
                            <td><a href="#"><img src="layout/con1.gif" alt="Send Message"></a></td>
                            <td><a href="#"><img src="layout/con2.gif" alt="Forward to Friend"></a></td>
                        </tr>
                        <tr>
                            <td><a href="#"><img src="layout/con3.gif" alt="Add to Friends"></a></td>
                            <td><a href="#"><img src="layout/con4.gif" alt="Add to Favourites"></a></td>
                        </tr>
                        <tr>
                            <td><a href="#"><img src="layout/con5.gif" alt="Add to Group"></a></td>
                            <td><a href="#"><img src="layout/con6.gif" alt="Block User"></a></td>
                        </tr>
                    </table>
                    </div>
                    <!-- Interests box, feel free to change the headers and whatnot! -->
                    <div class="box" id="interests">
                        <h2>NAME's Interests</h2>
                        <table>
                            <tr>
                                <th>General</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Music</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Movies</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Television</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Anime/Manga</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Games</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Heroes</th>
                                <td>Stuff</td>
                            </tr>
                        </table>
                    </div>
                    <!-- Details box, feel free to change the headers and whatnot!-->
                    <div class="box" id="details">
                        <h2>NAME's Details</h2>
                        <table>
                            <tr>
                                <th>Here for...</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Weight</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Height</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Orientation</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Hometown</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Ethinicity</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Education</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Occupation</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td>Stuff</td>
                            </tr>
                            <tr>
                                <th>Member since</th>
                                <td>Stuff</td>
                            </tr>
                        </table>
                    </div>
                    <!-- I usually just put a cool Youtube video here-->
                    <div class="box" id="Music">
                        <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>
                    </div>
                </div>
                <!-- Righj column, will show second on mobile layouts -->
                <div class="right">         
                    <!-- 1st blurb box -->
                    <div class="box" id="blurbs">
                        <h2>NAME's Blurbs</h2>
                        <h3>About me:</h3>
                        <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>
                        <h3>Another cool header:</h3>
                        <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>
                    </div>
                    <!-- 2nd blurb box -->
                    <div class="box" id="blurbs2">
                        <h2>NAME's 2nd box</h2>
                        <p>Put whatever you want here! Or you can remove it. Or add another box. Go nuts.</p>
                        <p>More boxes can be added by adding more divs with the "box" class.</p>
                    </div>
                </div>  
            </div>
        </div>
        <!-- Footer, I usually put my site button or whatever here -->
        <div class="footer center">
            <!-- 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. -->
            <a href="https://fear.garden">Layout by fear.garden</a>
        </div>
    </body>
</html></style>