Friendster Layout

Tags: simple, retro, friendster, 2000's, nostalgia, nostalgic

Description:

As suggested by Winter nights - A frienster inspired theme.

I have never personally used friendster, But looking at the way back machine I decided to go with the September 1st 2006 snapshot as inspiration for this theme.

Let me know what you think.

Here is the inspiration photo (from way back machine)

And here is the layout

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Mr Relliks (https://layouts.spacehey.com/layout?id=19030) -->

<style>

:root {
--navbar: url(http://web.archive.org/web/20060825001720im_/http://images.friendster.com/images/navbar2_tile.gif);
--mainBG: #fff;
--themecolor5: #000;
--header: #68A6BA;
--bluebg: #cde5e5;
--mainfont-color: #555555;
  --orangetitle: #FF4400;
}

  body{
    font-family: Arial;
    background: url(http://web.archive.org/web/20060904215623im_/http://images.friendster.com/images/homebg.gif) repeat top left #FFFFFF;
  }

main:before {
    width: auto;
    
    min-height: 200px;
    display: block;
    content: "";
    box-shadow: white;
    
  margin-left: 20px;
  margin-right: 20px;
    background: rgba(255, 165, 0, 0);
  	text-align: center;
  	justify-content: center;
  	background-image:url(http://web.archive.org/web/20060831065206im_/http://images.friendster.com/images/home/sn_public_promo.gif);
    background-size: contain;
  	background-repeat: no-repeat;



}

.logo{
 
  content: url("http://web.archive.org/web/20060901081221im_/http://images.friendster.com/images/logo-whitebg.png")
  
}

.blog-preview{
    background: var(--bluebg);
    border: 1px solid #63a3b3;
    margin-bottom: 10px;
  padding: 10px;
  }

  .friends{
    background: #f4f4eb;
    border: 1px solid #a5c64c;
    margin-bottom: 10px;
  }

.friends .heading{
    background: #f4f4eb !important;
    
  }

.friends .heading h4{
    color: #acc959 !important;
    
  }

  main{
    background: var(--mainBG);
    border: 1px solid #A6A69A;
  }

  p{
    color: var(--mainfont-color) !important;
  }

  h1{
    color: var(--orangetitle);
  }

  h4{
    color: var(--orangetitle) !important;
  }

  a{
    color: var(--themecolor5) !important;
  }

  .heading{
    background: var(--mainBG) !important;
  }

  .contact, .url-info, .table-section{
   
    border: 1px solid #A6A69A;
  }

  .comments-table{
    border: var(--themecolor3);
  }

  .comments-table tr td{
    background: var(--themecolor4) !important;
  }
  .comments-table p {
    color: var(--themecolor1);
  }

  .profile-info .inner{
    color: var(--themecolor5);
    color: #000 !important;
  }

  .profile-info{
        border: 1px solid #A6A69A;
    
  }

  .details-table tr td{
    background: var(--themecolor3) !important;
    
    color: #000 !important;
    
  }

  .count {
    color: var(--orangetitle);
  }

  footer, nav .top{
    background: var(--mainBG) !important;
    color: #000 !important;
  }

.top a{
 color: #000 !important; 
}

.top button{
 color: #000 !important; 
}



  nav .links{
    background-image: var(--navbar);
    text-align: center;
    color: #000 !important;
  }

nav .links a{
    
    color: #fff !important;
  }


  .comment-replies{
        border: 1px solid #A6A69A;
  }
  
</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.