Fejlécek

Fejléc

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

Élő előnézet

HTML · CSS · JS

<div class="we-campaign">
    <header class="we-campaign-hero">
        <div class="we-campaign-overlay"></div>

        <div class="we-campaign-content">
            <span class="we-campaign-label">KIEMELT KAMPÁNY</span>

            <h1>Kampány neve</h1>

            <p>
                Fedezd fel az ötletet, amely életre kelti a történetedet.
            </p>

            <a href="#" class="we-campaign-btn">
                Fedezd fel
                <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </header>

    <div class="we-campaign-cards">

        <article class="we-campaign-card">
            <div class="we-campaign-icon">
                <i class="bi bi-stars"></i>
            </div>

            <div class="we-campaign-card-content">
                <h3>Inspiráció</h3>

                <p>
                    Új ötletek, különleges gondolatok és kreatív megoldások
                    egyetlen helyen.
                </p>

                <a href="#">
                    Felfedezem
                    <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </article>

        <article class="we-campaign-card">
            <div class="we-campaign-icon">
                <i class="bi bi-lightbulb"></i>
            </div>

            <div class="we-campaign-card-content">
                <h3>Ötletek</h3>

                <p>
                    Friss megközelítések és lendületes koncepciók, amelyek
                    új irányt adnak a projektednek.
                </p>

                <a href="#">
                    Felfedezem
                    <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </article>

        <article class="we-campaign-card">
            <div class="we-campaign-icon">
                <i class="bi bi-palette"></i>
            </div>

            <div class="we-campaign-card-content">
                <h3>Kreativitás</h3>

                <p>
                    Látványos formák, harmonikus részletek és egyedi vizuális
                    megoldások.
                </p>

                <a href="#">
                    Felfedezem
                    <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </article>

        <article class="we-campaign-card">
            <div class="we-campaign-icon">
                <i class="bi bi-rocket-takeoff"></i>
            </div>

            <div class="we-campaign-card-content">
                <h3>Megvalósítás</h3>

                <p>
                    Az elképzelésből valódi élmény születik, amelyre
                    emlékezni fognak.
                </p>

                <a href="#">
                    Felfedezem
                    <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </article>

    </div>
</div>

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

.we-campaign {
    --we-green: #2ecc71;
    --we-green-dark: #173b2b;
    --we-cream: #f4f1e9;
    --we-dark: #0b0f19;
    --we-text: #17231d;

    width: 100%;
    font-family: "DM Sans", sans-serif;
    background: var(--we-dark);
    overflow: hidden;
}

/* =========================================
   FEJLÉC
   ========================================= */

.we-campaign-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 30px 190px;
    background:
        linear-gradient(
            90deg,
            rgba(7, 15, 12, .82) 0%,
            rgba(7, 15, 12, .52) 45%,
            rgba(7, 15, 12, .28) 100%
        ),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2000&q=85")
        center center / cover no-repeat;
}

.we-campaign-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(5, 12, 9, .08) 0%,
            rgba(5, 12, 9, .08) 55%,
            rgba(11, 15, 25, .82) 100%
        );
    pointer-events: none;
}

.we-campaign-content {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    text-align: center;
    color: #ffffff;
}

.we-campaign-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 8px 17px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #e8f7ee;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .07);
}

.we-campaign-content h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(54px, 8vw, 108px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.035em;
}

.we-campaign-content p {
    max-width: 620px;
    margin: 27px auto 34px;
    color: rgba(255, 255, 255, .84);
    font-size: 17px;
    line-height: 1.75;
}

.we-campaign-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 15px 25px;
    border: 1px solid var(--we-green);
    border-radius: 999px;
    background: var(--we-green);
    color: #092014;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.we-campaign-btn i {
    font-size: 17px;
    transition: transform .3s ease;
}

.we-campaign-btn:hover {
    transform: translateY(-3px);
    background: #45dc83;
    color: #07150d;
    box-shadow: 0 15px 35px rgba(46, 204, 113, .24);
}

.we-campaign-btn:hover i {
    transform: translateX(5px);
}

/* =========================================
   KÁRTYÁK
   ========================================= */

.we-campaign-cards {
    position: relative;
    z-index: 5;
    width: min(1180px, calc(100% - 40px));
    margin: -125px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.we-campaign-card {
    position: relative;
    min-height: 330px;
    padding: 30px 27px 27px;
    background: var(--we-cream);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease;
}

.we-campaign-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--we-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.we-campaign-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 32px 70px rgba(0, 0, 0, .34);
}

.we-campaign-card:hover::before {
    transform: scaleX(1);
}

/* =========================================
   IKON
   ========================================= */

.we-campaign-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border: 1px solid rgba(46, 204, 113, .3);
    border-radius: 16px;
    background: rgba(46, 204, 113, .11);
    color: var(--we-green-dark);
    transition:
        transform .4s ease,
        background .4s ease;
}

.we-campaign-icon i {
    font-size: 28px;
    line-height: 1;
}

.we-campaign-card:hover .we-campaign-icon {
    transform: translateY(-4px) rotate(-4deg);
    background: rgba(46, 204, 113, .19);
}

/* =========================================
   KÁRTYA SZÖVEG
   ========================================= */

.we-campaign-card-content {
    position: relative;
    z-index: 2;
}

.we-campaign-card h3 {
    margin: 0 0 13px;
    color: var(--we-text);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 25px;
    font-weight: 600;
}

.we-campaign-card p {
    margin: 0 0 25px;
    color: #667069;
    font-size: 14px;
    line-height: 1.7;
}

.we-campaign-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--we-green-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.we-campaign-card a i {
    transition: transform .3s ease;
}

.we-campaign-card a:hover i {
    transform: translateX(5px);
}

/* =========================================
   RESZPONZÍV
   ========================================= */

@media (max-width: 1050px) {
    .we-campaign-cards {
        grid-template-columns: repeat(2, 1fr);
        margin-top: -100px;
    }

    .we-campaign-hero {
        padding-bottom: 155px;
    }
}

@media (max-width: 700px) {
    .we-campaign-hero {
        min-height: 560px;
        padding: 75px 22px 145px;
    }

    .we-campaign-content h1 {
        font-size: clamp(46px, 15vw, 76px);
    }

    .we-campaign-content p {
        font-size: 15px;
    }

    .we-campaign-cards {
        width: min(100% - 28px, 500px);
        grid-template-columns: 1fr;
        margin-top: -90px;
    }

    .we-campaign-card {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .we-campaign-card,
    .we-campaign-icon,
    .we-campaign-btn,
    .we-campaign-btn i,
    .we-campaign-card a i,
    .we-campaign-card::before {
        transition: none;
    }
}

Ehhez az elemhez nincs külön JavaScript.

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