← Back to Layouts
test test test

Author: catsatehisface
Category: General
Created: June 20, 2026
IF YOU CAN MAKE THIS LAYOUT BETTER... lmk i need help with it
Comments (3)

zombii 06/20/2026 7:34 PM
this is so unique!
catsatehisface 06/20/2026 7:36 PM
I DIDNT MAKE THIS!!! THIS WAS MADE BY FLATLINE PRODUCTIONS 2008!! dont wanna take credit for their amazing work :) all i did was try to make it work for this website
catsatehisface 06/20/2026 7:52 PM
ALSOOOO for the links you are going to hvae to edit it manually to be your page SOREYY
You must log in to comment.
CSS Code

<style type="text/css">

 .flatline {clears default styles}
div, table, tr, td, tbody {background: transparent; border: 0;}

.flatline {hides left column, extended network and blogs}
.navigationBar, .profileInfo, .ImgOnlineNow, .contactTable, .userProfileURL, .userProfileDetail, .userProfileNetworking, .latestBlogEntry {display: none;}
  
  .interestsAndDetails {
  display: block !important; /* Unhides the box */
  position: absolute !important;
  left: 35% !important;
  top: 170px !important;  
  width: 200px !important;   /* Sets the wider width boundary */
  margin-left: -420px !important; 
  height:1000px !important;  /* Restricts vertical height */
  
  overflow: auto !important;
  z-index: 3 !important;
     border: none !important;
}
  

  
 .navbar, #navbar, header, .top-nav, #top-nav {
    height: 120px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
      background-image: url('https://wallpapers.com/images/hd/blue-grunge-51445gf8u3e1vvvh.jpg') !important; 
  }
  
  .myspace-header .top-nav {
  background: #ffffff;
 
}

.myspace-header .main-nav-wrapper {
  background: #ffffff;
}
  .myspace-header .main-nav-wrapper a,
  .myspace-header .main-nav li a {
    color: #ffffff !important;          
    text-shadow: none !important;      
    font-weight: bold !important;
  }
 

  .myspace-header,
  .myspace-header .top-nav,
  .myspace-header .main-nav-wrapper,
  .myspace-header .main-nav,
  .myspace-header .main-nav li { 
    background: #ffffff !important; 
    box-shadow: none !important;       
    border: none !important;              
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  .myspace-header .main-nav-wrapper a,
  .myspace-header .main-nav li a {
    color: #ffffff !important;         
    text-shadow: none !important;
    text-decoration: none !important;     
    border: none !important;            
  }

  .myspace-header .main-nav-wrapper a:hover,
  .myspace-header .main-nav li a:hover {
    color: #ffffff !important;         
    text-decoration: none !important;  
    text-shadow: none !important;
    background: transparent !important;   
  }
  
   .myspace-header .logo a img,
  .myspace-header .logo img,
  .myspace-header .brand a {
    display: none !important;
    visibility: hidden !important;
  }
  
  .myspace-header .search-form,
  .myspace-header .search-box,
  .myspace-header .search,
  .myspace-header input[type="search"],
  .myspace-header button[type="submit"] {
    display: none !important;
    visibility: hidden !important;
    width: 0px !important;
    height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    opacity: 0 !important;
  }
  
  
.flatline {hides words ABOUT ME and ID LIKE TO MEET}
.blurbs .orangetext15 {display: none;}

.flatline {hides top friends}
.friendSpace {display: none;}

   #comment,
  #comments {
    position: absolute !important;
    top: 980px !important;
    left: 50% !important;    
    transform: translateX(-50%) !important; 
    margin-left: 160px !important; 
    
    width: 450px !important; 
    clear: both !important;
    z-index: 99 !important;
  }


.flatline {hides bottom links and copyright}
table div div, table div font {display: none;} table table div div {display: block;} table table div font {display: inline;}

.flatline {fixes everything else}


.flatline {This is where your content divs are defined.}

.background {
background-color: white;
overflow:none;
position:absolute;
left:50%;
margin-left:-400px;
top:140px;
visibility:visible;
width:800px; height:600px;
border:2px white;
z-index: 2;
}

.aboutme {
background-color: transparent;
overflow:auto;
position:absolute;
left:50%;
margin-left:-345px;
top:270px;
visibility:visible;
width:300px; height:350px;
z-index: 3;
scrollbar-face-color : 43434B;
scrollbar-highlight-color : 15151F;
scrollbar-3dlight-color : 15151F;
scrollbar-shadow-color : 15151F;
scrollbar-darkshadow-color : 15151F;
scrollbar-track-color : 15151F;
scrollbar-arrow-color : 15151F;
padding: 5px;
padding-right: 10px;
}

.profpic {
background-color: transparent;
overflow:none;
position:absolute;
left:50%;
margin-left:110px;
top:445px;
visibility:visible;
width:135px; height:120px;
z-index: 4;
}

.profinfo {
background-color: transparent;
overflow:none;
position:absolute;
left:50%;
margin-left:110px;
top:568px;
visibility:visible;
width:138px; height:85px;
z-index: 4;
padding-left: 5px;
padding-right: 5px;
}

.friendpics {
background-color: transparent;
overflow:none;
position:absolute;
left:50%;
margin-left:41px;
top:225px;
visibility:visible;
width:270px; height:105px;
z-index: 4;
}

.comments{
position: absolute;
top: 500px;
margin-left: 0px;
width: 800px;
background-color: black;
overflow: auto;
z-index: 5;
}


  
.flatline {this is where you can edit your fonts}

p {color: #102D29; text-align: justify; text-indent: 5px; font-family: times, serif; font-size: 14px;}
p.center {text-align: center}
p.right {text-align: right}

i {color: #102D29; text-align: justify; text-indent: 5px; font-family: times, serif; font-size: 14px;}
i.small {color: 102D29; text-align: justify; text-indent: 5px; font-family: times, serif; font-size: 12px;}

b {font-family: times, serif; font: normal normal bold 14px times, serif; color: #102D29}
b.small {font-family: times, serif; font: normal normal bold 12px times, serif; color: 102D29}

h1 {font-family: times, serif; font-size: large; font-variant: small-caps; color: #2B4E4A; letter-spacing: 2px; text-transform: capitalize;}

h1.center {text-align: center;}

h2 {font-family: times, serif; font-size: medium; font-variant: small-caps; color: 2B4E4A; text-transform: capitalize;}
h2.center {text-align: center}

a {color: #000000}

body table tr table tr td.text table tr td.text table tr td table tr td {font-size: 14px; font-family: times, serif; color: A8A8A8; text-align: justify;} 

</style><div class="background">
<img src="/proxy/image.php?url=http%3A%2F%2Fcbimg6.com%2Flayouts%2F08%2F03%2F22%2F26378aa.gif" width="800" height="800" border="0" alt="" usemap="#backgrnd_Map">
<map name="backgrnd_Map">
<area shape="rect" coords="630,66,697,82" href="https://friendrewind.com/friends.php?id=13733" alt="View All My Friends">
<area shape="rect" coords="700,495,720,510" href="https://friendrewind.com/vid/video.php?id=1381" alt="TV">
<area shape="rect" coords="689,460,732,478" href="http://www.msplinks.com/MDFodHRwOi8vbXVzaWMubXlzcGFjZS5jb20v" alt="Music">
<area shape="rect" coords="684,427,728,448" href="http://www.msplinks.com/MDFodHRwOi8vZmlsbS5teXNwYWNlLmNvbS8=" alt="Film">
<area shape="rect" coords="682,395,723,417" href="http://www.msplinks.com/MDFodHRwOi8vZm9ydW0ubXlzcGFjZS5jb20v" alt="Forum">
<area shape="rect" coords="679,364,724,387" href="http://www.msplinks.com/MDFodHRwOi8vZXZlbnRzLm15c3BhY2UuY29tLw==" alt="Events">
<area shape="rect" coords="683,333,727,355" href="http://www.msplinks.com/MDFodHRwOi8vZ3JvdXBzLm15c3BhY2UuY29tLw==" alt="Group">
<area shape="rect" coords="433,493,475,512" href="https://friendrewind.com/blog/user.php?id=13733" alt="Blogs">
<area shape="rect" coords="433,460,470,481" href="https://friendrewind.com/mobileim/mobile-chat.php" alt="Mail">
<area shape="rect" coords="433,430,477,450" href="https://friendrewind.com/invite.php" alt="Invite">
<area shape="rect" coords="430,396,474,416" href="https://friendrewind.com/search.php?q=" alt="Search">
<area shape="rect" coords="438,368,480,385" href="https://friendrewind.com/browse.php" alt="Browse">
<area shape="rect" coords="438,339,475,358" href="https://friendrewind.com/home.php" alt="Home">
<area shape="poly" coords="281,502, 282,519, 340,514, 337,497" href="https://friendrewind.com/blog/user.php?id=13733" alt="My Blog">
<area shape="poly" coords="190,509, 190,527, 264,522, 262,504" href="https://friendrewind.com/vid/profile.php?id=13733" alt="My Videos">
<area shape="poly" coords="84,518, 85,535, 175,527, 172,509" href="https://www.instagram.com/catsatehisface/" alt="My Pictures">
<area shape="rect" coords="663,254,719,286" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTkyMDI5NzYx" alt="Block Me">
<area shape="rect" coords="587,254,642,286" href="https://friendrewind.com/catsatehisface#" alt="IM Me">
<area shape="rect" coords="520,253,563,286" href="https://friendrewind.com/mobileim/mobile-chat.php" alt="Message Me">
<area shape="rect" coords="448,254,489,286" href="https://friendrewind.com/friends.php?action=add&amp;id=13733" alt="Add Me">
</map>



</div>

<div class="aboutme">

<h2 class="center">WELCOME</h2>
<p>
Hi! My name is Sear, I'm going to blog and attempt to make some friends on here! Yippie! My profile is still a work in progress, credits to Flatline Productions 2008, but gotta reformatate it since it was originally made for actual myspace which has different code yadda yadda point is I DIDNT MAKE THIS! I will be attemping to reformate some other old profile templates as well,, stay tuned if you gaf.. 
</p>


</div>

<div class="profpic">
<img src="/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FZSricSDRyR84aPSM%2F%21.jpg" width="135" height="120" border="1px" align="middle">
</div>

<div class="profinfo">
<h2 class="center">Sear</h2>
<br>
Demigirl from Houston :3
<br>

</div>


<div class="friendpics" style="width: 268px; overflow: hidden; white-space: nowrap; background: transparent; padding: 5px 0;">
  <div style="display: inline-block; animation: frMarquee 15s linear infinite; padding-left: 100%;">
    
    <a href="#" target="_self">
      <img src="/proxy/image.php?url=https%3A%2F%2Funsplash.com" style="height: 110px; width: 110px; border: 1px solid #000; margin-right: 5px;">
    </a>
    <a href="#" target="_self">
      <img src="/proxy/image.php?url=https%3A%2F%2Funsplash.com" style="height: 110px; width: 110px; border: 1px solid #000; margin-right: 5px;">
    </a>
    <a href="#" target="_self">
      <img src="/proxy/image.php?url=https%3A%2F%2Funsplash.com" style="height: 110px; width: 110px; border: 1px solid #000; margin-right: 5px;">
    </a>
    <a href="#" target="_self">
      <img src="/proxy/image.php?url=https%3A%2F%2Funsplash.com" style="height: 110px; width: 110px; border: 1px solid #000; margin-right: 5px;">
    </a>
    <a href="#" target="_self">
      <img src="/proxy/image.php?url=https%3A%2F%2Funsplash.com" style="height: 110px; width: 110px; border: 1px solid #000; margin-right: 5px;">
    </a>
    <a href="#" target="_self">
      <img src="/proxy/image.php?url=https%3A%2F%2Funsplash.com" style="height: 110px; width: 110px; border: 1px solid #000; margin-right: 5px;">
    </a>
    <a href="#" target="_self">
      <img src="/proxy/image.php?url=https%3A%2F%2Funsplash.com" style="height: 110px; width: 110px; border: 1px solid #000; margin-right: 5px;">
    </a>
    <a href="#" target="_self">
      <img src="/proxy/image.php?url=https%3A%2F%2Funsplash.com" style="height: 110px; width: 110px; border: 1px solid #000; margin-right: 5px;">
    </a>

  </div>
</div><style>
  @keyframes frMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
  }
</style></style>