Life is Strange layout!! (+ To all of you - Syd Matters)

Tags: life is strange

Description:

Please keep the credit when using! ;33

Preview:

click on the image for a larger preview

Code:

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

<style>
.profile {

background: #ab9b90; opacity: 0.8;

 }
</style>

<style>
.friends:not(#comments) {

  grid-area: friends;

  background:#8f847c;  

  border-radius: 15px

}

</style>

<style>
.profile .friends td {

  background: #94857b;

  border-radius: 15px

} 

</style>

<style>
.profile .table-section .details-table td {
  background-color: #8f847c;
  color: #edf0ee;
}

.profile .blurbs .heading, .profile .friends .heading {
  background-color:#7d7169;
  color: #edf0ee;
</style>

<style>
.profile-pic {

border-radius: 500px;

overflow: hidden;

}


.profile .friends .person img {

border-radius: 500px;

}
</style>

<style>
.profile .contact, .profile .table-section, .profile .url-info {
  border: 4px solid #8f847c;
</style>

<style>
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #8f847c;
  color: #bbb;
}
</style>

<style>
body {
     background-image: url("https://images4.alphacoders.com/685/685747.jpg") !important;
     background-color: black !important;
     background-attachment: fixed !important;
     margin: 0;
     padding: 0;
}
</style>

<style>
main a {
  color: var(--black);
}
</style>

<style>
p {
color: #403b37;
}
</style>

<style>
@import url("https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap");

.w-40 h1{
font-family: Gochi Hand;
font-size: 40px;
text-align: center;
background: -webkit-linear-gradient(#ffffff, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: ;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
p{
  font-family: 'Gochi Hand', cursive;
  font-size: 150%;
}
h1,h2,h3,h4,h5{
  font-family: 'Gochi Hand', cursive;
  font-size: 120%;  
</style>

<style>
:root {
    --logo-blue: transparent;
</style>

<style>
:root {
   --lighter-blue: url("https://i.pinimg.com/564x/d6/a8/9a/d6a89aee36a02bd2a33577ab084cdde4.jpg"); 
</style>

<style>
main:before {
	width: 100%;
	height: 130px;
	display: block;
	content: "";
	background-image: url('https://i.pinimg.com/564x/9d/e0/84/9de0846eb7b19356cc4b58c6b4d27b96.jpg');
	background-position: center center;
</style>

<style>
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 130px;
	}
}
</style>

<style>

 .blurbs .section h4{display: none !important;}

</style>

<style>

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block

}

</style>

<img src="https://i.pinimg.com/564x/d6/a8/9a/d6a89aee36a02bd2a33577ab084cdde4.jpg"/>

<img src="https://i.pinimg.com/564x/08/31/04/08310477513b325942fd418e0344359b.jpg"/>


<style>

  .blurbs .heading{ font-size:0; }

.blurbs .heading:before{ content: "❝Everything is a picture waiting to be taken...❞ "; font-size:.8rem; font-weight:bold; color:white; }
</style>

<style>
.friends#comments .heading{ font-size:0; }

.friends#comments .heading:before{ content: "Comments!!"; font-size:.8rem; font-weight:bold; }
</style>

<style>
img.logo{
content: url("https://i.postimg.cc/W1fkJT3w/Rewind-Swirl-2.png");
width: 20px!important;
height: 20px!important;
</style>

<style>
.online { visibility: hidden; } .online img { content: url("https://i.postimg.cc/ryP7QR1R/butterfly-effect-life-is-strange-ezgif-com-crop.gif"); animation-name: none; visibility: visible; height: 40px; width: 40px; 
</style>

<style>
li.active .icon { content:url('https://gifcity.carrd.co/assets/images/gallery92/a3c39389.png?v=d55ea43d'); width: 20PX;height: 20px;}
</style>

<style>
.profile .friends .person img:not(.icon):hover {
    transform: scale(1.2);
    transition: 0.5s ease;
}
.profile .friends .person img:not(.icon) {
    transition: 0.5s ease
}
</style>

<style>
body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://i.postimg.cc/QCtm3VhB/letlts-ezgif-com-crop.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>* {cursor: url(http://www.rw-designer.com/cursor-view/110065.png), url(http://www.rw-designer.com/cursor-view/110065.png), auto !important;}</style>

<style>
h4 {color: #edf0ee;}
</style>

<style>
span.count {color: #edf0ee;}
</style>

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

<style>
.inner .comments-table {border: 4px solid #7e7067;
border-radius: 20px;}
</style>

<style>
table.comments-table{
display: block;
height: 350px!important;
overflow-y: scroll;
}
</style>

<style>
td .comment-replies {border: 3px solid #7e7067;
border-radius: 30px;}
</style>

<style>
a:hover {
color: white;
font-style: ;
</style>
 
<style>
nav .links a:hover {
color: white;
text-transform: uppercase;
font-style: ;
</style>

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

Kashiii	1729061273 using! Report Comment
owis	1728028801 ussinngggg! Report Comment
Pelican	1724806683 hello!! im using this and was wondering how to change the background image? i've tried to just do it myself but im new to code lol thanks! Report Comment Hey! So, there is a section in the code like this: body { background-image: url("https://images4.alphacoders.com/685/685747.jpg") !important; background-color: black !important; background-attachment: fixed !important; margin: 0; padding: 0; all you need to do is change the url to the image's url you want, hope this helps! :D by SUNNY!!; 1724832363; Report aaaaah ty sunny!! ur a lifesaver lmao by Pelican; 1725085571; Report of course <3 by SUNNY!!; 1725100423; Report
fantapuppy	1724684539 using !! Report Comment
E1la_no1	1724535408 using!! :D Report Comment
Alu!	1724292593 USING! Report Comment
Gh1s4	1722307539 Using Report Comment
KAITON	1722074210 usingg :3 Report Comment
joyteo	1721866955 using Report Comment
˚₊‧꒰ა ☆ ໒꒱ ‧₊˚ simon	1719551388 using!!!! Report Comment
LVRN<3	1719526115 using!! Report Comment
vasper	1719525939 using!! Report Comment
HopeDelRey	1717699280 usando s2 Report Comment
mxxnbyulgf	1717614480 using :) Report Comment
Alexander	1717011005 Using Report Comment
sternkarte(Fynn)	1716117823 USING!!! thiis is so awesome Report Comment
Musuhabi	1715638324 Using! Report Comment
GIA (,,>﹏<,,)	1711495072 im using this, but i wanna keep my pfp as a square bc when i put on the layout my pfp is cropped weird in it. do you know how to fix this? Report Comment Yeah sure! Just delete this part in the code: .profile-pic { border-radius: 500px; overflow: hidden; } That's all !! by SUNNY!!; 1711563317; Report tysm ^^ by GIA (,,>﹏<,,); 1711571719; Report
GIA (,,>﹏<,,)	1711312755 Omg omg omOMG OMG I LOVE THIS!!!!! Report Comment TYTYTY<333 by SUNNY!!; 1711398007; Report