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

pinq	1761246356 using Report Comment
Angelface	1760453732 Using Report Comment
♱ pathetic	1759469715 using Report Comment
Lou	1759296218 using Report Comment
sarcatsm	1758870854 using Report Comment
Nina Kagamine	1758556987 Using Report Comment
꒰🩶꒱﹒ ᴅʀɪ ﹒⟢	1757900292 udhaisu using Report Comment
невена	1756713466 using! Report Comment
𐔌 . ⋮SiLlY dEPrEsSeD.ᐟ ֹ ₊ ꒱	1756700739 Usando :33 Report Comment
Lomi >_<	1755501193 im gonna kiss you Report Comment
Sehle	1754767417 usingg Report Comment
ez!!	1754310626 using!!! Report Comment
RelvxZ ★	1754221647 usingg :3 Report Comment
‧₊xUL74A V10L3Tx★	1753902758 usingggg ty!!!!! :))) Report Comment
Ventipxxp	1753643558 so using Report Comment
vcyurie	1753551036 using Report Comment
horeemeeyah	1752964600 using Report Comment
𝕮𝖆𝖇𝖑𝖔𝖈𝖔	1752364798 using Report Comment
NoLife	1750905266 ¡Usándolo! ¡Y por cierto, es genial! Report Comment
s	1750618964 Usando! Report Comment