Windows 98 by eu.0506

Tags:
Description:

I think I did a pretty good job. Maybe I'll change it in the future or maybe I won't, it depends on the mood :P. Enjoy it! Based on https://layouts.spacehey.com/layout?id=4188.
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by eu.0506 (https://layouts.spacehey.com/layout?id=102843) -->

/*© Layout created by eu.0506*/

<style>

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.cdnfonts.com/css/sf-pixelate');
@import url('https://fonts.cdnfonts.com/css/sitaoy');

body {
    background-image: url(https://i.pinimg.com/originals/36/c7/da/36c7da849f8cfaad93950d76c9a0007d.jpg);
    background-attachment: fixed;
    font-family: Libre Franklin;
    font-size: 17px;
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: whitesmoke;
}

::-webkit-scrollbar-thumb {
    background: #bec7c9;
    border: 2px groove;
}

::-webkit-scrollbar-thumb:hover {
    background: #b5bdbf;
}

p {
    color: #000;
    font-weight: 500;
}

h1 {
    font-size: 15px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 12px;
    color: whitesmoke;
    font-family: "Press Start 2P", system-ui !important;
    font-weight: 100;
}

.top {
    color: white;
    background-color: blue !important;
}

.top .center {
  margin-top: 2.2%;
  font-family: "Press Start 2P", system-ui;
  font-weight: 100;
  font-size: 10px;
}

.search-wrapper{
    font-family: "Press Start 2P", system-ui;
    font-weight: 100;
    font-size: 8px;
}

.top .right {
  margin-top: 2.3%;
  font-family: "Press Start 2P", system-ui;
  font-weight: 100;
  font-size: 8px;
}

.logout-btn{
  font-family: "Press Start 2P", system-ui;
  font-weight: 100;
  font-size: 8px;
}

nav .links {
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
    padding: 3px 0 3px 0;
    background-color: whitesmoke;
}

nav .links a{
    font-family: 'Sitaoy', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    padding: 4px 0px 4px 0px;
    text-shadow: none;
}

main {
    background: transparent;
    margin: 10px auto 10px auto;
}

.col.w-40.left h1{
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
    background-color: blue;
    background-image: url(https://media.canva.com/1/image-resize/1/843_273_100_PNG_F/czM6Ly9tZWRpYS1wcml2YXRlLmNhbnZhLmNvbS9KMDZSZy9NQUdCREhKMDZSZy8xL3AucG5n?osig=AAAAAAAAAAAAAAAAAAAAAGyNJN6Ugzz-rOGYdbRkV-Toe4kxc1q4Lh9dl4BR8p47&exp=1711878589&x-canva-quality=screen_2x&csig=AAAAAAAAAAAAAAAAAAAAALgH8cV8jzKTnJNB8SZFYEKERDUp2etc2dq-Yx382N8h);
    background-size: 70px !important;
    background-repeat: no-repeat;
    background-position: right;
    padding: 3px;
    padding-left: 6px;
    padding-top: 6px;
    margin: 0;
    display: flex;
}

.col.w-40.left .general-about p{
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    padding: 4px;
}

.general-about {
    height: 178px;
    border-style: groove;
    border-width: 0px 2px 2px 2px;
    border-color: #fff;
    background: whitesmoke;
    font-family: 'Sitaoy', sans-serif;
    display: flex;
}

.general-about .profile-pic img {
    margin: 6px;
    margin-top: 7px !important;
    height: 200px;
    border: 2px;
    border-color: #fff;
    border-style: groove;
}

.general-about .details {
    margin-top: 15px;
}

.mood {
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
    background: whitesmoke;
    margin: 10px auto;
}

.mood:before {
    display: block;
    padding: 5px;
    padding-bottom: 3px;
    margin: 1px;
    border-bottom-style: groove;
    background-color: blue;
    background-image: url(https://media.canva.com/1/image-resize/1/843_273_100_PNG_F/czM6Ly9tZWRpYS1wcml2YXRlLmNhbnZhLmNvbS9KMDZSZy9NQUdCREhKMDZSZy8xL3AucG5n?osig=AAAAAAAAAAAAAAAAAAAAAGyNJN6Ugzz-rOGYdbRkV-Toe4kxc1q4Lh9dl4BR8p47&exp=1711878589&x-canva-quality=screen_2x&csig=AAAAAAAAAAAAAAAAAAAAALgH8cV8jzKTnJNB8SZFYEKERDUp2etc2dq-Yx382N8h);
    background-size: 62px !important;
    background-repeat: no-repeat;
    background-position: right;
    font-size: 12px;
    color: whitesmoke;
    font-family: "Press Start 2P", system-ui;
    font-weight: 100;
    content: "Mood & stuff";
}

.mood p{
  font-family: 'Sitaoy', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    padding: 5px 5px 0px 5px;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    border-bottom-style: groove;
    background-color: blue;
    background-image: url(https://media.canva.com/1/image-resize/1/843_273_100_PNG_F/czM6Ly9tZWRpYS1wcml2YXRlLmNhbnZhLmNvbS9KMDZSZy9NQUdCREhKMDZSZy8xL3AucG5n?osig=AAAAAAAAAAAAAAAAAAAAAGyNJN6Ugzz-rOGYdbRkV-Toe4kxc1q4Lh9dl4BR8p47&exp=1711878589&x-canva-quality=screen_2x&csig=AAAAAAAAAAAAAAAAAAAAALgH8cV8jzKTnJNB8SZFYEKERDUp2etc2dq-Yx382N8h);
    background-size: 62px !important;
    background-repeat: no-repeat;
    background-position: right;
    padding: 5px;
    padding-bottom: 2px;
    margin: 1px;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
    background-color: whitesmoke;
}

.contact {
    background-color: whitesmoke;
    font-family: 'Sitaoy', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.url-info {
  background-color: whitesmoke;
  font-family: 'Sitaoy', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #000;
}

.details-table {
    background: #fff;
}

.table-section {
    background: #fff;
}

.details-table p {
    font-family: 'Sitaoy', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #000;
}

td{
  background: whitesmoke !important;
  font-size: 16px;
}

.profile-info {
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
    background: whitesmoke;
}

.blog-preview {
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
    background: whitesmoke;
    font-family: 'Sitaoy', sans-serif;
    font-size: 13px;
    font-weight: 500px;
}

.blog-preview h4 {
    border-bottom-style: groove;
    background-color: blue;
    background-image: url(https://media.canva.com/1/image-resize/1/843_273_100_PNG_F/czM6Ly9tZWRpYS1wcml2YXRlLmNhbnZhLmNvbS9KMDZSZy9NQUdCREhKMDZSZy8xL3AucG5n?osig=AAAAAAAAAAAAAAAAAAAAAGyNJN6Ugzz-rOGYdbRkV-Toe4kxc1q4Lh9dl4BR8p47&exp=1711878589&x-canva-quality=screen_2x&csig=AAAAAAAAAAAAAAAAAAAAALgH8cV8jzKTnJNB8SZFYEKERDUp2etc2dq-Yx382N8h);
    background-size: 50px !important;
    background-repeat: no-repeat;
    background-position: right;
    padding: 5px 5px 2px;
    margin: 1px;
    font-size: 9.8px;
}

.blog-preview h4 a{
  color: red;
}

.blog-preview p {
    margin: 5px;
    color: #000;
}

.blurbs {
    background: whitesmoke;
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
}

.profile .blurbs .heading {
    border-bottom-style: groove;
    background-color: blue;
    background-image: url(https://media.canva.com/1/image-resize/1/843_273_100_PNG_F/czM6Ly9tZWRpYS1wcml2YXRlLmNhbnZhLmNvbS9KMDZSZy9NQUdCREhKMDZSZy8xL3AucG5n?osig=AAAAAAAAAAAAAAAAAAAAAGyNJN6Ugzz-rOGYdbRkV-Toe4kxc1q4Lh9dl4BR8p47&exp=1711878589&x-canva-quality=screen_2x&csig=AAAAAAAAAAAAAAAAAAAAALgH8cV8jzKTnJNB8SZFYEKERDUp2etc2dq-Yx382N8h);
    background-size: 62px !important;
    background-repeat: no-repeat;
    background-position: right;
    padding: 5px 5px 2px;
}

.profile .blurbs .section h4 {
    color: #000;
    padding: 0px;
    font-family: 'Sitaoy', sans-serif !important;
    font-size: 13px;
    font-weight: 500;
}

.profile .blurbs .inner {
    font-family: 'Sitaoy', sans-serif;
    font-weight: 400;
    font-size: 13px;
    padding: 2 0;
}

.friends {
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
    margin-bottom: 20px;
    font-family: 'Sitaoy', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.profile .friends .heading {
    border-bottom-style: groove;
    background-color: blue;
    background-image: url(https://media.canva.com/1/image-resize/1/843_273_100_PNG_F/czM6Ly9tZWRpYS1wcml2YXRlLmNhbnZhLmNvbS9KMDZSZy9NQUdCREhKMDZSZy8xL3AucG5n?osig=AAAAAAAAAAAAAAAAAAAAAGyNJN6Ugzz-rOGYdbRkV-Toe4kxc1q4Lh9dl4BR8p47&exp=1711878589&x-canva-quality=screen_2x&csig=AAAAAAAAAAAAAAAAAAAAALgH8cV8jzKTnJNB8SZFYEKERDUp2etc2dq-Yx382N8h);
    background-size: 62px !important;
    background-repeat: no-repeat;
    background-position: right;
    padding: 5px 5px 2px;
}

.profile .friends .heading a {
    padding-right: 50px;
}

.profile .friends .inner{
  background-color: whitesmoke !important;
}

#comments .inner {
    height: 1000px;
    overflow: auto;
}

#comments > div.inner:nth-child(2) > p:first-child > b:first-child {
    font-family: 'Sitaoy', sans-serif;
    font-size: 13px;
    color: #000;
}

.comments-table td {
    border-style: none groove groove none;
    border-width: 3px;
    font-family: Times New Roman;
}

.comments-table td * {
    font-family: 'Sitaoy', sans-serif;
    color: #000;
}

footer {
    border-style: groove;
    border-width: 2px;
    border-color: #fff;
    background: whitesmoke;
    margin-bottom: 20px;
}

footer p {
    color: #000;
    font-family: 'Sitaoy', sans-serif;
}

</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 0 of 0 comments ( View all | Add Comment )