Arlagonix
@arlagonix
All solutions
Submitted
Open to any feedback
Submitted
Any feedback is welcome
Submitted
Welcome to any feedback
Submitted
Advice generator with smooth animation
- HTML
- CSS
- JS
- API
Features
- Working with API
- Button animation
- Quote and advice text animation
- Offline and error notifications
- Animated underline in links
- Generate quotes from keyboard (press "Enter")
- Made a Figma prototype: https://www.figma.com/file/gtbZrKQzY4Ovlz9kQWeBPR/Advice-Generator-App?node-id=0%3A1
Submitted
My first project with JavaScript
Submitted
Features:
-
Animated Gradient text. The text (and links) is colored with animated gradient. And it is achieved with only one class!
-
Animated Gradient images. The image is "colored" by animated gradient
-
Hover animation on image, links. Hover on the image = it scales. Hover on links = shrink. Click on links = shrink even more. Made it already several times in other projects. SASS. That is my first experience of using SASS (.scss to be specific). And it was wonderful! Nesting, mixins, partials! Oh my! Decided to use .scss instead of .sass because the first variant helps to easily reuse the .css fragments and files found in the Internet
-
SASS file composition. Divided code into separate files. See below the details about the structure
-
Mixins. For flexblox, for gradient background. See examples below
-
Text components. Similarly to how it is done in Figma I made a text component in BEM convention. I made so in many previous projects as an experiment. ALthough now I see that this experiment was rather successful
-
Normalization. Found a normalize.css file in Github, included it into the project
-
Submitted
Submitted
How to avoid animation on hover from abrupt halt when you stop hovering over the element?
Submitted
Submitted