Vídeo de fundo

Abrir no Editor Publique Seu Código

Recomendado

19 May 2025

Trecho de código do menu suspenso HTML

9 March 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%;
    }
  }

Vídeo de fundo

Recomendado

jogo de respostas

Trecho de código do menu suspenso HTML

mudar de cor

HTML

CSS

JS

Recomendado

jogo de respostas

Trecho de código do menu suspenso HTML

mudar de cor

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS