html501/about.html at master · davidsu/html501 · 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
100
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>about</title>
        <link rel="stylesheet" href="./css/about.css"/>
    </head>
    <body>

        <video autoplay loop  id="bgvid">

            <source src="./resources/backgroundwebm.webm" type="video/webm">
            <source src="./resources/backgroundmp4.mp4" type="video/mp4">
        </video>
        <div class="container">
            <div class="nav-container">
                <nav class="main_navigation">
                    <ul class="ul">
                        <li class="li"><a href="index.html">home</a></li>
                        <li class="li current-page"><a href="about.html">about</a></li>
                        <li class="li"><a href="gallery.html">gallery</a></li>
                        <li class="li"><a href="works.html">works</a></li>
                        <li class="li"><a href="blog.html">blog</a></li>
                        <li class="li"><a href="contact_form.html">contact</a></li>
                    </ul>
                </nav>
            </div>
            <header class="main-header">
                <h1 class="main_title">ABOUT</h1>
            </header>
            <main class="main_section clearfix">
                <article>
                    <div class="p">
                        <h3>Lorem ipsum</h3>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum dolorem accusamus
                            corporis a
                            mollitia perspiciatis aliquid quis sunt maiores labore, totam odio distinctio ex quidem,
                            quisquam
                            odit laborum facere incidunt, officia aliquam sint est modi illo vel consequatur. Sunt,
                            quasi minus
                            est molestias nobis molestiae, iure expedita, voluptatem dolor nihil vero itaque quam
                            dolorum et
                            voluptas aspernatur fugit quis facilis aliquam cumque eos laudantium. Sit dolor accusamus
                            debitis
                            expedita tempore sunt qui aliquid? Asperiores reiciendis quae, dolor dolore aperiam quo
                            aliquam.
                            Voluptatem veniam commodi, cumque rerum praesentium. Eaque maiores quibusdam, iure rerum
                            sunt ipsam
                            et laboriosam, dignissimos molestias fugiat libero.</p>
                    </div>


                    <div class="flip-card-container center about-img-container">
                        <figure class="flip-card-transformation">
                            <figcaption class="flip-card-back flip-card-transformation flip-card-front">
                                <blockquote class="quotation quotation-in-flip-card">If you can't explain it to a six
                                    year old, you don't
                                    understand it
                                    yourself.
                                    <cite>Albert Einstein</cite>
                                </blockquote>
                            </figcaption>
                            <div class="flip-card-front">
                                <figure>
                                    <img class="img_einsten_tongue" src="./resources/einstein_tongue.jpeg"
                                         alt="einstein tongue"/>
                                </figure>
                            </div>

                        </figure>
                    </div>
                    <div class="p">
                        <h3>Lorem ipsum</h3>

                        <p> dolor sit amet, consectetur adipisicing elit. Voluptatum dolorem accusamus corporis a
                            mollitia perspiciatis aliquid quis sunt maiores labore, totam odio distinctio ex quidem,
                            quisquam
                            odit laborum facere incidunt, officia aliquam sint est modi illo vel consequatur. Sunt,
                            quasi minus
                            est molestias nobis molestiae, iure expedita, voluptatem dolor nihil vero itaque quam
                            dolorum et
                            voluptas aspernatur fugit quis facilis aliquam cumque eos laudantium. Sit dolor accusamus
                            debitis
                            expedita tempore sunt qui aliquid? Asperiores reiciendis quae, dolor dolore aperiam quo
                            aliquam.
                            Voluptatem veniam commodi, cumque rerum praesentium. Eaque maiores quibusdam, iure rerum
                            sunt ipsam
                            et laboriosam, dignissimos molestias fugiat libero.</p>
                    </div>
                </article>
            </main>
            <footer class="footer">
                <p>
                    this is the footer :)
                </p>
            </footer>
        </div>
    </body>
</html>