Solar System | HTML CSS

Показать описание

#shorts #html #css #tutorials #trending

Sound effects from Pixabay.

Learning Axis

Рекомендации по теме

Комментарии

The birds represent that you stayed up all night again

memerightsactivist

This would be a cool loading screen animation

chatebillychilima

*Accidentally misses a dot*
**Sun starts revolving moon**

KawazakiZedit

python:

import solar_system as sys
variable = sys.create()
print(variable)

dqsh

would love a tutorial explaining what everything does. For newbies like me this is magic!

fuzzy-

python: Ah f**k it. I'll just import.

souhardyaroy

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.

anavaratha

The only thing I like is that
1 : it does work
2 : He does care about the keyboard types

EnesTheLeafeon

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.

vihungchu

programmers dont type that fast actually, they will google at least something once in a few minutes

captheobbyist

Html coders: **goin' tryhard**
Python coders: "I'll just import"

atharvmishra

Year 69420
Coding tutorial
How to create a virtual solar system inside a Notepad file 💀

Whatwillyoudowithmyname

Yoi Sir, are the lord of the CSS 👨‍💻💪

thomasedwardking

Birds in the background means you were coding all night long and that's already morning 😂

marcelofrazatto

code in case you need: <!DOCTYPE html>
<html>
<head>
<style>
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);
}
}
</style>
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
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);
}
}
</style>
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
</div>
</body>
</html>

FruitForge

Wow. As someone new to coding, that looks incredible! 😍

Firelight

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:

whydoesthisevenexist

Yes, I love programming, designs and graphics 🎉❤❤❤

khadijachafi

man really thought we didnt see him hide overflow💀😭

shinigmi

This is really cool. Great use of the animation props. So many nice features. Great work!

NiceChange

Solar System | HTML CSS

Solar System of Galaxy Animation Pure CSS and HTML | Solar System Animation CSS

How To Create a Solar System Animation | HTML | CSS | JavaScript | ASMR Coding

Create Solar System Animation using HTML & CSS in 10 Minutes

Solar System | HTML CSS

Solar System Animation | HTML CSS

How to make solar system animation using HTML and CSS programming codes only By div Loda

Solar System Animation using ONLY html and css

𝗦𝗼𝗹𝗮𝗿 𝗦𝘆𝘀𝘁𝗲𝗺 𝗔𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 𝗣𝘂𝗿𝗲 𝗖𝗦𝗦 𝗮𝗻𝗱 𝗛𝗧𝗠𝗟 | 𝗦𝗼𝗹𝗮𝗿 𝗦𝘆𝘀𝘁𝗲𝗺 𝗔𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 𝗖𝗦𝗦 | 𝗙𝘂𝗹𝗹 𝗰𝗼𝗱𝗲 😲💻...

Solar system using html & css || Animation || html & css project #html #css #animation #sola...

Solar System of Galaxy Animation Pure CSS and HTML | Solar System Animation CSS

Solar System Planets Using CSS Only

animation Earth using html and css.

SOLAR SYSTEM ANIMATION USING HTML & CSS

Solar System | HTML | CSS | JavaScript | Animation | EducateKaro.com #shorts

Create a normal solar system (html , css)

3d Solar System Animation Using Pure CSS | Build A 3d Solar System Animation In Pure CSS

3D Solar System using #html #css #javascript

Solar System Animation with HTML CSS

Create a 3D Solar System uses CSS

Solar System using html and css.

🪐 Designing Solar System with HTML CSS

Awesome earth sun animation Using HTML & CSS

How to Create a Solar System using HTML and CSS || @Code_Crafts

solar system; HTML program #html #html5 #coding #viralvideo #java #program #codewithik