old roblox website layout!!

Tags: roblox, robux, builderman, old web, 2000s, nostalgic, nostalgia

Description:

if you need help with fixing anything and can't find a sollution, ask me. credit if you change anything and tell me if you're using. pretty sure several people already did this, but here's my take.. :sob:

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ꒰ stan୧ (#1 BLOODWITCH CONSUMER) (https://layouts.spacehey.com/layout?id=99193) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;1,800&family=Source+Sans+3:ital,wght@0,600;1,600&display=swap')
</style>

<style>

/*font*/

 main, footer{
   font-family: 'Montserrat', sans-serif;
</style>

<style>

/*background gradient*/

 body{
   background: linear-gradient(900deg, rgba(18,105,198,1) 21%, rgba(174,194,205,1) 35%, rgba(0,6,66,1) 100%);
}

/*rblx banner*/

  nav:before{
   	width: 100%;
	height: 149px;
	display: block;
	content: "";
	background-image: url(https://i.ibb.co/vh9pJJJ/rblx-banner.jpg);
	background-repeat: no-repeat;
        background-position: center center;
}

/*play now banner*/

 .blurbs:after{
      	width: 800px;
	height: 80px;
	display: block;
	content: "";
	background-image: url(https://i.ibb.co/cT3YCqR/roblox-play-now-banner.jpg);
	background-repeat: no-repeat;
}

/*nav gradient*/

 nav .top{
   background: linear-gradient(900deg, rgba(18,125,239,1) 0%, rgba(11,117,219,1) 35%, rgba(9,97,187,1) 100%);
   height: 62px;
   border-bottom: 3px dotted black;
}

/*nav search bar box shadow, change button*/
 nav .center input{
    box-shadow: -3px 4px black;
}
 nav .center button{
   background-color:#435D76;
   border: 0px;
   height: 20px;
   color: white;
}

/*turn help, login and logout into buttons*/

 nav .right a{
   background-color: #435D76;
   border: 9px solid #435D76;
}

 nav .links{
   background: rgba(9,97,187,1);
}

/*space out links and no divider*/

 nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
    content: "‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ";
}

/*diagonal profile lines*/

 main{
   background: repeating-linear-gradient(45deg,#E6E6E6, #E6E6E6 10px, #F2F2F2 10px, #F2F2F2 20px);
}

/*left and right profile box shadow*/

 .profile .left{
   box-shadow: 2px -1px gray;
}

 .profile .right{
   box-shadow:1px 2px gray;
}
</style>

<style>

/*center name, mood, contact, url, interests*/
 
 .profile h1, .mood, .contact, .url-info, .table-section{
   text-align: center;
}

/*box behind status*/

 .general-about{
   background-color:#DBDBDB;
   background-image: url(https://i.ibb.co/mcqDBzH/puzzle-adobe.jpg);
   background-repeat: no-repeat;
   background-position: bottom right;
   height: 150px;
}

/*make mood, contact, url, interests, links solid color*/
 .mood, .contact, .url-info, .table-section, .mood .heading, .contact .heading, .url-info .heading, .table-section .heading{
   background-color: #435D74;
}

/*turn mood, contact, .url, interests, links, blurbs, friends text color white*/

 .mood, .contact, .url-info, .table-section, .friends h4,  .friends p, .blurbs h4, a.more{
   color: white;
}

/*fix unreadeable friends text*/

 .friends p{
   text-shadow: 1px 2px black
}

:root {
--logo-blue:;
--darker-blue:;
--lighter-blue: #435D74;
--even-lighter-blue:;
--lightest-blue:;
--dark-orange: ;
--light-orange:#3B3B3B;
--even-lighter-orange:#3B3B3B;
--green:;
}

/*make interests blogs and comments smaller & scroll*/

 .table-section, .blog-preview{
   height: 70px;
   overflow-y: scroll
}

 .friends .inner{
   height: 200px;
   overflow-y: scroll;

</style>

<style>

/*headers round and taller*/

 .blurbs .heading, .friends .heading{
   border-radius: 10px 30px 0px 0px;
   height: 30px
}

/*blurbs and friends blog border and gradient*/

 .blurbs .inner, .friends .inner, .blog-preview, .profile-info{
   border: solid lightgray;
   background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
   margin-bottom: 10px;
}

</style>

<style>

/*no more footer color*/

 footer{
   background: none;

</style>

<style>

/*flip*/

.profile{
   direction: rtl;
}

.blurbs, .profile .table-section .heading, .blog-preview a, .general-info, .contact, .url-info, .details-table, .details p, .mood{
   direction: ltr;
}

</style>

<style>

/*contact emojis to pickaxe*/

 .contact .inner a img {
   font-size: 0;
}
 .contact .inner a img:before {
   font-size: 1em;
   display: block
}
 .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
   content: "⛏️"
}
 .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
   content: "⛏️"
}
 .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
   content: "⛏️"
}
 .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
   content: "⛏️"
}
 .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
   content: "⛏️"
}
 .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
   content: "⛏️"
}
 .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
   content: "⛏️"
}
 .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
   content: "⛏️"
}   

/*notification icon*/
nav .links li .icon{
content: url('https://i.ibb.co/4dLhTkx/roblox-icon-transparent.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 20 of 102 comments ( View all | Add Comment )

azuretime	1747517741 usiing Report Comment
two! :3	1747444460 using ty Report Comment
✧･ﾟ: ccevichee:･ﾟ✧	1747422763 using Report Comment
brandon6875935	1747089027 using Report Comment
\|\| ⟪ • → Niko! ^ ✧	1746904959 using rahh Report Comment
𝓔lliot / 1x1x1x1	1746860400 using! Report Comment
MRDOOMBRINGER!	1746643008 using Report Comment
Linx	1746469020 Using! X3 Report Comment
Floor_Mat95	1746108716 Definitely going to use this, thanks for making this! Report Comment
ST3R!!	1746042230 using!! Report Comment
TWO TIME	1745814673 using Report Comment
OSCAR / LILAC	1745750710 Using this ^-^ Report Comment
𝙈𝙖𝙬𝙬𝙬୧ ‧₊˚ 🍮 ⋅ ☆	1744937610 using Report Comment
yaoikisser	1744813589 using ^_^ Report Comment
Sinister	1744335333 highkey gonna be usin this Report Comment
scripter	1743863370 Using! Report Comment
noah	1743809213 using! Report Comment
Two Time -2️⃣⏱	1743068005 usingg Report Comment
cattybug	1742858702 usingggg :3 Report Comment
nicholas!	1741035597 using!1 Report Comment