The Sims 2

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 The Sims 2, recreating the soft blue gradient atmosphere and nostalgic tone of the game’s interface before entering the main profile.

The layout is designed to resemble a classic console start screen, giving the feeling of launching a PlayStation 2–era title before accessing the content.

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

Original design created by N4TH4N43L_XP.

Code :

Copy and paste to About Me

<style>

@font-face { 
    font-family: 'ITCBenguiatGothicStd'; 
    src: url('https://creepyboom.neocities.org/Font/ITC-Benguiat-Gothic-Bold.ttf'),
    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: #3C539B;
    background-image: url("https://i.postimg.cc/vBfLbP2k/The-Sims-2-Background-1.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 100% 100%;
    overflow: hidden;
    z-index: 10; 
}
#sims-menu:target ~ #sims-intro {
    display: none;
}
#profile:target .menu:nth-child(2) {
    display: block;
}
 .sims-header-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 290px;
    height: 320px;
    background-image: url("https://i.postimg.cc/ZKH5XKNb/The-Sims-2-Logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
 .sims-start-button {
    position: absolute;
    top: 82%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 390px;
    height: 40px;
    font-family: 'ITCBenguiatGothicStd', sans-serif;
    color: #4CAF50;
    font-size: 30px; 
    font-weight: normal;  
    letter-spacing: 3px;
    text-align: center;
    text-decoration: none;
    text-shadow:
    -1px -1px 3px transparent,
    0px 0px 1px transparent,
    1px 1px 1px transparent,
    2px 2px 1px #000000,
    3px 3px 1px #000000,
    4px 4px 1px #000000;
    display: block;
    animation: sims-pulse-1 1.5s infinite;
}
 .sims-start-button:hover {
    color: #4F9E52;
    text-decoration: none;
}
@keyframes sims-pulse-1 {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
.sims-copyright {
    position: absolute;
    top: 90%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 390px;
    font-family: 'ITCBenguiatGothicStd', sans-serif;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: normal;  
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    text-shadow:
    -1px -1px 3px transparent,
    0px 0px 1px transparent,
    1px 1px 1px transparent,
    2px 2px 1px #000000,
    3px 3px 1px #000000,
    4px 4px 1px #000000;
}
.menu:first-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 810px;
    height: 680px;
    background-color: #3C539B;
    background-image: url("https://i.postimg.cc/FRFGmXVF/The-Sims-2-Background.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 100% 100%;
    overflow: hidden;
    z-index: 10; 
}
#sims-menu:target {
    display: block;
}
.sims-logo {
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translate(-50%, -50%);
    width: 155px;
    height: 105px;
    background-image: url("https://i.postimg.cc/ZKH5XKNb/The-Sims-2-Logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: logo 1.5s ease-out 0s 1; 
    opacity: 0.60;
}
@keyframes logo {
    0% { top: 50%; left: 50%; width: 290px; height: 320px; opacity: 1; }
    100% { top: 10%; left: 10%; width: 155px; height: 105px; opacity: 0.60; }
}
.sims-logo:hover {
    background-size: 120px;
    opacity: 1;
}
.sims-menu {
    position: absolute; 
    bottom: 0px;
    left: 50%; 
    transform: translateX(-50%);
    width: 500px; 
    height: 200px;
    background-image: url("https://i.postimg.cc/52ps1gpT/The-Sims-2-Menu.png");
    background-repeat: no-repeat; 
    background-position: bottom center;
    background-size: 500px 230px;
}
.sims-menu-opciones {
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 500px; 
    height: 350px;
}
.sims-button {
    text-decoration: none; 
    display: block; 
    position: absolute;
    transition: background-image 0.1s;
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain;
}
#btn-enter-profile {
    bottom: 92px; 
    left: 32px; 
    width: 160px; 
    height: 100px;
    background-image: url("https://i.postimg.cc/nrPRX0G7/The-Sims-2-Boton-(1).png"); 
    border-radius: 30px;
}
#btn-enter-profile:hover {
    background-image: url("https://i.postimg.cc/L5bCJN33/The-Sims-2-Boton-(4).png");
}
#btn-get-code {
    bottom: 122px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 200px; 
    height: 100px;
    background-image: url("https://i.postimg.cc/Y0snvbz3/The-Sims-2-Boton-(2).png");
    border-radius: 50px;
}
#btn-get-code:hover {
    background-image: url("https://i.postimg.cc/D0MjSBPc/The-Sims-2-Boton-(5).png");
}
#btn-x-profile {
    bottom: 100px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 35px; 
    height: 35px;
    background-image: url("https://i.postimg.cc/rsPnDQNZ/The-Sims-2-Boton-(7).png"); 
    border-radius: 100px;
}
#btn-x-profile:hover {
    filter: brightness(50%);
}
#btn-exit-profile {
    bottom: 92px; 
    right: 32px; 
    width: 160px; 
    height: 100px;
    background-image: url("https://i.postimg.cc/J026sP53/The-Sims-2-Boton-(3).png"); 
    border-radius: 30px;
}
#btn-exit-profile:hover {
    background-image: url("https://i.postimg.cc/J026sP56/The-Sims-2-Boton-(6).png");
}
.profile .blurbs .warning-content-new {
    position: absolute; 
    bottom: 10px;
    left: 50%; 
    transform: translateX(-50%);
    width: 400px; 
    height: 60px; 
    border-radius: 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-weight: bold; 
    font-family: 'ITCBenguiatGothicStd', sans-serif;
    font-size: 12px; 
    color: #000068; 
    text-align: center;
}

/* MOBILES (Max 600px) */

@media (max-width: 600px) {

#profile {
        display: none;
    }
}

</style>

<div id="profile">
    <div class="menu" id="sims-menu">
        <div class="sims-logo"></div>
        <div class="sims-menu"></div>
        <div class="sims-menu-opciones">
            <a href="#profile" title="Enter Profile" class="sims-button" id="btn-enter-profile"></a>
            <a href="https://cr33pyb00m.neocities.org/decoration" title="Get Code" class="sims-button" id="btn-get-code"></a>
            <a href="https://spacehey.com/cr33pyb00m" title="N4th4n43l Xp" class="sims-button" id="btn-x-profile"></a>
            <a href="https://spacehey.com/home" title="Exit Profile" class="sims-button" id="btn-exit-profile"></a>
        </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="sims-intro">
        <div class="sims-header-logo"></div>
        <div class="sims-start-section">
            <a href="#sims-menu" class="sims-start-button">Press START button</a>
        </div>
        <div class="sims-copyright">
            <p>©2004 Electronic Arts Inc. All rights reserved.</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

The Sims 2

Our Generators

N4TH4N43L XP

Now Playing

Directory