BioSite/bio.HTML at main · eli2412/BioSite · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Mynerve&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/mysite.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <title>Home Page</title>
</head>
<script>
window.addEventListener("load", function(){alert("Hello!! Welcome to my Bio page!!")})
</script>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:rgb(152, 152, 152)">
    <a class="navbar-brand" href="#">Home</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="bio.HTML">Bio Page<span class="sr-only"></span></a>
        <a>--</a>
        <a class="nav-item nav-link" href="page2.html">Events Page</a>
        <a>--</a>
        <a id='view_socials'class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            View Socials
          </a>
          <div id='socials' class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a href="https://www.linkedin.com/in/eliascruz25/">LinkedIn</a></li>
            <li><a href="https://github.com/eli2412">GitHub</a></li>
    </div>
</nav>
    <h1 align="center" style="text-shadow: 2px 2px rgb(250, 246, 246);">Elias Cruz</h1>
    <h2 align="center">About Me</h2>
    <div class="mee">
    <p><img src="images/me.jpg" style="float:left"; padding: 5px; width ="250" height="600" alt = "Me"></p>
</div>
    <p>Hello! My name is Elias. I am 24 years old and I am currently looking into the field of technology. When I was in university,
        I always had trouble deciding what I should study for and ended up changing my major a couple of times. First, starting with
        biology and then moving to exercise science. After almost completing my BS in exercise science, I ended up taking a break from school.
        Currently, self learned python and now learning Java. Along with more front end
        development and looking forward to what else I'll be able to learn in this field.
        <br />
    </p>
    <h3 align="center">My Dogs!</h3>
    <div class="doggos">
    <p><img src="images/canelo.jpeg" style="float:left"; width ="350" height="450" alt = "Labrador Dog"></p>
    <p><img id="sleep" src="images/marley.jpeg" style="float:right"; width ="350" height="450" alt = "Labrador/Corgi Dog"></p>
    <script>
        document.getElementById("sleep").addEventListener("mouseover", changeimage);
        document.getElementById("sleep").addEventListener("mouseleave", changeimage2);

        function changeimage() {
            var image = document.getElementById("sleep").src = "images/sleepyDog.jpg";
        }

        function changeimage2() {
            var image = document.getElementById("sleep").src = "images/marley.jpeg";
        }
    </script>
</div>
    <p>
        I have two dogs! The one on the left is a mix labrador and golden retriever. His name is Canelo! He is really energetic. He is always running
        around in circles in the backyard. The one on the right is the complete opposite. This littles guy's name is Marley! He is a labrador and a corgi mix. This guy HATES
        running. He prefers to sit and sleep most of the time instead. They're a good pair I would say.
        Canelo is always trying to play with Marley and they both get in some exercise together. <br />
        <br />
    </p>
    <div class="food">
    <p><img src="images/sushi.jpeg" style="float:left"; width ="250" height="350" alt = "Sushi"></p>
    <p><img src="images/duckRamen.jpeg" style="float:right"; width ="250" height="350" alt = "Ramen"></p>
</div>
    <h3 align="center">Experience</h3>
    <p>
        While I took a break from school. I got the chance to travel. Right before COVID happened, I was lucky enough to go on a
        solo trip to Japan. There, I ate all different kinds of foods. I went to see the fish markets in the mornings to see their daily
        catches. My trip took me to Tokyo, Kyoto and Osaka. Kyoto had to have had to be my favorite from the three I went to. The food
        and scenery was beautiful. Hopefully, I'll be able to go back in the future.<br />
        <br />
    </p>
    <h3 align="center">Hobbies</h3>
    <ul>
        <li>Powerlifting: This is a strength sport in which involves the Bench Press, Squat, and Deadlift. I ended up competing
            in the summer of 2020 and won 1st place in my weight class.</li>
        <li>Baking: This consist of flour, water and yeast. I help around a few of my friends bakery shop and also bake pastries
            whenever I have free time.</li>
        <li>Hiking: Whenever I have downtime in the evening, I'll go hiking to place called Piestewa. This place has such a nice view
            at the top.</li>
    </ul>

    <h4 align="left">Page navigation</h4>
<script>
    $(document).ready(function() {
        $('#socials').hide();
        $('#view_socials').on('click', function() {
            $('#socials').toggle(1000);
        })
    })
</script>
<nav aria-label="...">
    <ul class="pagination">
      <li class="page-item active" aria-current="page">
        <span class="page-link">
          1
          <span class="sr-only">(current)</span>
        </span>
        <li class="page-item"><a class="page-link" href="page2.html">2</a></li>
      </li>
      <li class="page-item">
        <a class="page-link" href="page2.html">Next</a>
      </li>
    </ul>
  </nav>

</body>
</html>