Rule Of Rose

Layout Details

Warning Screen

This is an original HTML and CSS entry screen designed as a profile warning page.

The concept is inspired by the menu aesthetics of Rule of Rose, recreating the dark, melancholic atmosphere and unsettling tone of the game’s interface before entering the main profile.

The layout is designed to resemble a PlayStation 2-era start screen, giving the feeling of launching a psychological horror title before accessing the content.

This project focuses on immersion, using visual structure and styling to simulate a haunting, game-like entrance experience.

Original design created by N4TH4N43L_XP.

Code :

Copy and paste to About Me

<style>

@font-face { 
    font-family: 'BlackPink-Cursive-Demo'; 
    src: url('https://creepyboom.neocities.org/Font/BlackPink-Cursive-Demo.otf'),
    font-weight: bold;
    font-style: normal;
}
#profile {
    position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0; 
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    overflow-y: scroll;
    opacity: 1;
    transition: .2s;
}
#profile::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
#profile > * {
    width: 100%;
    max-width: 810px;
    display: block;
}
#profile:target {
    opacity: 0;
    visibility: hidden;
}
.menu:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 810px;
    height: 680px;
    background-color: #000000;
    background-image: url("https://i.postimg.cc/d34KN9FC/Rule-Of-Rose-Background-1.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 100% 100%;
    overflow: hidden;
    z-index: 10; 
}
#ruleofrose-menu:target ~ #ruleofrose-intro {
    display: none;
}
#profile:target .menu:nth-child(2) {
    display: block;
}
 .ruleofrose-header-logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 490px;
    height: 300px;
    background-image: url("https://i.postimg.cc/ryCytSBW/Rule-Of-Rose-Logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: 0.70;
}
.ruleofrose-start-button {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -70%);
    width: 490px;
    height: 40px;
    font-family: 'BlackPink-Cursive-Demo', sans-serif;
    color: #D9D9D9;
    font-size: 35px; 
    font-weight:normal;  
    letter-spacing: 5px;
    text-align: center;
    text-decoration: none;
    display: block;
    animation: sims-pulse-1 1.5s infinite;
}
.ruleofrose-start-button:hover {
    color: #F4ECE1;
    text-decoration: none;
}
@keyframes sims-pulse-1 {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
.ruleofrose-copyright {
    position: absolute;
    top: 90%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 455px;
    font-family: sans-serif;
    color: #D9D9D9;
    font-size: 13px;
    font-weight: normal;  
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
}
.menu:first-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 810px;
    height: 680px;
    background-color: #000000;
    background-image: url("https://i.postimg.cc/W44zjSSS/Rule-Of-Rose-Background-2.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 100% 100%;
    overflow: hidden;
    z-index: 10; 
}
#ruleofrose-menu:target {
    display: block;
}
.ruleofrose-menu-opciones {
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 490px;
    height: 350px;
}
.ruleofrose-button {
    position: relative;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 490px;
    height: 40px;
    font-family: 'BlackPink-Cursive-Demo', sans-serif;
    color: #D9D9D9;
    font-size: 35px; 
    font-weight:normal;  
    letter-spacing: 5px;
    text-align: center;
    text-decoration: none;
    display: block;
}
.ruleofrose-button:hover {
    color: #F4ECE1;
    text-decoration: none;
}
.profile .blurbs .warning-box-new {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -5%);
    width: 490px;
    background-color: rgba(000, 000, 000, 0.50);
    border-radius: 10px;
    opacity: 0.70;
}
.profile .blurbs .warning-box-new::before {
    content: " ";
    display: block;
    height: 30px;
    background-image: url("https://i.postimg.cc/hG4QCTwK/Rule-Of-Rose-Before.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 100% 100%;
}
.profile .blurbs .warning-box-new::after {
    content: " ";
    display: block;
    height: 30px;
    background-image: url("https://i.postimg.cc/VNs07nhp/Rule-Of-Rose-After.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 100% 100%;
}
.profile .blurbs .warning-content-new {
    padding: 7px 10px;
    overflow-x: hidden;
    overflow-y: auto;
}
.profile .blurbs .warning-content-new::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.profile .blurbs .warning-content-new p {
    font-family: sans-serif;
    color: #D9D9D9;
    font-size: 13px;
    font-weight: normal;  
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
}

/* MOBILES (Max 600px) */

@media (max-width: 600px) {

#profile {
        display: none;
    }
}

</style>

<div id="profile">
    <div class="menu" id="ruleofrose-menu">
        <div class="ruleofrose-header-logo"></div>
        <div class="ruleofrose-menu-opciones">
            <a href="#profile" title="Enter Profile" class="ruleofrose-button">Enter Profile</a>
            <a href="https://cr33pyb00m.neocities.org/decoration" title="Get Code" class="ruleofrose-button">Get Code</a>
            <a href="https://spacehey.com/home" title="Exit Profile" class="ruleofrose-button">Exit Profile</a>            
        </div>
        <div class="ruleofrose-copyright">
            <p>©2006 Sony Computer Entertainment Inc. All Rights Reserved RULE OF ROSE is a trademark of Sony Computer Entertainment Inc.
Licensed to and published by Digital Bros S.p.A.</p>
        </div>
        <div class="warning-box-new">
            <div class="warning-content-new">
                <p>Warning: This profile contains automatic music, many flashing lights and many colors. Please enter at your own risk.</p>
            </div>
        </div>
    </div>
    <div class="menu" id="ruleofrose-intro">
        <div class="ruleofrose-header-logo"></div>
        <div class="ruleofrose-start-section">
            <a href="#ruleofrose-menu" class="ruleofrose-start-button">Press START button</a>
        </div>
        <div class="ruleofrose-copyright">
            <p>©2006 Sony Computer Entertainment Inc. All Rights Reserved RULE OF ROSE is a trademark of Sony Computer Entertainment Inc.
Licensed to and published by Digital Bros S.p.A.</p>
        </div>
    </div>
</div>

Our Generators

Full Layout Generator Create a custom layout with live preview.

Glitter Text Generator Create your own glitter words.

Auto Play Generator Add background music to your profile.

Playlist Generator Organize your favorite songs.

Layout Details

Rule Of Rose

Our Generators

N4TH4N43L XP

Now Playing

Directory