My Layout 2021

Tags: blue; layout; web
Description:

Simple Teal version of my page
Code:

<!-- (c) Layout created by 𝔖𝔩𝔢𝔢𝔭 𝔴𝔥𝔢𝔫 𝔦𝔪 𝔇𝔢𝔞𝔡 (https://layouts.spacehey.com/layout?id=27338) -->

<style>

body::before {

    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; 
    top: 0; 
	bottom: 0;
    left: 0; 
	right: 0;
    z-index: 100;
	background-image: url('URL');
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 	0.25) 50%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    animation: yourAnimation 3s ease 0s 1 normal forwards;
    pointer-events: none;}

    @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;}}



body{
    
    font-family: Courier New, monospace; !important;
    background-color: Black!important;
    background-image: 	url('https://i.pinimg.com/originals/86/40/48/864048f2f526f411cc1335be7aa91dfc.gif') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER  !important; 
    background-size: Cover; 
	}
    
.container{
        
    width: 900px !important;
	margin: 0 auto 0;
    border: 0px dashed black;  }
    
    
 main:before {
     
    width: 0%;
    height: 0px;
    display: block;
    content: "";
    background-image: url('URL');
    background-position: center center;
    background-size: cover;
    background-position-y: -10px;
    border-radius: 50px !important;
    }
@media only screen and (max-width: 600px) {
    main:before{
    height: 200px;} }
    
    
main{
   
    background: TRANSPARENT;
    background-color: black !important;
    background-image: url('URL') !important;
	background-size: COVER;
    background-attachment: FIXED  !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER CENTER !important;
    border: 0px solid black !important;  
	border-left: 2px  teal;
	border-right: 2px teal;  
    border-radius: 30px !important;
	opacity: 0.85;}
    
    
.profile{}
    
.profile .left{
    
    background-image: url('URL');
    background-position: center;
    background-size: 300px;
    background-position-y: 250px;
    background-repeat: no-repeat;
    border-radius: 30px;
    width: 70% !important;}
    
.profile .right{
    
    background-image: url('URL');
    background-position: center;
    background-size: 300px;
    background-position-y: 250px;
    background-repeat: no-repeat;
    border-radius: 30px;
  	width: 100% !important;}

    
.profile-pic{}

.general-about{
    
    font-family: Courier New, monospace;
    text-align: CENTER !important;}

    
h1{
    
    text-align: CENTER  !important;}
    
a{
    font-family: Courier New, monospace; !important;
    color: #ADD8E6 !important;   
    font-weight: bold !important;}
    
    
a:hover{
    
    font-family: Courier New, monospace; !important;
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: teal !important;   
    font-weight: normal !important;}

a:visited{
    
    font-family: Courier New, monospace; !important;
    color: Teal !important;   
    font-weight: normal !important;}
    
button{
    
    border: 0px solid Teal !important; 
    border-radius: none  !important;}
    
h4{ }

.top{
    
    font-family: Courier New, monospace; !important;
    font-size: PX;
    font-weight: BOLD;
    background-color: black !important;
  	opacity:0.9;
    background-image: url('URL') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important; 
    border: 0px solid black !important;    
    border-radius: 0px 0px 0 0 !important;
    color: #D3D3D3;}
    
.logo{
        
    background-color: TRANSPARENT!important;
    background-image: url('URL') !important;
    background-attachment: FIXED  !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    border: 0px solid black !important; 

	filter: sepia(100%) hue-rotate(70deg) saturate(10);
animation: none ;}
    
.online {
visibility: hidden; }

.online img { 
content: url("https://www.myspacegens.com/images/online_now/316.gif");
animation-name: none; 
visibility: visible; 
height: 43px; 
width: 90px; }

.top input{
        
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER  !important; 
    border: 1px solid grey !important; 
    border-radius: 6px  !important;}
    
.top button{
    
    color: #D3D3D3;
    font-family: Courier New, monospace; !important;
    font-size: 13PX;
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;}
    
.top a{
    
    color: grey !important;   
    font-weight: normal !important;}
    
.top a:hover{
    
    color: #87cefa !important;   
    font-weight: normal !important;}
    
.top a:visited{
    
    color: #87cefa !important;    
    font-weight: normal !important;}
    
.links{
    
    text-align: CENTER;
    font-size: 14PX;
    background-color: black !important;
    background-image: url('URL') !important;
    background-attachment: FIXED  !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    border: 0px solid black !important; }
    
.links a{
    
    font-family: Courier New, monospace;
    color: #87cefa ortant;    
    font-weight: normal !important;}
    
.links a:hover{
    
    color: teal !important;
    font-weight: normal !important;}
    
.links a:visited{
    
    color: teal !important;
    font-weight: normal !important;}
    
h1{
    
    color: White;
  	filter: sepia(100%) hue-rotate(70deg) saturate(10);
animation: none ;
    font-family: Courier New, monospace; !important;
    font-weight: normal;
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED  !important;
    background-repeat:NO-REPEAT !important;
    background-position: CENTER !important;
    border: 0px solid black !important;  }
    
.profile-pic{}
    
.profile-pic img{
    
    border: 0px solid black !important;
    border-radius: 6px  !important;}
    
.profile a{

    font-weight: normal !important;}
        
.profile a:hover{

    font-weight: normal !important;}
    
.profile a:visited{

    font-weight: normal !important;}
    
.general-about{

    color: White;
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED  !important;
    background-repeat:NO-REPEAT !important;
    background-position: CENTER !important;
    border: 0px solid black !important; }
    
.mood{
     
    font-family: Courier New, monospace;
    text-align: center;
    color: White; 
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED !important;
    background-repeat:  NO-REPEAT !important;
    background-position: CENTER  !important;
    border: 0px solid black !important; }
    
.mood a{
    
    color: #20B2AA !important;}
    
.mood a:hover{
    
    color: #ADD8E6 !important;}
    
.mood a:visited{

    color: #ADD8E6 !important;}

.contact{
   
    text-align: left ;
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED L !important;
    background-repeat:NO-REPEAT !important;
    background-position: CENTER !important;
    border: 1px solid white !important; 
}
.icon{
  display:none;
}
    
.contact .inner a img {
    font-size: 0px;
    
}
.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: url('https://yokai.crd.co/assets/images/gallery20/dd77a8a6.gif?v=b4df531c')
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url('https://yokai.crd.co/assets/images/gallery20/dd77a8a6.gif?v=b4df531c')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://yokai.crd.co/assets/images/gallery20/dd77a8a6.gif?v=b4df531c')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url('https://yokai.crd.co/assets/images/gallery20/dd77a8a6.gif?v=b4df531c')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url('https://yokai.crd.co/assets/images/gallery20/dd77a8a6.gif?v=b4df531c')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url('https://yokai.crd.co/assets/images/gallery20/dd77a8a6.gif?v=b4df531c')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url('https://yokai.crd.co/assets/images/gallery20/dd77a8a6.gif?v=b4df531c')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url('https://yokai.crd.co/assets/images/gallery20/dd77a8a6.gif?v=b4df531c')
}
    
.contact .heading{
    
    background-color: TRANSPARENT !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
    
.contact a{
    
    color: #20B2AA !important;}
    
.contact a:hover{
    
    color: #ADD8E6 !important;}
    
.contact a:visited{
    
    color: #ADD8E6 !important;}
    
.contact .heading{ 
    
    font-size:0;
    text-align:center;}

.contact .heading:before{ 
    
    content: "𝕮𝖔𝖓𝖙𝖆𝖈𝖙 𝕸𝖊";
    font-size:.8rem; 
    font-weight:none;}
    
.url-info{
    
    border: 0px solid black !important;  
    color: #87cefa  ; 
    text-align: CENTER;
    font-weight: BOLD;}
    
.url-info b{ }

.url-info p{ }

.profile .table-section{
    
    border: none;}

.table-section .heading{
    
    text-align: Center;
    font-size: 15px;
    background-color: TRANSPARENT !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
    
table.details-table{
     
    width:99%;
    text-align: left;
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED  !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER  !important;
    border: 0px solid black !important;}
    
.profile .details-table td{
    
    color: white;
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED !important;
    background-repeat:NO-REPEAT !important;
    background-position: CENTER !important;
    border: 1px solid teal !important; }
    
.details-table td:first-child{
    width: 19%;}
  
.blog-preview{
    
    text-align: left;
    color: white;
    font-family: Courier New, monospace;
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER  !important;
    border: 0px solid black !important; }
    
.blog-preview h4{
      
    background-color: TRANSPARENT;
    background-image: url('URL');
    background-repeat: NO-REPEAT;
    background-position: center;
    font-size:0;
    font-weight: normal;}
    
.blog-preview h4 a{
   
    font-size:.8rem;margin-left:5px; }
    
.blog-preview h4:before{
    
    content: "Latest Blog:"; 
    font-size:.8rem;}
    
.blog-preview a{
    
    color: #20B2AA !important;}
    
.blog-preview a:hover{
    
    color: #87cefa !important;}
    
.blog-preview a:visited{
    
    color: #87cefa !important;}
    
.blog-preview p{ }

.blurbs{
    
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED  !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;}
    
.blurbs .heading{
    
    background-color: teal !important;
    background-image: url('URL');
    background-repeat: NO-REPEAT;
    background-position: center;
    font-size:0; 
    border-radius: 0px;}
    
.blurbs .heading:before{ 

    color: Black ;
    content: "𝕭𝖑𝖚𝖗𝖇𝖘"; 
    font-size:.8rem; 
    font-weight:bold; }
    
.blurbs .section h4{}

.blurbs .inner{

    text-align: left !important;
     color:white;}
    
    
.blurbs .inner .section:nth-child(1) h4:before{ 
    
    content: "𝕬𝖇𝖔𝖚𝖙 𝕸𝖊:";
    font-size:.8rem; }

.blurbs .inner .section:nth-child(1) h4{ 
    
    color: white;
    font-size:0; }
    
.blurbs .inner .section:nth-child(2) h4:before{
        
    content: "𝖂𝖍𝖆𝖙 𝕴 𝕷𝖔𝖔𝖐 𝕷𝖎𝖐𝖊:"; 
    font-size:.8rem;}

.blurbs .inner .section:nth-child(2) h4{ 
    color: white;
    font-size:0; }
    
.friends{
        
    background-color: TRANSPARENT !important;
    background-image: url('URL') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER!important;
    border: 0px solid black !important; }
    
.friends .heading{
        
    background-color:teal !important;
    background-image: url('URL');
    background-repeat: no-repeat;
    background-position: center; 
    font-size:0; 
    border-radius: 0px; }
    
.friends .heading:before{ 
    
    color: black;
    content: "𝕸𝖞 𝕱𝖗𝖎𝖊𝖓𝖉𝖘"; 
    font-size:.8rem; 
    font-weight:bold;  }
    
.friends .inner {
		color: #87cefa !important;
		border-bottom: none;
		background-color: black;

}
.friends-grid{
    
    border: none;
    border-radius: 6px;
    background-color: none;
    text-align:center;
    padding:0px!important;
}

.profile .friends .person img{
filter: sepia(50%);}

.friends .person{
    background-color: rgba(255, 255, 255, 0.8);
    width:80px!important;
    display: inline-flex!important;
    flex-direction: column-reverse;
    margin:10px;
    vertical-align: top;
    padding-left:5px!important;
    padding-top:5px!important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
.friends .person p{
    
    font-family: Courier New, monospace;
    text-align: center;
    word-wrap: break-word;
}
.profile .friends .person img:not(.icon){
  max-width:70px!important;
}
.profile .friends .person:nth-of-type(1){
    transform: rotate(0deg);
}
.profile .friends .person:nth-of-type(2){
    transform: rotate(0deg);
}
.profile .friends .person:nth-of-type(3){
    transform: rotate(-2deg);
}
.profile .friends .person:nth-of-type(4){
    transform: rotate(0deg);
}
.profile .friends .person:nth-of-type(5){
    transform: rotate(0deg);
}
.profile .friends .person:nth-of-type(6){
    transform: rotate(2deg);
}
.profile .friends .person:nth-of-type(7){
    transform: rotate(0deg);
}
.profile .friends .person:nth-of-type(8){
    transform: rotate(0deg);
}
     
.friends-grid p{
        
    color: black !important;}
    
.friends a{
    
    color: #20b2aa  !important;}
    
.friends a:hover{
    
    color: #87cefa !important;}
    
.friends a:visited{
    
    color: #87cefa !important; }
    
.friends b{
}

.friends p{
    color: white;}



.friends#comments .heading{ 
    
    text-align: center;
    font-size:0; }
    
.friends#comments .heading:before{ 
    content: "𝕮𝖔𝖒𝖒𝖊𝖓𝖙𝖘"; 
    font-size:.8rem; 
    font-weight:bold;}
    
#comments {
		border-bottom: 0px ;
		height: 700px;
		overflow: scroll;
}

.count{
    color:#87cefa;}

.more{}

.comments-table {
		border: 0px solid teal;
		border-collapse: collapse;
}
.comment-replies {
		border: 1px solid white;
		margin: 2px;
}

.comments-table td{
        
    background-color: black !important;
    background-image: url('URL') !important;
    background-attachment: FIXED!important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    border: none !important; }
    
table.comments-table{
    
    border: none;
    display: block;
    height: 200px!important;
    overflow-y: scroll;}
    
.pagination{}
		footer {
		background: black;
		border: 2px solid teal;
}

footer{
        
    background-color: black !important;
    background-image: url('URL') !important;
    background-attachment: FIXED  !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    border: 1px solid white !important;  
    color: #778899;}
    
footer a{
    
    color: #20b2aa !important;}
    
footer a:hover{
    
    color: #87cefa !important;}
    
footer a:visited{
    
    color: #87cefa !important;}
footer p {
		color #00ff00 !important;}
    
footer .links{}

footer .links a{
    
    color: #20b2aa !important;
    font-weight: normal !important;}
    
footer .links a:hover{
    
    color: #87cefa !important;
    font-weight: normal !important;}
    
footer .links a:visited{
    
    color: #87cefa !important;
    font-weight: normal !important;}
    
.supporter{

    font-weight: normal !important; }
    
::-webkit-scrollbar {
    
    width: 12px;
    height: 10px;}
    
::-webkit-scrollbar-thumb {
    
    background: teal;}

::-webkit-scrollbar-track {
    
    background: TRANSPARENT;}
    
</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 2 of 2 comments ( View all | Add Comment )
Ghost_Garden
1693977456
Hii, mhm sorry, i have a little issue with the layout, can you help me? please, sorry for my bad english
Report Comment
Yes ofc I’ll try my best! What’s the problem?
by 𝔖𝔩𝔢𝔢𝔭 𝔴𝔥𝔢𝔫 𝔦𝔪 𝔇𝔢𝔞𝔡; 1694049923; Report
When i add the description, or another text, is black and i can't see the letters, i really don't know how can i fix it ¿can you help me please?
by Ghost_Garden; 1694060425; Report
I just updated the code it should be fixed! Try it again :)
by 𝔖𝔩𝔢𝔢𝔭 𝔴𝔥𝔢𝔫 𝔦𝔪 𝔇𝔢𝔞𝔡; 1694396390; Report
YESS!! thanks u, it works
by Ghost_Garden; 1694834071; Report
Ghost_Garden
1693459403
THANKS UU!!! using <3
Report Comment