portfolio/about.html at master · jaamp/portfolio · 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
<!DOCTYPE html>
<html lang="zxx">
    <head>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=MedievalSharp" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <link href="styles/style.css" rel="stylesheet">
        <link href="styles/about-style.css" rel="stylesheet">
        <title>About Me</title>
    </head>
    <body>
        <a href="#main-container-id" class="hidden">Skip To Main Content</a>
        <header>
            <h1 class="main-header">It's All About Me</h1>
        </header>
        <nav>
            <ul class="nav-ul">
                <li>
                    <a class="a-text" href="index.html">Home</a>
                </li>
                <li>
                    <a class="a-text" href="#">About Me</a>
                </li>
                <li>
                    <a class="a-text" href="contact.html">Contact Me</a>
                </li>
            </ul>
        </nav>
        <section id="main-container-id">
            <h2>My Story (in latin)</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
            <div class="div-flex">
                <div class="sprite">
                    <img src="images/back.jpg" alt="card back" />
                    <img class="sprite-front" src="images/joker.jpg" alt="card front" />
                </div>
                <div class="back">
                </div>
                <div class="joker">
                </div>
                <div class="lines">
                    <ul class="ul-lines">
                        <li>Go</li>
                        <li>Dawgs</li>
                        <li>Go</li>
                        <li>Dawgs</li>
                        <li>Go</li>
                        <li>Dawgs</li>
                        <li>Go</li>
                        <li>Dawgs</li>
                        <li>Go</li>
                        <li>Dawgs</li>
                    </ul>
                </div>
           </div>
            <article>
                <hr>
                <h3>Favorite Books</h3>
                <p>I am not an avid reader, most of the books I do read are IT, business process or Six Sigma related, not really exciting.  However, there are four books that have had a deep impact on my life and how I try to live my life.  They are:</p>
                <ul>
                    <li class="book-list"><i class="fas fa-book"></i><em>   Man's Search for Meaning</em> by Viktor Frankl</li>
                    <li class="book-list"><i class="fas fa-book"></i><em>   The Tao of Pooh</em> by Benjamin Hoff</li>
                    <li class="book-list"><i class="fas fa-book"></i><em>   The Dance of Anger</em> by Harriet Lerner</li>
                    <li class="book-list"><i class="fas fa-book"></i><em>   The Five Dysfunctions of a Team</em> by Patrick Lenciconi</li>
                </ul>
            </article>
            <article>
                <hr>
                <h3>My Travels</h3>
                <p>I have traveled quite a lot in my life. Here are a few of the flags of countries where I have lived.</p>
                <div class="div-flex">
                    <figure>
                        <img src="images/belgium.jpg" alt="Belgium Flag" />
                        <figcaption>Belgium</figcaption>
                    </figure>
                    <figure>
                        <img src="images/egypt.jpg" alt="Egyptian Flag" />
                        <figcaption>Egypt</figcaption>
                    </figure>
                    <figure>
                        <img src="images/south-korea.jpg" alt="South Korean Flag" />
                        <figcaption>South Korea</figcaption>
                    </figure>
                    <figure>
                        <img src="images/united-states.jpg" alt="American Flag" />
                        <figcaption>United States</figcaption>
                    </figure>
                </div>
            </article>
        </section>
        <footer class="main-footer">
            <p>Learn more about HTML at the <span class="sr-only">this link opens in a new tab</span><a href="https://www.pce.uw.edu/certificates/front-end-development-with-html-css-and-javascript" target="_blank">UW PCE</a></p>
            All flag images used with permission and are copyrighted by <a href="https://www.countryflags.com/">CountryFlags.com</a>
        </footer>
    </body>
</html>