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 ?
@@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
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.
@@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
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!
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)
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)
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;
The birds represent that you stayed up all night again
When you're playing and you start listening to the birds 🥶
@@DigoTP_ 😂😂
@@kooramagic7742 he was being sarcastic
@@suham5132 I see
@@DigoTP_ 0000000
python:
import solar_system as sys
variable = sys.create()
print(variable)
Lol😂
😂
Nice one Akame-chan
🤣
XD
Inspiring me to get back to coding!
cool
Coding is absolutely disgusting
@@pullingthestrings5233why
@@pullingthestrings5233 why ?
@@chetan_i_am4885 my brother committed suicide due to his coding career. Expectations are very high.
This would be a cool loading screen animation
maybe a little bit faster i think
yh
@@krysti4366depends on the system :P
I know you meant the actual animation, but what if a game actually had a loading screen of its code being written
Fr
would love a tutorial explaining what everything does. For newbies like me this is magic!
It's literally not.
i totally agree!
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 ?
I started learning CSS yesterday and I understood most of it.
@@ilikemyrecommandationsthew257 Understanding is good, but what we want is being able to repeat it (without the video is even better :)
code in case you need:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 3em white;
}
.earth,.moon {
position: absolute;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 3em white;
}
.earth,.moon {
position: absolute;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
Thx
Ты не представляешь,какой ты замечательный бро, спасибо тебе большое)
Um anjo
Thanks ❤❤❤
Ytrtr
Keyboard sound is soo satisfying
fr
The only thing I like is that
1 : it does work
2 : He does care about the keyboard types
haha :)
*Accidentally misses a dot*
**Sun starts revolving moon**
no, earth
@@smaransure2234 that's good too but sun sounds a little better.
@@KawazakiZedit no earth bc that was the misconception back then earlier like 200 years ago
@@KawazakiZedit i meant sun revolving earth
@@smaransure2234 bro , it's a joke.🥲
bro really coded earth 💀
Hence proved. We're in matrix 🗿 No questions please
@@Mr.Classy2728 😂😂😂😂😂 bruuuuuuuuuh
@@Mr.Classy2728 yes I can confirm that you people are inside me.
wow so funny
I've coded mars💀
python: Ah f**k it. I'll just import.
not,it is works
import something that doesn't exist
Import solar system
Print(solar system+” is very big”)
@@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
thanks grandma@@LeFrxgge
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 we really study DOM then we will be stuck at step 4 for ages
for real. and instructor is typing codes like we should know all this and expect us to know
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.
@@harshittripathi11a58 gg
@@harshittripathi11a58 It seems we have a quitter here.
I was shut down n now I'm waking up, n i really need a supportive coders like u man. I will learn n earn.
Wow. As someone new to coding, that looks incredible! 😍
programmers dont type that fast actually, they will google at least something once in a few minutes
The file path literally has “.autotype” lmao
man really styling in html bruh 💀
Still not inline CSS... such a noob!!! 😂😂😂
Well it's very short so for informational purposes I don't hate it but still my web teacher would kill them
@@vasiovasio wdym online css
@@tookenderthe2nd inline! haha thanks to address this! The stupid autocorrect that ruins Everything! :)
What is the issue in it ?
Html coders: **goin' tryhard**
Python coders: "I'll just import"
There is no space modules lmao
@@vanlalsiama507you definitely checked tho 🤣
Wow! I'm really impressed with your work.
thank you
Yoi Sir, are the lord of the CSS 👨💻💪
This is good but it looks like you have not seen CSS Battle stuff (try some Kevin Powell)
swrz this is amazing
@@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
@@redkay7969 Man, I'm learning css and html from zero, who do you recommend me to learn about it on the internet? Im completely lost
@@erikjunior3643 Dave Gray tutorials are the best imo
Yes, I love programming, designs and graphics 🎉❤❤❤
You are an excellent designer.
Amazing .... HTML & CSS
This is really cool. Great use of the animation props. So many nice features. Great work!
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!
Weldone Sir G
thank you
Great music, nice code too 😀🤓
thank you
That was the best animation I've seen in my life
thank you
Dude you are master of front end
body
{
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container{
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun{
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%
box-shadow: 0 0 3em white;
}
. earth,.moon {
position: absolute;
border-style: solid;
border-color: white;
transparent
transparent
transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.earth: :before,
.moon: : before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth: : before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
. moon: :before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
Well bro I have written your code for this solar system but it is not running as per you
lol he literally typed the whole thing
Awesome 👏🏾
thank you
OMG 😱😳
Nice work dude 😎
Birds in the background means you were coding all night long and that's already morning 😂
😅
@@learning-axis❤
I weirdly find it funny how there is so much coding done just for some simple movements and colors imagine a full game how much this would need
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)
YE BADHIYA THA GURU...
Coding is fun. Just know the functions, arrays and syntax etc, you will do wonders.
Can you mentor me,still a newbie
Year 69420
Coding tutorial
How to create a virtual solar system inside a Notepad file 💀
😂😂😂
Actually at that time it will be the entirety of existence with all of it's dimensions😂
Notepad file ...
@@akshay_m or we would be extinct
Wdym?, you can really write this on notepad or even office word if you save it as html
Can I get a 10-hour version of this guy typing for me to fall asleep to?
#include
using namespace std;
class Square
{
int size;
public:
void set_size(int s);
int get_size();
int area() { return size * size; }
};
void Square::set_size(int s) { size = s; }
int Square::get_size() { return size; }
int main()
{
Square x;
x.set_size(00);
cout
the code seems a little bit wrong ig
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)
thank you
The fact you did this without testing it out prior in between writing this is impressive on its own
He wrote the code then used a macro or something of the sort to have it rewrite the code for the video
@@hosytaa6018 yeah true. Didn't think of that
almsot as if he had the code ready...
@@hosytaa6018 what is macro?
@@athiran5856software that does actions for you. In this case it types out the program from a copy he made before
The sun element actually has a square shape. You need to set the border-radius to half of the sun's height and width, 5em, to make it circular.
You're amazing thank you hopefully to do more
You are absolutely PRO
I love it so much!! Thank you! I can finally be my computer teacher's pet now :>
Amazing stuff man
thank you
Wow😮😮
I copy your code and try this.
It really works.❤❤❤
Es realmente impresionante, pero es sonido es muy relajante 😌❤
God!, Ya Allah, this is so good....Ya Allah, thank you for granting him such level of knowledge in web development!❤
Al-lah hinself dont know the earths shapr and you say al-lah thanku for providing knowledge 🤣 stupid m-uslims
It’s aurotype
This was so satisfying to watch...
Wao amazing ✨
I try this code, successful got output ❤
😂😂
you are so talented bro!!!
Bhor ? That early morning birds convo ❤at 4 am my fav ❤ nice work btw
Don't thank me (i think i've made a few mistakes cause the render is not exactly like in the video):
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center
;
background-color: black
;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color:
yellow;
border-radius: 50%;
box-shadow: 0 0 3em
white;
}
.earth,.moon {
position: absolute;
border-style: solid;
border-color: white
transparent
transparent
transparent;
border-width: 0.1em 0.1
em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s
linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s
linear infinite
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
left: 6.5em;
width: 1.2em;
height: 1.2em;
background-color:
silver;
}
@keyframes orbit {
to {
transform: rotate(
360deg);
}
}
thanks😀
Okay
@@learning-axisBhai Maine ye coding run ki aur 3 dabhe esse parkar ghum rahe thee par sun ,moon nahi tha please help
see code link in description @@Ajay_Kumar9
Change your .moon : : before left from 1.2 to 6.5
Please show us hole screen so that we can also get lurned
I also provided a link in description you can get code from there. thank you.
Sir where I see description ?? 😢
thank you!
you welcome
Wow 👍👍
just what i need, a child in a child👍
bro 💀
💀
@@thegate8985 j09et m
😂😂
i don't understand
Excellent work
Awesome ❤❤❤
Maja a gaya 😮😮😮
cool
man really thought we didnt see him hide overflow💀😭
amazing its reALLy works
What is this thingery? You left me speechless!!!!!!
Wonderful even I will all start like
Wow🤞
Bro really coded the whole soar system. 😱
No, not really
Awesome
Good ❤
I like how the orbit keyword fits so perfectly
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center
;
background-color: black
;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 11em;
left: 10em;
width: 10em;
height: 10em;
background-color:
yellow;
border-radius: 50%;
box-shadow: 0.03em;
white;
}
.earth,.moon {
position: absolute;
border-style: solid;
border-color: pink;
transparent
transparent
transparent;
border-width:
em 0.1 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s
linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s
linear infinite;
background-color: #34A56F;
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right 2.8em;
width: 3em;
height: 3em;
background-color: red;
}
body {
/* padding:200px; */
background:skyblue;
}
.content {
display: flex;
align-items: center;
justify-content: center;
padding:300px;
}
.sun {
display:inline-block;
border-radius:50%;
height:200px;
width:200px;
background:orange;
box-shadow: 0 0 10px orange,
0 0 60px orange,
0 0 200px yellow,
inset 0 0 80px yellow;
z-index:12;
align:center;
z-index:-99;
}
.cloud {
display:inline-block;
background:white;
width:120px;
height:120px;
border-radius:50%;
position:relative;
top:-30px;
-webkit-filter: blur(6px);
z-index:11;
left:-50px;
animation: 15000ms cloudAnimation linear infinite;
opacity:0.76;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color:
silver;
}
@keyframes orbit {
to {
transform:rotate(
360deg);
}
}
I have no idea what he just did but it looked cool at the end
wow that looks awesome bro good job, it was easier than I thought.
Amazing work. Share the code. Thanks
lol
Mercury, Venus, Mars, Jupiter, Saturn, Uranus and Neptune have left the chat 🥺
Very good i wan a try this
Very good😊
That's why I love Python
It's HTML with CSS 🙄
@@Phoenix.Fire07 Yes but with python this would have taken way less time, thats why he says he loves python
@@chrisdawson3175 Finally a smart person 💯
Python is slow, gotta go with C
How would you do it? I would like to see the actual code
Sesimpel itu hasilnya hehe
my fav programming language ❤
I was closed my eyes and was hearing Ants walking . Peace out ✌️😅
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;
@@amit_mukherjee1 gonna try this thank you
You may of done something here
Nice skills coder!
This is amazing 🙌🙌👍
good but we need to watch as cool this vdio🙏
amazing bro❤
Majja agaya bidu it's work
amazing!
Legend dont undersood anything still watching whole video
True
**Satisfying**
Inspired❤❤
Wonderful
What a speed of typing !!! omg
Wish I could type like that.
Thanks bro it was really helpful
Looks amazing hate it that it's not in a separate css file tho xD
Bro literally what I was thinking the whole time 😂
❤❤❤
Beautiful ❤
it is very good!!!