<!doctype html>
<html lang="en">
<!-- Basic Page Needs––––––––––––––––––––––––––– -->
<head>
<meta http-equiv="content-type" content="text/html">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!--SEO meta tags-->
<meta name="description" content="SJTU VEX Robotics Club">
<meta name="keywords" content="VEX, SJTU, Shanghai Jiao Tong University, SJTUVEX, Robot, SJTU-VEX">
<meta name="author" content="Waley">
<meta name="google-site-verification" content="FZNnU0U-pZcPLSK21RnxaCIC_Yii1I6x-dKjq64Eli8" />
<!-- Change the index to your website's name-->
<title>SJTU VEX</title>
<!-- Bootstrap Core CSS ––––––––––––––––––––––––––– -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" /> -->
<!-- Custom CSS ––––––––––––––––––––––––––– -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style2.css" rel="stylesheet">
<link href="css/webfontkit-20210922-213723/stylesheet.css" rel="stylesheet">
<!-- fontawesome ––––––––––––––––––––––––––– -->
<script src="https://kit.fontawesome.com/5c9f2dfb26.js"></script>
<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script/script.js"></script>
<!-- To add a google font and paste the link -->
<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=Exo+2:wght@800&display=swap" rel="stylesheet">
<!-- Favicon––––––––––––––––––––––––––– -->
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body>
<div class="b-example-divider"></div>
<!-- main content starts from here. Use container or container-fluid-->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark fixed-top shadow-lg">
<div class="container-fluid justify-content-lg-center" id="navbarContainer">
<div class="row justify-content-lg-center">
<!-- <div class="col-xxl-3"> </div> -->
<div class="col-sm-1 col-lg-1">
<a class="navbar-brand" href="#">
<img src="./img/logo-red-transparent.png" alt="SJTU VEX logo" width="45">
</a>
</div>
<button class="navbar-toggler col-sm-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center col-lg-auto" id="navbarToggler" display="flex">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resources">Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="col-lg-1"></div>
</div>
<!-- <a class="navbar-brand px-5">
<div width="45"> </div> -->
<!-- <img src="./img/logo-red-transparent.png" alt="logo" width="45" height=""> -->
<!-- </a> -->
</div>
</nav>
<div class="b-example-divider"></div>
<div id="homeWrapper" class="position-relative overflow-hidden text-center bg-opacity-0 page-section">
<video id="bgvid" preload="auto" autoplay loop muted="muted" width="100%" poster="img/header-background-first-frame.jpg" src="./img/web-header.mp4" type="video/mp4"></video>
<!-- <video autoplay muted loop poster="img/header-background-first-frame.jpg" id="bgvid">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="./img/web-header.mp4" type="video/mp4">
<source src="images/3.webm" type="video/webm">
<source src="images/2.ogg" type="video/ogg">
</video> -->
<!-- <div class="col-md-12 p-lg-5 mx-auto mt-5"> -->
<div class="container" id="homeContainer">
<div id="homeBlank"> </div>
<div class="row justify-content-center">
<div class="col-8">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 531 156">
<text id="SJTU_VEX" data-name="SJTU VEX" fill="#e8e8e8"
font-size="91" font-family="single_fighterregular"
letter-spacing="0.075em"><tspan x="83.505"
y="124">S</tspan><tspan y="124" font-size="70"
letter-spacing="0.19em">J</tspan><tspan y="124"
font-size="85" letter-spacing="-0.12em">T</tspan><tspan
y="124" font-size="71" letter-spacing="0.06em">U</tspan><tspan
y="124" font-size="56" letter-spacing="-0.018em">
</tspan><tspan y="124" font-size="80"
letter-spacing="-0.009em">V</tspan><tspan y="124"
font-size="71" letter-spacing="0.06em">E</tspan><tspan
y="124" font-size="81" letter-spacing="0.06em">X</tspan></text>
</svg>
</div>
</div>
<p class="lead fw-normal">A World-Class VEX Robot Team and Beyond</p>
<a class="btn btn-outline-light" href="#about">Learn More</a>
</div>
<div class="product-device shadow-sm d-none d-md-block"></div>
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
</div>
<div id="about"></div>
<div id="aboutWrapper" class="py-5 page-section">
<!-- <div id="aboutBlank"> </div> -->
<div class="container">
<div class="row justify-content-center">
<div class="col-6 px-5">
<h2>doc SJTU.VEX</h2>
<p>Two years ago in 2019, a group of students from Shanghai Jiao Tong University (SJTU) stood on the award stage of 2018-2019 VEX Robotics World Championship in Louisville, Kentucky, US, which was the first time for SJTU to attend the
VEX Robotics World Championship.</p>
<p>Now VEX club has extended from an AD hoc team to a functional team, consisting of mechanic group, programming group, and operation group. We aim to become the leader of VEX university group (VEX-U) in China, establish a new set of
engineering project practice system, and improve the overall level of VEX-U group in China.</p>
</div>
<div class="col-6 pt-xxl-2 pt-5 ps-3">
<div class="row">
<div class="col-4">
<img class="img-fluid " src="./img/logo-red-transparent-full.png" alt="red logo" width="">
</div>
<div class="col-4">
<img class="img-fluid " src="./img/logo-golden-transparent-full.png" alt="golden logo" width="">
</div>
<div class="col-8">
<img class="img-fluid " src="./img/sjtu-logo-white.png" id="sjtu-logo" alt="SJTU VEX logo" width="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="resources"></div>
<div id="resourcesWrapper" class="py-5 page-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<h2>SHARE</br><span>OUR KNOWLEDGE</span></h2>
</div>
<!-- <div class="col-2">
<br>Our</br>
<br>Knowledge</br>
</div> -->
<div class="col-6"></div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-6 col-lg-4 column">
<div class="card gr-1">
<div class="txt">
<h1>ROBOTS AND</br>
DESIGN LIBRARY</h1>
<p>Open-source robot drawings and <br>design libraries for everyone.</p>
</div>
<a href="https://sjtu-vex.github.io/open-source" target="_blank">more</a>
<div class="ico-card">
<i class="fa fa-cogs"></i>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 column ms-5">
<div class="card gr-2">
<div class="txt">
<h1>TUTORIALS:</br>
HOW WE DESIGN?</h1>
<p>Series tutorials in machine design.<br>From SOLIDWORKS to team cooperation.</p>
</div>
<a href="https://youtube.com/playlist?list=PLkb07yLd6vG2tpbcjrb4SEVkEEo1yXNy4" target="_blank">more</a>
<div class="ico-card">
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="galleryWrapper" class="py-5 page-section">
<div id="gallery"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-auto text-center">
<h2>MEET</br>OUR DESIGN</h2>
</div>
<!-- <div class="col-2">
<br>Our</br>
<br>Knowledge</br>
</div> -->
<!-- <div class="col-6"></div> -->
</div>
<div id="carouselExampleDark" class="carousel carousel-dark slide carousel-fade pt-5" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="5" aria-label="Slide 6"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img src="./img/21-12-1.jpg" class="d-block w-100" alt="SJTU VEX robot">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p> -->
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="./img/21-12-2.jpg" class="d-block w-100" alt="SJTU VEX robot">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p> -->
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="./img/21-12-3.jpg" class="d-block w-100" alt="SJTU VEX robot">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p> -->
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="./img/21-12-4.jpg" class="d-block w-100" alt="SJTU VEX robot">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p> -->
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="./img/21-12-5.jpg" class="d-block w-100" alt="SJTU VEX robot">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p> -->
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="./img/21-15-1.jpg" class="d-block w-100" alt="SJTU VEX robot">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p> -->
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/_HBTQAAVvzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div id="contactWrapper" class="py-5 page-section">
<div id=contact></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-1">
<img class="img-fluid" src="./img/logo-red-transparent-full.png" alt="red logo" width="">
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-9 text-center">
<div class="social mb-4">
<ul class="list-unstyled">
<li class="youtube"> <a href="https://www.youtube.com/c/SJTUVEX" target="_blank"><i class="fab fa-youtube"></i></a></li>
<li class="email"><a href="mailto:sjtuvex@sjtu.edu.cn" target="_blank"><i class="fas fa-envelope"></i></a></li>
<li class="github"><a href="https://github.com/SJTU-VEX" target="_blank"><i class="fab fa-github"></i></a></li>
</ul>
</div>
<div class="copyright">
<p class="mb-0"><small>© SJTU VEX. All Rights Reserved.</small></p>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>