grey cool layout

Tags: scroll, animation, animations, grey, white, green, 2000's

Description:

it's something I recently created, I'm saving it

Preview:

click on the image for a larger preview

Code:

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

<style>
    body{
        background-color: white
    }
.general-about{
  position: relative;
  margin-top: 30px;
}
.online {
    content: url(https://i.postimg.cc/7Y9sYdy1/starspinn.gif);
}
    
    .general-about .profile-pic img{
        border: 1.5em solid;
        border-image-slice: 130 125 125 130;
        border-image-outset:0px 0px 0px 0px;
        border-image-repeat:stretch stretch;
        border-image-source:url("https://files.catbox.moe/16vx4u.png");
        box-shadow: 0px 1px 10px gray;
        margin-left: 20px;
    }
    .profile h1{
        	color: white;
	font-size: 30px;
	-webkit-text-stroke: 1px black;
	text-align: center;
    }
.profile .blurbs .section h4{
        	color: white;
	font-size: 20px;
	-webkit-text-stroke: 1px black;
    text-align: center
        
    }</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
body{font-family: 'Fredoka One';
font-size: 16px;
</style> 


  <style>
        .container{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
}

.container {
  width: 700px;
  height: 600px;
}

 main{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
   overflow-y: scroll;
  height: 66vh;
 }
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
}


 html:after {
  background-image: url(https://www.nationalparkrescue.org/wp-content/uploads/2020/06/tv-lines-png-transparent.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  background-size: 500px;
  width: 300%;
  filter: brightness (200px);
  pointer-events:none;
}

table.comments-table{
display: block;
height: 200px!important;
overflow-y: scroll;
}

           ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: gray;
    border: outset gray;
        
        
    }

    ::-webkit-scrollbar-track {
    background: lightgray;
    border: inset lightgray;
        
    }
    
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
  </style>
<style>
nav .top{
background-color: grey;
border-width:9px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
width: 100%;
height: 100%;
}

nav .links{
background-color: grey;
border-width:9px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

nav .links li::after{
display: none;
}
main{ 
border-width:10px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
width: 100%;
height: 100%;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: white;
background-color: grey;
text-align: center;
padding: .5em;
font-size: 15px;
}
img {
filter: sepia(100%) saturate(20%);
}
.profile .blurbs,
.profile .friends{
border: 2px inset grey;
color: black;
margin: 10px;
}

.profile .comments-table .comment-replies{
background-color: grey;
border: 2px inset grey;
color: black;
}
.profile .comments-table td{
background-color: grey;
}
table.details-table td {
background-color: white !important;
color: black !important;
}

.profile .profile-info{
border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
color: white;
background-repeat: no-repeat;
background-size: cover;
}
.profile .contact .heading,
.profile .table-section .heading{
color: white;
background-color: grey;
border: 2px inset grey;;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .table-section,
.profile .contact,
.profile .url-info{
border: 2px inset grey;
color: black;
}
</style>
<style>
    a {
        color: green;
    }
</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 48 comments ( View all | Add Comment )

stinkyone	1713351458 USIIKGN??!?!! Report Comment
RORY \ JONAH ?! $RORY \ JONAH ?!'s profile picture$	1711946692 using!! Report Comment
qklwan	1711893383 using Report Comment
𝗔𝗻𝗴𝗲𝗹/アンヘル	1710708453 using :p Report Comment
Envy	1709091235 usingggg Report Comment
Hara / Ray >__<	1708960980 using Report Comment
Squid	1708274628 Using, I love it <3 Report Comment
EDIALETSI	1707758680 using!! ^_^ Report Comment
✰	1707585444 Using!!! Report Comment
☆ kirumix !!	1707182234 usingg Report Comment
teyuuni!	1706130159 usandooo!! gracias! Report Comment
⊹ ࣪ ˖♱𝐕𝟒𝐦𝐩_𝐱𝐨𝐱𝐨♱๋࣭ ⭑	1705610448 Usando ^u^ Report Comment
eryzzoo	1705188281 using:3 Report Comment
heiko	1705020402 using ^^ Report Comment
sheri ☆	1704391536 using as a base :3 Report Comment
Dumbass!!	1703997293 using Report Comment
sosa💭’	1703686887 usinggg Report Comment
Karl	1702863587 MIGHT USE Report Comment
ZOMBIEAUGZ	1701910245 USIN Report Comment
Karl	1700785604 Using!! Report Comment