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*/
}
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: ;       
}
.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 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;
}
li.active .icon { /* the notification icon */

content: url(" "); 
width: 20px;
height: 10x;
}
.comments-table .report .icon{ /* icon besides the "report comment" text */

content: url() !important;
} /* 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;
}  
.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 21 comments ( View all | Add Comment )

Ross :3	1722352381 THANK U Z0 MUCHHH !! WILL BE UZING ^O^ Report Comment
BABOSA	1720717694 using <3 Report Comment
WindsweptHivemind	1709320816 usiing ::3 Report Comment
Parsley Bulgogi	1707626535 Using!! :] Report Comment
leju	1706051133 usando <3 graciaass!! Report Comment
meiou	1704827569 usingg!! THANK YU Report Comment
tav ⍟ \| ๑ the everything guy	1703346011 USING TYSM Report Comment
Andromeda	1702540095 using ty! Report Comment
mars	1701936637 using thank you!! Report Comment
xander	1701856443 ill try figurin out how to use this ty :33 Report Comment
fr4nKi	1701559247 tysm !! Report Comment
KYLO!! <3	1701293908 using!! hopefully..... Report Comment
Gl0bal.Eternity	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
shann	1701025269 THIS is so awesomesauce, thank you so MUCH Report Comment
Yashira Adams	1701024287 blarggg Report Comment
ZEX! (ACC WIP!)	1701020004 THANK OU SO MUCH Report Comment
✮PitterAarav✮	1701019779 Bless 🙏 Report Comment
𝒥𝑜𝓈𝒾𝑒𝓎	1700803557 TYSMMM, i'll be using this soon <3 Report Comment