Bloqueos de contenido dinámico V2: accesorios abiertos

1134 Andev.web

Abrir en el editor Publica tu código

Bloqueos de contenido dinámico V2: accesorios abiertos

Recomendado

28 June 2025

Plantilla HTML de página de error 404

20 November 2023

Formulario de registro HTML

18 October 2025

Animación de interfaz de usuario de botón CSS Sxrgxx

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;
    }
  }
}

Recomendado

Plantilla HTML de página de error 404

Formulario de registro HTML

Animación de interfaz de usuario de botón CSS Sxrgxx

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS