Html5 Webpage Template

One Off, Single Webpage Template for Established Website. Must work within current html5/css/js framework, employ best coding practices for accessibility and page speed efficiency. Final project must pass performance benchmarks on two different pagespeed calculators. The page should be cross browser compliant AND responsively cross-device compliant. Layout: There should be BUILT in flexibility. The page should retain the framework of the html5 page yet to be implemented. The structure of the new html5 could be modified in the right column for instance, where the metadata stuff occurs. That could be relocated to the bottom of the page. The video placement could be aligned -center rather than aligned left. The pdf and audio player could theoretically be aligned anywhere that works. The specifics: 1. First, go to the two pages at the bottom of this project call to see the current state of the website. The first page is the in production html4 coded page. The second is the not-yet-in-production html5 coded page that requires improvement -- either w/ in the existing coding framework (where your code will be added to the page OR an entirely new page design with your exclusive coding. 2. The html5 template will need to be flexible in how it deals with different content scenarios. Since this has been relatively easily achieved in the current html4 production page (see page at end of project call), I expect, perhaps with copious commenting where necessary, the same for the new html5 template. A. Content Scenario 1 = text (htm and sometimes pdf), audio, video, and image(s) (jpg) co-occur on the same page. a. There must be options to play the audios (mp3) in-browser and videos (mp4) in-browser players OR third party video script for YouTube, Vimeo, [login to view URL], etc. b. Re Audio: There are two different audio versions usually offered, a non-enhanced and an enhanced version (see html4 production page below). Sometimes there is only one so the code should be flexible enough to handle both scenarios. Also, there must be a toggle code that I control to allow and disallow audio mp3 download even though the audio will be always be available for in-browser (pseudo) streaming. c. Video will either be an mp4 (pseudo) streamed from the same server location as the website and will NEVER be allowed direct download OR the video will be iframed etc through a third party site such as YouTube, Vimeo, [login to view URL], etc. Either way, the code will never provide an option for direct video download. d. There must be an option to view and download a pdf file. B. Content Scenario 2 = text (htm and sometimes pdf), audio mp3, image(s) only. No video. Same rules as Scenario 1. C. Content Scenario 3 = text, image(s) only. No audio or video. D. Content Scenario 4 = text only. No audio, video, or images. 3. While most pages will be colored themed in red, white, blue, SOME pages will be color themed according to the country of speaker/speech origin. A simple comment indicating where to place the different hex code #s should be sufficient to cover this. 4. Regarding the htm text layout. a. Ad Space in header, footer, and medium triangle placement IN the text body. Location and number to be determined by how much content occupies the page. b. Footnotes: At page bottom AND viewable at the exact location in the text body as a (popup) tooltip. Wikipedia is the gold standard here. c. Standard hypertext links wherever used. d. Note the Speech Author, Speech Title, Speech date and location data at the top of each page. This part should by styled with particularly nice looking font styles and colors. And those colors, usually themed in hex code red and blue will sometimes be hex color coded for the country of origin of the Speaker and speech. e. After main speech content, there will be an area for including copyright, page creation/page update dates, text/audio/video source data, etc. See examples on html4 pages below. 5. The rest of the page should be compatible with the menu/search/etc framework of the nonproduction html5 page example below. 6. Finally, much of the work I do after the NEW template is completed will be at the coding level only. And since I'm a coding novice, I'll need easily understood commented sections of the template that I can basically copy and paste stuff in/out as needed for the Scenarios above. That's about it. If you gotten this far, you're impressive. If you have additional questions/concerns please don't hesitate to ask. Current html4 production page examples: Scenario 1: [login to view URL] Scenario 2: [login to view URL] Scenario 3: https://www.americanrhetoric.com/speeches/cesarchavezspeechmexicanamerican&[login to view URL] Current html5 non-production: [login to view URL] ------ References: Here are examples of other leading sites in my site's category. I'd like my new template to read, look, and feel better: - [login to view URL] - [login to view URL] - [login to view URL] - [login to view URL]