République Game Layout

Tags: game, yellow, republique, bela
Description:

From the game République
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Bela 🔊⬆ (https://layouts.spacehey.com/layout?id=280) -->

<style>
/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️==========*/

a:hover{
   cursor: url('https://cdn.custom-cursor.com/db/pointer/32/Yellow_Neon_Hand_Pointer.png'), auto;
}
* { 
   cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Red_Neon_Arrow_Cursor.png'), auto; 
}
</style>
<style>
/* font family */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');
</style>

<style>
:root{
  --headers: #cce341;
  --text: #cce341; 
  --names: #209bbf;
  --links: #cce341;
  --hover: #cce341;
  --background_image: url("https://i.imgur.com/pHf5vkM.jpg");
  --font-family: 'Orbitron', sans-serif;
  --curve: 0px;
}

.url-info{display:none !important;} /* to hide the url */
.blurbs .heading{display:none !important;} /* to hide the blurbs heading */

/* assign the text color to names */

h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
nav label{color: var(--headers) !important;} /* color of search */
.section h4 {color: var(--headers) !important;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */


/* font family */

h2, h3, h4, h5, a, p, nav label, .section{ 
    font-family: var(--font-family) !important;	
    text-shadow: 2px 2px 5px black !important;
    font-size: 12px!important;
}
/* padding for round corners */

h1, h2, h3, h4, h5, p {padding-left:5px !important;}

/* padding and margin */
/* change comment replies here */

.icon{border:none !important;}
.mood{margin-bottom 10px !important;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:-10px !important;}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:5px dotted white;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:7px !important;}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important;  filter: brightness(95%);
}

/* background image */

body {
    background-image: var(--background_image) !important;
    background-color:black !important;
    background-attachment: fixed; !important;
    background-position: center;
/* to make everything centered add in this code: text-align: center; */
}

/* navigation */
/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav .top { background: rgba(0,0,0,0.4);}
nav .links {background: url('https://i.imgur.com/tFjGZPn.png')!important;
    background-size: 100%100%!important;}
nav img.logo{filter: brightness(0) saturate(100%) invert(100%) sepia(51%) saturate(2264%) hue-rotate(9deg) brightness(91%) contrast(95%) !important;}

/* color the search bar and button */

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border: 2px solid var(--headers) !important;
    color:var(--names) !important;
    border-radius: 5px !important;}
button{
    border-radius: 10px !important;
    border: 2px solid var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.1) !important;
    color:var(--headers) !important;}

/* header image */

main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
    border-radius: 5px;
	background-image: url('https://i.imgur.com/Hn5ESXa.jpg');
	background-position: center center;
	background-size: cover;
	filter: drop-shadow(2px 2px 4px #cce341) !important;
/* filter:hue-rotate(var(--hue)) drop-shadow(2px 2px 6px blue) !important; */
}
@media only screen and (max-width: 600px) {
	main:before{
	height: 200px;
	}
}

/* online icon */

.online {content: url(https://dl.glitter-graphics.com/pub/104/104607x61kd02dl0.gif);}

/* heading styles */

h1{
    padding-left: 20px !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    font-family: 'Orbitron', sans-serif;
    font-size:25px !important;
	letter-spacing:0.1em !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke-width: 1px !important;
    -webkit-text-stroke-color: #209bbf !important;
    text-shadow:    2px 2px black,
                    4px 5px #209bbf !important;
}
 
/* this is the about me and heading background. you can add an image if you want */
.section h4{
    background: url('https://i.imgur.com/tFjGZPn.png')!important;
    background-size: 100%100%!important;
    border-radius:var(--curve);
    padding-bottom: 2px !important;
    text-align: center;
}

.profile-info{
    background-image: url('https://games.highdefdigest.com/uploads/2016/03/26/terminus3.png');
    background-size: contain;
    border: 1px solid #cce341 !important;
}

/* main section */

main{
    border-radius: var(--curve) !important;
    background-color:rgba(0, 0, 0, 0.4); !important;
    border: transparent !important;
    outline: none !important;
}

/* images */
.profile-pic img{
    outline:none !important;
    border-radius: 5px !important;
    filter: drop-shadow(2px 2px 6px #cce341) !important;
}

.profile .friends .person img{
    transform: skew(0deg, 0deg);
    border-radius: 5px;
    filter: drop-shadow(2px 2px 4px #cce341) !important;
}

.friends-grid img{
    outline:none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}

.inner img{
    outline:none !important;
    filter:  drop-shadow(1px 1px 1px black) !important;
    border-radius: var(--curve) !important;
}

/* interest table background color. replace transparent with any color to see the change */

td {background-color: transparent!important;}

/* boxes */

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.mood, .contact, .blog-preview{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.mood, .blog-preview {
    text-align: center;
}
.table-section{
    border:none !important;
    background-color:transparent!important;
    border-radius: var(--curve) !important;}
.heading{
    background:url('https://i.imgur.com/tFjGZPn.png')!important;
    padding-bottom: 4px !important;
    background-size:100%100%!important;
    text-align: center;
}
/*.heading{background: url("https://i.imgur.com/cbnSkGJ.jpg?1") !important;padding-bottom: 2px !important;}*/

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: 1px solid var(--headers) !important;
    outline: none !important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
}

.comments-table td:first-child img { 
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

footer{
    background-image: url('https://i2.wp.com/darkzero.co.uk/asset/2014/10/Cover.png?fit=600%2C200&ssl=1');
}
</style>

<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}

::-webkit-scrollbar-track {
border-radius: 10px;
width: 2px;
border: 1px dotted white;
}

::-webkit-scrollbar-thumb {
background: white; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: white;  
}

/* the div below is the background song that autoplays. It's a youtube video embed code with the width and height set to 1 so it's hidden. */
/* to edit youtube song, replace the https url up until the ? mark */
</style>
<div>
        <iframe frameborder="0" width="1" height="1" src="https://www.youtube.com/embed/rW_kq8R8lLA?autoplay=1;fs=0&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=1&end=270&vq=large&origin=https://youtubeembedcode.com"><div>youtubeembedcode de</div><div> </div></iframe>
</div>
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.