The Riddler <?> (UPDATED!!)

Tags: the riddler, riddler, batman, paul dano, terminal, green, riddler 2022, the batman, cyber, green

Description:

made a riddler theme didn't have much to go off other than black and green so i just tried to be a little creative and minimalistic. plz enjoy ^^ I added a rataalada animation intro at the END of the code if you would like to use it. The web filter doesn't work if the animation code is being used so sadly you need to pick one or the other. If you do know how to have both work at the same time plz message my main!

Preview:

click on the image for a larger preview

Code:

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

    <style>
  @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
    </style>

  /*USER NAME FONT AND COLOR*/      
<style>
      h1 {
        font-family: 'Major Mono Display', monospace;
        font-size: 20px;
        color: #74FFAD;
        font-size: 30px !important;
      }
    </style>
    
    <style>

    // green & web filter remove this if you want the animation

@keyframes {

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

body::before {

content: " ";

display: block;
background-repeat: repeat;
position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}
  //above is the lined web filter ^^^

}
.comments-table td{
    background-color: transparent
}
.profile .table-section .details-table td {
background-color:#395044;
}
img {
filter: sepia(100%) hue-rotate(100deg) saturate(5);
}
body {
    background: url(https://img.wallpapersafari.com/desktop/800/450/13/78/3IKmHz.png);
    background-position:center center;
    no-repeat fixed; background-size:cover;
}
nav .top{
/* navigation bar at the top/the bar that has the search and spacehey logo */
background-color: transparent;
}
main {
  background-color:transparent;
  color: #74FFAD;
}
  .profile .blurbs .section h4 {
font-family: 'Syne Mono', monospace;
font-display: bold;
color: #74FFAD;
font-size: 18px;

}
p{
font-family: 'Cutive Mono', monospace;
font-weight: bold;
color:#74FFAD;
}

nav img.logo {
    content: url("https://64.media.tumblr.com/0eee2ea6cb48ac22ebf695f929580a01/c803df8cc8f9881e-2b/s640x960/df5b551097d30e838f78826bec96d6fd3b10ae0c.pnj")
}
  /* this is the box that says "_'s latest blog entries" */
DIV.blog-preview{
text-align: left;
font-family: 'Syne Mono', monospace;
color: #74FFAD;
}
nav { 
font-size: 11px !important;
font-family: 'Cutive Mono', monospace;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
font-weight: bold;
text-align: center;
text-decoration-color: #74FFAD;;
}
nav, nav .links a {
color: #74FFAD;
}

.heading, .url-info, .blurbs, .details, .mood, .blog-preview, .friends, .contact, .table, .table-section, footer{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
padding: 8px !important;
border: var(--borders) !important;
}
.online img { 
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6c17a15b-6650-4f05-b9cd-5c7d47f3945c/df1yi7s-7388f972-4069-419a-9293-ab84093d2674.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzZjMTdhMTViLTY2NTAtNGYwNS1iOWNkLTVjN2Q0N2YzOTQ1Y1wvZGYxeWk3cy03Mzg4Zjk3Mi00MDY5LTQxOWEtOTI5My1hYjg0MDkzZDI2NzQuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ljalhVquyV1sE3gLhJZ7T3tRI6LxMqDEyrYBZuTCjaA");   
        visibility: visible; 
        height: 47px;
        width: 35px;
        animation-name: bounce;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
}
 h4 {
font-family: 'Major Mono Display', monospace;
color: #74FFAD;
border: 3px solid #395044;
text-align: center;
border-radius:5px;
 }
 .contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: "☕"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "❓"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "💬"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "💭"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "📩"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🛑"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "💎"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🚩"
}
 a:hover {
     color: #72E7FF; 
   } 
   a{
     color: #74FFDF; 
   }
   nav .links {
background-color: transparent;
}
nav .links a:hover {
color: rgba(255, 199, 226, 1);
}
.comments-table {
border: none;
border-collapse: collapse;
}
.comment-replies {
border: 1px solid #00ff00;
margin: 2px;
}
nav .info {
background: none;
}
.contact {
  border-radius: 8px;
  background-image: url(gif or image url);
  background-position: right top;
  background-repeat: repeat;
background-attachment: scroll;
Width: 310px;
Height:180px;

font-family: 'Cutive Mono', monospace;
color: black;
  text-shadow: 1px 1px 2px #39ff14, 0 0 25px #39ff14, 0 0 3px #39ff14; 
}
 .comments-table td:first-child {
    background-color: transparent;
    text-align: center;
    font-weight: bold;
    width: 35%;
}
.comments-table td {
 background-color: black; 
}

button:not(.logout-btn) {
 background: black; 
 box-shadow:  0 1px 1px 1px inset;
 color: #74ffad;
 font-size: 11px;
 font-weight: bold;
 text-shadow: #2EFA03 0px 2px 5px;
 border: 1px solid #2EFA03;
 border-radius: 2px;
 padding: 2px;
} 

button:not(.logout-btn):hover {
 background: black; 
 box-shadow: #2EFA03 0 1px 1px 1px inset;
 color: #2EFA03;
 font-size: 11px;
 font-weight: bold;
 text-shadow: #2EFA03 0px 2px 5px;
 border: 1px solid #2EFA03;
 border-radius: 2px;
 padding: 2px;
} 
.friends .person p, .logout-btn {
color: #74FFDF !important;
}


body {
background-color: black;
);
}

.online{content:url("http://www.myspacegens.com/images/online_now/65.gif");}
-->put an online gif here ^, LIKE "LOSER IS ONLINE"!!<--

  //this is the riddler question mark next to home and all that above you can remove this if you dont like the look

<div class="star">
<style>
nav .links{
    text-align: center;
}
nav .links a{text-shadow:none;
}
nav .links a{text-shadow:none;}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " <?>";
    color: white;
    font-weight: bold;

</style>


  -----&gt; NOTE IF YOU WANT A ANIMIATION INTRO FOR YOUR PAGE THE WEB FILTER WONT 
WORK. this is the animation code if you want a rataalada intro.

    
 // RATAALADA intro screen

     <style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://64.media.tumblr.com/8b34aec095aa91ee0077c24b273770b8/42259b500f1177ec-1c/s540x810/8dfb719f3ba51c2a1a4265bb10bf42ccf0d17824.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

    </style>

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

Shauggx.grotsq	1770277567 Using Report Comment
2	1769759933 Usingg Report Comment
Elias	1766114065 If you want to make both work I tried putting the layout code in the about me section while the intro code went into the people I'd like to meet section and it seems to have worked Report Comment
[zz3ro_]	1766065867 using!!:D this is so awesome!! ^_^ Report Comment
chaysemustdie	1763160761 using Report Comment
irumikumikid	1746216988 USING Report Comment
☆ pam/milo ☆	1744735918 usingg TYSMM this rocks ! Report Comment
simone c:	1743962522 uuuusssiiinng! Report Comment
Dahlia	1740502782 using tyty! Report Comment
- 𝘵𝘪𝘮𝘰𝘵𝘩𝘺	1737060267 using! Report Comment
divergente	1734212656 usingg uwu Report Comment
Rone	1722893109 Using Report Comment
merknet	1720575214 Using Report Comment
roswellflesheater987	1707407334 using!! Report Comment
Demian	1705953204 using! Report Comment
⛤ klitz (AUTOPLAY)⛧	1700005220 using!!!!! ^_^ Report Comment
⋆𓏲 tavryn ★ ; ⚱️	1699333932 USING!!!!RAAGAH Report Comment
✞.Lacrimosa.✞	1679957740 I'm totally using this layout it looks so good you did amazing! Report Comment
GhostyCure	1676620234 USING OMG Report Comment
stellaaa ★	1657055970 this is great Report Comment