body tag

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

Challenge

Easy

In the CSS file, target the body tag:

Set display to flex, align-items, and justify-content to center.
Set height to 600px.
Set the background-image to linear-gradient(30deg, #182C51, #09101e).
Set the overflow to hidden.

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

moon class pseudo-element

eclipse animation

responsiveness

Practice on your own: Web playground