luisvlz0.github.io/services.html at main · luisvlz0/luisvlz0.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
114
115
116
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Services</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link id="stylesheet" rel="stylesheet" href="indexcss.css">
</head>

<body>
  <!-- Responsive Navigation Bar -->
  <header id="navbar">
    <nav class="navbar-container container">
      <a href="index.html" class="home-link">
        <div class="navbar-logo"></div>
        Services
      </a>
      <button type="button" id="navbar-toggle" aria-controls="navbar-menu" aria-label="Toggle menu" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div id="navbar-menu" aria-labelledby="navbar-toggle">
        <ul class="navbar-links">
          <li class="navbar-item"><a class="navbar-link" href="qualifications.html">Qualifications</a></li>
          <li class="navbar-item"><a class="navbar-link" href="services.html">Services</a></li>
          <li class="navbar-item"><a class="navbar-link" href="portfolio.html">Portfolio</a></li>
          <li class="navbar-item"><a class="navbar-link" href="ai.html">AI</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <!-- Spinning Star Button -->
  <div class="star-button-container">
    <button id="star-button">
      <img onclick="toggleStyleSheet()" src="star-spinning.gif" alt="Spinning Star" />
    </button>
  </div>

  <!-- Services Section -->
  <section id="services">
    <h2>Community Service & Organizations</h2>
    <p>Learn more about the community service activities I am involved in and the organizations I am a part of.</p>

    <!-- Slideshow Container -->
    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="gladdash.JPG" style="width:100%">
        <div class="text">Gladiator Dash</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="fishcamp.JPEG" style="width:100%">
        <div class="text">Fish Camp Counselor</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="anchor_splash.JPG" style="width:100%">
        <div class="text">Anchor Splash</div>
      </div>

      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
    </div>
    <br>

    <!-- Dots/bullets -->
    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>

    <!-- Grid Box Below the Carousel -->
    <div class="grid-container">
      <div class="grid-item">
        <h3>Gladiator Dash</h3>
        <p>Participated in organizing and running a charity obstacle course event that raised funds for Still Creek Ranch, a local boys and girls home. Click the link to donate to an amaing cause.
          <a href="https://www.gladiatordash.com/" target="_blank">Donate/Register</a>
        </p>
      </div>
      <div class="grid-item">
        <h3>Fish Camp Counselor</h3>
        <p>Served as a mentor and leader for incoming freshmen, helping them transition into college life through various activities.</p>
      </div>
      <div class="grid-item">
        <h3>Anchor Splash</h3>
        <p>Contributed to the success of a swimming competition fundraiser, benefiting the Delta Gamma Foundation.</p>
      </div>
    </div>
  </section>

  <!-- Footer Section -->
  <footer>
    <div class="footerContainer">
        <div class="socialIcons">
            <a href="https://www.facebook.com/profile.php?id=100021405811969&mibextid=LQQJ4d" target="_blank"><i class="fa-brands fa-facebook"></i></a>
            <a href="https://www.instagram.com/luis.vlz0/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
            <a href="https://www.linkedin.com/in/luis-valdez-1836152h" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
            <a href="https://github.com/luisvlz0/" target="_blank"><i class="fa-brands fa-github"></i></a>
        </div>
        <div class="contact-info">
            <a href="tel:+14697352467">469-735-2467</a> |
            <a href="mailto:[email protected]">[email protected]</a>
        </div>
    </div>
  </footer>

  <!-- Link to the JavaScript file -->
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</body>
</html>