Build 10 Creative Web Projects with HTML and CSS | Giorgi Lomidze | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build 10 Creative Web Projects with HTML and CSS

teacher avatar Giorgi Lomidze, UI / UX Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      1:28

    • 2.

      Projects

      3:59

    • 3.

      Setup

      1:52

    • 4.

      Project 1 - Jumping Square

      14:48

    • 5.

      Project 2 - Landing Page

      10:27

    • 6.

      Project 3 - Ball Animation

      20:49

    • 7.

      Project 4 - Animated Earth

      11:02

    • 8.

      Project 5 - Flower

      12:15

    • 9.

      Project 6 - Atom Animation

      19:39

    • 10.

      Project 7 - Helicopter

      23:08

    • 11.

      Project 8 - Bicycle

      29:57

    • 12.

      Project 9 - 3D Room

      23:01

    • 13.

      Project 10 - 3D Swing

      27:17

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

48

Students

--

Projects

About This Class

Hey there! Welcome to our fun class where we're going to learn how to make awesome web projects using only HTML and CSS. We've got 10 different projects lined up – starting easy and getting a bit fancier as we go.

Whether you know a bit about HTML and CSS or are just starting out, no worries! We're here for everyone who wants to make cool web stuff. Our goal is simple: we want to make learning HTML and CSS enjoyable and help you create projects that look really good.

Now, these projects aren't just your regular ones – they're going to be like your own playground for cool designs and effects. We'll begin with easy projects to get the hang of things, and then we'll take on more exciting challenges.

By the end of this course, you'll not only understand how to make cool effects but also feel confident about it. This knowledge isn't just to upgrade your current projects; it's also going to give you ideas to make your portfolio stand out.

Imagine having the skills to make websites that not only work great but also look super cool. That's what mastering these basic Front-end web development skills can do for you – it's like unlocking a superpower for the web world.

So, why should you be excited about this learning journey? Because it's going to be fun! Learning doesn't have to be all serious and boring – we're here to make sure of that. Whether you're looking to boost your career or just want to have a good time making awesome web projects, you're in for a treat.

Think of this course as your guide to really understanding HTML and CSS. We won't confuse you with complicated stuff; we're here to show you how to make things happen. It's like learning to ride a bike – you start with the basics, practice, and soon you're cruising.

We're not just your teachers; we're your buddies in this adventure. Our goal is to make sure you not only finish the projects but really get why and how they work. It's all about giving you the tools to create the cool stuff you've been dreaming of.

Remember, the web is like your canvas, and HTML and CSS are your paintbrush. We're just here to help you bring out the artist in you. So, get ready to have some fun, create cool stuff, and enjoy the ride through the world of web development. Whether you're new to this or already know a bit, there's always something cool to discover, and we're excited to explore it with you. Let's get coding, creating, and having a blast!

Source Files

Meet Your Teacher

Teacher Profile Image

Giorgi Lomidze

UI / UX Designer

Teacher

Hi,

I'm George, an UI / UX Designer, Web Developer, Founder at 'Code And Create' , and an author of several best-selling online classes.

I'm excited that I have a chance to help people to learn one of the most interesting and hottest fields in the world.

I decided to share my knowledge and experience with you and that's the main reason for being here at Skillshare.

Looking forward to seeing you inside my classes and help you to become a professional UI / UX Designer

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Welcome to the Brand New course where you can learn about how to build creative and beautiful web projects. We will build together ten different creative web projects with pure HTML and CSS. If you have some basic knowledge of these technologies and still have some trouble creating your own web projects, or if you want to level up your developer and designing skills, then you come to the right place. We created this course in order to give students the best experience in HTML and CSS and allow them to build beautiful creative projects. We will build ten different web projects, and they will be full of modern, nice and beautiful effects design. We will start with relatively simple projects, and we'll go through some advanced ones as well. We can guarantee you that you will gain a solid experience and knowledge in creating really nice and cool effects after completing this course. Using this course, you can get the inspirations that will help you to enhance your projects and customize your portfolio. Mastering just these core technologies of Front and Bob development, you can create awesome and modern themes and simply get higher. The course will be interesting and useful. I would recommend you to try to get the most out of this course without just copying and pasting the code. If I were in your shoes, I would definitely take like this. So join us. 2. Projects: Hello and welcome to the course. I hope that this will be your right course and you will enjoy the projects that we're going to build throughout the course. As you already know, we're going to create ten different creative and beautiful web projects. All those projects will be built based on HTML and CSS. I would like to mention that you should have a basic understanding of those technologies in order to follow the lectures and not to get confused. The projects will be full of different modern techniques and tricks. You will be able to learn about how to create nice and beautiful effects and animations, which then you can use as the inspiration to develop and customize your own portfolio. As I mentioned, we'll build ten projects. They are independent templates so you don't have to go through them in order. You can build any of the projects you want from the least. It's absolutely up to you. All right, so now I'm going to go through each project and briefly describe them. The first project that we're going to build is a jumping square. As you can see, we have here a square that is jumping on something like the ruber. It changes its shape and also those ticks are skewing in order to create the natural effect. Next we're going to create this landing page. If we reload the page, then you will see the full screen background image appearing with a nice animation. Once it is displayed, then it changes its shape like so after that we will create a ball animation. As you can see, we have here an animated ball that is moving up and down. It's hitting the squares which are coming from the left and right sides. Also, we have here a moving background which makes an illusion that the ball moves up. All right, next we will have animated Earth. As you see, we have here two different parts. On the left side, dark part of the Earth. On the right side, there is a light part. The Earth itself is rotating according to its Y axis. Next comes the flow. The flower is going to be just the regular one with a couple of petals and with a stem. Remember that we'll create it with just ML and CSS. After that, we will create an atom animation. As you can see, we have here a typical atom, which you may have seen in your chemistry class or you may have come across one of the popular editor logos. I mean the atom. We have here a couple of circles with balls which are moving around the main ball. All right, the next project is going to be a helicopter. We have here a flying effect. The helicopter is flying over the city, the blades are moving. This entire helicopter is created with H, M, and CSS. And it is not an image actually. I would like to mention that the flying effect looks much more realistic when you run the project in the browser. It doesn't look quite realistic in the video because of the frames. Do not worry, it will look much better when you build it on your own. Okay, the next project is going to be the bicycle we have here, the typical bicycle. As you can see, the wheels and the pedals are moving, it seems that the bike is riding. The next project is going to be a three D room. We have here a table in the room with a letter. Once we click the button, read letter, then we will reach to the table and the letter will rotate. After that will be the last project, which is going to be a three D swing. We have here a couple of swings. They are moving in three D space. Also, you can see here the ball moving on those swings. All right, that's all about the projects which we're going to build throughout the course. I hope they will be interesting, you will enjoy them and learn some new stuff. So let's get started. 3. Setup: Hello and welcome to the course. We're delighted to have you here, and we're confident you'll find this course enjoyable. Before we start diving into our project, let's first prepare our working environment. If you're already set up and ready to write code, you can skip this video and jump straight into the project. However, if you are not prepared yet, that's perfectly fine. We'll guide you through setting up some essential tools throughout this course. There are two main tools you will need, A modern web browser and a text editor. For our web browser, I'll be using Google Chrome, but I also recommend Mozilla, Firefox. You likely already have these browsers, but let's quickly go over how to download them, just in case to get Google Chrome, simply visit this URL and download the browser. The installation process is straightforward, so we won't spend much time on it. For Mozilla, Firefox, you can obtain it from this URL. Both links will be included with this lecture for your convenience. All right, now let's talk about the text editor. We will be using visual studio code which is one of the best text editors available today. However, you're welcome to use your preferred text editor if you have one. It's entirely up to you still. I recommend giving Visual Studio code a. Try to download Visual Studio code, Visit this website and select the version for your operating system, Windows, Mac or Linux. The installation process for Visual studio code is also straightforward. You should not encounter any issues. Once you've installed both of these tools, you'll be all set to get started with the course. Let's dive right in. 4. Project 1 - Jumping Square: All right, we are ready to start to build our projects. In this video, we're going to create the first project which is a jumping square. As you can see, we have here a square that is jumping on something like the ruber. It changes the shape and also those sticks are skewing in order to create the natural effect. Okay, that's all about the project, let's go ahead and get started. I have created a new folder on the desktop called jumping square, which right now is empty. Let's open this folder in as code and create our working files. I mean index HTML and style CSS. Then open the index dot HTML file and create a basic Html document. Let's place here an exclamation mark and then hit Top or Enter. Okay. First of all, let's go ahead and change the title. It's going to be jumping square. Then link the CSS file. Let's specify here style SS. Okay, Lastly, let's run the project to the browser using live server. And then place the editor and the browser side by side, like so. All right, at first I'm going to create the H DML markup. Let's open the deep tag which is going to be the container. Then I'm going to open another deep tug which will wrap the entire animation. It's going to be wrapper Inside the wrapper, we will have a couple of different elements. The first one is going to be the ruber. Then we will have two sticks. Let's use classes stick and left stick. Then duplicate this code and change left into right. Finally, let's create another deep tug which is going to be the square. All right, let's say about the H mal mark up. Let's move on and start to write CSS. First of all, I'm going to create some reset and default styles for every element. Let's select them using an asterisk. I'm going to get rid of default margin and padding. Let's set both properties to zero. Also, I'm going to set box sizing to border box. Throughout this project, we're going to use Ram as a measurement unit. Right now, one Ram equals 16 pixels. By default, I want to convert one Ram into ten pixels. That we have to decrease the phone size of the HTML element, and we have to make it 62.5% All right, next I want to take care of the container. Let's define it's within height. The width is going to be 100% As for the height, I'm going to make it 100% of the viewport. That's about the container right now. Next I'm going to customize the wrapper. First of all, let's define width and height. The width is going to be 100 Ram. As for the height, I'm going to make it 80 Ram. I also change the background color. Let's make it 15 oh five. Actually, the wrapper is going to be placed in the center of the page. For that, I'm going to use CSS grid. Let's assign to the container display grid then place items center. Okay, let's move on and continue to customize the wrapper. Next, I'm going to make it a little bit rounded. Let's use border radius with value five Ram and also creates some shadow effect. Let's place two Ram, two Ram, six Ram, and as the color I'm going to use 888. All right, so let's sit about the wrapper. Let's move on and start to work on the sticks. Let's select them using a common class name. First of all, let's define within height. The width is going to be three Ram, then the height will be 40 Ram. And also change the background color. I'm going to use here color called coral. Here we have both sticks. Let's make their top sites slightly rounded. Use border radius with the values, one Ram, one Ram, those are the top sites. And then we need 0.0 After that, I'm going to take care of the positions we need to make their positions absolute. Actually, we will need position absolute for every element which are. Children of the wrapper. So I'm going to select every development inside the wrapper and then set their position to absolute. We're going to position elements according to the wrapper. Let's assign to it position or relative. Okay, after that, let's take care of the positions of the sticks. Both of them will have bottom zero. Next, I'm going to define the positions for the sticks separately. Let's select left stick and set the left position to 15 Ram. Let's duplicate this code, change left into right. Also we need here right, with the same value. Okay, besides that, I'm going to add a little shadow effect to both sticks. Let's start with the left stick. The values will be 0.2 M, 0.5 Ram, and the color 555. As for the right stick, we will need a similar shadow effect, but the first value will be negative. Okay, that's it about the sticks. Next let's take of the ruber. Let's define with height. The width is going to be 67 Ram. As for the height, it's going to be 50 Ram. Also, I'm going to use some temporary background color. Let's say red. Okay, next let's take here of the position of the ruber. Let's define left position. It's going to be 16.5 Ram as the bottom. It's going to be 24 Ram. Besides that, I'm going to add to it border at the bottom and also a shadow. The border bottom is going to be one Ram solid. And the color is going to be Coral as the box shadow we need here. 01 Ram zero. And the color is going to be DD. All right, let's see about the rubber. Next I'm going to take care of the square. Let's select it and define width. It's going to be 14 Ram. We need the same height. I'm going to use here a property called aspect ratio with the value one. Then let's change the background color, make it white. Also, I'm going to make the square rounded using border radius two Ram. All right, next let's change the position of the square. Let's define let position, make it 44 Ram. Also, I'm going to add to the square a little shadow. Let's inter 00.2 Ram and the color 555. Okay, everything is ready to start to work on the animations. Let's start with the ruber. Throughout the animation, we will change the border radius and also we will move down the ruber itself. Let's go ahead and create CSSkeyframes with the name Ruber. We will have a couple of different steps at 0% and 20% We will change the border, but we won't move the ruber. We need these two steps here. The border radius is going to be zero. Then we need to transform. Translate with y direction and with value zero. Next we'll have 50.60% On those steps, we'll change the border radius and move the ruber down. The border radius is going to be 0035 Ram and 35 Ram. Again, as for the transform, translate Y, it's going to be 23 Ram. Finally, the last two steps will be 65% and 100% Here we will change the border radius and move the element to its default place. The border radius is going to be zero. As for the transform translate Y, it's going to be zero as well. Okay, so the key frames are ready and we can run the animation. We need the name of the animation ruber anim. Then the duration is going to be 2 seconds. Also, we need the animation to be infinite, then it's going to be linear. As you can see, the ruber is moving and the animation runs fine. We can get rid of this temporary back on color from here. All right, next we have to create the animation for the square. We should match the movement of the square and the ruber. Let's create new key frames and call it square anim. From 0% to 20% we should move the square a little bit down at 0% We need to transform translate y with the value of five frame. Then from 20% to 50% we have to move the square down again. The value is going to be 40 Ram. In this case we change the speed. Then at 50.60% we'll move the element down, but with a different speed, the value is going to be 64.5 Ram. Next comes 62% where we have to move square up. The value is going to be 45 Ram. After that we'll have 80% or we have to move the element up. And also rotated, the value is going to be ten. Also we need to add here rotate Z 90 degrees. Finally, at 100% we need to move again, element up and rotate. The value is going to be five Ram. All right, let's sit about the square animation. Let's go ahead and run it. We need to hear the name square Anim, then the duration 2 seconds, then infinite and linear again. As you can see, everything was fine. And the only thing that we have to do is to create the animations for the sticks. They should skew once the square hits the ruber. Let's create the key frames for the left stick. I'm going to call it left stick anim. During the animation, we should rotate the stick according to the z axis. At 0.30% we won't rotate the element yet. We need transform rotate with value zero. Then at 50.65% we will rotate the stick slightly. The value is going to be two degrees. Finally at 80.100% we will rotate the stick back to its default position. The value is going to be zero. All right, so everything is ready. Let's run the animation here. The name left Stick animal. The duration is going to be 2 seconds. Then again, we need infinite and linear. As you can see, the stick is rotating. But that's not what we need here. It is rotating from the center because the origin of the transformation is set to center by default, we need to change it. The origin is going to be bottom center. All right, as you can see now everything looks fine. Let's run the animation for the right stick as well. I'm going to copy this code and paste it down below. Let's change the name we need, right stick anim. Also, we need to change the value of the rotate Z function. It should be minus two degrees. Let's copy the animation property and change the name. All right, so as can see everything works perfectly. The only thing that I want to do is to assign to the wrapper overflow heading because the sticks are moving outside of the rapper slightly. All right, that's it. Finally with this project we're done and I hope you enjoyed it. See you next time. 5. Project 2 - Landing Page: In this video, we will create an animated landing page with HTML and CSS. Let's go ahead and take a look at the finished project. If we reload the page, then you will see the full screen background image appearing with a nice animation. Once it is displayed, then it changes its shape like so the project is going to be a little one, but I hope it will be interesting and you will enjoy it. All right, let's get started. I've created a new folder on the desktop called Lending Page Animation, in which I have another folder for the images. Let's go ahead and open this folder. And VS code then create our working files for HTML and CSS. We need index HTML and styletsS. Then open the index dot HTML file and create a basic HTML document. For that we have to place here an exclamation mark and then press Tab or Enter. All right, first of all I'm going to change the title. It's going to be landing page animation. Then let's link the CSS file. I'm going to open link tag. And then we have to define the path of the file. Okay, finally, let's go ahead and run the project to the browser with a live server. And then place the editor and the browser like. So we are ready to start. First of all, I'm going to create an HTML markup. Let's open tag with a class container. We will have two different elements inside the container. The first one is going to be the landing. As for the second one, I'm going to call it PG. All right, let's say about the HTML markup. Let's go ahead and start to write some CSS. First of all, I'm going to create some default and reset styles. I'm going to select every element using an asterisk. And then I'm going to get rid of default margin and padding. Let's set both properties to zero. After that, I'm going to take care of the container. Let's select it and define it's within height. Width is going to be 100% As for the height, I'm going to make it 100% of the view part. Also change the background color. I'm going to use RGB value 184-16-5119 All right, here we have the container with a background color. Let's sit about the container, let's move on and take care of the landing. Let's select these elements. First of all, let's define with height. I'm going to set both properties to 100% Then let's define the background. First of all, I'm going to use linear gradient function. I'm going to pass here two RGBA values. Both of them will be black colors with opacity 0.8 Then I'm going to define the path of the image. We need URL, then the folder name images, and we have to select PG. Pg also. Let's adhere no repeat. Besides that, I'm going to define the background size. It's going to be covered. So here we have the landing with a full screen background image. Let's move on and take care of the second element, which is a PG. This element will cover the landing. Once we rule at the page, then it will disappear and the landing will display. First of all, let's define within height. I'm going to make both of them 100% then change the background color. I'm going to use here the same RGB value that we used for the container. Okay, so here we have the background, but right now it is placed below the landing, and as I said, we need to place it on top of the landing. For that I'm going to use positions and the z index property. First of all, I'm going to set position to absolute. Then let's define top and left properties. I'm going to make both of them zero. Then we need z index property with some higher value than zero. Let's say ten. All right, as you can see, the background covers the landing and now it's time to create the animation we need to disappear the background. Once we reload the page, let's create CSS frames. I'm going to call it BG anim. Overall, we will have three different steps. I'm going to decrease the scale of the element, but according to the y axis at 0.50% the scale is going to be one. Then we need transform scale y with the value one. And then from 50% to 100% will decrease the scale to zero. At 100% we need to transform scale Y zero, the key frames already. And now we have to apply these tiles to the element. We need animation property. Then at first we have to define the name of the animation. It's going to be G any, then we need duration 2 seconds. As you can see, the elements are animating. But we have here two issues. The element is disappearing in the center of the page. It happens because by default, the origin of the transformation is center, and we have to change it for the second issue. Once the element disappears, then it displays back again. We need to maintain scale as zero at first. Let's change the transform origin. We need to make it top. Now one problem is fixed. As for the second issue, we need to add to the animation property value called forwards. It keeps all the styles that are defined at the last step of the animation. Now as you can see, everything works fine. Now we need to take care of the second animation. We need to change the shape of the landing. I'm going to do that using one of the CSS properties called Clip Path. Actually, I can recommend one of the websites. Let's search for Clip Path where you can play around with different shapes. You can grab the proper CSS code from here. In our case, we have a shape with seven different points. In order to transform one shape into another with a transition effect, then both shapes should have the same number of points. I have all of the prepared, the values. Actually, you can play around with different shapes and values. It is up to you. I'm going to create SK frames with the name landing an overall. We'll have three different steps at 0.50% will have the same shape. Let's use clip path with the polygon function. I'm going to pass here the following values. The first poly is going to be 50% zero, then we will have 70% zero. The next one is going to be 100% zero. Then 100% twice zero, 100% then we will have zero twice 30% and zero. As for the 100% we have to change these values. We need clip path polygon. The first point is going to be 50% 4% Then we'll have 70% 10% then 95.0 95, 87% then 5% and 105% 15% The last point is going to be 31% 10% All right, the key frames already. Let's run the animation. Let's define the name of the key frames lending any the duration is going to be 4 seconds like the previous case we need here forwards. If we reload the page, then the element will change its shape smoothly. Actually, I want to add here one more thing. If we take a look at the finished project, then we will see that the background image is moving up smoothly. Let's go ahead and add this effect as well. We need to define background position. By default it's going to be center top. Then we need to change it. In the animation, we need center bottom. All right, so now everything works perfectly, and with the project, we are done. See you next time. 6. Project 3 - Ball Animation: In this video, we're going to be creating a CSS animation project. The project is going to be a little one, but I think it will be interesting and you will learn some new stuff about CSS animations. Let's go ahead and describe the project. We have here an animated ball that is moving up and down. It's hitting the squares which are coming from the left and right sides. Also, we have here a moving background which makes an illusion that the ball moves up. Okay, let's sit about this project. Let's go ahead and start to create it. I have a new folder on the desktop called Ball animation, in which I have another folder for the background image. Let's go ahead and open this folder in VS code and then create our working files. We will have just two files, index HTML style CSS. Let's open the index HTML file and create a basic HTML document. I'm going to use an exclamation mark, and then we have to hit Top or Enter. First of all, let's change the title. I'm going to insert your ball animation. After that, I'm going to link the CSS files open link tag and inserter filed a CSS. Okay, finally, let's go ahead and run the project to the browser. For that, I'm going to use one of the VS code packages called Live Server. Before we start to write the code, I'm going to place the editor and the browser side by side. So at first I'm going to create an HTML markup. Let's open tag with the class wrapper. It will include the entire content inside the wrapper going to have three different deep elements. The first two deep elements will be for the squares. As for the third deep element, it's going to be the ball. It's open deep tag with the class block, it will be the common class name. But besides that, we need individual class, let's say block one. Let's duplicate this line of code and change the class name. We need block two. Okay? Let's open another deep tag with the class ball. All right, let's sit about the HTML markup. Right now, nothing is visible here because all the elements are empty. Now it's time to start to write some CSS. First of all, let's create some default and common styles for every element. Let's select an Aster Risk. I'm going to get rid of default, margin, and padding. Let's set both properties to zero. Also, I'm going to set box sizing to border box again, let's say about the default styles throughout this project. We're going to use Ram as the measurement unit. By default, one m is equal to 16 pixels. I want it to be ten pixels. For that, we have to decrease default size of the HTML element. We need to set it to 62.5% Okay. After that, let's go ahead and style the body elements. I'm going to define width and height. Let's set with 200% As for the height, I'm going to make it 100% of the viewport. Let's set it 200 VH. Next, I'm going to take care of the wrapper. Let's select this element and defined, I'm going to set with 270. Okay, I'm going to make the wrapper square. For that, I will use one of the CSS properties called aspect ratio. If I set it to one, then it will mean that the wrapper will get a height equal to 70 M. But if I change the width, let's say to ATM, then the height will be ATM as well. I think this property is a very convenient one. Let's go ahead and define the background. Let's set background image URL, and we need the path of the image. We have folder called images and we have to select Gng. As you can see here, we have the background right now, that's it about the wrapper. Before we move on, I just want to place the wrapper in the center of the page. For that, let's use CSS grid. I'm going to set Display to grid. And then in order to place the element in the center, we need place items center. Okay? So as you can see, the element is placed in the center perfectly. Let's move on. Answer to work on the boxes, I mean those squares which appear from the left and right sides, as you know they have a common class block. Let's go ahead and select it and define the width. I'm going to set with to 18 Ram. I want those elements to be squares. Let's use again aspect ratio with value one and also change the background color. I'm going to use your RGB value. 501-18-4184, Okay. We have here the squares. Let's go ahead and define the positions. I'm going to set the position to absolute. Then in order to position the element according to the wrapper, let's set the position to a relative. After that, I'm going to define the positions for the squares separately. Let's select block one and define top and right properties. I'm going to set top position to 16 Ram. As for the right position, it's going to be 44 Ram. Then I'm going to duplicate this code. Let's change the fast name. We need block two. The top position is going to be the same as for the right position. I'm going to set it to eight Ram. All right, so as you can see, the elements are positioned correctly. Now it's time to take care of the ball. Let's select it. First of all, I'm going to define the width. Let's set it to 12 Ram. We need the same height for the ball. I'm going to use again property called aspect ratio with the value one. And then let's change the background color. Let's use RGB, 255-11-8118 Okay, Let's make this rounded using border radius with the value 50% Then let's take care of its position. I'm going to set position to absolute. Then I'm going to define left hand top properties. Left position is going to be 29 Ram. As for the top position, it's going to be 22 ramp. All right, that's it about the ball. Now we can start the funny part. I mean the animations. Let's start with the squares. Let's take a look at the finished project. As you can see, the elements come from the top in order. At first the left square comes down and then the right one. Besides that, the opacity of the squares is changing during the animation. Okay, let's go ahead and create the CSS key frames in which we have to define the CSS rules that will be applied to the squares during the animation. The key frames will consist of different steps. I'm going to call it block one m from 0% to 30% I mean at the starting part of the animation, the squared should move from top to bottom. And also we have to change its opacity at 0% I'm going to use transform with the function translate y as the value I'm going to use here, -38 Ram. Also, we have to define here function with zero degree. As I said, we need opacity to be 0.5 All right, at 30% the element moves down at its default position, still without rotation. We transform translate Y with zero and again rotate z with zero. Again, the next step is going to be 40% At this step, square will remain its position, but it will rotate. And also we will increase the opacity at 40% we need transform translate Y with zero, with the value -180 degrees. Also we need to increase the opacity. Let's make it one from 40% to the next step, I mean to 45% we need the same cells because during this time the ball should at the square and we should wait for it. Let's place here and then add here 45% All right, after that the square should move down and disappear. The next step is going to be 55% At this step, we need to transform translate Y with the value 38 Ram. Also, we need the rotation. I rotate C -180 degrees. Also we need to decrease the opacity. Let's set it to 2.5 Okay, we need this square to remain in this position. By the end of the animation, we need the same styles from 55% to 100% Let's add here 100% All right, actually the animation is ready. Let's go ahead and run it for the first square, we need animation property, then we have to define the name of the animation. I mean, pluck one. The next value is going to be the duration 5 seconds. Next, we need to run the animation infinitely. So we have to insert infinite. I'm going to make the animation linear. As you can see, the animation is running. But actually, that's not what we want right now. The element is rotating according to the center, because by default the origin of the transformation is set to center. In our case, we need to make it bottom right. Let's use transform origin and make it bottom right. Now as you can see, the square moves correctly. Once it moves away from the background, we need it to be hidden. For that we can assign overflow hidden to the wrapper. So that's sit about the first square. We need the same for the second one as well. Actually I'm going to duplicate the entire key frames. Let's change the name we need block to any next. We need to get rid of the minus signs from here, because we need to rotate the second square to the opposite direction. Besides that, we have to change the origin of the transformation. In this case, we need bottom left. Finally, let's define the animation property. We need to change here the name of the animation. It's going to be block to any besides that, we need here a delay time for the second square. Let's make it 2.5 seconds actually, that's not the final version of this animation. We will make here a slight change once we take care of the ball animation. Let's go ahead and start to work on it. Let's take a look at the finished project. As you can see, the ball is moving up and down and also it changes its shape slightly. Let's go ahead and create CSS, key frames for the ball. I'm going to call it ball ending. In the ball animation, we will have five different steps from 0% to 45% The ball will move up and it will shrink slightly at 0% I'm going to use transform, translate Y with the value -20 Ram. Also, in order to shrink the elements slightly, I'm going to use scale function. We need you to pass 0.8 as the value of the x direction, as part the y direction, it's going to be one. Then from 45% to the next step, the ball should move down. And also we should change the scale at 45% We need to transform, translate Y with the value of zero. Also we need to change the scale. It's going to be 0.9 and one. The next step is going to be 50% On that step, the ball should move down. And also we have to shrink the ball, but in this case vertically at 50% We need to transform, translate y with value two Ram. The scale is going to be one and 0.7 After that we have to move the ball up and shrink it horizontally at 60% I'm going to use transform translate Y with the value minus ten Ram. As for the scale, it's going to be point 9.1 All right, after that we need the last step. We have to move the ball up and also shrink in horizontally at 100% We need to transform, translate Y with the value -20 Ram. As for the scale, it's going to be point 8.1 Okay, the key frames are ready. Let's go ahead and apply those rules to the element. Let's use animation property. We need here the name of the animation ball. Any then the duration is going to be 2.5 seconds. Also, the animation should run infinitely and it's going to be linear. As you can see, the ball is animating, but it doesn't hit the squares. We need to match the times here. I'm going to add a little delay time to the animation. It's going to be 0.9 second. Now, as you can see, the ball touches the squares. At a glance, everything works fine. But if we reload the page, the ball and the right square will display like in a post condition, which doesn't look nice. We need to make the entire animation dynamic no matter if we reload the page or not. In order to do that, we can manipulate the delay time. In general, if we use the negative values, then the animation delay property will accelerate the animation. Let's take a look at the finished project. If we reload the page, you will see the right square moving away from the background, and also the ball moving up from a difficult position. We need to change the delay times for the second square. It's going to be -2.5 seconds. Now if we reload the page, then we will see the right square moving away from the wrapper. As for the ball, if we add here the minus sign, then the ball will be animating once we roll out the page. But now as you can see, it doesn't hit the squares. I'm going to increase the delay time. Let's set it to 1.5 second. All right, so that's it regarding the animations of the ball and the squares. Now we have to take care of the background Before we start to work on the animation, I'm going to add a couple of background styles to the wrapper. We need to define the size of the background. This property will take two values. The width of the background will be auto. As for the height, I'm going to set it to 70 m. In order to make it clear, I'm going to add a border to the wrapper. Let's make it one Ram, solid and red. Besides that, I'm going to define background repeat with value no repeat. Now if I change the values of the background size, let's say to 50 Ram and 60 Ram, you will see that the width and height of the background are changed. That's the way how the background size property works. Let's get back here. 0.70 Ram. We use here because we maintain the quality of the image, it doesn't shrink. Now we need to animate the background during the animation. We need to move the entire background down. And I'm going to do that using the property called background position. First of all, let's create key frames with the name BG at 0% I'm going to set background position to center and zero. As for the 100% the background position is going to be center and 70 round the key frames already. Let's apply these rules to the wrapper. Use animation property with the name background Anim. Then the duration is going to be 5 seconds. Also we need here infinite and linear. Now as you can see, the background is moving down. Once it moves, then it disappears. And we don't need that, we need to repeat the background, but in this case, according to the y axis, the background repeat property is going to be repeat Y. Now as you can see, everything works perfectly. Let's get rid of this border from here. Also, I want to add one little thing to the squares. Let's add to them a little shadow effect. Let's use box shadow with the values 0.2 0.2 m, then 0.4 as the color. I'm going to use AA. Actually, the shadow is going to be inside of the element we need here in St, I want the shadow all around the square. We need here other values as well. -0.2 Ram, -0.2 Ram, 0.4 Ram, then the color AA, and again inset. Okay, finally with this project, we are done. I hope it was interesting and you enjoyed it. See you next time. 7. Project 4 - Animated Earth: In this video, we're going to create an animated Earth, which you see here on the page. We'll build this project using pure TML and CSS. As you can see, we have here two different parts. Left side, we have the dark part of the Earth. On the right side, there is a light part of the Earth. The Earth itself is rotating according to its Y axis. All right, let's see about this project. Let's go ahead and get started. I've created a new folder on the desktop called Animated Earth, in which we have another folder for the images. Let's go ahead and open this folder in VS code, and then create our working files for HTML and for CSS. Okay, let's open the indexed HTML file and create a basic HTML document. For that, we have to place here an exclamation mark and then hit Top or Enter. Here we go. First of all, I'm going to change the title. It's going to be animated Earth. Then let's link the CSS file, open link tag, and specify the name of the file. All right, let's go ahead and run the project to the browser using live server. Then place the editor and the browser side by side. We are ready to start to write the code. At first, I'm going to create the HTML markup. Let's open a p tag with a class wrapper. Inside the wrapper, we will have two different elements, I mean the part and the night part. Let's open deep tack with the classes Earth and then duplicate this line of code and change the class name we need it. All right, let's see about the HDMl markup. Let's go ahead and answer to write some CSS. First of all, I'm going to create some reset styles for every element. Let's go ahead and select the asterisk and get rid of the default margin and padding from every element. I'm going to set both properties to zero throughout this project. I'm going to use Ram as the measurement unit. Right now, one Ram equals 16 pixels, and I want to make it equal to ten pixels. For that, we have to decrease the font size of the Html elements. Let's make it 62.5% All right, let's go ahead and customize the body elements. I'm going to define with height. The width is going to be 100% As for the height, I'm going to make it 100% of the viewport. Now it's time to take care of the wrapper. Let's go ahead and select these elements. First of all, define its width. I'm going to set it to tram. I want the same height for the wrapper, ATM. For that we can use one of the CS's properties called aspect ratio. If we set it to one, then it will mean that the height of the wrapper will be tram. But if we change the width, then the height will be changed accordingly. Okay. Next I'm going to set the background color. Let's use some temporary background. I'm going to use BB and also make the element rounded using border radius 50% okay? After that I'm going to place the wrapper in the center perfectly. And I'm going to do that using positions. We need position absolute. Then we have to define top and left properties. I'm going to set both positions to 50% Then in order to place the element in the center perfectly, we need to use transform with translate function. And we have to pass here -50% for the x and y directions. Okay, so that's it. Regarding the wrapper, it's placed in the center. Now I'm going to take care of the Earth. As you know, we have two different elements, I mean, the day and the night parts. Let's select both elements using the common class name. First of all, I'm going to define the width. Let's make it 100% As for the height, I'm going to use again the property called aspect ratio with the value one. Then set the position to absolute. Also make the element rounded using border radius 50% Now both elements are placed on top of each other on that circle. Now we can define the backgrounds for both parts. Let's select the first one, define background image. Let's define the path of the image. We have the folder called images, and we have to select Earth, JPG. Here we have the background image. This is the light part. Let's go ahead and do the same for the part as well. Actually, I'm going to duplicate this code. Let's change the class name we need here. And also change the name of the image we need as well. Now we see here the background image of the part. It happens because both elements have position absolute and the day part ended up behind the night one. The next thing that we're going to do is to cut the half part of the night. In order to do that, I'm going to use one of the CSS properties called clip path. I'm going to insert here the values and then I will show you where you can find the information about this property. We need polygon, the values will be the following. We need zero twice, then 50% zero, then 50% 100% then 0.100% As you can see, the half part of the it is cut off. Let's go ahead and search for Clip Path in Google. This is the website where you can play around with different shapes. Once you get your needed shape, then you can simply grab the proper CSS code from here and use it in your project. This is the very useful website and you can visit it. Okay, let's go ahead and start to work on the animation. I'm going to create CSS key frames with the name Earth. Any we're going to manipulate the background positions. We will have just two steps, from 0% to 100% We will change the position of the background by the exact same distance that the image has as the width. At 0% the background position is going to be zero and center. Then at 100% the background position is going to be 192 m is the width of the image and then the center. All right, let's go ahead and apply those tiles to the elements. Both parts will have the same animation. We need here the name of the animation followed by the duration, which is going to be 25 seconds. Then I want the animation to run infinitely. We need infinite, and also the animation is going to be linear, okay? So as you can see, the animation works perfectly and we have a nice day and night effect. Before we finish this video, I'm going to add some shadows to the earth. For that, I'm going to use before pseudo element. Let's select wrapper before element. Actually, I'm going to give this element the exact same shape that the wrapper has. Let's define the content. It's going to be empty. Then I'm going to set position to absolute. Also, I'm going to define within heights, Let's make both of them 100% and then use some temporary background color, BB. As you can see, the element ended up behind the wrapper, We don't need that, we have to place it in front of the Earth. For that, I'm going to use the Z index property and also make the element rounded. The z index property is going to be ten. We need here a higher value than zero. As for the border radius, I'm going to set it to 50% All right, let's get rid of this background from here. Also, I'm going to get rid of the background for the wrapper as well. We will have a couple of different shadows, the one will be around the Earth. Besides that, we will have two different shadows for the night and day parts. Let's use box shadow with the values minus one Ram, minus one Ram, two Ram, and the color four. Then we need one Ram twice two Ram, and the same color. Now we have the shadow around the Earth. As for the shadows inside the element, let's insert here. Inset ten M05 Ram and the black color. Then we need again inset minus 1m02m as the color. I'm going to use 933. All right, so that's it. Finally the project is done. I hope it was interesting and you enjoyed it. See you next time. 8. Project 5 - Flower: In this video, we're going to create the flower with pure HTML and CSS. Here we have the finished version of the project where you can see a regular flower with a couple of petals and with a stem. Okay, let's go ahead and start to create this project. I have prepared a new folder on the desktop called flower, which right now is empty. Let's go ahead and open this folder in VS code and create our working files for HTML and CSS. Then open the index HTML file and create a basic HTML document. For that we need to place here an exclamation mark and then hit Top or Enter. All right, at first, let's go ahead and change the title. It's going to be flower, then I'm going to link the CSS file. Let's open link and specify here the name of the CSS file. Okay, finally, I'm going to run the project to the browser using a live server. Also, let's place the editor and the browser side by side. Okay, let's go ahead and start to create an HDMl mark up. I'm going to open a deep tug with the class flower. It will include the entire content. Next, we need another deep tug, which will wrap the petals and also the circle which is placed in the middle of the flower. Overall, we will have 12 petals. Let's create them. Besides that, we need the circle. Let's open, deep tug with the class circle. Also, we need another deep tug outside of the petals, which is going to be a stem. All right, let's sit about the H mel markup. Let's move on and start to write CSS. First of all, I'm going to create some reset and default styles for every element. Let's select them using an asterisk. Then get rid of default margin and padding. Let's set both properties to zero. Also, I'm going to set box sizing to border box. Okay, Throughout the project, I'm going to use Ram as a measurement unit. By default, one M equals 16 pixels, and I want to convert one M into ten pixels. For that, we have to decrease the fault size of the HM element. We have to make it 62.5% Right now it is time to start to customize the wrapper. Deve element. I'm in the flower, let's define height. I'm going to set to 100% As for the height, it's going to be 100% of the viewport. Also change the background color. I'm going to use here, RGB value 236,232.226 Okay, that's it about the flower for now, let's move on and take care of the petals. I'm in the wrapper, let's define with height. I'm going to set both properties to for two Ram. Also, I'm going to use here some temporary background color. Let's say green. Actually I'm going to place the element in the center. And for that we can use CS's Flax books. Let's use display Flax, then justify content center and a line items center. Okay. Next I'm going to select the paddle itself. Let's define its within height. I'm going to set both of them to 15 Rams. Let's use here some temporary background color. Let's say yellow. After that, I'm going to define the position for the petals. Let's set it to absolute. We need to position elements according to the apparent elements. We need to position relative for the petals. Then let's define the top and left properties. I'm going to set both of them to five ram. All right, now we see here just one petal, but all the petals are placed on top of each other. And that's why we see here just one of them. After that, I want to change the shape of the petals using border radius. I'm going to make the element rounded on all sides except the bottom right corner. Let's set border radius to 50% then again 50% then zero, then 50% All right, after that, I'm going to skew the petals according to both directions. I mean X and Y transform skew. The values are going to be 23 degrees on both directions. As you can see, the petals are skewed. But besides that, we will need to rotate them if we use here rotate function with let's say 30 degrees. It will change the shape of the petal. And we don't need that. We don't need to use those two functions simultaneously. In order to avoid this issue, I'm going to use a before pseudo element. We'll create petals with before element and we will skew them. As for the rotate function, we'll use it with deep elements. Let's select petal with before element. First of all, let's define content to make it empty. Then we need to define width and height. I'm going to set both properties to 100% Al's set position to absolute and then create background. Use your linear gradient function with two different colors, I mean F and F. Next, I'm going to grab those styles from here and assign them to the before, to the element. Also, let's get rid of those temporary background colors. All right. After that I'm going to create a little shadow effect. Let's use box shadow with the values 0.3 m, three times, and then the color DD. Okay, So the petals are customized, and now we have to rotate them. We need to select each petal separately and use the rotate function. Let's go ahead and select the first one. Actually, we don't need to rotate the first petal. But anyway, I'm going to define the rotate function for it. The value is going to be zero. Let's duplicate this code. I'm going to rotate the second petal by 30 degrees. As you can see, the second petal is rotated, but it is rotated from the center. It happens because by default the origin of the transformation is set to center. And we need to change, actually we need to change it for pedal itself and also for the before do element as well. The origin of the transformation is going to be bottom right. Okay, The problem is fixed. Let's go ahead and define a rotated function for the rest of the pedals. The difference between the values of the rotated function is going to be 30 degrees. For the third pedal, we need 60 degrees. Then the next one is going to be 90 degrees. For the fifth pedal, we need 120 degrees. Then the next one is going to be 150 degrees. Then for the seventh pedal, it's going to be 180 degrees. Next we'll have 210 degrees. For the ninth pedal, it's going to be 240 degrees. Then we will have 270 degrees. For the 11th pedal, we need 300 degrees. For the last element, it's going to be 330 degrees. All right. Now, as you can see, we have here a much better result. Next, I'm going to take you of the circle. It's going to be placed in the center of the flower. Let's select it and define it's within height. I'm going to make both of them to five Ram. Then the color is going to be white. Let's change the position, make it absolute. In order to sensor the element, I'm going to set top and left properties, both of them to 50% so we need to transform Translate with -50% again -50% Then I'm going to set the border, it's going to be 0.1 Ram solid. And the color DDD also make the element rounded using border radius 50% All right, let's it about the circle and before we take care of the stem, I'm going to create a three D environment. And I want to rotate the flower slightly in three D space. In order to create a three D environment, we need to use property called perspective. Let's set it to 100 Ram. Then let's rotate the flower. We need to transform. Rotate X with a value 40 degrees. All right, so now we can move on and customize the stem. Let's select it, and first of all, let's define this position. Make the absolute, Then we need to define the width. Height, The width is going to be two. As for the height, I'm going to make it 60 m. Let's define the background. Let's use linear grading function. The direction of the color transition is going to be from left to right. I'm going to use here three colors. The first one is going to be RGB, 14923592. Then we will use just the green color. As for the third one, we need to use here the first RGB function with the same values. Okay, so here we have the stem, but as you can see, we need to change the position. Let's do that using transform, translate Y function, set it to 50% Also besides that, I'm going to rotate the stem according to the z axis by seven degrees. The stem is rotated. But again, we need to change the origin of the transformation. In this case, we need to make it top. Let's set transform origin to top. Finally, we need to place the stem behind the petals. For that, let's use z index property with minus one. Okay, everything is done actually. You can add here some effects or animations, and you can develop this project on your own. See you next time. 9. Project 6 - Atom Animation: In this video, we're going to create atom animation with HTML and CSS. The project is going to be a little one, but I think it will be funny and interesting. You will learn about some new CSS tricks and techniques. As you can see, we have here a typical atom, which you may have seen in your chemistry class or you may have come across one of the popular editor logos. I mean the atom. We have here a couple of circles with balls which are moving around the main ball. Let's sit about the project, let's go ahead and start to work on it. I've created a new folder on the desktop called Atom. Let's open it in VS code and create our working files for HTML CSS. Then open the index HTML file and create a basic HTML document. For that, I'm going to place here an exclamation mark and then hit Top or Enter. First of all, I'm going to change the title. It's going to be Atom. Then let's link the CSS file. Let's open link tag, specify here the path of the file. Finally, I'm going to run the project to the browser using live server. Let's place the editor and browser side by side, like so and get started. First of all, I'm going to create an HTML markup. Let's open deep tag, which is going to be the wrapper. Overall. We will have three circles and each of the circle will have one ball. Let's open, deep tug the class circle, circle one, then open another deep tag. Inside circle, we need you class ball one. Okay? Let's duplicate this code and change the class names. We need circles. I mean circle two and circle three and also ball two and ball three. Okay, let's sit about the HD mark up. Now we can start to write some CSS. First of all, I'm going to create some reset and default styles for every element. Let's use an Aster risk. I'm going to get rid of default margin and padding. Let's make both of them zero. Also, I'm going to set box sizing to border box. Throughout this project, we're going to use Ram as a measurement unit. Right now, one Ram equals 16 pixels. Because the font size of the HTML is equal to 16 pixels, I want to convert one Ram into ten pixels. And for that we have to decrease the font size of the HTML element. We need to make it 62.5% All right, let's go ahead answer to customize the body elements. Let's select it and define with height. I'm going to set with 100% As for the height, it's going to be 100% of the viewport. Also, let's change the background color. Let's use your RGB value, 46518. Okay. Next I'm going to select the wrapper, define its width. It's going to be 60 m. Then we need the same height. I'm going to use one of the properties called aspect ratio. With the value one means that if we increase the width of the wrapper, then the height will be increased as well. Also, let's use some temporary packer color, let's say CC. Here we have the wrapper, I'm going to place it in the center of the page. For that, let's use CSS grid. We need display grid, place items center. All right, After that, I'm going to create the circles. Let's select them using common class name. First of all, let's define the position. I'm going to make it absolute. Let's 40 Ram, we need the same height. Let's use again aspect ratio with value one. Then I'm going to use border right now with higher width, let's say 0.5 Ram. Then this style is going to be dashed. That's the color. Let's use zero. Also, make the element rounded using border radius 50% Okay, here we have the circles. They are placed on top of each other, that's why we see here just one circle. Actually, we don't need this temporary background anymore, let's get rid of it and then let's place these circles. The center of the wrapper. Using again, C's grid. We need display grid and place items center. All right, now we have to place each circle in this position. I mean, we should rotate them. We need to place them in a three D environment. And for that I'm going to use one of the CSS properties called perspective. Let's set it to 100 Ram. All right, after that, let's select the first circle and rotate it according to y and x axis. We need to rotate circle one according to Y, x by 70 degrees. As for the x direction, it's going to be 40 degrees. As you can see, the first circle is rotated. Let's do the same for the rest of the circles. Let's duplicate this code. Change the class name we need here. Rotate x with the negative value -40 degrees. Then again, duplicate this code for the third circle, we need different values. Rotate Y is going to be 180 degrees. As for the rotate X, it's going to be 90 degrees. All three circles are rotated, but the third one is not visible right now. In order to make it visible, we need to look at the three D space from a different angle. To do that, we can use one of the CS's properties called perspective origin. We need to change it according to x and y directions. The first value is going to be 76% As for the second value, I'm going to use 27% Now I think it is a good angle to look at the project and a third circle is visible. All right, now it's time to move on and start to work on balls. Each circle will have one ball. First of all, in order to share the three D environment for the balls as well, we need to use transform style where the value preserve three D. Now we can create the balls, let's select them using a common class name ball. I'm going to define width, let's make it six Ram. Then we need the same height. Let's use again aspect ratio with the value one. I'm going to change the background. In this case, I'm going to use radial gradient. It mixes the colors from the center. The first color is going to be RGB 13521424. Then the second color is going to be RGB 44, again, 44167. We need to mix those colors after 70% let's use here 70% also change for the radius, make the element rounded. That's 72, 50% Okay, so we have here the balls. And now I'm going to rotate them because right now they don't look quite good. We need the same rotation for the first and second balls. Let's select them simultaneously. And rotate them according to the white direction by -90 degrees. As for the third ball, we need to rotate it according to both directions, Y and X. Rotate Y is going to be 90 degrees, rotate X is going to be 90 degrees as well. All right, so now we have much better results, but the balls are not placed correctly. We need to change the positions. Let's set position to absolute, then the top position is going to be minus three ramp. Actually the circles should go in the center of the balls. We need some calculations for the left position. Let's use calc function. We need 50% minus three Ram, which is a half of the width of the ball. Okay, the balls are positioned and now we can start to work on the animations. We're going to move the entire circle and not the ball. Let's go ahead and use CSS key frames. I'm going to create CS key frames for the first circle. Let's call the animation circle one. We will have two different steps. At 0% we need the default position we need to transform, rotate Y. With seven degrees and rotate x 40 degrees. At 100% we need the same rotations. Plus rotate Z with 360 degrees. Okay, let's go ahead and apply those styles using animation property. We need the name circle one. The duration is going to be 2 seconds. Also, we need to run the animation infinitely. It's going to be linear. As you can see, the circle is moving and the ball is moving with the circle as well. But actually that's not what we need about the ball. I'm going to run the animations for the rest of the circles as well, and then we will fix that problem. Let's go ahead and copy this code from here and paste it for the second circle. Let's change the name. In this case we just need to make the values of the rotate x functions negative, then grab the animation. Change the name. All right, let's go ahead and do the same for the third circle as well. In this case, we need here a different values. Let's change the name then. At 0% rotate y is going to be 180 degrees. As for the rotate X, it's going to be 90 degrees. At 100% again, we need the same rotations I, rotate Y and rotate X. Also, we need to add here rotate Z with the same value. Okay, So we need the animation property with circle three. All right, all these circles are animating and now we can take care of the balls. We need the animations for them as well. During the animation, we need the balls to display with their front side. We need to rotate them, we need to rotate them against the circles during the animation. The first two balls will have the same animation. Let's use SSkeframes. For the name ball, we will have two steps. At 0% we need rotation according to the y x by -90 degrees. At 100% we need the same rotation. Plus rotate x with -360 degrees. Then we run the animation ball m 2 seconds, infinite and linear. Now as you can see, we have here a much better result. We used here rotate x function with -360 degrees. Actually it will always compensate the movement of the circle. Okay, let's do the same for the third ball as well. Let's grab this code from here and make some changes. I'm going to change the name, it's going to be both. Then we need rotate Y with 90 degrees. Also, we need the rotation according to the X axis. With the same value, at 100% we need rotate Y 90 degrees. Then rotate X. In order to move the ball the entire circle and also maintain the correct position, we need to rotate it by 450 degrees because it is already rotated by 90 degrees. 90 degrees plus 360 degrees will be 450 degrees. Okay, Let's use animation. We need both any 2 seconds, infinite and linear. Okay, Now everything works fine. We just need to take care of the main ball. We're going to create it using before pseudo element. I mean before of the third circle. We will use before pseudo element because it will help us to manage the correct ordering of the elements. First of all, I'm going to stop the animation for the third circle and the ball as well in order to make the working process easier. Then select circle three before. Let's define the content, make it empty. The width is going to be 12 Ram. As we need the same height. We use again aspect ratio with the value one. The background is going to be, again, radial gradient. The first color is going to be white. We need RGB 25053 times. Then the second color is going to be, again, RGB value 55132146. We need to mix those colors after 50% in order to make the element visible. Let's define position, make it absolute. Here we have the before suit element. Actually we need to make it rounded. Let's use border radius, 50% We need to change its position. Let's place it in the center. We need left position 50% the top 50% In order to place the element in the center perfectly, we need transform translate function -50% and -50% Now the element is positioned correctly and the only thing that we have to do is to rotate it. I'm going to rotate the element according to x axis by 90 degrees. All right, let's sit about the main ball. Let's run back the animation of the third circle. As you can see, the main ball is rotating as well. And we don't need that. We need to maintain it as like fixed. For that, let's create a new animation with the name main ball. An we will have two steps. At 0% we need the default position. We need to translate -50% -50% and rotate x 90 degrees. As for the 100% we need here, the same values plus rotate y -360 degrees. We use here the same technique which we used in the previous cases. Let's run the animation main plan, 2 seconds, infinite and linear. All right, now everything works fine. Before we finish this video, I'm going to do a couple of things. Let's decrease the width of the borders, make it 0.1 Besides that, I'm going to use a delay time for the first circle animation. Let's use -1 second. Actually, this negative value means that the animation will miss the first second and will run directly from the second second on the first run. All right, finally we're done with this project. I hope you enjoyed it and learned some new stuff. See you next time. 10. Project 7 - Helicopter: In this video, we're going to build a helicopter with HTML and CSS. As you can see, we have here a flying effect. The helicopter is flying over the city, the blades are moving. This entire helicopter is created with HTML and CSS, and actually it's not an image. Okay, that's all about the project. Let's go ahead and start to create it. I have prepared a new folder on the desktop called Helicopter, in which we have another folder for the images. Let's go ahead and open this folder and BS code and create our working files for HTML and CSS. Then open the index HTML file and create a basic HTML document. Let's place here an exclamation mark and then hit up or Enter. All right, first of all I'm going to change the title. It's going to be Helicopter. Then let's link the CSS file, open link tag and specify here the name of the file. All right, finally I'm going to run this project to the browser using live server. Let's place the editor and the browser. All right, let's go ahead and start to create the HDML mark up. Let's open the deep tag, which is going to be the container. Then we need another dip tug with the class helicopter. It will include all the parts of the helicopter. The first one is going to be plate, which will include main. Next we will have must, next comes cockpit. Then we'll have landing skis. We'll have two landing skids and they will have common class names landing skid and also the individual classes landing skid one and landing skid two. All right, after that we have tail comb. Then the next part is going to be tail fin. Finally, we need here tail rotter. Okay, so let's sit about the HTML markup. Let's move on and start to write some CSS. First of all, I'm going to start to write some reset and default styles. Let's select every element using an risk. I'm going to get rid of default margin and padding. Let's set both properties to zero. Then also I'm going to set box sizing to border box. Throughout this project, we're going to use Ram as a measurement units. Right now, one Ram equals 16 pixels. And I want to convert one Ram into ten pixels. For that, we need to decrease the font size of the H demil element, and we have to make it 62.5% All right, let's move on and take care of the body elements. I'm going to define its height. The width is going to be 100% As for the height, I'm going to make it 100% of the viewport and also change the background color. I'm going to use here, light green. All right, after that, I'm going to customize the container. Let's select it and define its height. The width is going to be 150 Rams height. I'm going to make it 80 Rams. Change the background color. I'm going to use here RGB value 88179253. All right, we need to place the container in the center of the page, and for that let's use a CSS grid. We need display property with the value grid. Then place items center. Okay, that's it about the container for now, we'll take care of it a bit later. Next, I'm going to start to build the helicopter. Let's go ahead and select the wrapper deve element and define it's within height. The width is going to be 80 Ram. As for the height, I'm going to make it 60 Ram. And also change the background color, make it white. Next I'm going to place the helicopter in the center of the container. Again, I'm going to use CSS grid. We need display grid and place items center. Okay, the first part that I'm going to create is a blade. Let's select it. Define its with height. The width is going to be 40 Ram. As for the height, I'm going to make it two Ram. And also change the background color, make it black. Here we have the plate. Let's go ahead and change its position. For that, I'm going to use position absolute. Actually, we will need position absolute for every part. Let's select all the developments inside the helicopter. Set position two absolute. We will position elements according to the wrapper development. I mean the helicopter, we need position relative for this element. Okay, let's change the position of the blade. I'm going to set left property to 20 Ram. As for the top position is going to be 15 Ram. Okay, let's say about the blade for now. Actually we will use some three D effects for some of the parts of the helicopter. We will come back to the blade later. Next we have the main rotor. Let's define its within height. The width is going to be five Ram. As for the height, I'm going to make it two Ram. Let's change the background color. Right now I'm going to use red color, but then we will change it also. Let's define left position, make it 17.5 Ram. Okay, let's move on and customize the next part which is going to be the cockpit. Actually, this element is going to be the entire cabin of the helicopter and not only the window. Let's define with height. I'm going to set width to 20 Ram. Then the height is going to be ten Ram. Let's change the position. Let's set top property to 18.5 Ram. Then the left position is going to be 30 Ram. Also change the background color, make it black. Okay, now we have to take care of the shape of the cockpit. It's going to be rounded and we will do that using border radius. The top left corner is going to be 50% then top right corner will be 40% right corner will be 40% We need the same for the bottom corner. All right, after that, I'm going to take of the actual cockpit I'm in. The window will create it using a before set element. Let's select cockpit with before sue the element. First of all, we need to define the content. Let's make it empty. Next, I'm going to define with and height. Width is going to be eight Ram. Then we need height, it's going to be five Ram. Also, let's change the background color, make it also, let's set position to absolute. Okay, now we need to change the position of the element slightly and we have to make it rounded in order to fit the cabin. Let's set top property to 0.2 Ram. And then in order to make the element rounded, I'm going to use again border radius. We need 100% then zero, then 40% again zero. Okay. That's it about the cockpit. Next I'm going to customize the landing skits. As you know, we have two landing skits, they have a common class name. Let's use it and select both elements. First of all, I'm going to define won height. Let's set with 223 Ram, then the height is going to be ten Ram. Also change the background color. I'm going to use red color. Then we will change it. We will create the actual landing skits using borders. We need border bottom with values one Ram solid, the color is going to be black. Then we need border left with values one Ram solid. Transparent. Also we need border right, which will have the same values. Finally, in order to change the shape of the element, let's use again border radius. The values are going to be 002.5 Ram and five. Okay, now we have a much better result. Actually we no longer need this red background color. Let's remove it. After that, we need to position the elements at the bottom of the cabin. So let's select Landing, Ski One. Define top and left properties. The top position is going to be 22 Ram. As for the left position is going to be 26 Ram. Let's duplicate this code, change the name. The top position is going to be 20.5 Ram. As for the left position is going to be 26.5 Ram. All right, the landing kits are positioned and now we have to connect them to the cabin. For that I'm going to use before and after the elements. Let's select both of them together. First of all, we need to define the content. It's going to be empty. Then we need to width and height. The width is going to be one Ram. As for the height, I'm going to set it to five Ram. Also, let's change the background color, make it black, and set position to absolute. All right, so now we need to change the positions. Actually both of them will have bottom position set to zero. But besides that, we need to define a left position for each element separately. Let's select landing skit before set left position to eight Ram. Then I'm going to copy this code. We need a, we have to set let position to 18 Ram. Allright, so with the landing skits we're done. And the next part that we're going to customize is a tail comb. Again, I'm going to define width and height. The width is going to be 25 Ram, then the height is going to be two Ram. And also change the background color, make it black. Okay, so here we have the tail cone. Let's go ahead and change its position. I'm going to set top property to 22 Ram. Then the left position is going to be 47 Ram. Finally, I'm going to change the shape of the elements using again border radius. We need here the values zero, 100% 100% and zero. All right, let's sit about the tail co, next we have the tail fin. Let's select it and first of all define with height. The width is going to be two Ram, then the height will be eight Ram. Again, we need black background color. Okay, so here we have the tail fin. Let's go ahead and change its position. Let's define top and right properties. The top position is going to be 19 Ram. As for the right position, let's make it 7.5 Ram. Finally, let's change the shape of the element using border radius. The values are going to be 100% 00.100% Okay, so the tail fin is ready and now we have to take care of the last part of the helicopter, which is the tail rotor. Let's define width and height. The width is going to be one Ram. As for the height, I'm going to make it nine Ram. Also, we need to change the background color. Let's make it black. Then we need to change the position. Let's define top and right properties. The top position is going to be 18.5 Ram. As for the right property, let's set it to 6.5 Ram. Okay, before we make the helicopter fly, we need to customize the mast which connects the cabin to the blade. Let's select this element. First of all, let's define its within height. I'm going to set with one Ram, then the height is going to be two Ram. Then change the background color, make it black. Then let's change the position we need. Left property with the value 39.5 Ram, then top position with the value 17 Ram. Okay, all the parts are customized and now we have to make the helicopter fly. Let's start with the blade. As we said, we need some three D effects for the blade. For that, we have to create a three D environment. In order to do that, we need to use one of the CS's properties called perspective. Let's set it to 100 Ram. All right, after that, we need to rotate the blade. For that, I'm going to transform with the rotate x function. We need to rotate the element according to the x direction. The value is going to be 90 degrees. The blade is rotated and now we have to rotate the main rotor. But before that we need to share three D environment for the main rotor. In order to do that, we have to assign to the blade transform style with the value preserve three D. Now we can rotate the main rotor. Let's transform rotate x with the value -90 degrees right. After that, I'm going to add a little part to the main rotor. In order to achieve much better effect, we need to make the main rotor look like a cross. And I'm going to do that using the before element. Let's select main rotor with before element. First of all, I'm going to define the content, Let's make it empty. Then we need to define with and height. I'm going to make both properties 100% We then change the background color. I'm going to use here some temporary background color. Let's say blue also. Let's set position to absolute. Here we have the four element and I'm going to rotate it. Let's transform rotate y, The value is going to be 80 degrees, okay? Besides that, we need a three D environment for this element as well. For that, we need to use transform style for the main rotor with the value preserve three D. Also, I'm going to get rid of this white background from here. Besides that, I'm going to change the colors for the main rotor. Let's make it black. All right, now it's time to animate the plate. We need to rotate this element. Let's create CSS key frames. The name is going to be Blade An overall we will have two steps, 0% and 100% At 0% we need transform rotate X function with value 90 degrees. Also rotate Z with zero throughout the animation. We need to rotate the elements according to the z direction, 0-360 degrees, at 100% We need to transform rotate x with 90 degrees and rotate Z with 360 degrees. Okay, the key frames are ready. Let's go ahead and run the animation. First of all, we need here the name of the key frames. Blade any, then the duration is going to be point 1 second. The animation should run infinitely, so we need here infinite. Also the animation is going to be linear. Okay? So as you can see, the blade with the main rotor is moving. Now we need the same thing for the tail rotor as well. Let's create key frames within a tail rotor. Anim, we need to rotate the element according to the x direction, 0-360 degrees. At 0% we need to transform rotate x with zero. Then at 100% we need to transform rotate x with 360 degrees. Let's go ahead and run the animation. The name is going to be tail rotor Anim. Then we need duration point 1 second. Again, infinite and linear. All right, the helicopter is flying and now we have to take care of the background of the container. Let's add here an image, we need URL. Then folder called images, and we need to select Gng. Here we have the background, but it doesn't look good. We need to change the size of the background. I'm going to give it the same size that the container has. The background size will have two properties, 150 Ram and then auto. Now we have the better results. But as you can see, the background image is repeated. Actually, we need to repeat it only horizontally. Let's add here repeat x. Now the image is no longer repeated, but we have to change its position. We need to move it down by 100% Let's define background position with the values 0.100% All right, now the background looks nice and now I'm going to add to it animation. Let's create sky frames with the name BGN. We will have two different steps, 0% and 100% During the animation, we need to change the position of the background at 0% We will have the default position 0.100% As for the 100% the background position is going to be 150 me, hundred percent. Let's run the animation. We need the name BG Anim. Then the duration is going to be 10 seconds. Again, the animation should run infinitely. Also, it should be linear, okay? As you can see, the background is moving and we have here a nice flying effect. Actually, we're almost done with this project. I just need to do a couple of things. I'm going to rotate the helicopter slightly. I'm going to rotate it according to the y direction. The value is going to be -15 degrees. In order to make the project nicer, I'm going to change the shape of the container. Let's do that using border radius. We need here 0.5 Ram and 100 Ram. All right, so that's it, finally with this project, we're done. I hope you enjoyed it and it was helpful. See you next time. 11. Project 8 - Bicycle: All right, in this video we're going to build a next project which is a bicycle. As you can see, we have here a typical bicycle. It is moving the wheels and the pedals are rotating using CSS animations. All the parts are created using HTML. We don't use here any of the images. All right, let's go ahead and start to build the project. I have created a new folder on the desktop called Bicycle, which right now is empty. Let's open it in VS code and create our working files for HTML and CSS. Then open the index mal file and create a pasic Ml document. For that, we have to place here an exclamation mark and then hit top or Enter. First of all, I'm going to change the title. It is going to be bicycle. Then let's link the CSS file. Open link, and specify here the name of the CSS file. Finally, I'm going to run the project to the browser using live server. Then place the editor and the browser like, okay, we're ready to start to create the project. I'm going to start with the HTML markup. Let's open the deep tug with the class bicycle. It will include all the different parts of the bicycle. Let's start with the front wheel of deep tug. This element will have two different classes, one for the common styles and the next one for the individual styles. We need wheel and front wheel. Also we'll have back wheel. Let's duplicate this line of code and change the class name. Next comes the front fork. This element will include next, we'll have handlebars, then crossbar. After that we'll have frames, frame one, frame two. The next part is going to be set tube, which will include other development. Then we'll have can then chain pedals and back fog. We can so that's sit all the parts are created and now we have to start to style them. First of all, let's create some reset and default styles. I'm going to select every element using an asterisk. Let's get rid of default margin and putting, I'm going to make both properties zero. Also, I'm going to set box sizing to border box. Throughout this project, we will use Ram as the measurement unit. By default, one Ram equals 16 pixels, and I want to convert one Ram into ten pixels. For that, we have to decrease the font size of the HTML element. Let's set it to 62.5% Okay, let's move on. Answer to work on the body element, I'm going to define its within height. The width is going to be 100% as body height. I'm going to make it 100% of the view port. Next, I'm going to customize the bicycle. Let's define its width and height. The width is going to be 85 Ram, then the height will be 60 Ram. Also, I'm going to change the background color. Let's use here some temporary color. Okay. Now I'm going to assent to the bicycle and page. For that, let's use CSS grid. We need to assign to the body element display grid and place items center. All right, so the bicycle is centered and now I'm going to start to customize the different parts of the bicycle. Let's go ahead and start with the wheels. Let's define width, it's going to be 30 Ram. Then I'm going to set height to the same value and therefore I'm going to use one of the properties called aspect ratio. We have to set it to one. In this case, if we increase or decrease the width, then the height will be increased or decreased automatically. Okay, let's change the background color, make it black. Also, I'm going to make the element rounded using border radius, 50% Next, I'm going to take care of the position. Actually, we need to position all the parts individually. I mean, we need to position absolute for every element inside the bicycle. Therefore, let's select every development and assigned to them position absolute. Besides that, we have to position elements according to the bicycle. I mean the parent element, let's assign to it position relative. All right, next let's define a bottom position for the wheels. I'm going to set it to zero, then I'm going to define the border. Let's set the width, make it 0.5 Ram. The border is going to be dashed. Also, let's use black color. As you can see, the border is not visible, the black color covers it. In order to fix that, we need to use one of the properties called background clip with a value content box. All right, let's sit about the wheel right now. Next we need to create this gray part inside the wheel. We will do that using an after pseudo element. Let's select Wheel with the after pseudo element. First of all, I'm going to define the content. It's going to be empty. Let's set with 224 Ram. Again, I'm going to use aspect ratio with the value one, then use some temporary background color. Let's say red also set position to absolute. Next, I'm going to make the element around it using border radius 50% Also, I'm going to place it in the center of the wheel. For that we can use CSS grid, display grid, and place items center. All right, after that, let's add a border to the after element. The width is going to be 9.5 Ram. The border is going to be solid and also lets you see color DDD. As you can see, the border made the element larger. In order to fix that, we have to use box sizing. Border box actually we have already defined this property in the default styles, but it is not applied to pseudo elements, so we need to use it again. Okay, finally I'm going to get rid of this red background color. Okay, now both wheels are placed together and I'm going to move the back wheel to the right side. Let's select back wheel and set its right position to zero. I'm going to get rid of background color from the bicycle. All right. Next I'm going to style the front fork. First of all, let's define width and height. Width is going to be three Ram. As for the height, I'm going to make it 17 Ram. And then change the background color, make it black. Let's define the position of the elements. Let's set bottom property to 15 Ram. As for the left position, it's going to be 16.5 Okay, after that we need to rotate the fork. We need to rotate it according to the Z direction. We need to transform, rotate Z with the value of 20 degrees. Actually, the fork is rotated, but that's not what we want. It is rotated from the center, because the origin of the transformation is set to center by default. We need to change transform origin. And we have to make it left bottom. All right, let's go ahead and take a look at the finished project. As you can see, the fork has a little additional part down below. I'm going to create this part using before suit element. Let's select front fork, followed by the before suit element. First of all, let's define content, make it empty. Then I'm going to define width and height. Let's set with 22m. The height is going to be five Ram. Also, I'm going to use here some temporary background color. Let's use again red and then set position to absolute. Here we have the elements, we have to change its position. Let's set bottom property to zero. Then let's define left position, make it 0.5 All right, finally we need to rotate the elements. Also we have to move it a little bit to the left side. Let's transform then. Rotate Z 30 degrees. We have to translate x function with the value minus one m. Finally, let's change the background color, make it black. The next part that we're going to customize is going to be a tube. Let's select it and define its width and height. The width is going to be two Ram. As for the height, let's make it 12 Ram. Change the background color, make it black. Then define left and top properties. The left position is going to be 0.5 Ram. As for the top position, I'm going to make it -12 Ram. Like the front fork, the tube will have a little additional part as well. I mean this part here. Let's create it using before pseudo element. Let's select tube followed by the before pseudo element. First of all, define the content, make it empty. Then I'm going to set within height, both of them to three run, change the background color, make it black. Then I'm going to change the position of the element. Let's set position to absolute, Then use left and top properties. The left position is going to be -0.5 run. As for the top position, I'm going to make it 0.5 run right. Let's say about the tube. Let's move on and customize the next part of the bicycle, which will be the handlebars. First of all, I'm going to define with height. Let's set with 28 Ram, then the height is going to be two Ram. Let's change the background color, Use again black color. Then I'm going to define the top and left positions. The top property is going to be 18 Ram. As for the left position, I'm going to make it 19 Ram. Okay, next let's rotate the elements transform. Rotate Z function with the value 15 degrees. All right, let's take a look at the finished project. As you can see, the handle bars have some additional parts I'm going to use again before and after Cd elements. Let's select handle bars followed by the before Cd element. I'm going to define the content, Let's make it empty. Then I'm going to set with two form. We need the same height. I'm going to use again aspect ratio with the value one. Then change the background color, make it black. Next, let's define position, make it absolute. Then I'm going to change the position of the elements and also make it rounded. Let's set top property to minus one Ram. Then the left position is going to be minus one Ram. And also we need here border radius with the value 50% All right, let's sit about the before elements. Let's take care of the second part. I'm going to select handlebars, followed by the after element. Let's make the content empty. Then I'm going to define width and height. The width is going to be 30 Ram, then the height is going to be two Ram. Let's change the background color, make it black. Also, we need to set position to absolute. Next, let's define left position and make it -15.5 Ram. After that, I'm going to rotate the element and we need to make it slightly rounded. Let's use transform rotate y. In this case we need to rotate the element according to the Y axis. The value is going to be -70 degrees. Also I'm going to use border radius two Ram. All right, so the only thing that we have to do regarding the handlebars is to rotate the after s element in a three D space. For that, I'm going to use one of the properties called perspective. It allows us to create the three D environment. Let's set this property, 250 Ram. As you can see, that's it about the handlebars. Next I'm going to take care of the crossbar. Let's select this element, and first of all, define with height. I'm going to set with 227 Ram. Then the height is going to be 3.5 Ram. Also change the background color, make it black. Then we need to define top and left properties. The top position is going to be 22 Ram. As for the left position, I'm going to make it 26 Ram. After that, we need to rotate the elements. Let's use transform rotate with the value 20 degrees. Again, the element is rotated from the center and we have to change the transform origin. In this case, we have to make it left top. Okay, finally let's change the shape of the elements. It should be rounded on the right side. I'm going to use border radius. The values will be the following. We need zero, 50% 50% and again zero. All right, with the cross part, We're done. Next, we need to take here of the frames. Let's select the frame one, define width and height. Width is going to be 32 Ram. Then I'm going to make height 3.5 Ram. Change the background color, make it black. So I'm going to define the positions. The top property is going to be 25 Ram. As for the left position, let's make it 26 Ram. Next I'm going to rotate the element. Let's transform rotate. The value is going to be 45 degrees. Again, we need to change the origin of the transformation. Let's transform origin and make it left top. Finally, let's change the shape of the element. Use again border radius with the value 0% 50% and again zero. All right, so let's see about the first frame. Let's move on and customize the second one. Select frame two, and again define width and height. In this case, the width is going to be 25 Ram. Then the height will be two m. Let's change the background color, make it black. Then I'm going to define top and left positions. The top property is going to be 44 m. As for the left position, I'm going to make it 45 Ram. As conceded, the part of the element is not visible, it is placed behind the wheel. So let's go ahead and fix that. Using the Z index property, I'm going to set it to some higher value than zero. Let's say ten. All right, let's move on and take care of the next part, which is going to be a tube. Let's define with in height. The width is going to be three Ram. Then I'm going to make height 18.5 Ram. Let's change the background color, make it black. I'm going to change the positions of the element. The top property is going to be 30 Ram. Then we need left position, it's going to be 47 Ram. Also, I'm going to rotate the element. Let's transform rotate Z with value 15 degrees, see above the tube. If we take a look at the finished project, you will see that tube has two additional parts. Again, I'm going to use before and after pseudo elements. Let's select tube followed by the before pseudo element. First of all, let's define content, make it empty. Then I'm going to define the width. It's going to be two Ram. Then we need height, which will be 11 Ram. Let's change the position, make it absolute. Then I'm going to set background color to black. Then let's define top and left positions. The top property is going to be -11 Ram. As for the left position, I'm going to make it 0.5 Ram. Okay, so let's see about the first part. Let's move on and take care of the second one. Actually, I'm going to duplicate this code. Let's change before into after. Then I'm going to change the width. It's going to be 2.5 Ram. The height is going to be 1.5 Ram. We need here, back on color to be black. Let's change top and left positions. The top position is going to be minus three Ram. As for the left position, I'm going to make it 0.25 Ram. All right, let's move on and customize the seat. Let's define with height. I'm going to make width 12 Ram. Now the height is going to be three Ram. Also change the background color, make black. Then we need to change the top and left properties. The top position is going to be -12 Ram. Then the left position will be minus six Ram. Next, I'm going to rotate the seat. Let's transform. Rotate with the value -12 degrees. Also, we need to change the shape of the seat. Let's use border radius with the values 20% then one Ram twice, and 80% All right, let's sit about the seat next. I'm going to take care of the pack fork. Let's define with height. I'm going to make with two Ram, then the height is going to be 25 Ram. Let's change the background color, make it black. Also, we need to change the left and top positions. The left position is going to be 60 Ram. Then the top property is going to be 26 Ram. Also, we need to rotate the elements. Let's just transform rotate Z with the value -55 degrees as considered. The part of the back fork is not visible, it is placed behind the wheel. We need to use again the Z index property. Let's set it to ten. Okay, As conceded, the most part of the bicycle is built. Next we need to take care of the crank. Let's define with and height. I'm going to set both properties to ten Ram. Then change the background color, make it black. Also, we need to make the element rounded using border radius percent. Then let's change the position of the crank. Let's define top and left properties. The top position is going to be 40 Ram. As for the left position, I'm going to make it 40 Ram as well. Next, let's add the border to the crank. The width is going to be 0.3 Ram. The border will be dashed and also define the color, Make it black again, As you can see, the background color covers the border. We need to use again. Background clip with value content box. All right, let's sit about the crank. Let's move on and take care of the petals. Select this elements define within height. The width is going to be 1.5 Ram. Then the height will be 17 Ram. Let's change the background color, make it black. Also change the position of the element. We need to use top and left properties. The top position is going to be 37 Ram. As for the let position, I'm going to make it 44 Ram. Okay, next let's rotate the element. I'm going to make it slightly rounded. Let's use transform Rotate Z with the value -12 degrees. Also we need to border radius 0.5 Ram. All right, as you can see from the finished project, we need to adhere the actual petals, those two parts. Again, let's use before and after. See the elements. Both elements will have some common styles. I'm going to select both of them together. Let's define content, make it empty. Then we need to define w and height. The width is going to be five, then the height will be 1.7 Ram. Change the background color, make it black. Also, we need to set position to absolute. Then let's define left position. It's going to be -1.8 Ram. Lastly, I'm going to make the elements rounded. Use border radius with the value 0.3 m. Right now, both elements are placed together. We need to define the positions separately. Let's select petals before and define top position. Make it 0.2 run. As for the pedals, after we need to set bottom property, 2.2 run. All right, that's it with the petals, we are done. And the last part that we need to customize is a chain. Let's define with height. The width is going to be 31.5 Ram. Then the height will be 8.5 Ram. Also we need border. Let's make it 0.5 Ram, solid black. And then define the position of the chain. The top position is going to be 41 Ram. As for the let position, I'm going to make it 40.5 Ram. Okay, next we need to make the chain rounded. So let's use border radius with the values five Ram, 50% 50% again five Ram. Finally, we need to make the entire chain visible because right now it is partially hidden. Let's use against the index with the value ten. All right, finally we have finished building the bicycle, and now we have to take care of the animations. Let's go ahead and start with the wheels. We need to rotate them by 360 degrees. Let's create key frames. I'm going to call it bicycle Anim. Actually, we will need the same key frames for all the parts that will move. In this case, we'll have two steps. At 0% we need to define transform property with the rotate function and the value is going to be zero. At 100% we need to rotate the element by -360 degrees. Let's go ahead and run the animation. We need the name of the key frames. Bicycle Anim then the duration is going to be 5 seconds. The animation should run infinitely. Also, it's going to be linear, right? As continue, the wheels are rotating and now we have to make the crank and the petals work. Actually, as I said already, we will need the same key frames. We just need to define the animation property. The only thing that we need to change here is duration. It's going to be 10 seconds for both elements. I mean, the crank and the pedals. As you can see, the crank and the pedals are rotating. The only thing that we have to do is to run the animation for the before and after suit elements. But in this case they should be rotated in the opposite directions. For that, we need to add here one additional value, reverse. All right, so that's it, we have finished working on the bicycle, I hope it was interesting and helpful. Let's move on to the next project. 12. Project 9 - 3D Room: All right, it's time to build our next project, which is going to be a three D room. As you can see, we have here a room in three D space. There is a table in the center of the room, and we have a letter on the table. If we click the button, read later, then we will reach to the table and the letter will rotate. If we click again the button, then we'll move back. Okay, let's sit about this project. Let's go ahead and start to create it. I prepared a new folder on the desktop called Three D room, which right now is empty. Let's go ahead and open it in VS code and create our working files index of the HTML style CSS and scripts. This project will use a little bit of Java script. Let's open the index of the HDL file and create a basic HDmL document. For that, I'm going to place here an exclamation mark and then hit Tab or Enter. First of all, let's change the title. It's going to be three D room, then link the CSS and Java files. Open link tag and specify here the name of the file. As for the script file, I'm going to open script and specified name of the Gels file in the source attribute. All right, so now I'm going to run the project to the browser using live server. Also, let's place the editor and the browser like, okay, at first I'm going to create the H ml markup. Let's open the deep tug which is going to be the room inside the room, we will have two different elements. The first one is going to be the button. Let's open button tag with the class BTN with the text read letter. As for the second one, it's going to be the table. Inside the table, we'll have a couple of different elements. The first one is going to be the letter. Let's open H, three heading tag with the class letter. Let's insert here some dummy text. Next we will have three legs of the table. Let's open tag with the class table leg. Also, we need here another table one. Let's duplicate this line of code twice and then change the class names. Okay, finally we need here floor. Let's open tag with the class floor. All right, so the HD mal markup is ready and now it's time to start to write some CSS. First of all, I'm going to create some reset and default styles. Let's select every element using an asterisk. I'm going to get rid of default margin and padding. Let's set both properties to zero. Also, I'm going to set box sizing to border box. Throughout this point, we'll use Ram as a measurement unit. By default, one Ram equals 16 pixels, and I want to convert it into ten pixels. That we have to decrease the font size of the HTML element. Let's make it 62.5% All right, we are ready to customize the room. Actually, I think will be better if we hide the button in the letter for a while because I'm going to create the table. Let's comment both elements, then I'm going to select a room. First of all, let's define with height. I'm going to set width to 100% As for the height is going to be 100% of the viewport. Then change the background color, make it black. Okay, next I'm going to take care of the table. First of all, let's define its within height. I'm going to set both properties to 60 an then I'm going to change the background. In this case, we will use a radial gradient function. It allows us to create color transition from the center of the element. I'm going to insert two different colors, both of them will be RGBA values. The first line is going to be white color. We need 25053 times, then the opacity 0.9 As for the second color is going to be 3819123, and the opacity is going to be 0.9 Okay, Next let's make the table rounded and also create the border. Let's set border radius to 50% and then create border bottom with values two solid. The color is going to be RGB 153,233.253 After that, I'm going to place the table in the center of the page. For that, let's use a CSS grid. We need display grid and place items center. Okay, the table is centered. And now I'm going to rotate it. Also, I want to move the table inside the room deeper. Before we do that, we have to create a three D environment for that. I'm going to use the property called perspective. Let's set it to 100 Ram. After that, I'm going to rotate the table. Let's use transform property. We need to rotate the table according to the x axis. The value is going to be 70 degrees. Also, we need to move the table according to the z axis. Let's translate Z with the value ten Ram. Okay, the table is rotated. And now we have to take care of the legs. As you know, all three legs have a common class name table leg. Let's select it and define with and height. The width is going to be three Ram. As for the height, I'm going to make it 35 Ram. Also change the background color. Let's use your RGBA value 29113116 and the opacity 0.8 Okay, here we have all three legs, but as you can see, we need to take care of their positions. Let's set the position to absolute. Then define top and left properties. The top position is going to be 30 Ram. As for the left position, I'm going to set it to 28.5 Ram. All right, so now we need to customize each leg separately. Let's go ahead and start with the first one. We need to rotate the leg according to the X and Z Xs. Before we rotate the leg, we need to share a three D space for the leg as well. In order to do that, we need to use property called transform style with the value preserved, three D. Okay, After that we can rotate the leg. Let's select table leg one and then use transform rotate x with the value -60 degrees, rotate with the value 40 degrees. All right, so as you can see the leg is rotated. But it is rotated from the center because by default the origin of the transformation is set to center and we need to change it and make it top. Okay, now we have a much better result. Next, I'm going to make the leg rounded, so let's use border radius, five Ram and one Ram. So I'm going to add a border on the right side and also at the bottom. Let's use border right with the values 0.3 Ram solid. The color RGB, 388587. Let's duplicate this line of code and change border, right into border bottom. All right, let's sit about the first leg. Let's move on and take care of the second one. Actually, I'm going to duplicate this code. Let's change the class name. It's going to be two. The value of the rotate Z function will be negative. Also, I'm going to change the values of the border radius. We need one Ram and five Ram. Lastly, instead of the border right property, we need here border left. Okay, the second leg is ready. Let's move on and customize the third one. Let's duplicate again the code, change the class name. We need here table leg three. In this case, we just need to rotate the elements according to x x. And the value is going to be -140 degrees. Border radius is going to be one Ram. Instead of border bottom, we need border, right? All right, let's see about the legs, and actually the table is ready. Next, I'm going to take care of the floor. Let's select this element and first of all define with in height. Right now I'm going to make the floor a little bit smaller and then we will change those values. The width and height are going to be 60 Ram. As you know, the floor looks like the chest blackboard. And we're going to create it using one of the functions called repeating conic gradient. This function belongs to the background image property. We will mix two different colors and we will manage the alignment of the cells using some degrees. The first value in this function defines the direction of the cells. I'm going to pass here from 90 degrees. Next we need to specify the first color. It's going to be black. And we need here zero degrees and 90 degrees. Actually, this will create one black cell. Next, we need to specify the second color, which is going to be 333. I mean the gray color. Also we need here 90 degrees and 180 degrees. After that, we need to specify the size of the cells. We need to use background size, and the values are going to be ten Ram. Again ten Ram. As you can see, we have here the cells, and they look like a chest blackboard. As you can see, the cells are repeated. It happens because by default the background repeat property is set to repeat. If we change it and make it no repeat, then we'll have just four cells because the repeating conic function is executed once and it created cells on the x and y axis. Okay, let's get rid of background repeat property Next, I'm going to make the floor rounded. Let's use border radius with the value 50% Then I'm going to set the position to absolute. We need to move the floor down below. Let's use transform translate Z with the value -23 Ram. All right, actually we can already increase the size of the floor. Let's change the values of the width and height, make them 160. All right, after that we need to place the floor in the center of the room. For that, I'm going to use CSS Flax box, we need display flax. Then justify content center and a line items center. All right, after that, let's add some shadow effect. Also, I'm going to hide the part of the floor that is outside of the room. Let's use box shadow. We need the shadow inside the element we need to use here in St minus five, minus five, then ten Ram. And the black color also we need here again intra five Ram, ten Ram, and the black color in order to hide the floor that is outside of the room, we need to use overflow hidden. All right, that's it. The floor and the table both are ready and now we can take care of the bottom and the latter. Right now they are hidden. Let's go ahead and make them visible. Let's select the bottom defines height. I'm going to set both properties to 15 Ram. Then change the background color. It also change the color of the text. Let's use RGB value 252357. Okay, Next I'm going to change the position of the bottom. Let's set position to relative, then define top and left properties. The top position is going to be ten Ram. As for the left position, I'm going to make it -40 All right, after that, I'm going to change the shape of the bottom. Also I'm going to add a border to it. Let's change the shape of the element using border radius values will be 50% twice, then 0.50% As for the border, I'm going to make it 0.3 Ram. The color is going to be RGB 252357. All right, after that, let's go ahead and customize the text of the bottom. I'm going to increase the phone size, Let's make it two Ram, then transform text into upper case. Also, I'm going to create some space between the letters, make it 0.2 Ram. Then I'm going to increase the line height. Let's make it 1.5 Lastly, change the type of the cursor, make it pointer. All right, the button is customized. Next I'm going to take care of the letter. Let's select it. And first of all defines within height. I'm going to set with 215 Ram, then the height is going to be 25 Ram. Let's change the background color, make it white. Next I'm going to create the space inside the letter. Let's do that using padding. Let's set it to two Ram at the top, one Ram on the right side, two Ram at the bottom, and one Ram on the left side. Let's change the color, make it 555. Also use a little shadow effect. Use box shadow with the value 00.1 Ram and the caller AAA. All right. Now it is time to take care of the phone, of the letter. Actually, I'm going to use one of the Google phones. Let's go ahead and visit the Google Phones website. I'm going to search for phone called dancing script. Let's select the first style, then click Import, grab the URL and paste it into the CSS file. All right, now we can define the phone family. Let's assign to dancing script cursive, then change the phone size, make it 1.5 Finally, I'm going to create a little indentation. Let's use text in dent with value 0.5 Ram. All right, so everything is ready. And now we can make this button work. Once we click it, we have to move inside the room, reach the table, and the letter should rotate. For that, I'm going to use a little bit of Javascript. We have to add an event listener to the button with a click event. First of all, I'm going to select bottom. Let's query selector method. We need to specify here the class name, BTN. Then we have to add add event listener to the bottom with click event. And also we have to pass here a callback function which will be executed once we click the button. I'm going to add a new class to the table. Then using this class, we will define new styles in CSS which we need to add to the element on click. Now we need to select table. Let's use again query selector method. The class name is going to be table. After that, we need to use a property called class list which gives us all the classes that the element has. Now I'm going to use one of the methods called togal. Actually, this method allows us to add a class to the element if it doesn't have it and remove it. If it does have it, the name of the class is going to be, let's say change. Okay, let's sit about the Javascript. Let's go back to the CS file and select table with a class change. We need to rotate the table according to x, xs. Also, we need to move it according to the y and z directions we need here. Rotate x function value 80 degrees, then translate Y, the value is going to be 30 Ram. And also translate Z with value ten Ram. Once I click the button, then we'll move inside the room, but as you can see, we have to make this effect smoother. For that, I'm going to use transition. We need here to transform. And the duration 2 seconds, now we have a much better result. But as you can see on the next click, we no longer have a smooth effect. We need another transition as the default one for the table. Now everything works fine. Actually, I think we need to rotate the table a little bit more according to the x x. Right now it is rotated by 70 degrees. Let's change the value and make it 80 degrees. All right, I think it is much better. Let's go ahead and take care of the letter. Let's select Class Change followed by the letter. I'm going to rotate letter according to x x. The value is going to be -80 degrees as considered. The latter is rotating, but it's rotating from the center. We need to change the origin of the transformation. It's going to be bottom. Now the problem is fixed and we have to make the rotation smoother. Let's use again transition. We need to transform. The duration is going to be 1 second. Also, we need here a little delay time. It's going to be 2 seconds like the table. We need another transition as the default one. All right, now everything works fine. The only thing that I want to do is to add a delay time for the table once we move back from it. Let's add here 1 second. All right, so that's it. Everything works perfectly with this project, we're done. I hope it was interesting and you learned some new stuff. See you in the next project. 13. Project 10 - 3D Swing: All right, it is time to create our last project in this course. It's going to be a three D swing. As you can see, we have here a couple of swings in a three D space. They are swinging. And also we have here a little ball that is moving from one swing to another. We will create those effects with CSS animations and three D transforms. Okay, that's it about the project. Let's go ahead and start to build it. I have created a new folder on the desktop called Three D Swing, which right now is empty. Let's open it in VS code. Create our working files for HTML and CSS. Then open the index of the HDL file and create a basic HDMl document. Let's place here an exclamation mark and then hit Top or Enter. Let's change the title. I'm going to insert here three D Swing, then link the CSS file, open link tag, and specify here the name of the CSS file. Okay, finally, I'm going to run the project to the browser using a live server. Also, let's place the editor and the browser like so. All right, we are ready to build the project. First of all, I'm going to start with the HTML markup. Let's open the deep tug, which is going to be the container. Next, I'm going to create the swing. Let's open de Tu with the class swing. Swing one Inside the swing, we will have a couple of different elements. We will have four circles. Let's open deep tug with the class's circle and circle one. Then I'm going to duplicate this line of code three times and change the class names. Also we will have two ropes. Let's open tag with the class rope and rope one, Then duplicate this line of code and change the class name. Okay, overall we will have six swings. But right now I think we'll be better if we create just one. Once we customize it, then we'll take care of the rest of them. Okay, that's it about the HDMl mark up. For now, let's go ahead and start to write CSS. First of all, I'm going to create some reset and default styles. Let's select every element using an asterisk. Going to get rid of default margin and padding. Let's set both properties to zero. Also, I'm going to set box sizing to border box. Throughout this project, we will use Ram as a measurement unit. By default, one Ram equals 16 pixels and I want to convert it into ten pixels. For that we have to decrease default size of the H timul element. Let's set it to 62.5% All right, next let's take of the container. I'm going to define the wen height. The width is going to be 100% As for the height, I'm going to make it 100% of the viewport. Then I'm going to change the background of the container. In this case, I'm going to use a radial gradiate function. If we take a look at the finished project, you'll see that the color transition from black to blue starts at the top left corner of the page. First of all, we need to specify this place. I'm going to use closest site at 5% 10% Actually, those percentage values are like the coordinates. After that, let's specify the colors. The first one is going to be black color. Let's use RGB with zeros. As for the second color, it's going to be blue. Let's use RGB 115488. Okay. The last thing that we have to do regarding the background is to increase the color transition. And for that, let's add here 1,000% All right, let's sit about the container. For now, let's move on and take care of the swing. First of all, let's define with height. I'm going to set with 242 Ram, then the height is going to be 20 Ram. Also change the background color. I'm going to use RGBA value 2621691 and the Opacity 0.7 Here we have the swing, and we need to place it in the center of the page. For that, I'm going to use CSS Flexbox. We need Display Flex. Then justify content center and a line items center. All right, now I'm going to rotate the swing and then we'll give it a three D shape. Actually, I'm going to rotate the swing according to all three directions. I mean x z and y x. So as you transform then rotate x function, the value is going to be 70 degrees. Then we need rotate Z were the value -40 degrees. Finally, rotate y five degrees. All right, the element is rotated. As I said, I'm going to give the swing a three D shape. First of all, we need to create a three D environment for that. I'm going to use perspective with value 150 Ram. I'm going to create a three D shape using before and after CD elements and we need to share a three D space with them as well. For that I'm going to use property called transform style with the value preserve three D. All right, next let's select a swing with a before element. First of all, let's define the contents, Make it empty. Then I'm going to define the width and height. The width is going to be one Ram as poly height. I'm going to make it 100% Also change the background color. I'm going to use here color B4b 65 also set the position to absolute. Okay, here we have the before suit element on the left side of the swing. Let's go ahead and rotate it. Transform rotate Y with value 90 degrees. The element is rotated, but as you can see, it is rotated from the center. We need to change the origin of the transformation. Let's use transform origin and make it left. The left side is ready. Let's go ahead and take care of the front side. I'm going to select swing with after see the element. Let's define content, make it empty. Then I'm going to set height to one Ram. Then the width is going to be 100% Change the background color, I'm going to use here color two, C six. Also change the position, make it absolute. Okay, here we have the after elements. As you can see, we need to change the position. It should be placed in front of the swing. Let's define bottom property and make it zero, Okay? Next, I'm going to rotate the elements. In this case, we need to rotate it according to the x direction. Let's set rotate x function to 90 degrees. As you can see, like the before sit the element, we need to change the origin of the transformation. Here it's going to be bottom. All right? As you can see, the swing has a three D shape. Next, I'm going to take here of the circles, I mean those details which are placed in corners of the swing. Let's select circle define within height. I'm going to set both properties to three Ram and then change the background color. I'm going to use here C5757. Next, I'm going to make the element rounded using border radius with the value of 50% After that, I'm going to take care of the positions of the circles. Let's set position to absolute. Then I'm going to define the positions separately for each circle. Let's start with the first one. I'm going to define top and left properties. Let's set both positions to one Ram. Then I'm going to duplicate this code change the class name. Also we need here right position instead of left. Next comes the third circle as duplicate again the code change the class name. In this case, we need bottom right positions. Then let's set the position for the last circle is going to be the fourth one. We need bottom and left. All right, all four elements are positioned. Next, I'm going to create those white elements which are placed on top of the circles. We'll create them using before suit element. Let's select circle followed by the before suit element. First of all, let's define the content. We need it to be empty. Then I'm going to set with height, both of them to 1.8 Ram. Then change the background color. I'm going to use here 988. Also set the position to absolute. Here we have the before elements. Let's go ahead and make them rounded. And also we need to place them in the center of the circles. Let's use border radius, make it 50% Then in order to place the elements in the center, I'm going to use CSS grid. We need display grid and place items center. All right, now in order to create a nicer effect, I'm going to move the white circles a little bit up in a three D space. First of all, we need to share a three D environment with the before element. For that I'm going to use transform style with the value preserve three D. Then in order to move the elements up, I'm going to transform translate Z function with value 0.3 m. All right, let's see the out circles. Let's move on and take care of the ropes. Select them using a common class name. I'm going to define width and height. Let's set height to 40 Ram and the width is going to be 0.3 Ram. Also, I'm going to set the background color to white. Here we have the ropes and we need to take care of the positions. Let's set position to absolute. Then I'm going to define positions for rope one and rope two separately. Let's start with the rope one. I'm going to define top and left properties. The top position is going to be ten Ram. As for the left position, I'm going to make it 2.5 Ram. Let's duplicate this code, change the class name. We need rope two instead of left position. We need here right position. Okay, the ropes are positioned, and next I'm going to rotate them and also move them a little bit up. Let's transform. We translate Z function value is going to be 20 m. Then I'm going to rotate the element according to x and y axis. The value of the rotate x function is going to be 90 degrees. Then we need to rotate y with the same value. Right now, the ropes are rotated from the center. And we need to change the origin of the transformation. In this case, we need to set it to top. All right, the ropes are ready, I mean the top parts and now we need to create the additional parts down below. And I'm going to do that using before and after do elements. Let's select rope with before do elements define the contents, we need to be empty. Then I'm going to define width and height. The width is going to be 0.3 Ram. As for the height, I'm going to make it 23 Ram. I'm going to use years on temporary background color, let's say red, and then set position to absolute. Here we have the before elements. We need to change the positions. I mean we need to move them down and also we need to rotate them. Let's transform translate y function. The value is going to be -23 Ram. And also we need rotate Z function with value 21 degrees. The elements are rotated from the center. And we have to change the origin of the transformation. In this case it should be bottom. All right, that's it, about the before the element. Let's change the background color, make it white. In order to create the second part, let's duplicate this code. We need to change before into after. And also we need to change the value of the rotate function. In this case, we need here a negative value. All right, finally the swing is ready and now we have to create the animation. Before that, I'm going to change slightly the position of the swing. Let's set position to absolute. Then I'm going to define top position. Let's make it 50% throughout the animation. We'll move the swing according to the y axis. I mean horizontally in a three D space. Let's create sky frames. I'm going to name it Swing An we will have a couple of different steps. On each step, we will change the value of the translate y function. Besides that, we need to specify the current rotation of the element on every step. Let's start with the 0% I'm going to grab the current rotation from here. Let's add translate y function. The value on the first step is going to be 100 m. Next comes 20% Let's copy transform property the value of the translate y function. In this case I'm going to insert you 21 Ram. Then comes 25% the value is going to be 27 Ram. Then at 35.40% we'll have here the same styles. Let's insert here Transform and change the value of the translate Y function is going to be zero. At 50% the value is going to be -60 Ram. Then comes 55% I'm going to change the value and make it -55 Ram. Then at 65.70% the value is going to be -84 Ram. Finally, at 100% we need to hide the swing. I'm going to in some higher value, let's say -800 All right, the key frames are ready. Now we can run the animation. Let's select swing one. We need to insert here the name of the animation. Swing anim, then the duration of the animation is going to be 20 seconds. We need to run the animation infinitely. Also, let's define animation timing function. I'm going to choose here is in out. As you can see, the swing is moving and the animation works fine. I want to do here a couple of things. First of all, I want to change the origin of the transformation. Let's set it to top. Also, at the beginning of the animation, we're getting here the scroll bars. In order to fix that, we need to use overflow ten. Okay, the first swing is ready. It is animating. Let's duplicate the first swing in the H tm of file. Change the class name we need here, Swing two, then I'm going to duplicate this code in CSS. Change the class name. Also, I'm going to add here a delay time, but with a negative value we need -4 seconds. It means that the first 4 seconds of the animation will be missed for the second swing. Okay, everything works perfectly in the same way. I'm going to create three other swings as well. Let's duplicate this code three times. Change the class names from three through five. Then also duplicate the animation in the CS file. Change the class names, and also we need to change the delay times. We need -8 seconds, then -12 seconds and -16 seconds. All right, all the swings are moving fine, and now we have to take care of the ball, which makes the project more fun for the ball, I'm going to create an additional swing. Let's go ahead and duplicate the swing one more time, then insert here, a deep tug with the class ball. Here we have a new swing which is not moving right now because we don't have the animation for it. Now I'm going to customize the ball. Let's define width, make it seven Ram. Then we need the same height. I'm going to use here property called aspect ratio with value one. And then let's change the background. In this case, I'm going to use a radial gradient function. We need to mix two colors. The first one is going to be RGBA 159-23-8156 and the opacity 0.9 As for the second color, it's going to be 3116, and the opacity 0.8 Okay. Next, I'm going to change the position of the ball, and also we need to make it rounded. Let's set position to relative, then define left and top properties. The left position is going to be 15 Ram, then the top position is going to be ten Ram. Also, let's use here border radius 50% okay? After that, we need to rotate the ball. We need to rotate it according to both x and y directions. The rotate X function is going to be 90 degrees. As for the value of the rotate y function, I'm going to make it 40 degrees. Again, we need to change the origin of the transformation because right now the ball is rotated from the center. Let's set transform origin to top. All right, finally let's add a little shadow effect to the ball. Use box shadow with the values 00.2 Ram on the call of 333. All right, so that's it, The ball is ready and now we have to take care of the animation. We will create the animation for the sixth swing. Then eventually we will hide that newly created swing and display just the ball. Let's create S key frames. I'm going to call it swing six an we will have only three steps at 0% we need again, the current rotation of the swing, like the previous key frames, will move the elements according to the y axis. I'm going to add here translate y function, and the value is going to be zero. Then add 50% we need to move the element by 30 m. As for the last step, I mean 100% we need again translate Y zero. Okay, let's go ahead and run the animation. Select swing six, the name of the animation. Swing six, Anum, the duration is going to be 4 seconds. Then we need here a delay time with again negative value -1 second. The animation is going to be infinite. Also, we need here easing out. Okay? As you can see, the swing is moving now. We need to hide it. We need to hide everything except the ball. Let's go ahead and hide all the developments in the swing six except the ball. Let's swing six. The then we need to use pseudo class. We have to specify here the class name, Paul. In order to hide the elements, I'm going to use opacity zero. Okay? Next, I'm going to hide the before and after elements. Let's select swing six with before and after as well. Use again opacity zero. Finally, I'm going to make the background color of the swing transparent. That's it. We have finished working on this project. Everything works perfectly. I hope you enjoyed this project, and it was interesting by finishing this project, our course is over. I hope it was the right course for you, and you learn some new stuff about those two technologies, I mean, the HTML and CSS. The course was a relatively advanced one. If you had some trouble with understanding and following the videos, I recommend watching them again, testing the code, and trying to create similar projects on your own. All right. I wish you all the best. Good luck. Bye bye.