moon class

Lesson 7 of 10 in Coddy's Solar Eclipse Animation | HTML/CSS Project course.

Challenge

Easy

In the CSS file, target the moon class:

Set the width and height of moon class to 220px.
Set the border-radius of 50%.
Set the position of moon class to relative.
Set the background-image to linear-gradient(30deg, #13223f, #0e1a30).

You should see the moon now!

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

All lessons in Solar Eclipse Animation | HTML/CSS Project

1HTML

What are you going to make?Code Setup The Moon Container

2CSS

Universal tag

html tag

body tag

moon class Project lesson

moon class pseudo-element

eclipse animation

responsiveness