Posts Utilizando um vídeo como background do site
Post
Cancel

Utilizando um vídeo como background do site

Você pode ver a versão final do site clicando aqui.

Morning Coffee

Crie um arquivo chamado index.html com o seguinte conteúdo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Morning Coffee</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

Acrescente o vídeo dentro da tag body:

<body>
    <!-- O vídeo -->
    <video autoplay muted loop id="meuVideo">
        <source src="morning-coffee.mp4" type="video/mp4">
    </video>
</body>

Adicione o seguinte código CSS para o vídeo:

#meuVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

Adicione umadiv para o conteúdo do site:

<div class="conteudo">
      <h1>Morning Coffee</h1>
      <p>
        O café é uma bebida produzida a partir dos grãos torrados do fruto do
        cafeeiro.
      </p>
      <p>
        É servido tradicionalmente quente, mas também pode ser consumido gelado.
        O café é um estimulante, por possuir cafeína — geralmente 80 a 140 mg
        para cada 207 ml dependendo do método de preparação.
      </p>
      <button id="meuBotao">Saiba mais</button>
</div>

Por fim, adicione o seguinte código CSS para estilizar o conteúdo:

.conteudo {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

#meuBotao {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#meuBotao:hover {
  background: #ddd;
  color: black;
}

Referências

  1. Projeto no GitHub
  2. W3schools
This post is licensed under CC BY 4.0 by the author.

Trending Tags

Contents

Trending Tags