Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

24 May 2025

Metaverso decostruito

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<nav class="navbar">
      <a href="#" class="nav-cta-btn">Get Started</a>
    </nav>
    <div class="section">
      <div class="video-visual">
        <video
          class="video"
          autoplay
          loop
          muted
          poster=""
          role="none"
          aria-label="background gradient animation"
        >
          <source
            src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/bg-gradient-animation.mp4"
            type="video/mp4"
          />
        </video>
      </div>
      <div class="section-wrapper">
        <div class="content-wrapper">
          <div class="content content-1">
            <div class="mobile-visual">
              <img
                class="card-img"
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-1.avif"
                alt="Fantasy warrior  - Video game character"
              />
            </div>
            <div class="meta">
              <h2 class="headline">
                Unleash Your<span class="text-highlight"> Inner Warrior</span>
              </h2>
              <p class="desc">
                Join the battle and conquer the arena with unmatched skill and
                strategy.
              </p>
            </div>
          </div>
          <div class="content content-2">
            <div class="mobile-visual">
              <img
                class="card-img"
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-2.avif"
                alt="Green haired ninja in armor - Video game character"
              />
            </div>
            <div class="meta">
              <h2 class="headline">
                Embark on Your
                <span class="text-highlight">Legendary Journey</span>
              </h2>
              <p class="desc">
                Immerse Yourself in a World Where Legends Clash and Heroes Rise
                to Glory.
              </p>
            </div>
          </div>
          <div class="content content-3">
            <div class="mobile-visual">
              <img
                class="card-img"
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-3.avif"
                alt="Female warrior in armor - Video game character"
              />
            </div>
            <div class="meta">
              <h2 class="headline">
                Master the
                <span class="text-highlight">Art of Magic</span>
              </h2>
              <p class="desc">
                Harness powerful spells and enchantments to dominate your foes
                and change the course of battle.
              </p>
            </div>
          </div>
          <div class="content content-4">
            <div class="mobile-visual">
              <img
                class="card-img"
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-4.avif"
                alt="Agile warrior - Video game character"
              />
            </div>
            <div class="meta">
              <h2 class="headline">
                Rise as the <span class="text-highlight">Champion</span>
              </h2>
              <p class="desc">
                Lead your team to victory with unparalleled strength and
                unwavering determination.
              </p>
            </div>
          </div>
        </div>
        <div class="visual">
          <div class="card-wrapper">
            <div class="card card-1">
              <img
                class="card-img"
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-1.avif"
                alt="Fantasy warrior  - Video game character"
              />
            </div>
            <div class="card card-2">
              <img
                class="card-img"
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-2.avif"
                alt="Green haired ninja in armor - Video game character"
              />
            </div>
            <div class="card card-3">
              <img
                class="card-img"
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-3.avif"
                alt="Female warrior in armor - Video game character"
              />
            </div>
            <div class="card card-4">
              <img
                class="card-img"
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/dynamic-content-lockups-v2/assets/img-4.avif"
                alt="Agile warrior - Video game character"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

CSS

@layer library, reset, base, demo;
@import 'https://unpkg.com/open-props@2.0.0-beta.5' layer(library);
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');

@layer reset {

*,
  ::before,
  ::after {
    box-sizing: border-box;
  }

:where(:not(dialog)) {
    margin: 0;
  }
}

@layer base {
  html {
    --nav-block-size: 74px;
    --brand-gradient: linear-gradient(227deg,
        #1400c7 0%,
        #00bbff 100%);

@media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

body {
    font-family: 'Inter', sans-serif;
    min-block-size: 100dvb;
  }
}

@layer demo {
  .navbar {
    min-block-size: var(--nav-block-size);
    display: grid;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    background-color: white;
    z-index: var(--layer-3);
    place-items: center end;
    padding-block: var(--size-3);
    padding-inline: var(--size-5);

@media (width >=600px) {
      padding-inline: 6dvi;
    }
  }

.nav-cta-btn {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-7);
    inline-size: max-content;
    white-space: nowrap;
    text-decoration: none;
    padding-block: var(--size-3);
    padding-inline: var(--size-7);
    border: var(--border-size-2) solid transparent;
    color: black;
    position: relative;
    isolation: isolate;

background: linear-gradient(white, white) padding-box,
      var(--brand-gradient) border-box;
    border-radius: var(--radius-6);
    overflow: hidden;

&::before {
      content: '';
      display: block;
      position: absolute;
      inset: 0;

background: var(--brand-gradient);
      mix-blend-mode: screen;
    }

&:hover {
      color: white;

&::before {
        background: var(--brand-gradient) padding-box,
          var(--brand-gradient) border-box;
        background-repeat: no-repeat;
        background-size: contain;
        mix-blend-mode: normal;
        z-index: -1;
      }
    }
  }

.section {
    --section-block-size: max(400px, 100dvb);
    display: grid;
    background-color: white;
    min-block-size: var(--section-block-size);
    position: relative;
    block-size: 100%;
    display: grid;

>* {
      grid-area: 1/1;
    }
  }

.section-wrapper {
    position: relative;
    display: grid;

@media (width >=960px) {
      grid-template-columns: 1fr 1fr;
    }

@media (width < 960px) {
      padding-block-start: calc(var(--nav-block-size) + var(--size-7));
      padding-block-end: var(--size-7);
    }
  }

.video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    position: relative;
    z-index: -1;
  }

.content-wrapper {
    display: grid;

@media (width < 960px) {
      gap: var(--size-7);
    }
  }

.meta {
    display: grid;
    gap: var(--size-3);
  }

.content {
    display: grid;
    inline-size: 100%;
    place-items: center;
    padding-block: var(--size-7);
    padding-inline: var(--size-5);

@media (width >=960px) {
      padding: var(--size-10);
      min-block-size: 100cqb;
      place-items: center end;
    }

@media (width < 960px) {
      gap: var(--size-5);
    }
  }

.mobile-visual {
    inline-size: 100%;
    aspect-ratio: var(--ratio-square);

@media (width >=960px) {
      display: none;
    }
  }

.headline {
    font-size: var(--font-size-7);
    font-weight: var(--font-weight-4);
    max-inline-size: var(--size-content-1);
    text-wrap: pretty;

@media (width < 960px) {
      font-size: var(--font-size-6);
    }
  }

.desc {
    font-size: var(--font-size-4);
    line-height: 1.5;
    max-inline-size: 40ch;
    text-wrap: pretty;

@media (width < 960px) {
      font-size: var(--font-size-3);
    }
  }

.visual {
    display: grid;
    position: sticky;
    block-size: var(--section-block-size);
    inset-block-start: 0;
    container-type: size;

@media (width < 960px) {
      display: none;
    }
  }

.video-visual {
    inline-size: 100%;
    block-size: var(--section-block-size);
    display: block;
    position: sticky;
    inset-block-start: 0;
    isolation: isolate;
    filter: hue-rotate(210deg);
  }

.card-wrapper {
    container-type: size;
    display: grid;
    place-items: center;
    overflow: clip;

>* {
      grid-area: 1/1;
    }
  }

.card {
    aspect-ratio: var(--ratio-square);
    inline-size: 70cqi;
    border-radius: var(--radius-3);
    scale: 0.4;
  }

.card-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

.card-1 {
    scale: 1;
  }

.card-2 {
    translate: -35cqi 30cqb;
    opacity: 0.3;
  }

.card-3 {
    translate: 0cqi 50cqb;
    opacity: 0.5;
  }

.card-4 {
    translate: 45cqi 40cqb;
    opacity: 0.5;
  }

.content-1 {
    --_text-gradient: linear-gradient(227deg,
        #1400c7 0%,
        #00bbff 100%);
  }

.content-2 {
    --_text-gradient: linear-gradient(227deg,
        #28dc28 0%,
        #00bbff 100%);
  }

.content-3 {
    --_text-gradient: linear-gradient(227deg,
        #1400c7 0%,
        #b800b1 100%);
  }

.content-4 {
    --_text-gradient: linear-gradient(227deg,
        #b800b1 0%,
        #f50000 100%);
  }

.text-highlight {
    background: var(--_text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
}

@supports (animation-timeline: scroll()) {
  body {
    timeline-scope: --content-1, --content-2, --content-3, --content-4;
  }

.section {
    view-timeline-name: --section;
  }

.content-1 {
    view-timeline-name: --content-1;
  }

.content-2 {
    view-timeline-name: --content-2;
  }

.content-3 {
    view-timeline-name: --content-3;
  }

.content-4 {
    view-timeline-name: --content-4;
  }

.card {
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

.card-1 {
    animation-timeline: --content-1;
    animation-name: slide-up-first-card;
  }

.card-2 {
    animation-timeline: --content-2;
    animation-name: slide-up-card;
  }

.card-3 {
    animation-timeline: --content-3;
    animation-name: slide-up-card;
  }

.card-4 {
    animation-timeline: --content-4;
    animation-name: slide-up-card;
  }

.video-visual {
    animation-timeline: --section;
    animation-range-end: exit 110%;
    animation-name: update-hue;
    animation-timing-function: step-end;
    animation-fill-mode: forwards;
  }

@keyframes update-hue {
    0% {
      filter: hue-rotate(210deg);
    }

25% {
      filter: hue-rotate(150deg);
    }

45% {
      filter: hue-rotate(300deg);
    }

60% {
      filter: hue-rotate(4deg);
    }
  }

@keyframes slide-up-first-card {
    50% {
      translate: 0;
      opacity: 1;
    }

90% {
      translate: 0 -50cqi;
      scale: 0.6;
    }

100% {
      translate: 0 -100cqi;
      opacity: 0;
    }
  }

@keyframes slide-up-card {
    50% {
      opacity: 1;
      translate: 0;
      scale: 1;
    }

90% {
      opacity: 0.5;
      scale: 0.6;
      translate: 0 -50cqb;
    }

100% {
      translate: 0 -100cqi;
      opacity: 0;
    }
  }
}

Consigliato

Riavvio di Windows

Un codice di Mete Han

Metaverso decostruito

HTML

CSS

JS

Consigliato

Riavvio di Windows

Un codice di Mete Han

Metaverso decostruito

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS