patchstack32.github.io/index.html at main · patchstack32/patchstack32.github.io · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
    <!--Head-->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width" />
        <title>Landen</title>
        <link rel="stylesheet" type="text/css" href="stylesheet/portfolio.css">
    </head>

    <!--Body-->
    <body class="Background">

        <!--Navbar-->
        <div class="Navbar">
            <a class="active" href="#Home">Home</a>
            <a href="#About">About</a>
            <a href="#GitHub">GitHub</a>
            <a href="#Contact">Contact</a>
        </div>

        <!--Breaks inserted to add space between navbar and the first heading-->
        <br>
        <br>

        <!--Background video-->
        <div id="Home">
            <video autoplay muted loop id="Typing_Video">
                <source src="images/video/Typing.mp4" type="video/mp4">
                <!--Display message if video fails to run-->
                Your browser does not support HTML5 video.
            </video>
        </div>

        <!--Video text-->
        <div class="Video_Text">
            <h1 class="white-text">Landen's Portfolio</h1>
            <strong>
                <p class="center white-text">
                    <br> My name is Landen. Welcome to my portfolio website. On it, I will tell you about my background and experience.
                    <br>
                    <br> Thank you for stopping by and enjoy!
                </p>
            </strong>
        </div>

        <!--About section-->
        <div class="Row" id="About">
            <!--Left column-->
            <div class="Column_2">
                <img src="images/otter1.jpg" alt="Otter with It's hands up">
            </div>
            <!--Right column-->
            <div class="Column_1">
                <h1>About</h1>
                <p>
                    I am a Game Dev student with a passion for learning and creating. I currently have learned HTML, CSS, with a bit of JavaScript and I am currently learning more and will add them when I have more experience with them!
                    <br>
                    <br>I am a student of <a href="https://www.learncodinganywhere.com" target="_blank">The Tech Academy</a>’s Game Dev Boot Camp
                    <br>
                    <br>I am a junior Game Dev student. I also love otters as you can tell. <a href="#Contact">Contact</a> me below!
                </p>
            </div>
        </div>

        <!--GitHub section-->
        <div class="Row" id="GitHub">
            <!--Left column-->
            <div class="Column_1">
                <h1>GitHub</h1>
                <p>
                    You can view my coding projects on my GitHub profile below, or by clicking the image to the right!
                    <br>
                    <p class="center"><a href="https://github.com/patchstack32" target="_blank">My GitHub Profile</a></p>
                </p>
            </div>
            <!--Right column-->
            <div class="Column_2">
                <a href="https://github.com/patchstack32" target="_blank"><img src="images/GitHub.png" alt="GitHub Logo"></a>
            </div>
        </div>

        <!--Contact section-->
        <div class="Row" id="Contact">
            <!--Contact image, left column-->
            <div class="Column_2 Column_tall">
                <img src="images/otter3.jpg" alt="Contact_Image">
            </div>
            <!--Contact form, right column-->
            <div class="Column_1 Column_tall">
                <h1>Contact</h1>
                <!--This specifies where and how to send the form data-->
                <form action="https://formspree.io/f/xanrgeqj" method="POST">
                    <label>Name:</label>
                        <input type="text" placeholder="Please enter your name here">
                    <label>Email:</label>
                        <input type="text" id="Email" name="Email" placeholder="Please enter your email here">
                    <label>Message:</label>
                        <input type="text" id="Message" name="Message" placeholder="Please write your message here">
                        <input type="submit" value="SUBMIT">
                </form>
            </div>
        </div>

        <!--Footer section-->
        <footer>
            <p>
                <p class="center">&copy Prosper Consulting Inc., <a href="https://www.learncodinganywhere.com/" target="_blank">The Tech Academy</a></p>
                <br>
            </p>
        </footer>
    </body>
</html>