@@majed1911 hello I noticed an error in that code the output would be: solar systemis very big Way to fix: put a space after the quotation marks and before the is. Corrected output: solar system is very big
it seemed like magic to me as well few weeks ago lol but I learned that it's either basic or you can find the solution with reasearches if it's something a little bit more complex. Did you want to know how html and css work or you wanted him to explain this animation specifically ?
Programming tutorial 1: What is HTML? Programming tutorial 2: What is CSS? Programming tutorial 3: Display an alert in javascript Programming tutorial 4: How to use the DOM Programming tutorial 5:
If I recalled correctly, I've seen someone only use HTML and CSS to create full solar system. You can zoom in and it shows full info on that planet, it can rotate, and the design is ASTONISHING like straight out Stellar movie.
I tried to make something like this in Highschool when we were taught HTML and CSS. But I had no idea at that time how to do the rotation so I just left the project.
animation: orbit seems to be the key piece here. Everything else is simply position, size, color and border radius. I didn't know that orbit was a parameter of animation! Cool!
@@gustavo9758 i learned a lot from kevin powell but he is not even close to css masters he has teacher's level but not master i learned advanced css in other channels on youtube for instance there is an indian who is very talented in css i learned from him how to use an inline variable of style this trick improved my workflow
actually a full game has less, due to game engines having many presets in code, like all the libraries and animations are there (some of them you might need to model)
i attempted this but my moon did not orbit the earth. it was orbiting the dark void of space. everything else worked nice. this was nice to try out and practice. just wish i could fix the moon oirbit
You just have to replace the moon position: absolute to relative moon { position: relative; and down you will see right: 0em; that you need to change to 2em;
started two days ago i understood some of it maybe for you its basic but im still dreaming about doing something like this my self (also its a nice animation keep grindin)
