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

W0LFIE	1728625855 THIS IS SO COOL WHAAA Report Comment
Danyal/Riley	1728139984 using, but may edit Report Comment
bizznit	1727583707 im using this ok Report Comment
Alex	1727563783 Thx using Report Comment
★彡[ᴠɪɴɴʏ!!]彡★	1727491924 Using!!! Report Comment
aestxr	1727225172 Using! Report Comment
vikkstur	1726600298 usingg Report Comment
★JAIDEN★	1726533678 using Report Comment
DaRibzy	1725666231 USIG THANX SO MUCH Report Comment
Axel's Corpse	1725479617 Using!! Report Comment
spooky	1724507525 USING >w< Report Comment
тоша	1723029478 Using lol >w< Report Comment
Makedbvnny	1722952747 USING!! Report Comment
luvzw	1722876532 using :3 Report Comment
𝚂𝚒𝚖𝚘𝚗.	1721460614 Usinnggg :33 Report Comment
morgan	1720061118 usingg xD Report Comment
ᒍᗩIᗪEᑎ ✮	1719376747 Using! Report Comment
prinz	1718868141 usiinnnnggggggg Report Comment
richard	1718851408 using Report Comment
Ghost	1718848023 using!!! Report Comment