Contact person: Responsive E-Learning Front Web Site

Phone:Show

Email:Show

Location: Mason, United States

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"Daniel Swanson
September 25, 2025

Site Description

The site will be a Mobile and Desktop site. The Mobile site must responsive and fast. The site is a front end for a website that incorporates WordPress/Woocommerce and Moddle to provide E-Learning services. The WordPress/Woo-commerce and Moodle sites are already on line in preliminary form and is being developed separately. They are not the subject if this document.

The purpose of this web site is to provide a clean fast and nearly 100% static responsive site to explain the products (one initially) and allow the customers to play a demo video with JWPlayer, and if the user chooses, go to the Moodle E-Learning site, or the WordPress/Woocommerce site.
General Design Information

The overall site will be in three components.
1. A main front site (This is the subject of this design document)
2. A WordPress/Woo-commerce site that is currently being worked on. (not the subject of this document)
3. A Moodle E-Learning site that is currently being worked on. (not the subject of this document)

The site will be geared toward Mobile and Tablet platform, with code for Desktop browsers to hopefully be the same code, with as little Desktop specific code as possible.
Appearance
The site will be a “Vertical Scrolling” type site, with a floating top horizontal menu bar that always stays on the page. [login to view URL] is a good starting point. However this site will have much less content. The site will be all black with gray text.
Colors
Background Color: Black #000000
Text Color: Grey #EEEEEE
Technology desired
The site should be developed in pure HTML, CSS and JavaScript if possible. One or Two small libraries that are very common and have a small execution speed penalty and memory footprint may be acceptable. Any use of libraries should be approved before the contract is signed. The site should be written in clean and well self documenting code.

Server Information
The site is already online and consists of:

Amazon Site Configuration
Amazon SSL certificate
AWS Route 53 DNS
Amazon Load Balancer that terminates the HTTPS
Amazon CloudFront with Lamda@Edge fuctions to serve video (Not set up yet)
EC2 Instance that is running the following software

EC2 instance Software Stack:
Ubuntu 24.04 server version: Ubuntu 24.04.3 LTS
Nginx Web server version: nginx/1.24.0 (Ubuntu)
MySql version: Server version: 8.4.6 MySQL Community Server - GPL
PHP version: 8.3.6


Website pages
The site will be nearly 100% Static site, with the exception of the Demo Video page that will embed the JW Player to playback a video that will be served from Amazon CloudFront.

Main page
(In vertical order)
At the top: Floating horizontal menu with Company Name and Menu button opens a menu that leads to each of the pages of the site (Similar to [login to view URL])

Text about the products
At least one graphic of the main product
Link to Demo Video Page
Link to Buy Now (Direct to product page)
Link to Moodle Site
Link to Wordpress Site (if they want to read the blog)
More text info about the product
Link to more Info (To second sell sheet)
Link to FAQ page
Link to About Energy Scholar page
Link to Contact Form
Buy Now Link (Direct to Cart)
Link to Subscribe Screen?

Link Cookie Disclosure (At bottom or automatic popup)
Link to Information Disclosure


Demo Video Page
(In vertical order)
Enter these fields and press play, no sign up required!
Field for First Name
Field for Last Name
Field for Email address
Run Regex on email address to make sure that it matches the format of an email address
JavaScript code that encodes the First and Last Name and the email address in the URL (I will provide the encoder code in JavaScript)
JW Player that plays the Demo Video from CloudFront URL

Second Sell Sheet Page
(In vertical order)
More text info about course
Link to buy page (Direct to product page of Wordpress/Woocommerce site)
Link to Demo page
Link to Third Sell sheet
Link to Main Page

Third Sell Sheet Page
(In vertical order)
More text Info about course
Link to buy page (Direct to product page of Wordpress/Woocommerce site)
Link to Demo page
Link to Main Page

Subscribe Page
(In vertical order)
First name field
Last name field
Email address Field
Send button that calls Web Service with info (I will provide)

FAQ Page
(In vertical order)
FAQ text
Link to Main Page

About Page
(In vertical order)
Text about Company
Link to Main Page

Contact Form Page
(In vertical order)
First Name field
Last Name field
Email Field
Text Box to type message into
Send button
Web Service Call to put data in a database (I will provide)
Link to Main page" (client-provided description)