Help Building a basic(ish) webpage menu for circuits of the world

Hi all, this may be better suited to a reddit post or somesuch but there's so much riffraff on there I thought maybe some bright individual here could help. I'm trying to make a webpage that will have a map and icons (in the form of the logo of each respective circuit) that are links to videos of each track - the videos I'll host on my google drive or YouTube. Each track will have at least an "helicopter cam" orbit created in Google Earth Drive and a good in car lap from either sim or real life footage. The idea is to help my sim racing buddies (currently consisting of my Dad, really) learn and appreciate the dozens of circuits around the world.
I have posted screens of what I want the page to look like - each icon as an .svg file from inkscape, and ideally a separate version of each .svg for a "highlighted" icon (anytime cursor hovors over it). Note Watkins Glen (My former "home" circuit) is highlighted with a white box. I have searched around under free webpage sites but the content is overwhelming and it's been 20 years since I did a very basic html page.. don't even remember if I did anything with css. I am definitely not a web designer. Everything I've seen so has buttons in a list or grid, not precisely aligned over a background image.
The second image shows the "home" screen I'd like to do - clicking the "north america" image would link to the "north america" page with the circuit icons. Thats not such a big deal though, I would be happy having all 4 regions on one page and just scrolling up and down.
I plan to have a link to this on my YouTube channel, or share the link with friends, so I don't really care what the URL is ( I know some free web design services create pretty unwieldy URLs - that's ok - I just care about it looking good and being functional)
I have other plans for this concept including a workshop inventory system (each icon linking to a google sheets file for various categories - screws, nuts, washers, etc) and a database of facts concerning history, current events, biographies etc (for my own reference). So being able to do something like this will be quite exciting!
 

Attachments

  • 01_North_America_Example.jpeg
    01_North_America_Example.jpeg
    72.8 KB · Views: 83
  • 02_Globe_Views_Menu_Screen.jpeg
    02_Globe_Views_Menu_Screen.jpeg
    79.4 KB · Views: 72
It's alive! After a lot of research time and false starts, we got something. At first I was thinking an "image map" would work, I realized those don't scale with the window size. Finally I landed on using SVG for each link area over the jpeg background. I used webflow for the main menu screen partially so I would have a URL that is not completely random, and I am also working on a media gallery so instead of linking directly to the youtube vid of the google earth render, clicking a track logo will go to the gallery section for that track. That'll be next. I've spent way too much time on this, but I'm glad I have something to show for it. Link below, and I will probably change the URL to something I like better, so I will update it here at that time.

https://worldwide-racing-circuits.webflow.io/
 
ah - maybe I'm not understanding what you are saying but Bridgehampton does not still exist. It is a golf course now, and Riverside is a shopping center and houses. For those two circuits, I'm planning to make a helicopter cam from Assetto Corsa.
 
you know, I've seen a similar site but maybe not this one before. Pretty impressive, but the one I'm working on suites my needs better in 2 ways - the circuits are curated to be only the ones that I and my race group drive in AC/RF2/PC2, and it provides a home for the Google Earth heli cams. Maybe at some point I'll contact Neil from racingcircuits.info and see if he wants to add links to my GE vids.
Current status of the North America permanent roadcourse menu. I may add Mid Ohio at some point but otherwise that is the selection I'll go with. Mostly well known tracks except for Atlanta Motorsports Park.
...facepalm I forgot Lime Rock Park. Alright, back to work :-P
 

Attachments

  • North_America_Road_Courses_Smallpreview.jpeg
    North_America_Road_Courses_Smallpreview.jpeg
    94 KB · Views: 96
Last edited:

What are you racing on?

  • Racing rig

    Votes: 528 35.2%
  • Motion rig

    Votes: 43 2.9%
  • Pull-out-rig

    Votes: 54 3.6%
  • Wheel stand

    Votes: 191 12.7%
  • My desktop

    Votes: 618 41.2%
  • Something else

    Votes: 66 4.4%
Back
Top