cry of fear Layout!

Tags: cry of fear, layout

Description:

feel free to change anything, it contains "dark city" autoplay. the background contains moving snowflakes gif added to make it look better (those are the white dots on the background) no need to credit me feel free to use!

Preview:

click on the image for a larger preview

Code:

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

<style>
    body{
        background-color: black;
        background-attachment: fixed;
        background-image: url('https://pbs.twimg.com/media/FivgKHVVsAAarm2.jpg:large');
        background-size: 1920px;
        background-repeat: no-repeat;
        
    }
    MAIN{
        background-color: transparent;
    }
    main .left{
        background: linear-gradient(to top, black ,#21211f, #000000);
        border-top: solid #000000 5px;
        box-shadow: 0px 0px 20px #FFFFFF;
        border-radius: 20px;
    }
    main .right{
        background-color: transparent;
        border-radius: 20px;
    }
    .profile .blurbs .heading{
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background: linear-gradient(to bottom left, black ,#21211f, black);
        border-top: ridge #000000 8px;
        border-bottom: ridge black 8px;
        text-align: center;
        color: white;
        margin-left: 20px;
        width: 700px;
        transform: rotate(3deg);
        box-shadow: 0px 0px 10px white;
    }

</style>

<style>
    .profile h1{
        text-align: center;
        text-shadow: 0px 0px 15px white ;
        font-size: 50px;
        color: white;
        
    }
    
    .profile .friends .person img:not(.icon){
        filter: brightness(130%) contrast(140%) grayscale(80%);
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
           animation: blink .1s infinite;
           box-shadow: 0px 0px 15px white;
           border: solid white 1px;
    }
@keyframes blink {
  0% {
    opacity: 90%;
       
    }
    
    
</style>

<style>
    .profile .friends .heading{
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background: linear-gradient(to bottom left, black ,#21211f, black);
        border-top: ridge #000000 8px;
        border-bottom: ridge black 8px;
        text-align: center;
        color: white;
        margin-left: 20px;
        width: 700px;
        box-shadow: 0px 0px 10px white;
    }
    
</style>

<style>
    .profile .friends .heading{
            
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
        .profile .blurbs .heading h4{
    animation: blink .1s infinite;
    }
@keyframes blink {
  0% {
    opacity: 80%;
        
        
    }
    
</style>

<style>
    .container{
        width: 1200px;
    }
    
</style>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
a{
    font-family: 'Gruppo', cursive;
    font-size: 15px;
    color: white;}

p{
  font-family: 'Gruppo', cursive;
  font-size: 15px;
  color: white;
}
h1,h2,h3,h4,h5{
  font-family: 'Gruppo', cursive;
  font-size: 20px;  
  color: white;
  text-shadow: 0px 0px 15px white;}
  
  a{
        
    color: white;
  
  
    
</style>
<style>
    main .left{
        animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
    }
    
    
</style>


<style>
    .blurbs .heading
    { 
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
        .profile .blurbs .heading h4{
    animation: blink .1s infinite;
    }
@keyframes blink {
  0% {
    opacity: 80%;
    
</style>

<style>
    .profile h1
    
    {
    animation: blink .1s infinite;
    }
@keyframes blink {
  0% {
    opacity: 70%;


    }
    
    
</style>

<style>
    .profile .blurbs .section h4{
        color: white;
        text-align: center;
        
    }
    .general-about .profile-pic img{
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border: solid white 1px;
        box-shadow: 0px 0px 15px white;
        filter: brightness(120%) contrast(90%) grayscale(80%);
        margin-top: 10px;
        margin-left: 15px;
    }
    
</style>

<style>
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
    
    nav .top{
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: ridge gray 3px;
        background: linear-gradient(to bottom left, black ,#21211f, black);
        margin-bottom: 20px;
        box-shadow: 0px 0px 10px white;
        
    }
    
    nav .links{
        background: linear-gradient(to bottom right, black ,#21211f, black);
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: ridge gray 3px;
        margin-bottom: 20px;
        box-shadow: 0px 0px 10px white;
        text-align: center;
        font-size: 15px;
        
    }
     a:hover{
        
    color: gray;
   transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
         
     }
    .links a:hover{

    color: white !important;
    background-color: black;
    text-shadow: 0px 0px 10px white;}
    
    .profile .friends .inner{
        text-align: center;
        margin-top: 20px;
        margin-left: 50px;
    }
    
    .count{
        color: white;
    }
    
    [id='q']{
        background-color: black;
        box-shadow: 0px 0px 10px gray;
        border: none;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background: linear-gradient(to top, black ,#171717, #21211f);
        border: solid black 2px;
    }
    
    
.logo {
   content: url(https://cdn2.steamgriddb.com/file/sgdb-cdn/logo/b5dc4e5d9b495d0196f61d45b26ef33e.png);
   size: 100px;
   filter: brightness(100%) grayscale(30%);
}
.profile .contact{
    border: none;
}

.profile .contact .heading{
    border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background: linear-gradient(to bottom left, black ,#21211f, black);
        border-top: ridge #000000 8px;
        border-bottom: ridge black 8px;
        box-shadow: 0px 0px 10px white;
}

.icon{
    content:url(https://static.wikia.nocookie.net/cry-of-fear/images/3/31/640_mobile_slot.png/revision/latest/thumbnail/width/360/height/360?cb=20190309051555);
    
}

.profile .url-info{
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    background: linear-gradient(to bottom left, black ,#21211f, black);
        border-top: ridge #000000 8px;
        border-bottom: ridge black 8px;
        border-left: none;
        border-right: solid #000000;
        box-shadow: 0px 0px 10px white;
        
}

.profile .table-section .heading{
    
    background: linear-gradient(to bottom left, black ,#21211f, black);
        border-top: ridge #000000 8px;
        border-bottom: ridge black 8px;
        border-left: none;
        border-right: solid #000000e;
        box-shadow: 0px 0px 10px white;
        border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
    
}

.profile .table-section{
    border: none;
    margin-bottom: 20px;
}

.profile .mood{
    margin-bottom: 15px;
    margin-top: 15px;
}

.general-about{
    background: linear-gradient(to bottom left, black ,#21211f, black);
        border-top: ridge #000000 8px;
        border-bottom: ridge black 8px;
        border-left: none;
        border-right: solid #000000;
        box-shadow: 0px 0px 10px white;
        border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
    height: 200px;
    
}

.details-table td {
    background-color: black;
    border: ;
}

table.details-table{
    
    background-color: black;
}

.comments-table td{
    background-color: transparent;
    border: none;
    
}
table.comments-table{
    border: none;
    
}
.comments-table td *{
    border-radius: 20px;
    text-align: center;
    
}

.profile .friends .person p{
    color: white;
}
</style>

<style>
    :root {
    --light-orange: ;
       --even-lighter-blue: black;
</style>

<style>
main:before {
width: ;
height: 150px;
display: block;
content: "";
background-image: url('https://cdn2.steamgriddb.com/file/sgdb-cdn/hero/b21f9f98829dea9a48fd8aaddc1f159d.jpg');
background-position: center;
background-size: 950px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px ;
margin-bottom: 20px;
margin-top: 10px;
border: ridge gray 3px;
box-shadow: 0px 0px 10px white;
filter: brightness(130%) contrast(140%) grayscale(80%);
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;

    
    
}

</style>

<style>
    main{
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
    
</style>

<style>


body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
z-index: 2;
background-size: 100% 2px, 3px 100%;
opacity: 30%;
pointer-events: none;
}
</style>

<style>
    .profile .profile-info {
	background: linear-gradient(to bottom left, black ,#21211f, black);
	border: ridge gray 2px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	text-align: center;
	box-shadow: 0px 0px 10px white;
}
    
    
</style>
<style>
.links .special a:link, .links .special a:visited  {
  color: white;
}

.links .special a:hover {
  color: gray;
}
</style>

<style>


    
    
    
}

</style>

<style>
             ::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: black
    }

    ::-webkit-scrollbar-track {
    background: linear-gradient(to bottom left, black ,#000000, black);
    }
    
    footer{
        background-color: transparent;
</style>

<style>

html:before {
  animation: grain 30s steps(10) infinite;
  background-image: url(https://external-media.spacehey.net/media/slBcEZzHfzvQ7eO8kOABSEeUtaa436d6fdrj5t59NFAw=/https://i.ibb.co/2dC6Lk7/snow.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.40;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}

</style>

<style>

@keyframes glitch {
  1%{
    transform: rotateX(10deg) skewX(50deg);
  }
  2%{
    transform: rotateX(-10deg) skewX(-70deg);
  }

3%{ 
transform: rotateX(0deg) skewX(0deg);
}
}

.profile h1{
Font-size:40px;
Text-align:center;
animation: glitch 5s infinite;
}

</style>

<style>
    @import url('https://fonts.cdnfonts.com/css/nevolasty');

.profile h1{
    font-family: 'Nevolasty', sans-serif;
    font-size: 45px;

   
}
</style>

<style>

    }
      .profile h1:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 20px;
  width: 360px;
  background-image: url(https://64.media.tumblr.com/8ed8ab5011ad68658a0964c1dfabf78a/330502209c107ea2-24/s640x960/9540865ba75a9ec43692eac00a025613d85083cd.gifv);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: rotate(2deg);
  margin-bottom: -10px;
}

    .mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 35px;
  width: 450px;
  background-image: url(https://gifcity.carrd.co/assets/images/gallery48/70d22c38.png?v=5bf8fcf7);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.profile .url-info:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 35px;
  width:450px;
  background-image: url(https://gifcity.carrd.co/assets/images/gallery48/70d22c38.png?v=5bf8fcf7);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: -12px;
}

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/Gtgx1sm94hI//?&;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 20 of 159 comments ( View all | Add Comment )

Kulcs	1786641800 using, thanks yo Report Comment
lo_ojo!!	1786481835 using Report Comment
Misty henriksson <3	1781298587 Using!! Report Comment
Space_Cat!!X3	1780211029 using!! <3 Report Comment
Doobpis	1779889575 Using Report Comment
Tinafish	1779458445 using Report Comment
Anya ⦻	1777470860 usingg Report Comment
ɱơɬơrყ۷ƙą (っ҂ཀ•)っ	1777076463 using,, ty ! ! Report Comment
Mr. Puff	1776441684 Using Report Comment
VINNY	1775471554 using Report Comment
I'm Tearly	1773291362 usingg Report Comment
𝕴𝖓𝖊𝖝𝖈𝖚𝖘𝖆𝖇𝖑𝖊 𝕰𝖛𝖎𝖑	1772972455 using Report Comment
T0j1	1772221531 USING Report Comment
Andy (っ҂° ཀ•)っ	1771308101 using :3 Report Comment
Niko	1769881963 using !! thx Report Comment
Ekiša	1767448354 using:3 Report Comment
FKgreenSo	1766261491 usando Report Comment
ashh	1764429148 usinggg Report Comment
⦻lendy☣braun⦻	1763143173 using :b Report Comment
Dextr Decomposed	1762392647 using Report Comment