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

Simon ☆ﾟ⁠:⁠｡♫	1745094245 Using yay :33 Report Comment
halokwttii	1744712082 using! Report Comment
jas	1744198630 usinggg Report Comment
zaacbxy	1743664668 usingg Report Comment
anya_!	1742745749 usingg! i <3 this layout Report Comment
Francis4everr	1742512807 usingg :p Report Comment
x0x0ST4RZ!X3	1742272165 using ! Report Comment
Megatron	1742189310 Using!! Report Comment
DIgital.SinK06	1741727570 using! Report Comment
saya 🦠	1741376256 using Report Comment
Irosefy	1740970269 Usando! Report Comment
deleted	1740254388 using Report Comment
Xen:P	1739901933 this looks so good , definitely using>.< Report Comment
lumia	1739736986 using Report Comment
Gabriellllllllll	1739132078 using Report Comment
Ais	1739050940 using Report Comment
˚₊‧꒰ა໒꒱ ‧₊˚	1738714090 using Report Comment
http?₍𖤐⁾	1738622535 using Report Comment
Caz!!	1738529782 Usinnggg <3 Report Comment
tactical	1738370214 using Report Comment