Ad Code

Ticker

6/recent/ticker-posts

Earth & moon | Very easy | Only HTML, CSS | Abhicoder

Abhinav Mishra July 23, 2021

          Hey guys! Welcome to my new post. In this post, I will show you that How I made an 'Earth & Moon' demo model using only HTML, and CSS!! This model is too easy to create.  Just You Need a World map image and make your hands 👐 ready to code!! By the way, you will get the World map below.



This is how our earth and moon will look ⏫and here is the video below.⏬

[youtube https://www.youtube.com/watch?v=_fGBP_Ec6cQ]


World map image:-

Process of creating it:-

Frist open 'Sublime text 4' or any code editor you want.  After that create a folder and download and paste the image there, change the name of the image to 'earth.jpg'. Then create an 'Index.html' and 'style.css' and place them in that same folder only. Then paste the HTML code in the 'Index.html' file and the CSS code in the 'Style.css ' file.

HTML code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>3D earth</title>
</head>
<body>
    <div class="planet planetEarth">
        <h2>Earth with moon</h2>
        <div class="container">
            <div class="loader"><span></span></div>
            <div class="earth"></div>
        </div>
    </div>

</body>
</html> {codeBox}

CSS code:-

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Popoins', sans-serif;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}
.planet
{
    display: flex;
    flex-direction: column;
}
.planet h2
{
    color: #fff;
    font-size: 4em;
    margin-bottom: 40px;
    font-weight: 600;
}
.planet .container
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.planetEarth
{
    position: absolute;
    min-width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #182357;
}
.planetEarth .loader
{
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /*Do this animation after all functioning of earth*/
    animation: animate 6s linear infinite;
}
/*Do this keyframes after all functioning of earth*/
@keyframes  animate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
} 
/*Do this keyframes after all functioning of earth*/
.planetEarth .loader:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to top, transparent, grey);
    background-size: 200px 360px;
    background-repeat: no-repeat;
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
}
.planetEarth .loader:after
{
    content:'';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 10px #fff,
                0 0 20px #fff, 
                0 0 30px #fff,
                0 0 40px #fff,
                0 0 50px #fff,
                0 0 60px #fff,
                0 0 70px #fff,
                0 0 80px #fff,
                0 0 90px #fff,
                0 0 100px #fff;  
                
}
.planetEarth .loader span{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #182357;
    border-radius: 50%;
}
.earth
{
    position: absolute;
    width: 340px;
    height: 340px;
    background: url(earth.jpg);
    border-radius: 50%;
    background-size: cover;
    box-shadow: inset 0 0 20px #03a9f4,
                0 0 120px #03a9f4;
    animation: animateEarth 20s linear infinite;
}
@keyframes animateEarth
{
    0%
    {
        background-position: 0;
    }
    100%
    {
        background-position: 162.5%;
    }
} {codeBox}

Explanation:-

Now if you have a short time then you can see the video at the top☝ else I will explain in detail here. Frist in the HTML code we have given a division as '<div class="planet planetEarth">
Then an 'H2' Then a division named Container. Then in the CSS, we have done the basics of the body then we have done all the CSS code as given. And inserted the World map image. That's pretty simple!! You can also show it to your friends! As you have created it. 

Hey! If you like this video or the post then please please Like this video on youtube. And if you are new to my channel then please click on the SUBSCRIBE button. Please help me reach 1000 SUBSCRIBERS as I am bringing such awesome content for you.


Keep visiting!!
                                                     Thank you!!
(adsbygoogle = window.adsbygoogle || []).push({});

Post a Comment

0 Comments

Ad Code