Skip to content

Create octopi page #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Create octopi page #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions octopi
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ourOctopi Robotics (Team 27361)</title>
<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=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
:root{
--accent:#0b6e4f;
--muted:#6b7280;
--bg:#f7fafb;
--card:#ffffff;
--radius:12px;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#0f172a;line-height:1.45}
header{background:linear-gradient(90deg,rgba(11,110,79,0.95),rgba(3,105,161,0.95));color:#fff;padding:22px 20px}
.container{max-width:1100px;margin:0 auto;padding:22px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:64px;height:64px;border-radius:12px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-weight:800}
nav{margin-left:auto}
nav a{color:rgba(255,255,255,0.95);text-decoration:none;margin-left:16px;font-weight:600}
.hero{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:40px 0}
.hero .left{flex:1 1 380px}
.hero h1{margin:0;font-size:clamp(26px,4vw,40px);line-height:1.05}
.hero p{color:var(--card);opacity:0.95}
.cta{margin-top:18px}
.btn{background:#fff;color:var(--accent);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
main{padding:28px 0}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(12,15,20,0.06)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
footer{padding:28px 0;color:var(--muted)}
@media(max-width:800px){
nav{display:none}
.grid.cols-3{grid-template-columns:1fr}
.grid.cols-2{grid-template-columns:1fr}
}
</style>
</head>
<body>
<header>
<div class="container" style="display:flex;align-items:center">
<div class="brand">
<div class="logo">OCTO</div>
<div>
<div style="font-weight:800">ourOctopi Robotics</div>
<div style="font-size:13px;opacity:0.95">Team 27361 — FIRST Tech Challenge</div>
</div>
</div>
<nav>
<a href="#about">About</a>
<a href="#team">Team</a>
<a href="#season">Season</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>

<div class="container">
<section class="hero">
<div class="left">
<h1>Build. Code. Compete. Learn.</h1>
<p>ourOctopi Robotics (Team 27361) is a student-run FIRST Tech Challenge team dedicated to engineering hands-on robots, writing control and autonomous code, and sharing STEM with our community. We combine mechanical design, electronics, and software to solve real-world robotics challenges — while having fun and learning together.</p>
<div class="cta"><a class="btn" href="#team">Meet the Team</a></div>
</div>
<div class="right" style="flex:0 0 320px">
<div class="card">
<strong>Quick facts</strong>
<ul style="margin:10px 0 0;padding-left:18px;color:var(--muted)">
<li>Team #: 27361</li>
<li>Program: FIRST Tech Challenge (FTC)</li>
<li>Focus areas: Mechanical design, controls, vision, outreach</li>
</ul>
</div>
</div>
</section>

<main>
<section id="about" class="card" style="margin-bottom:18px">
<h2 style="margin-top:0">About Octopi</h2>
<p style="color:var(--muted)">our Octopi Robotics started with a small group of friends curious about building robots and learning to code. Our mission is to provide a welcoming, hands-on environment where students of all skill levels can explore engineering, develop teamwork skills, and prepare for STEM careers. We emphasize mentorship, open documentation, and outreach — visiting local schools, hosting workshops, and running build nights.</p>
</section>

<section id="team" style="margin-bottom:18px">
<h2>Meet the Team</h2>
<div class="card">
<p style="color:var(--muted)">Our team is made up of students with diverse skills and interests, working together on mechanical design, programming, electronics, and outreach. We collaborate to build robots and grow as problem solvers. (Add individual introductions or group photo here.)</p>
</div>
</section>

<section id="season" class="card" style="margin-bottom:18px">
<h2>Current Season</h2>
<p style="color:var(--muted)">We're building and iterating on our competition robot for the current FTC challenge. Highlights this season include improved drivetrain tuning, vision-based targeting, and automated scoring routines. Follow our progress and match results on our socials or reach out to join a build night.</p>
</section>

<section id="sponsors" style="margin-bottom:18px">
<h2>Support & Sponsors</h2>
<div class="grid cols-2">
<div class="card">
<strong>Interested in sponsoring?</strong>
<p style="color:var(--muted)">Sponsorship helps with parts, travel, and event registration. We offer shout-outs on our site and social media, and will list sponsors on our robot and team shirts.</p>
</div>
<div class="card">
<strong>Our thanks</strong>
<p style="color:var(--muted)">— Local schools, mentors, and volunteers (add your sponsors here)</p>
</div>
</div>
</section>

<section id="contact" class="card">
<h2>Contact</h2>
<p style="color:var(--muted)">Want to join, volunteer, or collaborate? Email us at <strong>info@ouroctopi.org</strong> or use the contact form below.</p>
<form style="display:grid;gap:8px;max-width:560px">
<input placeholder="Your name" style="padding:10px;border-radius:8px;border:1px solid #e6e9ef">
<input placeholder="Email" style="padding:10px;border-radius:8px;border:1px solid #e6e9ef">
<textarea placeholder="Message" rows="4" style="padding:10px;border-radius:8px;border:1px solid #e6e9ef"></textarea>
<div><button type="button" class="btn">Send message</button></div>
</form>
</section>
</main>

<footer class="container">
<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
<div style="color:var(--muted)">© our Octopi Robotics Team 27361</div>
<div style="color:var(--muted)">Built with ❤️ for FTC</div>
</div>
</footer>
</div>

<script>
document.querySelectorAll('a[href^="#"]').forEach(a=>{
a.addEventListener('click',e=>{
e.preventDefault();
const t=document.querySelector(a.getAttribute('href'));
if(t) t.scrollIntoView({behavior:'smooth',block:'start'});
});
});
</script>
</body>
</html>