website v1

.replit

@@ -7,3 +7,8 @@ channel = "stable-24_05"
 [deployment]
 run = ["sh", "-c", "python3 app.py"]
 deploymentTarget = "cloudrun"
+
+[[ports]]
+localPort = 5000
+externalPort = 3000
+exposeLocalhost = true

static/css/styles.css

@@ -2,42 +2,128 @@ body {
     margin: 0;
     margin-top: 0;
     /* background-color: #2B2A2B; */
-    background-color: whitesmoke;
+    background-color: black;
     cursor: default;
     user-select: none;
+    color: white;
 }
 
-.nav-container {
+.menu-button {
-    z-index: 1000000000;
+    display: none;
-    list-style-type: none;
+    /* border: 0.25vh solid white; */
-    margin: 0;
+    background: none;
+    color: white;
+    font-size: 1.5rem;
+    width: 13vw;
+    /* Equal width and height */
+    height: 13vw;
+    text-align: center;
     padding: 0;
-    background: rgba(0, 0, 0, 0.5);
+    /* Remove padding to keep it a perfect circle */
-    color: #e5e5e5d0;
+    border-radius: 50%;
-    display: flex;
+    /* Makes it circular */
+    cursor: pointer;
+    position: fixed;
+    z-index: 1000000000000000000;
+    top: 4%;
+    left: 50%;
+    transform: translateX(-50%);
     justify-content: center;
     align-items: center;
+    transition: .5s;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    backdrop-filter: blur(5px);
+    /* Centers the icon inside */
+}
+
+.nav-side {
+    display: none;
+    position: fixed;
+    z-index: 10000;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, .85);
+    backdrop-filter: blur(5px);
+    opacity: 1;
+    /* display: flex; */
+    flex-direction: column;
+    text-decoration: none;
+    list-style-type: none;
+    justify-content: center;
+    align-items: center;
+    overflow-y: auto;
+}
+
+.nav-side ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    text-decoration: none;
+    text-align: center;
+}
+
+.nav-side ul li a {
+    text-decoration: none;
+    color: white;
+    font-size: 1.25rem;
+    font-family: sans-serif;
+}
+
+.nav-side ul li {
+    margin-bottom: 3vh;
+}
+
+.menu-button:hover {
+    background-color: white;
+    color: black;
+}
+
+nav {
     position: fixed;
     top: 0;
     width: 100%;
-    backdrop-filter: blur(5px);
+    padding-top: 1%;
-    height: 12vh;
+    display: flex;
-    font-family: Sans-Serif;
+    justify-content: center;
-    font-size: 1.10rem;
+    align-items: center;
-    border-bottom: .5px solid white;
+    z-index: 1000;
-    overflow-y: hidden;
 }
 
-.nav-item-center {
+.nav-container {
-    display: inline-block;
+    display: flex;
-    margin-right: 2%;
+    justify-content: center;
-    margin-left: 2%;
+    align-items: center;
+    list-style: none;
+    gap: 1%;
+    padding: 1%;
+    width: 56vw;
+    height: 6vh;
+    border-radius: 50vh;
+    background-color: rgba(0, 0, 0, .25);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    /* border: solid 1px;
+    border-color: white; */
 }
 
+
+
 @media only screen and (max-width: 850px) {
+
+    nav {
+        display: none;
+    }
+
+    .menu-button {
+        display: flex;
+        display: block !important;
+    }
+
     nav {
         padding: 0;
     }
+
     .nav-container {
         display: flex;
         align-items: center;
@@ -92,8 +178,8 @@ body {
 
     .sponsors-card {
         margin-top: 3% !important;
-        max-width: 75%!important;
+        max-width: 85vw !important;
-        max-height: 45%!important;
+        max-height: 25vw !important;
         margin-bottom: 15% !important;
     }
 
@@ -118,33 +204,28 @@ body {
     }
 }
 
-.nav-item-left {
+.nav-container li {
-    float: left;
+    width: 33%;
-    position: absolute;
+    text-align: center;
-    margin-right: 100%;
+    padding: 2%;
-    margin-left: 15%;
+    transition: 0.25s;
-    transition: .25s;
+    border-radius: 5px;
+    font-size: 100%;
 }
 
-.nav-item-left:hover {
+.nav-container li a {
-    transform: scale(1.025);
+    color: rgb(125, 125, 125);
-}
-
-.nav-item {
-    display: flex;
-    animation-duration: 1s;
-    align-items: center;
-    color: white;
-}
-
-.nav-item-center a {
     text-decoration: none;
-    color: rgba(255, 255, 255, 0.5);
+    font-family: sans-serif;
-    transition-duration: .25s;
+    transition: 0.25s;
 }
 
-.nav-item-center a:hover {
+.nav-item-center:hover {
-    color: white;
+    background-color: rgba(35, 35, 35, 0.5);
+}
+
+.nav-item-center:hover a {
+    color: #fff;
 }
 
 .header-line {
@@ -163,7 +244,7 @@ body {
 .header-line .line {
     flex-grow: 1;
     height: 2px;
-    background-color: #333333;
+    background-color: white;
 }
 
 .contact {
@@ -177,10 +258,13 @@ body {
 }
 
 #logo {
-    height: 7vh;
+    height: 6vh;
+    border-right: solid 1px #787878;
 }
 
+
 .header-container {
+    color: white;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -191,6 +275,7 @@ body {
 }
 
 .header-container4 {
+    color: white;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -202,21 +287,27 @@ body {
 
 .line {
     flex: 1;
-    border-top: 0.5vh solid #000;
+    border-top: 0.5vh solid white;
+    opacity: 0.5;
 }
+
 .header {
+    color: white;
     padding: 0 1vh;
     margin: 0;
     font-family: Sans-Serif;
     font-size: 1.5rem;
+    opacity: 0.5;
     /* 1.5vw */
 }
 
 .header2 {
+    color: white;
     padding-right: 1vh;
     margin: 0;
     font-family: Sans-Serif;
-    font-size: 1.5vw;
+    font-size: 1.5rem;
+    opacity: 0.5;
 }
 
 .contact-container {
@@ -292,7 +383,7 @@ body {
 .card {
     width: 30%;
     height: 50vh;
-    background-color: whitesmoke;
+    background-color: black;
     border-radius: 1.5vh;
     overflow: hidden;
     margin-bottom: 4%;
@@ -300,7 +391,7 @@ body {
     display: inline-block;
     position: relative;
     transition: transform 0.3s ease;
-    border: black solid .25vh;
+    border: white solid .25vh;
 }
 
 .card-content {
@@ -315,6 +406,7 @@ body {
     max-height: 100%;
     height: auto;
     transition: transform 0.3s ease;
+    filter: brightness(0) invert(1);
 }
 
 .card:hover img {
@@ -342,7 +434,7 @@ body {
 
 .bg {
     width: 100%;
-    background-color: white;
+    background-color: black;
     height: 100vh;
     display: flex;
     justify-content: center;
@@ -350,17 +442,30 @@ body {
 }
 
 .bg img {
-    max-width: 75%;
+    width: 100%;
-    max-height: 75%;
+    height: 100%;
-    object-fit: cover;
+    /* object-fit: cover;
-    overflow: hidden;
+    overflow: hidden; */
     transition: .5s;
 }
 
-.bg img:hover {
+.bg::after {
-    transform: scale(1.05);
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 25%;
+    /* Adjust based on how much gradient you need */
+    background: linear-gradient(to top, black, rgba(5, 8, 28, 0));
+    pointer-events: none;
+    /* Ensures the gradient doesn’t block interactions */
 }
 
+/* .bg img:hover {
+    transform: scale(1.05);
+}
+ */
 .header-container2 {
     display: flex;
     /* align-items: center;
@@ -370,6 +475,7 @@ body {
     width: 100%;
     justify-content: center;
     align-items: center;
+    color: white;
 }
 
 .header-container6 {
@@ -381,6 +487,7 @@ body {
     width: 100%;
     justify-content: center;
     align-items: center;
+    color: white;
 }
 
 .home-info {
@@ -390,6 +497,7 @@ body {
     display: block;
     margin: auto;
     padding-bottom: 6%;
+    color: white;
 
 }
 
@@ -397,6 +505,7 @@ body {
     padding: 0 1vh;
     font-family: Sans-Serif;
     font-size: 4rem;
+    color: white;
     font-weight: 100;
 }
 
@@ -409,7 +518,7 @@ body {
 }
 
 .stats-container {
-    border: 0.25vh black solid;
+    border: 0.25vh white solid;
     width: 100%;
     border-radius: 1.5vh;
     margin-top: 8%;
@@ -426,12 +535,13 @@ body {
     width: 99%;
     justify-content: center;
     align-items: center;
-    color: black;
+    color: white;
 }
 
 .line2 {
     flex: 1;
-    border-top: 0.5vh solid black;
+    border-top: 0.5vh solid white;
+    opacity: 0.5;
 }
 
 .stats-cards {
@@ -453,7 +563,7 @@ body {
 .stats-card-header {
     font-family: Sans-Serif;
     font-size: 4rem;
-    color: black;
+    color: white;
     text-align: center;
     transition: 0.1s;
 }
@@ -464,7 +574,7 @@ body {
     margin: 0;
     font-family: Sans-Serif;
     font-size: 1.5rem;
-    color: rgba(0, 0, 0, 0.75);
+    color: rgba(255, 255, 255, 0.75);
     padding-bottom: 5%;
 }
 
@@ -488,7 +598,7 @@ body {
 .sponsors-card {
     max-width: 15%;
     max-height: 15%;
-    filter: brightness(0) drop-shadow(0 0 0.75rem rgb(166, 166, 166));
+    filter: brightness(0) invert(1) drop-shadow(0 0 0.75rem rgb(97, 97, 97));
     flex: 1 1 calc(25% - 10px);
     margin-bottom: 10px;
 }
@@ -514,18 +624,18 @@ body {
     font-family: Sans-Serif;
     border-radius: 100vh;
     border: none;
-    color: black;
+    color: white;
     width: 25%;
     height: 15%;
-    border: solid black 0.25vh;
+    border: solid white 0.25vh;
     background-color: rgba(245, 245, 245, 0);
     left: 37%;
     transition: 0.5s;
 }
 
 #sponsors-more-button:hover {
-    background-color: black;
+    background-color: white;
-    color: white;
+    color: black;
     cursor: pointer;
 }
 
@@ -549,7 +659,7 @@ body {
 .card-sponsors {
     width: 23%;
     height: 50vh;
-    background-color: whitesmoke;
+    background-color: black;
     border-radius: 1.5vh;
     overflow: hidden;
     margin-bottom: 4%;
@@ -557,7 +667,7 @@ body {
     /* display: inline-block; */
     position: relative;
     transition: transform 0.3s ease;
-    border: black solid .25vh;
+    border: white solid .25vh;
 }
 
 .card-content-sponsors {
@@ -572,7 +682,7 @@ body {
     max-height: 100%;
     height: auto;
     transition: transform 0.3s ease;
-    filter: brightness(0);
+    filter: brightness(0) invert(1);
     opacity: 0.5;
 }
 
@@ -609,7 +719,7 @@ body {
 
 .meet-our-team-container {
     position: relative;
-    border: 0.25vh black solid;
+    border: 0.25vh white solid;
     width: 100%;
     border-radius: 1.5vh;
     margin-top: 10%;
@@ -634,10 +744,12 @@ body {
 .meet-our-team-container::before {
     content: '';
     position: absolute;
-    bottom: 0; /* Keep the gradient at the bottom */
+    bottom: 0;
+    /* Keep the gradient at the bottom */
     left: 0;
     width: 100%;
-    height: 100%; /* Adjust this value to control the gradient height */
+    height: 100%;
+    /* Adjust this value to control the gradient height */
     background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
     z-index: 1;
     pointer-events: none;
@@ -675,16 +787,17 @@ body {
     color: black;
     cursor: pointer;
 }
+
 /* Span stuff */
 
 .stats-button {
-    color: black;
+    color: white;
     font-size: 1.25rem;
     font-family: Sans-Serif;
     border-radius: 100vh;
     width: 25%;
     height: 50%;
-    border: solid black 0.25vh;
+    border: solid white 0.25vh;
     background-color: rgba(0, 0, 0, 0);
     z-index: 2;
     cursor: pointer;
@@ -696,9 +809,11 @@ body {
     padding: 1%;
 }
 
+
+
 .stats-button:hover {
-    color:white;
+    color: black;
-    background-color: black;
+    background-color: white;
 }
 
 .team-info {
@@ -716,7 +831,7 @@ body {
     align-items: center;
     justify-content: center;
     text-align: center;
-    border-top: black 0.25vh solid;
+    border-top: white 0.25vh solid;
 }
 
 .footer-content {
@@ -731,7 +846,7 @@ body {
 }
 
 .link-to-here {
-    color: black;
+    color: white;
     font-weight: bold;
     text-decoration: underline;
 }
@@ -746,13 +861,14 @@ body {
     margin: auto;
     padding-bottom: 5%;
     gap: 3%;
-    border-top: black 0.25vh solid;
+    border-top: white 0.25vh solid;
-    border-right: black 0.25vh solid;
+    border-right: white 0.25vh solid;
-    border-left: black 0.25vh solid;
+    border-left: white 0.25vh solid;
     border-top-right-radius: 1.5vh;
     border-top-left-radius: 1.5vh;
     padding-top: 2%;
 }
+
 @media only screen and (max-width: 850px) {
     .card-sponsors {
         width: 100%;
@@ -788,7 +904,7 @@ body {
 .member-image {
     width: 15vh;
     height: 15vh;
-    border: 0.25vh black solid;
+    border: 0.25vh white solid;
     border-radius: 100vh;
     overflow: hidden;
     transition: 1s;
@@ -845,12 +961,12 @@ body {
 .sidebar a {
     text-decoration: none;
     font-size: 4vh;
-    color: black;
+    color: white;
     display: block;
     font-family: sans-serif;
-    opacity: .25;
+    opacity: .5;
     transition: .5s;
-    filter: drop-shadow(0 0 1rem rgb(0, 0, 0));
+    filter: drop-shadow(0 0 1rem rgb(102, 102, 102));
     width: 100%;
     box-sizing: border-box;
     position: relative;
@@ -865,6 +981,7 @@ body {
 }
 
 .competitions-container {
+    color: white;
     margin-top: 8vh;
     margin-left: 25%;
     width: 100%;
@@ -911,6 +1028,21 @@ body {
     position: relative;
 }
 
+.competition-card-img {
+    width: 100%;
+    margin-top: 1%;
+    max-height: 40vh;
+    border: 0.25vh solid white;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.competition-card-img img {
+    width: 100%;
+    object-fit: cover;
+    filter: brightness(0.8);
+}
+
 .competition-date {
     opacity: .5;
 }
@@ -1018,7 +1150,7 @@ span.stats::after {
 
 span.gallary::before,
 span.gallary::after {
-  content: "📷";
+    content: "✊";
     font-size: 2.5vh;
     top: -75%;
     left: -10%;
@@ -1086,3 +1218,121 @@ span.emoji:active::before,
 span.emoji:active::after {
     transform: scale(1) rotate(-2deg);
 }
+
+.about-section-imgp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 10%;
+    padding-bottom: 1%;
+    padding-right: 10%;
+}
+
+.about-section-imgp img {
+    max-width: 40%; /* Example size, adjust as needed */
+    max-height: 60%;
+    border-radius: 5px;
+    transition: .5s;
+    border: 2px white solid;
+}
+
+.about-section-imgp p {
+    flex: 1;
+}
+
+@media only screen and (min-width: 850px) {
+    .about-section-imgp p {
+        padding-left: 10%;
+    }
+    .about-section-imgp-l p {
+        padding-right: 10%;
+    }
+}
+
+
+.about-section-imgp-l {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 10%;
+    padding-bottom: 1%;
+    padding-right: 10%;
+}
+
+.about-section-imgp-l img {
+    max-width: 40%; /* Example size, adjust as needed */
+    max-height: 60%;
+    border-radius: 5px;
+    transition: .5s;
+    border: 2px white solid;
+}
+
+.about-section-imgp img:hover {
+    transform: scale(1.025);
+}
+
+.about-section-imgp-l img:hover {
+    transform: scale(1.025);
+}
+
+.about-section-imgp-l p {
+    flex: 1;
+}
+
+@media only screen and (max-width: 850px) {
+    .about-section-imgp,
+    .about-section-imgp-l {
+        display: flex;
+        flex-direction: column; /* Stack image and text vertically */
+        align-items: center;
+        justify-content: flex-start; /* Align content to the top */
+        padding: 0;
+        margin: 0;
+        text-align: center;
+        margin-bottom: 5%;
+    }
+
+    .contact-content {
+        background-image: none;
+    }
+
+
+
+    .about-section-imgp img,
+    .about-section-imgp-l img {
+        max-width: 80vw; /* Image takes 80% of the viewport width */
+        max-height: auto;
+        width: 80%; /* Ensure the image scales properly */
+        margin-bottom: 10px; /* Adds some space between the image and the paragraph */
+        border-radius: 5px;
+        transition: .5s;
+    }
+
+    .about-section-imgp-l {
+        flex-direction: column-reverse;
+    }
+
+    .about-section-imgp-l img,
+    .about-section-imgp img{
+        min-width: 100%;
+        height: 75vh;
+        border-radius: 10px;
+        object-fit: cover;
+        overflow: hidden;
+        margin-bottom: 5%;
+    }
+
+    .about-section-imgp p,
+    .about-section-imgp-l p {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .about-section-imgp img:hover,
+    .about-section-imgp-l img:hover {
+        transform: scale(1.025);
+    }
+}

templates/base.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,7 +15,7 @@
     <nav>
         <ul class="nav-container">
             <li class="nav-item-left">
-                <a href="/"><img id="logo" src="{{ url_for('static', filename='images/logo.png') }}"></a>
+                <a href="/"><img id="logo" src="{{ url_for('static', filename='images/logo2.png') }}"></a>
             </li>
 
             <li class="nav-item-center">
@@ -37,10 +38,41 @@
             </li>
         </ul>
     </nav>
+    <button class="menu-button">☰</button>
+    <div class="nav-side">
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/contributors">Contributors</a></li>
+            <li><a href="/competitions">Competitions</a></li>
+            <li><a href="/sponsors">Sponsors</a></li>
+            <li><a href="/contact">Contact</a></li>
+            <li><a href="https://hcb.hackclub.com/donations/start/technicalturbulence" target="_blank">Donate</a></li>
+        </ul>
+    </div>
+    <script>
+        const menuButton = document.querySelector('.menu-button');
+        const navSide = document.querySelector('.nav-side');
+        const navLinks = document.querySelectorAll('.nav-side a'); // Select all links inside nav-side
 
+        menuButton.addEventListener('click', () => {
+            if (navSide.style.display === 'none' || navSide.style.display === '') {
+                navSide.style.display = 'flex'; // Show the nav-side with flex
+            } else {
+                navSide.style.display = 'none'; // Hide the nav-side
+            }
+        });
+
+        // Add event listeners to each link
+        navLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                navSide.style.display = 'none'; // Hide the nav-side
+            });
+        });
+    </script>
     <!-- This is where child templates will insert their content -->
     {% block content %}
     {% endblock %}
 
 </body>
+
 </html>

templates/competitions.html

@@ -20,6 +20,30 @@
                 <div class="line"></div>
             </div>
 
+            <h1 id="2024" class="competition-year">2024</h1>
+
+            <div class="competition-card">
+                <!-- <div class="competition-card-img">
+                <img src="{{ url_for('static', filename='images/earlybird.png') }}">
+                </div> -->
+                <div class="competition-header">
+                    <p class="competition-name">FiT-North Early Bird Scrimmage</p>
+                    <p class="middle-dot">·</p>
+                    <p class="competition-date">10/6/2024</p>
+                </div>
+
+                <p class="competition-subtitle">Description</p>
+
+                <p class="competition-description">We participated in the FiT-North Early Bird Scrimmage where we won two recognitions.</p>
+
+                <p class="competition-subtitle">Awards</p>
+
+                <ul class="competition-awards">
+                    <li>Innovate Award sponsored by RTX</li>
+                    <li>Design Award 2nd Place</li>
+                </ul>
+            </div>
+
             <h1 id="2023" class="competition-year">2023</h1>
 
             <div class="competition-card">

templates/contact.html

@@ -11,7 +11,7 @@
                 <h1 class="header"><span class="emoji contact">CONTACT US</span></h1>
                 <div class="line"></div>
             </div>        
-            <p class="info">you can find us on several platforms!</p>
+            <p class="info">🌐 you can find us on several platforms! 🌐</p>
         <div class="contact-container">
             <div class="card-container">
                 <a href="https://www.instagram.com/technicalturbulence23344/" target="_blank" class="card">

templates/contributors.html

@@ -41,7 +41,7 @@
             <h1 class="header"><span class="emoji team">OUR TEAM</span></h1>
             <div class="line"></div>
         </div>        
-        <p class="info">meet our amazing team!</p>
+        <p class="info">⭐ meet our amazing team! ⭐</p>
 
         <div class="members-container">
 

templates/home.html

@@ -7,15 +7,23 @@
 <body>
     <div class="home">
         <div class="bg">
-        <img src="{{ url_for('static', filename='images/storm.png') }}">
+        <img src="{{ url_for('static', filename='images/tech2.gif') }}">
+        <div class="border-triangle"></div>
         </div>
         <div class="home-info">
         <div class="header-container2">
             <h1 class="header"><span class="emoji about">ABOUT US</span></h1>
             <div class="line"></div>
         </div>
-        <h1 class="sub-header">Hello! We are Technical Turbulence.</h1>
+        <h1 class="sub-header">👋 Hello! We are Technical Turbulence.</h1>
-        <p class="sub-content">FTC Team 23344 Technical Turbulence is a team based in Plano, Texas. Our rookie year was 2023 and we hope to learn much more in the years to come. We want to grow our numbers and increase our outreach towards different communities so we can be the best that we can.</p>
+        <div class="about-section-imgp">
+            <img src="{{ url_for('static', filename='images/main1.png') }}">
+        <p class="sub-content">Team 23344, Technical Turbulence, is a community-based returning team situated around Plano and Frisco Texas, comprising nine members primarily consisting of sophomores from different high schools. Our rookie year was 2023 and we hope to learn much more in the years to come. We want to grow our numbers and increase our outreach towards different communities so we can be the best that we can.</p>
+        </div>
+        <div class="about-section-imgp-l">
+        <p class="sub-content">Since we are designated as veterans this year, our members bring substantial experience from their involvement with FTC 12900 Quantum Claw and 22201 The Edge Robotics. Operating from our dedicated garage workshop, we uphold the fundamental values of FIRST, integrating Gracious Professionalism into our daily endeavors. </p>
+            <img src="{{ url_for('static', filename='images/robo.png') }}">
+        </div>
         <div class="stats-container">
             <div class="header-container3">
                 <h1 class="header"><span class="emoji stats">OUR STATS</span></h1>
@@ -40,25 +48,29 @@
             <button class="stats-button" onclick="window.location.href = '{{ url_for('competitions') }}' ; ">View our log</button>
         </div>
 
+
+        <div class="header-container2">
+            <h1 class="header"><span class="emoji gallary">OUR MISSION</span></h1>
+            <div class="line"></div>
+        </div>
+
+        <h1 class="sub-header">✊ One team, one goal.</h1>
+        <p class="sub-content">We aim to show kids that with teamwork, creativity, and persistence, anyone can design, build, and code robots. Our mission is part of an outreach initiative to guide kids toward STEM and skill-building opportunities in robotics and technology. Through this unifying goal, we want to empower young students to learn, grow, and join FTC in the future.</p>
+
             <div class="meet-our-team-container">
                 <img id="meet-our-team" src="{{ url_for('static', filename='images/team.png') }}">
                 <button class="bottom-center-button" onclick="window.location.href = '{{ url_for('contributors') }}' ; ">Meet Our Team</button>
             </div>
             
-        <div class="header-container2">
-            <h1 class="header"><span class="emoji gallary">GALLERY</span></h1>
-            <div class="line"></div>
-        </div>
-
-        <h1 class="sub-header">See what we've been up to.</h1>
-        <p class="sub-content">coming soon...</p>
-
         <div class="header-container2">
             <h1 class="header"><span class="emoji sponsors">SPONSORS</span></h1>
             <div class="line"></div>
         </div>
 
-        <h1 class="sub-header">And we couldn't have done it without...</h1>
+        <p class="sub-content">We, FTC team Technical Turbulence, want to inspire the next generation by sharing our journey in robotics and the exciting world of FTC. By demonstrating our robot and showcasing the engineering behind it, we hope to spark curiosity in young minds about STEM fields.
+</p>
+
+        <h1 class="sub-header">❤️ And we couldn't have done it without...</h1>
 
         <div class="sponsors-container">
                 <img class="sponsors-card" src="{{ url_for('static', filename='images/ray.png') }}">

templates/sponsors.html

@@ -11,7 +11,7 @@
             <h1 class="header"><span class="emoji sponsors">OUR SPONSORS</span></h1>
             <div class="line"></div>
         </div>        
-        <p class="info">companies of various sizes sponsor our initiatives.</p>
+        <p class="info">❤️ companies of various sizes sponsor our initiatives. ❤️</p>
         
         <div class="sponsors-container">
             <div class="card-container">