My First Layout ^^

Tags: simple, grey, gray, grayscale, greyscale

Description:

I'm very new to coding and idk what I'm doing aaa

Preview:

click on the image for a larger preview

Code:

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

<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://m.media-amazon.com/images/I/51Of3YpCdtL.jpg');
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;} } 
</style>


<style>
    body {
    background-image: linear-gradient(white, white, white, lightgrey, grey, black);
    background-repeat: repeat !important;
    background-position: bottom;
}

main {
    background-image: linear-gradient(white, white, white, lightgrey, #525252);
    background-attachment: scroll !important;
    background-repeat: repeat !important;
    background-position: center !important;
    filter: grayscale (100%);
    border-radius: 30px;
    border: 2px dotted black;
}

.top { 
    background-image: url(https://i.pinimg.com/originals/fa/a3/bc/faa3bca49bacaf8c53ff309df694fe88.jpg)!important;
    border: 3px solid black !important;

}

DIV.blog-preview{
        text-align: center;
        border: solid 3px white;
        background-color: white;
        border-radius: 5px;
         box-shadow: 1px 2px 10px gray;

}

.profile-info{
  filter: grayscale (100%);
  border: 7px solid black !important;   


    img {
  filter: grayscale (100%);
 }


}

.links{
        
    background-color: black !important;
}

h1{
        
    background-color: white !important;
    font-family: Wingdings;
}

.general-about{
    display: ('test');    
    color: black;
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
}

.mood{
    filter: grayscale (100%);
    background-color: black !important;
    color: white;
    border: 6px solid black;
}

.contact{
    filter: grayscale(100%) blur(1px);
}

<style>

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "1";
  --topic2: "2";
  --topic3: "3";
  --topic4: "4";
  --topic5: "5";
  --topic6: "6";
 }

 .table-section .heading{
        background-color: black !important;
        filter: grayscale (100%);
}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px black !important;
filter: brightness(95%) !important;
   
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}

table.details-table{
        filter: grayscale(100%);
        
    }
.profile .details-table td{
        
    background-image: url(https://bestanimations.com/media/snow/186387553winter-snow-nature-animated-gif-36.gif)
}

.blurbs{
    filter: grayscale(100%);
    color: black !important;
    background-image: url('https://artparts.co/wp-content/uploads/2019/12/Crumpled-Paper.gif') !important;
}

.friends{
    color: black !important;
    filter: grayscale(100%) blur(1px);
    background-image: url('https://media3.giphy.com/media/s237wsClOVbeU/giphy.gif?cid=ecf05e471vzxssvfzw16b2ztdq93j6gjbvj9xl750p7d6gdt&rid=giphy.gif&ct=g') !important;
}

</style>


<style>.online { visibility: hidden; } .online img { content: url("https://www.onlygfx.com/wp-content/uploads/2018/04/grunge-eye-3.png"); animation-name: none; visibility: visible; height: 43px; width: 90px; }</style>

<style>
.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 Favorites */
content: "⍟"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: "👁‍🗨"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward 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 to Group */
content: "◇"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: "✗"
}

 footer{
           display: none;
          
</style>

<style>

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ytimg.com/vi/saIYGSkYwAE/maxresdefault.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }

</style>

<style>

DIV.blog-preview:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 180px;
  width: 350px;
  background-image: url(https://onlinepngtools.com/images/examples-onlinepngtools/clouds-transparent.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  align-content: center;
  margin-left: 110px;
  margin-top: 10px;
  filter: grayscale(100%);

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/symbols/sym-6/sym597.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/01/26/transparent-white-star.html" target="_blank" title="Transparent White Star"><img src="https://cur.cursors-4u.net/cursor.png" alt="Transparent White Star" style="position:absolute; top: 0px; right: 0px;"/></a>

<iframe width="0" height="0" src="https://www.youtube.com/embed/Q6MemVxEquE//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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 10 of 10 comments ( View all | Add Comment )

churrion	1710877069 using! tsym Report Comment
allister	1680190833 just wanted to ask, which part of the coding is the name part? id like to change it to normal letter but im very new to coding Report Comment
allister	1680189796 using!! Report Comment
dusterfan123	1680124638 using! Report Comment
txb	1677748235 Saving, will probably use if I stay on this platform. Report Comment
C♡LI	1677381117 might use Report Comment
★ Stevie ★	1677304725 Using ! Report Comment
VERO	1677089472 this is so cool ! ^^ Report Comment
GhothicBunny	1677088189 okay so i love this! defintely using Report Comment
Axelotl	1677075591 Ooo I love this, Can I just add a background to it? Report Comment yea ofc! by !!CRUSTYMAJESTY!!; 1677075702; Report Okay Thnks!! by Axelotl; 1677075720; Report