Runescape - Modern Layout

Tags: simple, runescape, layout, layouts, clean, rs3, jagex, mmo

Description:

As I made a retro Runescape layout I thought it only best to make an accompanying mondern Runescape layout as well.

Its not 100% accurate to the current website. Just because theres a lot of complex elements. I'll continue to update the theme as time goes on.

Preview:

click on the image for a larger preview

Code:

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

@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');

:root {
--themecolor5: #000;
--themecolor4: #fff;
--themecolor3: #000;
--themecolor2: #333333;
--themecolor1: #111111;
}

  body{
   	background-image: url(https://www.runescape.com/img/rs3/background-main.jpg);
    
    font-family: 'Cinzel', serif !important;
  }



main:before {
    width: auto;
    
    min-height: 200px;
    display: block;
    content: "";
    box-shadow: white;
    
  margin-left: 20px;
  margin-right: 20px;
    background: rgba(255, 165, 0, 0);
  	text-align: center;
  	justify-content: center;
  	background-image:url(https://cdn.discordapp.com/attachments/874275178576773183/934845440376045598/RS3.png);
    background-size: contain;
  	background-repeat: no-repeat;


}
  main{
    padding: 40px;
    background-image: url(https://www.runescape.com/img/rs3/content_repeat_y.jpg);
    background-size: contain;
    border: 1px solid #fff;
    
    
  }


  p{
    color:#fff;
  }

  h1{
    font-family: 'Cinzel', serif !important;
    color: #fff;
    font-size: 40px !important;

text-transform:uppercase !important;
padding-left: 2px !important;
    
  }

  h4{
    color: var(--themecolor4) !important;
  }

  a{
    color: #90c040;
  }

  a:hover{
    color: #90c040;
text-decoration: underline;
  }



  .heading{
   
    background: url(https://www.runescape.com/img/rs3/parchment.jpg) !important;
    
  box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
    color: #fff;
  	text-align: center;
    
  }

.heading a{
 color: #000; 
}

  .contact, .url-info, .table-section{
    
    background: black;
    border: 4px solid #382418!important;
    padding: 6px;
  }

.blurbs{
    
    
    background: url(https://www.runescape.com/img/rs3/parchment.jpg) !important;
    
  box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);

        
    }
.blurbs a{
 color: #fff;
}
 .profile-pic img{
 display: block;

 border: 5px solid #fff;
 border-radius: 10%;
   
   
}

.general-about{


text-align: center;}

.blurbs.heading {


    background: url(https://www.runescape.com/img/rs3/parchment.jpg) !important;
    
  box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
}
.friends {
  
    background: url(https://www.runescape.com/img/rs3/parchment.jpg) !important;
    
  box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
  padding: 20px;

}

.friends a{
 color: #000; 
  
}
  


  .comments-table{
    background: black;
    border: 2px solid #382418;
    padding: 6px;
  }

  .comments-table tr td{
    background: #000 !important;
  }
  .comments-table p {
    color: #fff;
  }

  .profile-info .inner{
    
   
    
    color: #fff;
    
  }

.blog-preview {
  
   
   
    background-image: url(https://www.runescape.com/img/rs3/parchment.jpg);
     background-size: fill;
 background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  font-family: 'MedievalSharp', cursive;
  box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
  
}

.blog-preview p{

  color: #000;  
  padding: 10px;
  font-size: 20px;

  

    }

.blog-preview a{

  color: #fff;  
  

  

    }

.blog-preview h4{

    
  
    background: url(https://www.runescape.com/img/rs3/parchment.jpg) !important;
    
  box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 13px 0px 5px 0px rgba(0,0,0,0.75);
  text-align: center;

  

    }

  .profile-info{
    height: 126px;
    width: 152px;
    background-image: url(https://www.runescape.com/img/rsp777/splash/compare_users.gif);
    background-size: contain;
    
    
  }

  table.details-table{
        
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
    .profile .details-table td{
        

   background: #000;
   BOTTOM !important;
        
    }

  .count {
    color: var(--themecolor4);
  }

  footer, nav .top{
    background: #000 !important;
   
  }

  nav .links{
    background: var(--themecolor3);
    
    border: 2px solid #fff;
    padding: 10px;
    margin-bottom: 10px;
  }

nav .links a{
    
    
    color: #90c040;
  }

nav .links a:hover{
 color: #90c040;
text-decoration: underline;
}

  .comment-replies{
    border: 4px solid #382418;
    
  }

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