Vissza a webes elemekhez
Fejlécek

Éjféli fény

Élő előnézet – a komponens teljes méretben.

Élő előnézet
HTML · CSS · JS
HTML 
<section class="hero-midnight">

    <div class="midnight-glow midnight-glow-one"></div>
    <div class="midnight-glow midnight-glow-two"></div>

    <canvas class="midnight-canvas"></canvas>

    <div class="midnight-grid"></div>

    <div class="midnight-content">

        <div class="midnight-kicker">
            <span></span>
            Digital experiences
            <span></span>
        </div>

        <h1>
            <span>Alkoss</span>
            <strong>valami</strong>
            <span>különlegeset.</span>
        </h1>

        <p>
            Ahol a technológia, a kreativitás és a
            részletek egyetlen élménnyé találkoznak.
        </p>

        <div class="midnight-actions">

            <a href="#" class="midnight-button">
                Kezdjük el
                <span>↗</span>
            </a>

            <a href="#" class="midnight-more">
                Felfedezem
            </a>

        </div>

    </div>


    <div class="midnight-side-info">
        <span>SCROLL TO EXPLORE</span>
        <i></i>
    </div>


    <div class="midnight-bottom">
        <span>EST. 2026</span>

        <div></div>

        <span>CREATIVE / DIGITAL / FUTURE</span>
    </div>

</section>
CSS 
/* ==========================================
   HERO 04 — ÉJFÉLI FÉNY
   ========================================== */

.hero-midnight {
    position: relative;

    width: 100%;
    min-height: 760px;
    height: min(100vh, 950px);

    overflow: hidden;

    background: #080b0d;
    color: #f4f2ed;

    font-family: "DM Sans", sans-serif;
}


/* ==========================================
   HÁTTÉR FÉNYEK
   ========================================== */

.midnight-glow {
    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: .32;

    animation: midnightDrift 12s ease-in-out infinite alternate;
}


.midnight-glow-one {
    left: -180px;
    top: -170px;

    background: #254b5a;
}


.midnight-glow-two {
    right: -180px;
    bottom: -200px;

    background: #704e35;

    animation-delay: -5s;
}


/* ==========================================
   CANVAS
   ========================================== */

.midnight-canvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    opacity: .75;
}


/* ==========================================
   FINOM RÁCS
   ========================================== */

.midnight-grid {
    position: absolute;

    inset: 0;

    z-index: 2;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 90px 90px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 75%
        );

    pointer-events: none;
}


/* ==========================================
   TARTALOM
   ========================================== */

.midnight-content {
    position: relative;

    z-index: 5;

    width: min(1100px, 88%);

    min-height: 100%;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 80px 0;
}


/* ==========================================
   KICKER
   ========================================== */

.midnight-kicker {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 30px;

    color: rgba(255,255,255,.55);

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: 4px;

    opacity: 0;

    animation:
        midnightFade .8s .2s ease
        forwards;
}


.midnight-kicker span {
    width: 28px;
    height: 1px;

    background: #b99568;
}


/* ==========================================
   CÍM
   ========================================== */

.midnight-content h1 {
    margin: 0;

    display: flex;
    flex-direction: column;

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(70px, 9vw, 145px);

    font-weight: 400;

    line-height: .84;

    letter-spacing: -5px;

    opacity: 0;

    animation:
        midnightTitle 1.2s .35s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.midnight-content h1 span:first-child {
    color: #f4f2ed;
}


.midnight-content h1 strong {
    color: #b99568;

    font-weight: 400;

    font-style: italic;
}


/* ==========================================
   LEÍRÁS
   ========================================== */

.midnight-content p {
    max-width: 480px;

    margin: 34px auto 34px;

    color: rgba(255,255,255,.58);

    font-size: 15px;
    line-height: 1.75;

    opacity: 0;

    transform: translateY(20px);

    animation:
        midnightUp .9s .65s ease
        forwards;
}


/* ==========================================
   GOMBOK
   ========================================== */

.midnight-actions {
    display: flex;
    align-items: center;
    gap: 30px;

    opacity: 0;

    transform: translateY(20px);

    animation:
        midnightUp .8s .8s ease
        forwards;
}


.midnight-button {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    padding: 16px 25px;

    color: #111;

    background: #e8dfd0;

    text-decoration: none;

    font-size: 13px;

    transition:
        transform .3s ease,
        background .3s ease;
}


.midnight-button span {
    font-size: 18px;

    transition: transform .3s ease;
}


.midnight-button:hover {
    background: #b99568;

    transform: translateY(-3px);
}


.midnight-button:hover span {
    transform: translate(4px,-4px);
}


.midnight-more {
    color: rgba(255,255,255,.75);

    text-decoration: none;

    font-size: 13px;

    position: relative;

    padding-bottom: 6px;
}


.midnight-more::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: rgba(255,255,255,.35);

    transition:
        width .35s ease,
        background .35s ease;
}


.midnight-more:hover::after {
    width: 35%;

    background: #b99568;
}


/* ==========================================
   OLDALSÓ JELZÉS
   ========================================== */

.midnight-side-info {
    position: absolute;

    z-index: 6;

    right: 34px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    display: flex;
    align-items: center;
    gap: 15px;

    color: rgba(255,255,255,.38);

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: 3px;
}


.midnight-side-info i {
    display: block;

    width: 42px;
    height: 1px;

    background: rgba(255,255,255,.3);
}


/* ==========================================
   ALSÓ SÁV
   ========================================== */

.midnight-bottom {
    position: absolute;

    z-index: 6;

    left: 5%;
    right: 5%;
    bottom: 28px;

    display: flex;
    align-items: center;
    gap: 20px;

    color: rgba(255,255,255,.35);

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: 2px;
}


.midnight-bottom div {
    flex: 1;

    height: 1px;

    background: rgba(255,255,255,.1);
}


/* ==========================================
   ANIMÁCIÓK
   ========================================== */

@keyframes midnightFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes midnightTitle {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes midnightUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes midnightDrift {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(80px, 50px) scale(1.15);
    }

}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {

    .midnight-side-info {
        display: none;
    }

    .midnight-content h1 {
        font-size: clamp(65px, 11vw, 110px);
    }

}


/* ==========================================
   MOBIL
   ========================================== */

@media (max-width: 600px) {

    .hero-midnight {
        min-height: 680px;
        height: 100svh;
    }


    .midnight-content {
        width: 88%;
    }


    .midnight-kicker {
        font-size: 8px;
        letter-spacing: 3px;
    }


    .midnight-content h1 {
        font-size: clamp(56px, 16vw, 82px);

        letter-spacing: -3px;
    }


    .midnight-content p {
        max-width: 320px;

        font-size: 14px;
    }


    .midnight-actions {
        gap: 20px;
    }


    .midnight-bottom {
        left: 7%;
        right: 7%;

        font-size: 7px;
    }


    .midnight-bottom span:last-child {
        display: none;
    }


    .midnight-glow {
        width: 350px;
        height: 350px;

        filter: blur(80px);
    }

}


/* ==========================================
   MOZGÁS CSÖKKENTÉSE
   ========================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-midnight *,
    .hero-midnight *::before,
    .hero-midnight *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}
JavaScript 
Ehhez az elemhez nincs külön JavaScript.

További elemek ebből a kategóriából