This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities
What I Built
I build a interface with three principal colors, black, white and purple. The forms is purple, the blackground is black because I like dark theme, and starts white. Next to form there stars - Small circles white that move it-
Demo
github: https://github.com/olucascruz/frontendChallengeDevTo
Journey
Firstly, I selected a color palette consisting of purple, black, and white. While the form serves as the main element of the interface, I decided to add a new element for me: particles, commonly used in game development. With a basic knowledge of how to implement them, I began by creating a div to store the particles, assigning it the class 'particles', and then created additional divs to represent the particles themselves, with the class 'particle'. Initially, I attempted to position the particles randomly using the 'position: absolute' property and random margins, but soon realized that this did not produce the desired effect. After some research, I discovered that setting the position of the particles as 'position: relative' would allow me to move them using the 'top' and 'left' properties without the need for margins, resulting in the desired behavior.
The generation of random positions was implemented using JavaScript. Additionally, I created two CSS animations: one to simulate the glow of the particles and another for their movement. I noticed that when the particles glowed and moved simultaneously, the effect seemed strange. To correct this, I adjusted the speed of the animation for each particle individually, using JavaScript for this purpose.
Subsequently, I made the interface responsive. To achieve this, I used media queries to center the form when the screen was smaller and to send the particles behind the form. This configuration required that the div with the class 'particles' and the section containing the form had the 'position: absolute' property, allowing them to occupy the same space without issues.
Finally, in the form, I used a purple color with a gradient, and if you hover the mouse over it, there is a white shadow around it. The button also has this behavior, with the addition that it also changes color, and when clicked, the form disappears, and a message appears.
LICENSE CODE: MIT
Top comments (0)