this old web design layout i had for a while

Tags: old web
Description:

includes music early 2000s vibes and clippy in the bottom right corner credit is optional
Code:

<!-- (c) Layout created by sh☆wn the fool (https://layouts.spacehey.com/layout?id=99199) -->

<style>


body{
background-image: url("https://i.postimg.cc/VLhPm2wT/swarm.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}


main {
       background-color: rgba(0, 0, 0, 0.0);
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
     background-color: #f79700;
background: linear-gradient(360deg, rgba(140, 226, 123,1) 0%, rgba(4, 68, 132,1) 58%);
     color: white;
}

/* edit profile / user is your friend */
.profile-info {
    background-color: #ff0099;
    background-image: linear-gradient(360deg, rgba(199, 0, 0,1) 0%, rgba(221, 229, 0,1) 58%);
    border: 3.5px outset rgba(0, 0, 0, );
    border-radius: 6px;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
     background-color: #89A1BA;
     border: 2px solid black;
     border-radius: 3px;
     color: black;
}

/* friends comments - friend's name */
.comments-table td:first-child{
    background: rgb(247,151,0);
background-image: linear-gradient(360deg, rgba(199, 0, 0, 0,1) 0%, rgba(221, 229, 0,1) 58%);
}

/*friends comments- comment */
.comments-table td {
     background-image: linear-gradient(360deg, rgba(199, 0, 0,1) 0%, rgba(221, 229, 0,1) 58%);
}

table.comments-table {
   border: 3px solid black;
   border-radius: 6px;
background-image: linear-gradient(360deg, rgba(140, 226, 123,1) 0%, rgba(4, 68, 132,1) 58%);
}

/* interests and links */
.profile .table-section {
    background-color: rgba(0, 0, 0, 0.7);
    color: black;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
}

/* headings on the right */
.profile .blurbs .heading, .profile .friends .heading {
     background: rgb(247,151,0);
background: linear-gradient(360deg, rgba(199, 0, 0,1) 0%, rgba(221, 229, 0,1) 58%);
     color: black;
}

/* mood and view my */
.profile .mood{
    padding-top: 5px;
    padding-left: 5px;
    background-color: #ff0099;
     color: rgba(0, 0, 0,1);
    background-image: linear-gradient(360deg, rgba(199, 0, 0,1) 0%, rgba(221, 229, 0,1) 58%);
     border-radius: 6px;
     border-style: solid;
     border-width: 1px;
     border: 3.5px solid rgba(0, 0, 0);
     margin-bottom: 20px;
}

/* blog entries */
.blog-preview{
     background-color: #ff0099;
     background-image: linear-gradient(360deg, rgba(140, 226, 123,1) 0%, rgba(4, 68, 132,1) 58%);
    color: rgba(255, 255, 255,1);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    padding: 8px;
}

nav .links {
     background-color: #f79700;
background: linear-gradient(360deg, rgba(140, 226, 123,1) 0%, rgba(4, 68, 132,1) 58%);
     color: black;
     border: 3px solid rgba(0, 0, 0);
     border-radius: 8px;    
}

nav .top {
     background-color: #f79700;
background: url(https://i.postimg.cc/ydzTd0PP/73d127d73283cabe2ba9bdc9f022a148.jpg);
background-repeat: no-repeat;
background-size: cover;
     color: black;
     border: 3px outset rgba(0, 0, 0);
     border-radius: 8px;      
}

footer {
     background-image: url(https://i.postimg.cc/15XWgcWb/8b99ddfc-b746-4709-94b8-df78fb40b546.jpg);
     color: black;
    border: 3px solid rgba(0, 0, 0);
    border-radius: 8px;
}

.blurbs {
     background-color: #f79700;
     background-image: linear-gradient(360deg, rgba(131, 148, 165,1) 0%, rgba(137, 161, 186,1) 58%);
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
}

.profile .contact {
     background-color: #89A1BA;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
}

.profile .friends {
     background-color: #89A1BA;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    margin-bottom: 10px
}

/* profile pic, details, etc box*/
.general-about {
    padding: 10px 10px 14px 10px;
    display: flex;
    height: 400px;
    padding: 10px 10px 14px 10px;
    display: flex;
    height: 180px;
    color: black;
     background-color: #89A1BA;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    margin-bottom: 10px;
    margin-top: 0px;
}

span[itemprop="name"] h1 {
    background: rgb(247,151,0);
background: linear-gradient(360deg, rgba(140, 226, 123,1) 0%, rgba(4, 68, 132,1) 58%);
    color: white;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    margin: 0px 0px 0px 0px;
    padding: 2px;
}

:root {
    --light-gray: #f2f0f0;
    --gray: #e3e3e3;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #1D4ED8;
    --darker-blue: black;
    --lighter-blue: #60A5FA;
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --red: #FF0000;
    --dark-orange: orange;
    --light-orange: orange;
    --even-lighter-orange:  darkseagreen;
    --strange-yellow: #dbae2e;
    --green: #ff3300;
    --light-green: #ff6600;
    --medium-green: #ff5c33;
    --dark-green: #ff5c33;
    --carrot: #ED9121
    accent-color: #ff3300;
    accent-color: var(--logo-blue);
}

profile .blurbs .section h4 {
    color: black !important;
}

/* friend names */
.profile .friends .person p {
    color: blue;
    text-decoration: underline;
}

/* friend count colour*/
.count {
   color: blue;
   text-decoration: underline;
}

/* hide spacehey url */
.profile .url-info {
    display: none;
}

</style>


<style>
.online {content:url('http://dl7.glitter-graphics.net/pub/1283/1283807rwfyhqkfth.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>



<style>
@import url('https://fonts.cdnfonts.com/css/microsoft-sans-serif');
body 
{
    font-family: 'Microsoft Sans Serif', sans-serif !important;     
    -webkit-font-smoothing: none !important;                               
}
</style>


<div style="max-height: 300px; position: fixed; right: 1px; bottom: 0px; z-index: 99;">
<img src="https://i.postimg.cc/3NgMBySG/map-animation.gif" height="200"/></div>


<iframe width="0" height="0" src="https://www.youtube.com/embed/JShYb7rd0vc?si=agDJAhyRukBfdkoZ//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>


<style>
.logo {
  content: url(https://psyclonecities.neocities.org/assets/xphey.png)
}
</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 1 of 1 comments ( View all | Add Comment )
RAIN o_O
1709495438
using!! ^_^
Report Comment