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

Anya ⦻	1777470860 usingg Report Comment
ɱσтσʀƈιєł (っ҂ཀ•)っ	1777076463 using,, ty ! ! Report Comment
Mr. Puff	1776441684 Using Report Comment
V1NNY	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
disorderedtord	1770266723 images keep breaking when i try to add them to my profile with this layout does anyone know why? :( Report Comment
𝓥	1769881963 using !! thx Report Comment
Ekiša	1767448354 using:3 Report Comment
FKgreenSo	1766261491 usando Report Comment
ashh	1764429148 usinggg Report Comment
x☆//lendy>_<braun\\☆x $x☆//lendy>_<braun\\☆x's profile picture$	1763143173 using :b Report Comment
TechDexxx	1762392647 using Report 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