Website: mankapuas.sch.id

Instagram : man_kapuas
FB : MAN Kapuas
Youtube : MAN KAPUAS
MAN KAPUAS : Akreditasi : A
Website Dalam Pengembangan

Intro web

  

 

 <html>

 <head>

 <title>

 latihan koding informatika MAN Kapuas

 </title>

 </head>

 <styl>

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

    }

  }

}

   </style>

   

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

    </html>




0 komentar:

Pages - Menu

Teknologi hanyalah alat. Namun, untuk menjadikan peserta didik bisa saling bekerjasama dan termotivasi, guru adalah yang paling penting.” ---Bill Gates---

Online


Powered by IT Komputer MAN Kapuas