← Back to Layouts
jinx arcane/lol layout!

Name: FriendRewind
Author: FriendRewind
Author: medeuxsa
Category: Gaming
Created: June 27, 2026
Based on Jinx from Arcane and League of Legends!! A bit of both! Put "Get Jinxed" or "Ma Meilleure Ennemie" on your profile and start crafting at your desk!
Comments (1)

Aaron Phantasmic 06/27/2026 3:41 PM
Great job!!
You must log in to comment.
CSS Code

<!-- changes logo-->

<style>
  
  .myspace-header .nav-logo {
    content: url("https://i.ibb.co/tpB71Ck1/jinxeyesshimmer.gif") !important;
    height: 100px;
    width: auto;
    margin: 0 10px;
    position: center;
    top: 2px;
}
  
</style>

<!-- changes search bar-->

<style>
  
   .myspace-header .search-button {
    
     Content: url("https://i.ibb.co/ksZs2Nzt/jiinxstare.gif");
    background: #F013CB;
     color: #1A79DB;
     height=300px;
     text-shadow: none;
    
  }
  

  .myspace-header .search-input {
    
    color: #1A79DB;
    background-color: #F013CB !important;
  }
  
</style>

<!-- changes the friend number color-->
<style>
.count{

color: white;
  
  }
  
</style>

<!-- this changes the text of comment box--> 
<style>
.profile .friends p {

  color: #1A79DB;
  text-shadow: 1px 1px #F013CB;
  
  }
  
  .profile .friends a:hover {
  color: white;
  text-shadow: 1px 1px #F013CB;
    
  }
  
  </style>

<!-- color of header-->

<style>
  
  .myspace-header .top-nav {
    
 background-image: url("https://i.ibb.co/RkpTrPWv/jinxhallucination.gif");
    background-size: 100% 100%;
  background: #000000 !important;
 
  }
    
</style>

<!-- color of top nav bar-->

<style>
  
  .myspace-header .main-nav-container {
    background: black !important;
    width: 800px;
  }
  
</style>

<!--color of friend names-->

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

<!-- color of the badge text-->
<style>
  
  .badges-widget .badge-label {
    
    color: white;
    
  }
  
</style>

<!--> color of footer--> 

<style>
  
  footer{
    
    background-color:black !important;
    
  }
  
</style>

<!--my online graphic-->
<style>
  .online img.status-gif{
    
    content: url("https://i1.glitter-graphics.org/pub/576/576021pibmhzwz3n.gif");
    height: auto;
  width: 500px;
  max-width: 500px;
}
    .online{
      content:" ";
      
  }
  
</style>

<!-- my idle color--> 
<style>
  
  .idle {
  color: #F013CB;
    
  }
  
</style>

<!-- my offline color-->

<style>
  
  .offline {
  content: url("https://i7.glitter-graphics.org/pub/1904/1904057iz62eqcjkk.gif");
  font-weight: bold;
  font-size: 95%;
    
  }
    
</style>

<!-- font style-->

<style>
  
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
 
 body{
	font-family: "Cinzel Decorative", serif;
   font-weight: 900;
   font-size:20px;
   color: black;
   
  }

  </style>

<!-- cursor details -->
<style> 
  
* {
  cursor: url('https://i.ibb.co/hFqSrY2d/cursor.png') 0 0, auto !important;
}

</style>

<!-- should change all colors? -->
<style>

:root{
    --logo-blue:black;
    --darker-blue: #F013CB;
    --lighter-blue:black;
    --even-lighter-blue: black;
    --lightest-blue: black;
    --dark-orange: #1A79DB;
    --light-orange: #F013CB;
    --even-lighter-orange: black;
    --green: #808080;

}

</style>

<!-- font colors -->

<style>
  
  h1, h2, h3, h4{
    
    color: white;
    text-shadow: 3px 3px #F013CB;
  }
    
	p{
      
      color: white;
      text-shadow: 3px 3px #1A79DB;
  
  }
   
  
  a{
    color: white;
   
  }
  
  a:visited{
    color: white;
      
  }
  
    a:hover{
    color: #1A79DB;
 
  }
  
</style>

<!-- background image-->

<style>
  
  body{
    
    background-image: url("https://i.ibb.co/qYrYKD9g/jinxfingergungif.gif");
    background-repeat: space;
    background-size:500px;
    
  }
  
</style>

<!-- body of profile background -->
<style>
  
  main{
    
    background-image: url("https://i.ibb.co/zWQ7dn3r/jinxneonbg.jpg");
    background-Size: 100%, 100%;
    background-repeat: repeat-y;
    
  }
  
</style>

<!-- prior image-->

<style>

 body:before {

    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100;
    background-image: url('https://i.ibb.co/r2CbWvK6/jinxhigif.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    animation: yourAnimation 2s ease 0s 1 normal forwards;
    pointer-events: none;

}

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


<!-- image before main-->

<style>
  
  main:before{
    
    width=100%;
    background-image: url(https://i.ibb.co/NnVw527r/jinxhandsupgif.gif);    
    height:300px;
	display: block;
	content: "";
	background-position: center center;
	background-size: cover;

}

@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;

}

  
</style>