166 lines
5.3 KiB
HTML
166 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Galeria do casamento</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<h1>Galeria do casamento</h1>
|
|
<p>
|
|
- Olá pessoal! Vini falando aqui. Fiz uma cópia de todas as
|
|
fotos e vídeos de que recebi e fiz durante o casamento, e estou
|
|
publicando tudo nesta página que montei enquanto esperava a
|
|
cópia finalizar. Tudo está organizado em ordem cronóligca, e
|
|
separado em seções. Se alguém quiser contribuir para a galeria,
|
|
me enviem uma mensagem que eu adiciono aqui! E claro, parabéns
|
|
aos recém casados!
|
|
</p>
|
|
|
|
<p>
|
|
Se quiser salvar algo na página, clique na foto ou vídeo que
|
|
desejar para baixar.
|
|
</p>
|
|
|
|
<nav>
|
|
<a href="#gravacoes-oficiais"
|
|
><button>Gravações oficiais</button></a
|
|
>
|
|
<a href="#preparacao"><button>Preparação</button></a>
|
|
<a href="#entrada"><button>Entrada</button></a>
|
|
<a href="#cerimonia"><button>Cerimônia</button></a>
|
|
<a href="#sessoes-de-fotos"
|
|
><button>Sessões de fotos</button></a
|
|
>
|
|
<a href="#happy-hour"><button>Happy Hour</button></a>
|
|
<a href="#fotos-em-grupo"><button>Fotos em grupo</button></a>
|
|
<a href="#inicio-da-festa"><button>Início da festa</button></a>
|
|
<a href="#valsa"><button>Valsa</button></a>
|
|
<a href="#abertura-da-pista-de-danca"
|
|
><button>Abertura da pista</button></a
|
|
>
|
|
<a href="#baguncando-o-carro"
|
|
><button>Bagunçando o carro</button></a
|
|
>
|
|
<a href="#festa"><button>Festa</button></a>
|
|
<a href="#piscina"><button>Piscina</button></a>
|
|
</nav>
|
|
|
|
<hr />
|
|
|
|
<section id="gravacoes-oficiais" data-dir="gravacoes-oficiais">
|
|
<h2>Gravações oficiais</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="preparacao" data-dir="preparacao">
|
|
<h2>Preparação</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="entrada" data-dir="entrada">
|
|
<h2>Entrada</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="cerimonia" data-dir="cerimonia">
|
|
<h2>Cerimônia</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="sessoes-de-fotos" data-dir="sessoes-de-fotos">
|
|
<h2>Sessões de fotos</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="happy-hour" data-dir="happy-hour">
|
|
<h2>Happy Hour</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="fotos-em-grupo" data-dir="fotos-em-grupo">
|
|
<h2>Fotos em grupo</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="inicio-da-festa" data-dir="inicio-da-festa">
|
|
<h2>Início da festa</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="valsa" data-dir="valsa">
|
|
<h2>Valsa</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section
|
|
id="abertura-da-pista-de-danca"
|
|
data-dir="abertura-da-pista-de-danca"
|
|
>
|
|
<h2>Abertura da pista de dança</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="baguncando-o-carro" data-dir="baguncando-o-carro">
|
|
<h2>Bagunçando o carro</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="festa" data-dir="festa">
|
|
<h2>Festa</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="piscina" data-dir="piscina">
|
|
<h2>Piscina</h2>
|
|
<div class="media-grid"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<a href="#" class="back-to-top">↑ Voltar ao topo</a>
|
|
|
|
<template id="media-template">
|
|
<a class="media-item" download>
|
|
<img loading="lazy" alt="Foto do casamento" />
|
|
</a>
|
|
</template>
|
|
|
|
<template id="video-template">
|
|
<div class="media-item">
|
|
<video loading="lazy" preload="metadata" controls></video>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="main.js"></script>
|
|
</main>
|
|
</body>
|
|
</html>
|