← Back to Layouts
jinx arcane/lol layout!

Name: FriendRewind
Author: FriendRewind
Author: medeuxsa
Category: gamer
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 (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<!-- 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></style>