HTML-AND-CSS-PROJECTS/index.html at main · monylay/HTML-AND-CSS-PROJECTS · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<!--Head-->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>Monysak Lay</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">Mony's Portfolio</h1>
        <strong>
            <p class="center">
                <q>The computer programmer is a creator of universes for which he alone is the lawgiver.
                    <br>No playwright, no stage director, no emperor, however powerful, has ever exercised such absolute
                    authority to arrange a stage or
                    <br>field of battle and to command such unswervingly dutiful actors or troops.
                </q>
                <br> -Joseph Weizenbaum
                <br>
                <br> My name is Monysak. 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/binary.jpg" alt="Binary Code">
        </div>
        <!--Right column-->
        <div class="Column_1">
            <h1>About</h1>
            <p>
                I am a software developer who loves to code! I enjoy spending time with my family and
                traveling. I would love to learn how to make a indie game!
                <br>
                <br>I am a graduate of <a href="https://www.learncodinganywhere.com" target="_blank">The Tech
                    Academy</a>’s Software Developer Boot Camp, and trained and experienced in the following web and
                programming languages: HTML, CSS, JavaScript, SQL, C# and more.
                <br>
                <br>I am a full-stack developer and would love to work with you on your project. <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 here:
                <br>
            <p class="center"><a href="https://github.com/monylay/HTML-AND-CSS-PROJECTS" target="_blank">Monysak Github</a>
            </p>
            </p>
        </div>
        <!--Right column-->
        <div class="Column_2">
            <a href="https://github.com/monylay/HTML-AND-CSS-PROJECTS" 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/contact.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; we are leaving it blank-->
            <form action="" method="POST">
                <!-- Here we are utilizing a 3rd party service to submit the contact form data, insert your formspree endpoint in the action attribute -->
                <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>