Fixed values

Lesson 10 of 18 in Coddy's Moving Clouds - HTML/CSS/JS Project course.

Let's move the cloud!

Challenge

Easy

Before we start to move the cloud, let's fix the position and size of the cloud.

Comment the code that set random position and size to the cloud.

In the JS file, target the cloud element and:

Set the left style property to 200px.
Set the top style property to 200px.
Set the transform style property to scale(0.5).

Also, set the transition style property to "all linear 3s" it will help us animate the cloud later on!

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 Moving Clouds - HTML/CSS/JS Project

1Introduction

4Playing with JS

2Container

5Moving the Cloud

Fixed values Project lesson

3The Cloud

6Many Clouds