base for a layout

Tags: basic, simple, layouts, html, code, start, new, beginner, tutorial, snippet

Description:

customize is any way you want

no credit needed. Do comment if youre using it plz

Code:

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

<style>
/* when customizing the border dont forget to put solid/any other property */
/* blurb is the "about me" & "who i'd like to meet" area */
/* just plain "color" always refers to the color of the text */

@import url(''); /* copy the font properties from google fonts/any other font website */
p{

font-family: ;
font-size: ;
color: ;
}
h1,h2,h3,h4{ /* all of the headers/big text */

font-family: ;
font-size: ;
}  
* {cursor: url(), url(), auto !important; /* copy the image url for the cursor */
}
body{

background-image: url(); /* the big background */
}
main{
     
background-image: url('') !important; /* background for the inside section*/
}
.container{
        
width: !important; /* width of the inside section*/
}
::-webkit-scrollbar { /* size of the scrollbar */

width: ;
height: ;
}
::-webkit-scrollbar-thumb { /* color of the scrollbar little thumb */

background: ;
}
::-webkit-scrollbar-track { /* color of the scroll track */

background: ;
}
a:link { /* base link appearance */

color: ;
background-color: ;
text-decoration: ;
}
a:visited { /* visited link */

color: ;
background-color: ;
text-decoration: ;
}
a:hover { /* link hover */

color: ;
background-color: ;
text-decoration: ;
}
a:active { /* link when clicked */

color: ;
background-color: ;
text-decoration: ;
}
.profile .blurbs .section h4{ /* "about me" & "who i'd like to meet" headings */
        
background-color: ;
color: ;
}
footer{  
    
background: ;       
}
li.active .icon { /* the notification icon */

content: url(" "); 
width: 20px;
height: 10x;
}
.table-section .heading{ /* interests section heading text */
        
color: !important;
}
.table-section{ /* interests section + links section background */

border: ;
background: ;
}
.logo { /* the spacehey logo image */

content: url();
width: 165px !important;
height: 42px !important;
}
button { /* all of the profile buttons */

color: ;
background: ;
font-family: ;
border: ;
}
::selection { /* color of the selection */

color: ; /* color of the text */
background: ;
}
.url-info{ /* the url box */
        
border: ;
background ;       
}
.blog-preview{ /* the blog box */

border: ;
background: ;
}
.blog-preview h4 {  /* blog heading */

background: ;
padding-left: 5px; /* do not delete if you want to add a border */
margin: 0px; /* do not delete if you want to add a border */
}
.blurbs{  

background: ;
}
.blurbs .heading{

background: !important;
color: ;
}
.friends{

background: ;
}
.friends .heading{

background: ;
color: ;
}
.friends-grid{ /* the inside background of friends */

background: ;
}
.friends-grid img{ /* profile photos of your friends */

border: ;
filter: ;
}
.friends b{ /* "username has X friends" text */
        
color:  !important;
background: ;
}
.profile .friends .person p{ /* your friend's name text */

color: !important;
}
.count, .friends a p { /* "username has X friends" number color */

color: ;
} 
.online{ /* "online!" */

content: url() !important;
filter: ;
}
.top{ /* top area with the spacehey logo */

background: ;
font-family: ; /* "search users" text */
color: ;
font-weight: bold;
    }
.top a{ /* the "help" text at the top */

  font-family:  !important;
  color: ;
}
.top input{   /* "search users" bar */  
   
background-color:  !important; 
color: ;
border: ;
    }
.links{ /* links underneath the top area */

background: !important;
}
 .links a{ /* text of the top links */

font-family: ;
color: !important;
font-size: !important;       
text-shadow: 0 0 0 !important; /* removes the blue glow around top links */
}
.links a:hover{
        
color: !important;
font-size: !important;
text-decoration: ;
}
.logout-btn{ /* a separate section just for the logout text */

  font-family:  !important;
  color: ;
font-weight: bold;
}
.contact .heading { /* heading of the "contact username" box */

  background: !important;
  text-align: center;
  color: !important;
  font-size: medium;
  font-family: ;
}
.contact { /* the "contact username" box itself */

  background: ;
Width: 360px; /* the standart size but you can change it to anything */
Height: 100px;
}
.contact a { /* options of the contact box */

  color: ;
  font-family: ;
  font-size: 11px; /* standart size but you can change it to anything */

}
.contact .inner a img {

margin-right: -2px;
font-size: 0;

} /* changes the icons besides the contact text */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { /* add to friends */

content: url("");
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorites */
    
content: url("");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* send Message */

content: url("");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* forward to friend */
    
content: url("");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */
   
content: url("");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */

content: url("");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add to group */

content: url("");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report user */
    
content: url("");
    } 
:root { /* changes various background colors */
--logo-blue: ; /* top area */
--darker-blue: ; /* ALL the links */
--lighter-blue: ; /* most of the headings */
--even-lighter-blue: ; /* interests text/music movies heroes etc boxes */
--lightest-blue: ;  /* the boxes besides the interests text */
--dark-orange: ;  /*  */
--light-orange: ;  /*  */
}
.pinned{ /* the icon besides a pinned blog */

content: url();
width: 16px;
height: 16x;
}
.profile .comments-table{ /* friend's comment area*/

border: !important;
}
.comments-table td:first-child img{ /* comments profile picture */

border: !important;
}
    .profile-info{ /* "username is your friend" box */
         
background-color: !important;
border: 0px; /* dont remove unless you want to add a border */  
        
    }
    .profile-info a{ /* "username is your friend" text */

color: !important;
}  
.comments-table .report .icon{ /* icon besides the "report comment" text */

content: url() !important;
}
.table-section .inner .details-table tr:nth-child(/* number of row */) td:nth-child(1) img {
/* the bottom links */
content: url();
</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 20 comments ( View all | Add Comment )

rei_jp	1712752911 ussing thxx!! Report Comment
WindsweptHivemind	1709320816 usiing ::3 Report Comment
ScythedRifle	1707626535 Using!! :] Report Comment
leju	1706051133 usando <3 graciaass!! Report Comment
meiou	1704827569 usingg!! THANK YU Report Comment
𝗍𝖺𝗏𝗋𝗒𝗇 ★🍉	1703346011 USING TYSM Report Comment
Asteroid Point	1702540095 using ty! Report Comment
mars	1701936637 using thank you!! Report Comment
Pyro	1701883020 Added to favs! will be nice configuring something of my own for once Report Comment
xander	1701856443 ill try figurin out how to use this ty :33 Report Comment
z3Nni3s	1701559247 tysm !! Report Comment
JUPITER!! <3	1701293908 using!! hopefully..... Report Comment
Toby⦻	1701031650 THANK YOU FOR THIS I WAS STRUGGLING SO MUCH Report Comment
manofSteele	1701030144 I cannot put my thanks into words. This layout is a LIFESAVER!!! Report Comment
kompakt	1701025269 THIS is so awesomesauce, thank you so MUCH Report Comment
Yashira Adams	1701024287 blarggg Report Comment
zexx/bassy (acc wip)	1701020004 THANK OU SO MUCH Report Comment
✮P1tterPeace✮	1701019779 Bless 🙏 Report Comment
𝒥𝑜𝓈𝒾𝑒𝓎	1700803557 TYSMMM, i'll be using this soon <3 Report Comment
Angel!	1700502854 Our saviour Report Comment