TrickfireRobotics.github.io/sponsor.html at master · TrickfireRobotics/TrickfireRobotics.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Sponsor</title>

    <!-- General Meta Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="TrickFire relies on generous donations to purchase the necessary materials and equipment to build the rover and travel to competitions. Your donations will directly impact the development of our students the team's opportunities."
    />

    <!-- Link Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Overpass+Mono:wght@300..700&display=swap"
      rel="stylesheet"
    />

    <!-- Link CSS -->
    <link rel="stylesheet" type="text/css" href="assets/scss/Sponsor.css" />
    <link rel="stylesheet" type="text/css" href="assets/scss/default.css" />

    <!-- jquery -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- Loads module Html -->
    <script src="./components/Header.js"></script>
    <script src="./components/Footer.js"></script>
  </head>

  <body>
    <!-- Header will be loaded here -->
    <main>
      <picture id="starBackgroundContainer">
        <source
          type="image/webp"
          srcset="
            assets/images/photos/StarRainBackground/StarRainBackground-320w.webp?width=320    320w,
            assets/images/photos/StarRainBackground/StarRainBackground-520w.webp?width=520    520w,
            assets/images/photos/StarRainBackground/StarRainBackground-768w.webp?width=768    768w,
            assets/images/photos/StarRainBackground/StarRainBackground-1200w.webp?width=1200 1200w,
            assets/images/photos/StarRainBackground/StarRainBackground-1920w.webp?width=1920 1920w
          "
          sizes="100vw"
        />
        <img
          src="assets/images/photos/StarRainBackground/StarRainBackground-320w.jpg"
          srcset="
            assets/images/photos/StarRainBackground/StarRainBackground-320w.jpg?width=320    320w,
            assets/images/photos/StarRainBackground/StarRainBackground-520w.jpg?width=520    520w,
            assets/images/photos/StarRainBackground/StarRainBackground-1200w.jpg?width=1200 1200w,
            assets/images/photos/StarRainBackground/starRainBackground-1920w.jpg?width=1920 1920w
          "
          sizes="100vw"
          alt="Background image of falling stars"
        />
      </picture>
      <div id="contentWidthContainer">
        <section id="introductionSection">
          <h2>Support the Future of Robotics with TrickFire</h2>
          <div class="mainContentContainer" role="presentation">
            <article>
              <h3>Why Sponsor Us?</h3>
              <ul>
                <li>
                  TrickFire Robotics is made possible by the generous support of
                  our sponsors and donors, who play a vital role in fostering
                  the innovative work of the next generation of engineers.
                </li>
                <li>
                  Sponsoring TrickFire Robotics not only empowers students to
                  develop cutting-edge robots but also prepares them to apply
                  their skills in real-world applications, from space
                  exploration to solving everyday challenges.
                </li>
                <li>
                  Your sponsorship turns these possibilities into reality while
                  elevating your brand's visibility as a leader in supporting
                  future technology pioneers.
                </li>
              </ul>
            </article>
            <picture>
              <source
                type="image/webp"
                srcset="
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.webp?width=320    320w,
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-520w.webp?width=520    520w,
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-768w.webp?width=768    768w,
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1200w.webp?width=1200 1200w,
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1920w.webp?width=1920 1920w
                "
                sizes="(max-width: 768px) 88vw, 100vw"
              />
              <img
                src="assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.jpg"
                srcset="
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-320w.jpg?width=320    320w,
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-520w.jpg?width=520    520w,
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-768w.jpg?width=768    768w,
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1200w.jpg?width=1200 1200w,
                  assets/images/photos/2024RoverRevealGroup/2024RoverRevealGroup-1920w.jpg?width=1920 1920w
                "
                sizes="(max-width: 768px) 88vw, 100vw"
                alt="Group photo of the 2024 rover reveal with Viator"
              />
            </picture>
          </div>
        </section>
        <section id="sponsorshipFundsSection">
          <h3>Where Your Sponsorship Funds Go</h3>
          <div id="fundLocationContainer" role="presentation">
            <article class="fundLocation">
              <img
                src="assets/images/icons/teacherIcon.svg"
                alt="Teacher figure"
              />
              <h4>Workshops and Training</h4>
              <p>
                Skill-building workshops, expert-led training, and hands-on
                learning opportunities.
              </p>
            </article>
            <article class="fundLocation">
              <img
                src="assets/images/icons/placeHolderIcon.svg"
                alt="Lightbulb figure"
                loading="lazy"
                encoding="async"
              />
              <h4>Technology and Innovation</h4>
              <p>
                Investing in the latest hardware, software, and cutting-edge
                robotics technology.
              </p>
            </article>
            <article class="fundLocation">
              <img
                src="assets/images/icons/developmentIcon.svg"
                alt="Building blocks figure"
                loading="lazy"
                encoding="async"
              />
              <h4>Project Development</h4>
              <p>
                Enabling the design, prototyping, and construction of unique
                robots.
              </p>
            </article>
            <article class="fundLocation">
              <img
                src="assets/images/icons/gearIcon.svg"
                alt="Gear figure"
                loading="lazy"
                encoding="async"
              />
              <h4>Equipment and Tools</h4>
              <p>
                Providing essential equipment, tools, materials to build and
                perfect robotic creations.
              </p>
            </article>
          </div>
        </section>
        <section id="howToSection">
          <h3>How to Support Us: Step-by-Step Guide</h3>
          <div class="mainContentContainer" role="presentation">
            <article>
              <ol>
                <li>
                  Open the provided
                  <a
                    href="https://www.washington.edu/giving/make-a-gift/"
                    target="_blank"
                    >link</a
                  >
                </li>
                <li>
                  In the search field, type "UW Bothell Robotics Program Support
                  Fund."
                </li>
                <li>Click the "Add" button.</li>
                <li>Select your desired support option!</li>
              </ol>
              <p>
                If you have any questions about sponsoring or supporting us,
                please feel free to contact us at
                <a href="mailto:tfrbtcs@uw.edu" target="_blank"
                  >tfrbtcs@uw.edu</a
                >
              </p>
            </article>
            <picture>
              <source
                type="image/webp"
                srcset="
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.webp?width=320    320w,
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-520w.webp?width=520    520w,
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-768w.webp?width=768    768w,
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1200w.webp?width=1200 1200w,
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1920w.webp?width=1920 1920w
                "
                sizes="(max-width: 768px) 70vw, 20vw"
              />
              <img
                src="assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.jpg"
                srcset="
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-320w.jpg?width=320    320w,
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-520w.jpg?width=520    520w,
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-768w.jpg?width=768    768w,
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1200w.jpg?width=1200 1200w,
                  assets/images/photos/ViatorStreetPhoto/ViatorStreetPhoto-1920w.jpg?width=1920 1920w
                "
                sizes="(max-width: 768px) 88vw, 20vw"
                alt="Photo of the 2024 Viator rover"
              />
            </picture>
          </div>
        </section>
      </div>
    </main>
    <!-- Footer will be loaded here -->
  </body>
</html>