<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full-Page Image Slider</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider">
        <div class="slides">
            <!--
                <img class="slide" style="left: -79%;" src="comp_stands_shouting.webp" />
                <img class="slide" style="left: -36%;" src="suraj_p_robo_frame_tall.webp" />
                <img class="slide" style="left: -74%;" src="larry_b_fish_hat_stands.webp" />
                <img class="slide" style="left: -114%;" src="picnic_class_of_2023.webp" />
                <img class="slide" style="left: -59%;" src="robo_programming_hudle_wilburt.webp" />
                <img class="slide" style="left: -30%;" src="miranda_andrew_it.webp" />
                <img class="slide" style="left: -130%;" src="miranda_andrew_it.webp" />
                <img class="slide" style="left: -35%;" src="montvale_street_fair_outreach_group_pic.webp" />
                <img class="slide" style="left: -51%;" src="comp_pres_team.webp" />
                <img class="slide" style="left: -75%;" src="tyler_animation_draw_pad.webp" />
                <img class="slide" style="left: -20%;" src="write_animate.jpg" />
                <img class="slide" style="left: -50%;" src="hills_caf_outreach_group_pic.webp" />
                <img class="slide" style="left: -50%;" src="town_of_washington_group_pic.webp" />
            -->
            <div class="slide-container">
                <img class="slide" style="left: -12%;" src="2017_medals.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -50%;" src="pj_day_group_pic.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -44%;" src="dylan_m_screwdriver.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: 0" src="carly_r_fest_of_champs_trophy.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: 0;" src="frame_better.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -13%;" src="hannah_juhi_selfi.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -32%;" src="brickfest_dylan_thomas_table_from_back.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -86%; -webkit-transform: scaleX(-1); transform: scaleX(-1);" src="tyler_m_drill_press.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -60%;" src="young_adi_cad_close_up.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -6%;" src="carpentry_tower.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -115%; -webkit-transform: scaleX(-1); transform: scaleX(-1);" src="pit_sitting_in_corner.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -55%;" src="marshmellow_tower.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -37%;" src="ryan_steam_balence_cork_event.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: 0;" src="peeps_huggin.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -84%;" src="jacob_b_beam_sharpie_measure.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -14%;" src="stands.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -62%; -webkit-transform: scaleX(-1); transform: scaleX(-1);" src="jonathan_f_saw_104.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -12%;" src="vertical_comp_pit.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -50%; -webkit-transform: scaleX(-1); transform: scaleX(-1);" src="kenzo_e_shop_vac.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -58%;" src="table_of_awards_2017.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -8%;" src="lily_d_ethan_s_selfie_by_cad.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -58%;" src="publications.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -75%;" src="2024_bot_unpolished.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -45%; -webkit-transform: scaleX(-1); transform: scaleX(-1);" src="working.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -90%;" src="sabrina_l_goofy_104.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -14%;" src="murno_bearings.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -44%; -webkit-transform: scaleX(-1); transform: scaleX(-1);" src="robot_hug.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -40%;" src="infotech.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -70%; -webkit-transform: scaleX(-1); transform: scaleX(-1);" src="rem_saw.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -68%;" src="word_champs_front_hills_sign.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -82%;" src="rj_julian_comp_camera.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -15%;" src="lol.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -70%;" src="wires.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -65%;" src="robot.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -59%;" src="grant_b_on_hills_caf_table.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -75%;" src="william_b_lego_movie_race_valley.webp" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -60%" src="lights.jpg" />
            </div>
            <div class="slide-container">
                <img class="slide" style="left: -60%;" src="wilburt_thomas_hammer_104.webp" />
            </div>
        </div>
        <div class="controls" style="display: none;">
            <button class="prev">Prev</button>
            <button class="next">Next</button>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>
