GENIUS
GENIUS — Landing page for the training course
Landing page based on the Figma layout with modern design, emphasis on CTA, and clear structure. HTML, CSS, and JavaScript are used without third-party frameworks.
Technologies
HTML5
CSS3
JavaScript (timer, scroll, price change logic)
Technical task
We are creating a desktop version 1:1 as per the layout; the mobile version can be made responsive by yourself, but it should look great. (For the mobile version, there is a separately drawn block "Course Program").
Two buttons "Sign up for the course" in the first block lead with smooth scrolling to the "Participation Formats" packages; on the buttons, we apply smooth animation with a background color change from purple to white.
The "Course Program" block, each module smoothly opens as a dropdown element from below, it can be expanded and opened by clicking on the "Module..." block. Each lesson has its own separate description (lesson titles and descriptions can be taken from the layout and made the same for each module). Each lesson has a button "Reserve a spot in the course" which leads to the block with "Participation Formats" packages.
The "Choose your participation format" block has a timer until next Friday at 23:59; each item in the participation formats with an icon has a tooltip on hover, and the same tooltip that is on the layout can be applied to each item. For the prices in this block, a script needs to be set that will automatically change the prices together with the timer on the specified date; the changed prices can be set to 1,000 UAH more, and this can be done 4 times. So if the package is 10,080, the next price will be 11,080, the next 12,080, and so on.
The "Installment" block has a deadline in the middle "Offer valid until: ", there a script should be set that takes today's date and adds +2 days to this date.
Status of execution
Desktop version 1:1 with the layout
Smooth scrolling and button animations
Dropdown program modules
Tooltips on hover
Timer until Friday
Automatic price change (4 stages)
Installment script (adds 2 days to the current date)
The project does not use third-party libraries or frameworks
All code is written manually with a focus on clean layout and functionality.
Landing page based on the Figma layout with modern design, emphasis on CTA, and clear structure. HTML, CSS, and JavaScript are used without third-party frameworks.
Technologies
HTML5
CSS3
JavaScript (timer, scroll, price change logic)
Technical task
We are creating a desktop version 1:1 as per the layout; the mobile version can be made responsive by yourself, but it should look great. (For the mobile version, there is a separately drawn block "Course Program").
Two buttons "Sign up for the course" in the first block lead with smooth scrolling to the "Participation Formats" packages; on the buttons, we apply smooth animation with a background color change from purple to white.
The "Course Program" block, each module smoothly opens as a dropdown element from below, it can be expanded and opened by clicking on the "Module..." block. Each lesson has its own separate description (lesson titles and descriptions can be taken from the layout and made the same for each module). Each lesson has a button "Reserve a spot in the course" which leads to the block with "Participation Formats" packages.
The "Choose your participation format" block has a timer until next Friday at 23:59; each item in the participation formats with an icon has a tooltip on hover, and the same tooltip that is on the layout can be applied to each item. For the prices in this block, a script needs to be set that will automatically change the prices together with the timer on the specified date; the changed prices can be set to 1,000 UAH more, and this can be done 4 times. So if the package is 10,080, the next price will be 11,080, the next 12,080, and so on.
The "Installment" block has a deadline in the middle "Offer valid until: ", there a script should be set that takes today's date and adds +2 days to this date.
Status of execution
Desktop version 1:1 with the layout
Smooth scrolling and button animations
Dropdown program modules
Tooltips on hover
Timer until Friday
Automatic price change (4 stages)
Installment script (adds 2 days to the current date)
The project does not use third-party libraries or frameworks
All code is written manually with a focus on clean layout and functionality.
Ukraine 
Available for hire