htmlcssbasics/index.html at master · Max131/htmlcssbasics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="es">
<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>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" />
</head>
<body>
    <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>
        &lt;html&gt;
            &lt;div class="video-container"&gt;
                &lt;video loop muted autoplay poster="assets/poster.png" class="bg-video"&gt;
                    &lt;source src="assets/outdoors.ogv" type="video/ogg"&gt;
                    &lt;source src="assets/outdoors.mp4" type="video/mp4"&gt;
                &lt;/video&gt;
            &lt;/div&gt;

        {CSS}
        .video-container {
            background: #2c2c2c url('bg.png') repeat;
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: hidden;
            z-index: -100;
        }

        .bg-video {
        width: 100%;
        height: 100%;
        opacity: .1;
        }
        </code></pre> -->
    </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>
</body>
</html>