<html lang="es">

<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>HTML & CSS Basics</title>

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700" rel="stylesheet" />

<link rel="stylesheet" href="assets/styles.css" />

<div class="video-container">

<video loop muted autoplay poster="assets/poster.png" class="bg-video">

<source src="assets/outdoors.ogv" type="video/ogg">

<source src="assets/outdoors.mp4" type="video/mp4">

</video>

</div>

<div class="back-up">

<a href="#up-menu" title="back to up">&uarr;</a>

</div>

<nav id="up-menu">

<ul id="main-menu" class="nav-menu">

<li><a href="#main-menu" class="toggle-menu">&#9776;</a></li>

<li><a href="##" class="close-menu">&Cross;</a></li>

<li><a href="#videobg" class="a-menu">Video Background</a></li>

<li><a href="#parallax" class="a-menu">Parallax</a></li>

<li><a href="#letterpress" class="a-menu">Letterpress</a></li>

<li><a href="#clippath" class="a-menu">ClipPath</a></li>

<li><a href="#flexb" class="a-menu">Flexbox Gallery</a></li>

<li><a href="#bye" class="a-menu">Bye Bye!</a></li>

</ul>

</nav>

<section id="videobg" class="container video-bg">

<h1>Video Background!</h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam error nesciunt provident debitis harum, suscipit molestiae sunt tempore ab, necessitatibus illum accusamus maiores? Ad aliquid omnis, aperiam doloremque natus quam?</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus repellendus eum fugit! Placeat consequuntur ipsa odio, ratione aperiam commodi! Nulla alias in esse iure cumque, laborum beatae natus tempora incidunt.</p>

<!-- <pre><code>

</section>

<section id="parallax" class="parallax2 container">

<h1>Parallax!</h1>

</section>

<section id="letterpress" class="container">

<h1 class="letterpress2">Letterpress!</h1>

</section>

<section id="clippath" class="parallax3 container">

<h1>ClipPath!</h1>

</section>

<section id="flexb" class="container">

<h1>Flexbox!</h1>

<section class="gallery">

<figure><img src="assets/cabains.jpg" /><figcaption>Cabains</figcaption></figure>

<figure><img src="assets/girl.jpg" /><figcaption>Girl</figcaption></figure>

<figure><img src="assets/coffee.jpg" /><figcaption>Coffee</figcaption></figure>

<figure><img src="assets/log.jpg" /><figcaption>Log</figcaption></figure>

<figure><img src="assets/stork.jpg" /><figcaption><a href="assets/stork.jpg" download="garza.jpg">Stork</a></figcaption></figure>

<figure><img src="assets/thunderstorm.jpg" /><figcaption>Thunderstorm</figcaption></figure>

<figure><img src="assets/castle.jpg" /><figcaption>Castle</figcaption></figure>

<figure><img src="assets/dandelion.jpg" /><figcaption>Dandelion</figcaption></figure>

<figure><img src="assets/lotus.jpg" /><figcaption>Lotus</figcaption></figure>

<figure><img src="assets/milkyway.jpg" /><figcaption>Milkyway</figcaption></figure>

<figure><img src="assets/hot-air-ballon.jpg" /><figcaption>Air Ballon</figcaption></figure>

<figure><img src="assets/lavender.jpg" /><figcaption>Lavender</figcaption></figure>

<figure><img src="assets/lighthouse.jpg" /><figcaption>Lighthouse</figcaption></figure>

<figure><img src="assets/dandelion2.jpg" /><figcaption>Coulored Dandelion</figcaption></figure>

</section>

</section>

<section class="parallax4 container">

<h1 class="letterpress">Letterpress!</h1>

</section>

<section id="bye" class="container">

<h1 id="three">Bye bye!</h1>

</section>