Video di sfondo

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

27 May 2025

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }
  
  .hero {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
    position: relative;
    padding: 0 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .content {
    text-align: center;
  }
  
  .content h1 {
    font-size: 160px;
    color: #fff;
    font-weight: 600;
    transition: 0.5s;
  }
  
  .content h1:hover {
    -webkit-text-stroke: 2px white;
    color: transparent;
  }
  
  .content a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    border: 2px solid white;
    padding: 14px 50px;
    margin-top: 20px;
    transition: 0.5s;
  }
  
  .content a:hover {
    background: #fff;
    color: #000;
  }
  
  .back-video {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
  
  @media (min-aspect-ratio: 16/9) {
    .back-video {
      width: 100%;
      height: auto;
    }
  }
  
  @media (max-aspect-ratio: 16/9) {
    .back-video {
      width: auto;
      height: 100%;
    }
  }

Video di sfondo

Consigliato

Un codice di fragolahack

Un codice di Metehan

Pulsante di download

HTML

CSS

JS

Consigliato

Un codice di fragolahack

Un codice di Metehan

Pulsante di download

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS