Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

19 November 2024

Modelo HTML do painel de administração

HTML

CSS

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Ensure the content fits within the viewport */
    font-family: 'SparkyStonesRegular', monospace;
    scroll-behavior: smooth; /* Smooth scrolling */
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(228, 224, 221, 0.5);
    z-index: 1000;
}

.door {
    position: absolute;
    width: 50%;
    height: 100%;
    background: rgba(255, 165, 0, 0.8);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.left-door,
.right-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    transition: all 1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
}

.left-door {
    left: 0;
    background-image: url('./assets/img/2150714035.jpg');
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.left-text{
    font-family: 'SparkyStonesRegular', monospace;
}

.right-text{
    font-family: 'SparkyStonesRegular', monospace;
}

.right-door {
    right: 0;
    background-image: url('./assets/img/loader-lefts.jpg');
    border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.left-door::before,
.right-door::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Light white overlay */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    pointer-events: none; /* Ensures underlying content is still interactable */
}

.left-door::before {
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.right-door::before {
    border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.text {
    position: relative;
    font-size: 4.8vw;
    font-weight: bold;
    font-family: 'SparkyStones', monospace;
    color: #ffffff;
    text-align: center;
    margin-left: 1.5cm;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.content {
    opacity: 0;
    transition: opacity 1s ease;
    text-align: center;
    padding: 50px;
}

Recomendado

flor

diretórios de carros

Modelo HTML do painel de administração

HTML

CSS

JS

Recomendado

flor

diretórios de carros

Modelo HTML do painel de administração

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS