Eclat D'or
Eclat D'or
Eclat D'or
Role in the project
UI/UX/Online Implementation
About the project
Training material of the course
Client
Course platform - Udemy
![](https://framerusercontent.com/images/A5DplKhJTNbtpKjyPASO27IhE4w.png)
![](https://framerusercontent.com/images/nURF8jYMIzj9KEGdtUe4m6QepEs.png)
![](https://framerusercontent.com/images/A5DplKhJTNbtpKjyPASO27IhE4w.png)
![](https://framerusercontent.com/images/nURF8jYMIzj9KEGdtUe4m6QepEs.png)
Challenge
Challenge
Creation of a module for the course, in which I teach how to create a modern website with parallax animation in 45 minutes
Creation of a module for the course, in which I teach how to create a modern website with parallax animation in 45 minutes
I created a promotional website for luxury cosmetics with effective parallax to present educational material for the course "Creating websites without knowing code". I used materials generated in artificial intelligence.
I created a promotional website for luxury cosmetics with effective parallax to present educational material for the course "Creating websites without knowing code". I used materials generated in artificial intelligence.
![](https://framerusercontent.com/images/OkTIPVWHEdeI7mCGc0ZJpFxUHHM.webp)
![](https://framerusercontent.com/images/OkTIPVWHEdeI7mCGc0ZJpFxUHHM.webp)
![](https://framerusercontent.com/images/6ZU3xe7sOpHcsH3lZoQpYRJk7w.png?scale-down-to=1024)
![](https://framerusercontent.com/images/6ZU3xe7sOpHcsH3lZoQpYRJk7w.png?scale-down-to=1024)
![](https://framerusercontent.com/images/6ZU3xe7sOpHcsH3lZoQpYRJk7w.png?scale-down-to=1024)
![](https://framerusercontent.com/images/jVh3diqlbiO80f0VK8FILmLy6A.png?scale-down-to=1024)
![](https://framerusercontent.com/images/jVh3diqlbiO80f0VK8FILmLy6A.png?scale-down-to=1024)
![](https://framerusercontent.com/images/jVh3diqlbiO80f0VK8FILmLy6A.png?scale-down-to=1024)
![](https://framerusercontent.com/images/AAHVHOooWXqDsENgqfMgXCgp6YE.png?scale-down-to=1024)
![](https://framerusercontent.com/images/AAHVHOooWXqDsENgqfMgXCgp6YE.png?scale-down-to=1024)
![](https://framerusercontent.com/images/AAHVHOooWXqDsENgqfMgXCgp6YE.png?scale-down-to=1024)
![](https://framerusercontent.com/images/vblu4Kp0XGzK5azvOiAWRFs9jIw.png?scale-down-to=1024)
![](https://framerusercontent.com/images/vblu4Kp0XGzK5azvOiAWRFs9jIw.png?scale-down-to=1024)
![](https://framerusercontent.com/images/vblu4Kp0XGzK5azvOiAWRFs9jIw.png?scale-down-to=1024)
Stage 1
Stage 1
Generation of keyvisual and graphic resources in Leonardo AI
Generation of keyvisual and graphic resources in Leonardo AI
Based on graphics generated by artificial intelligence, I have created the layout of the website
Based on graphics generated by artificial intelligence, I have created the layout of the website
![](https://framerusercontent.com/images/uzJs7HFrTkWSqpRmSry6Xism4.png)
![](https://framerusercontent.com/images/uzJs7HFrTkWSqpRmSry6Xism4.png)
![](https://framerusercontent.com/images/uzJs7HFrTkWSqpRmSry6Xism4.png)
![](https://framerusercontent.com/images/q8xxe9cMp1HK8kwPec0Y2SsVOkI.png)
![](https://framerusercontent.com/images/q8xxe9cMp1HK8kwPec0Y2SsVOkI.png)
![](https://framerusercontent.com/images/q8xxe9cMp1HK8kwPec0Y2SsVOkI.png)
![](https://framerusercontent.com/images/TwZdemZPO9rz9SKBcoXgc1Y0TPw.png)
![](https://framerusercontent.com/images/TwZdemZPO9rz9SKBcoXgc1Y0TPw.png)
![](https://framerusercontent.com/images/TwZdemZPO9rz9SKBcoXgc1Y0TPw.png)
Stage 2
Stage 2
Creating a project in Figma based on AI graphics and importing it into the Framer application
Creating a project in Figma based on AI graphics and importing it into the Framer application
Using the 'Figma to Framer' plugin, I imported layers from Figma into the no-code Framer application.
Using the 'Figma to Framer' plugin, I imported layers from Figma into the no-code Framer application.
![](https://framerusercontent.com/images/TJKYGUBYMqPVEBgKr7xm8BEVvU.png)
![](https://framerusercontent.com/images/TJKYGUBYMqPVEBgKr7xm8BEVvU.png)
![](https://framerusercontent.com/images/TJKYGUBYMqPVEBgKr7xm8BEVvU.png)
![](https://framerusercontent.com/images/uTadaQtoaYjK6t7RbX9DVObkp4.png)
![](https://framerusercontent.com/images/uTadaQtoaYjK6t7RbX9DVObkp4.png)
![](https://framerusercontent.com/images/uTadaQtoaYjK6t7RbX9DVObkp4.png)
Stage 3
Building a functional website in the no-code Framer application
Building a functional website in the no-code Framer application
I have created a PC and responsive version with parallax animations.
I have created a PC and responsive version with parallax animations.
![](https://framerusercontent.com/images/I019Oh6kUxdG31B7dIjFzdfdhfs.png)
Stage 4
I have created video tutorials teaching students how to create such a website in 45 minutes by combining Figma + AI + Framer technology
I have created video tutorials teaching students how to create such a website in 45 minutes by combining Figma + AI + Framer technology
I have prepared a comprehensive course, integrating several technologies to show how to speed up your project design and implement projects into no-code applications.
I have prepared a comprehensive course, integrating several technologies to show how to speed up your project design and implement projects into no-code applications.
![](https://framerusercontent.com/images/FJPy4l5mQSVC1R0xKm07GtQlAo.png)
![](https://framerusercontent.com/images/FJPy4l5mQSVC1R0xKm07GtQlAo.png)
Stage 5
I promoted the course on my YouTube channel and added it to the Udemy course platform
I promoted the course on my YouTube channel and added it to the Udemy course platform
Course materials have been rated 5/5 stars. The course is selling in sufficient quantities.
Course materials have been rated 5/5 stars. The course is selling in sufficient quantities.
![](https://framerusercontent.com/images/XujWbcYqQKkMh1BUNhb9RUB5SQ.png)
![](https://framerusercontent.com/images/E95xFVpJYajXhyANsSpgzBd13I.png)