-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Finished main vehicle page and vehicle page design template (#13)
* Added start of vehicle page with interactive navigator infoboxes. * Finished building main vehicle page design, and made template for separate mechanical/electrical/software design pages. Also made the header on the landing page the same. * Replace absolute links with relative links, rename vehicle-main to vehicle --------- Co-authored-by: Cameron Brown <[email protected]>
- Loading branch information
Showing
9 changed files
with
542 additions
and
9 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>NaviGator AMS</title> | ||
| <meta content="NaviGator AMS" property="og:title" /> | ||
| <meta content="NaviGator AMS is a set of maritime vehicles built by students in the Machine Intelligence Laboratory (MIL) at the University of Florida (UF) for the Maritime RobotX competition." property="og:description" /> | ||
| <meta content="https://navigatoruf.org" property="og:url" /> | ||
| <meta content="https://navigatoruf.org/assets/hawaii_resting.jpg" property="og:image" /> | ||
| <meta name="twitter:card" content="summary_large_image"> | ||
| <meta content="#FA4616" data-react-helmet="true" name="theme-color" /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> <!-- Inter font used in the figma --> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| </head> | ||
| <body class="bg-gray-300" style="font-family: 'Inter', sans-serif;"> | ||
|
|
||
| <!-- Header Section --> | ||
| <div class="relative"> | ||
| <header class="relative h-[500px] bg-cover bg-center" style="background-image: url('./assets/hawaii_resting.jpg'); ; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;"> | ||
| <nav class="absolute top-0 left-0 w-full p-6 flex justify-between items-center"> | ||
| <div> | ||
| <img src="./assets/logo.png" alt="NaviGator AMS Logo" class="h-10"> | ||
| </div> | ||
| <ul class="flex space-x-6 z-20"> | ||
| <li><a href="index.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Home</a></li> | ||
| <li><a href="team.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Team</a></li> | ||
| <li><a href="vehicle.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Vehicle</a></li> | ||
| <li><a href="sponsors.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Sponsors</a></li> | ||
| <li><a href="photos.html" class="text-white rounded-md px-1.5 py-1 hover:text-black hover:bg-gray-200 transition-all duration-300">Photos</a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <div class="absolute inset-0 flex flex-col justify-center items-center text-white"> | ||
| <h1 class="text-7xl font-bold">Template for Design Page</h1> | ||
| </div> | ||
| </header> | ||
| </div> | ||
|
|
||
| <!-- Feature Section --> | ||
| <section class="flex max-w-screen-2xl mx-auto"> | ||
| <div class="flex bg-gray-300 items-center w-full min-h-52"> | ||
| <div class="self-start"> | ||
| <div class="rounded-full bg-gray-400 m-10 h-8 w-8"></div> | ||
| </div> | ||
| <div> | ||
| <h3 class="text-xl font-bold">Information About Certain System</h3> | ||
| <p class="text-gray-700">Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. </p> | ||
| </div> | ||
| <div class="m-8"> | ||
| <img src="./assets/vrx-2023.webp" alt="NaviGator AMS Logo""> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="flex max-w-screen-2xl mx-auto"> | ||
| <div class="flex bg-gray-400 rounded-lg items-center w-full min-h-52"> | ||
| <div class="self-start"> | ||
| <div class="rounded-full bg-gray-300 m-10 h-8 w-8"></div> | ||
| </div> | ||
| <div> | ||
| <h3 class="text-xl font-bold">Information About Certain System</h3> | ||
| <p class="text-gray-700">Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. </p> | ||
| </div> | ||
| <div class="m-8"> | ||
| <img src="./assets/vrx-2023.webp" alt="NaviGator AMS Logo""> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="flex max-w-screen-2xl mx-auto"> | ||
| <div class="flex bg-gray-300 items-center w-full min-h-52"> | ||
| <div class="self-start"> | ||
| <div class="rounded-full bg-gray-400 m-10 h-8 w-8"></div> | ||
| </div> | ||
| <div> | ||
| <h3 class="text-xl font-bold">Information About Certain System</h3> | ||
| <p class="text-gray-700">Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. </p> | ||
| </div> | ||
| <div class="m-8"> | ||
| <img src="./assets/vrx-2023.webp" alt="NaviGator AMS Logo""> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="flex max-w-screen-2xl mx-auto"> | ||
| <div class="flex bg-gray-400 rounded-lg items-center w-full min-h-52"> | ||
| <div class="self-start"> | ||
| <div class="rounded-full bg-gray-300 m-10 h-8 w-8"></div> | ||
| </div> | ||
| <div> | ||
| <h3 class="text-xl font-bold">Information About Certain System</h3> | ||
| <p class="text-gray-700">Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. Very Long Blurb with Information. </p> | ||
| </div> | ||
| <div class="m-8"> | ||
| <img src="./assets/vrx-2023.webp" alt="NaviGator AMS Logo""> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
|
|
||
| <!-- Please try to maintain the alternating pattern if you want to copy and paste more sections - William --> | ||
|
|
||
|
|
||
| <!-- NOTE: If this is on a specific system's page it should not link to itself, please remove the self link when finished with the page --> | ||
| <!-- Subsystems Section --> | ||
| <section class="bg-gray-300"> | ||
| <div class="max-w-6xl pt-4 mx-auto text-center"> | ||
| <h2 class="text-3xl font-bold font-light mb-6 px-10">Learn More</h2> | ||
| </div> | ||
| </section> | ||
| <section class="max-w-6xl mx-auto pb-16 bg-gray-300 flex justify-center text-center"> | ||
| <div class="bg-gray-400 p-6 mx-10 rounded-md shadow-md flex flex-col items-center basis-1/4"> | ||
| <div class="text-4xl mb-4"> | ||
| <img src="./assets/settings.png" alt="Mechanical Design Icon" class="h-10 w-10"/> | ||
| </div> | ||
| <h3 class="text-lg font-semibold mb-4">Mechanical Design</h3> | ||
| <a href="vehicle/mechanical.html" class="bg-gray-200 text-gray-800 px-4 py-2 border-2 border-gray-200 rounded-md hover:text-white hover:bg-gray-400 transition-all duration-300">Learn More</a> | ||
| </div> | ||
|
|
||
| <div class="bg-gray-400 p-6 mx-10 rounded-md shadow-md flex flex-col items-center basis-1/4"> | ||
| <div class="text-4xl mb-4"> | ||
| <img src="./assets/keyboard.png" alt="Software Design Icon" class="h-10 w-10"/> | ||
| </div> | ||
| <h3 class="text-lg font-semibold mb-4">Software Design</h3> | ||
| <a href="vehicle/software.html" class="bg-gray-200 text-gray-800 px-4 py-2 border-2 border-gray-200 rounded-md hover:text-white hover:bg-gray-400 transition-all duration-300">Learn More</a> | ||
| </div> | ||
|
|
||
| <div class="bg-gray-400 p-6 mx-10 rounded-md shadow-md flex flex-col items-center basis-1/4"> | ||
| <div class="text-4xl mb-4"> | ||
| <img src="./assets/circuit.png" alt="Electrical Design Icon" class="h-10 w-10"/> | ||
| </div> | ||
| <h3 class="text-lg font-semibold mb-4">Electrical Design</h3> | ||
| <a href="vehicle/electrical.html" class="bg-gray-200 text-gray-800 px-4 py-2 border-2 border-gray-200 rounded-md hover:text-white hover:bg-gray-400 transition-all duration-300">Learn More</a> | ||
| </div> | ||
| </section> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.