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.