OK, so before we get started with the actual project, I would like to introduce you to all main tools
that we're going to use within this project, and we're actually going to use a set of different tools,
like, for example, font özlem for our icons.
And I'm also going to use bootstrap just because I don't want to get into styling a lot of small little
things like, for example, buttons.
OK, so we just came to the class on bootstrap and it will automatically style not definitely, but
some style will be applied to a button.
And then we're going to Texas for our image, actually for this background image of refind it again,
and I'm also going to be also going to use a bubble image for this one.
And also this images also that bubble image.
OK, so let's get started.
I already created a. folder and I just named it project and I made the bubbles.
OK, so let's go within er create our image folder.
Then create the index, that HMO, and then create a style.
Now, not here outside, just going to move through quickly.
Sorry about that, so don't create the index in the image folder, I just created an empty image folder
and then also outside I'm going to create a standard access.
All right.
Now, within our image folder, we're going to actually search and Google that for the PMG because it
needs to be a PMG file in order to have that background effect.
So here is the file.
You can also download this file.
OK, so I'm just going to keep it in here and there's a bubble hello, bubble.
Right now, let's go back into our e-mail.
Hit that exclamation mark, create our template and see Bubble Bubbles website.
OK, now within here.
All of us should do this or should do something else before.
Let's actually do that.
So this.
Everything would be contained in a main container, in the main tag, which will have a class of main
container.
OK, within the main container will now create a nest egg with a ideate now.
And within our Naftogaz, we'll create an image file.
This image file will then have the bubble and will have a Iot of logo and also alternate text of logo
because it's only open this up using leftover.
And it should be the huge bubble, but we have this at least now underneath our image tag.
I will now create a label and a button and this will be excellent.
We go back, you know, finished project.
This label will be this tech tax right here and our image and our bubble, which is this would be the
logo, you know, make this smaller and then this is the button that we need.
OK, so let's go back into our e-mail.
So we're still staying within the Naftogaz.
OK, now let's create the label tag uncrating label test because they're in line automatically.
And also they're great for targeting things.
So I'm going to give it for a logo and I'm going to give it a name for as bubbling.
OK, after night, after our label going can trade our button for the navigation and this will have
a class of between.
And
yeah, and sign up.
OK, so as soon as I do this, I would take a look at this finished project we have here a bubble and
we have here are icon, not a computer, but our button.
Now, let us link up a couple of things, so let's go to our website.
First of all, I want to ask some of your stuff.
Now, let me start with post-test.
So if you never use bootstrap is a kind of a quick way to throw together a website to prototype them.
They are also a lot of website using both steps out there.
And you can obviously recognize them because they look really bootstrap.
So let's go to get started and let's copy this link right here.
And this will link up the success for the board.
So I'm always putting them into right above our title, not.
Next up, I'm going to link up my assessment.
Hello.
Link and style DOCSIS.
OK.
And actually above my success.
I also used to link up my font, awesome, so you just go to fantasy and grab on to your kit and to
grab onto mine, to go to your account kids and click right here on your kid.
You can grab your kit is the free kit.
Don't have a professional account on your free account.
This is enough for me for now.
OK, so as soon as I have both set now linked up, let's take a look at our button.
Let's go back to our website and he button should be right here.
And it is right here.
But it is it's it's bootstrapping.
This whole browser buttons.
Look, it has black.
Does it have a white or transparent background?
I don't even know.
Hmm.
Nevertheless, be considered as, for example, primary.
We have a button that would extend this close to Betty and.
Primary.
And go back in here, that would be a blue button, they could go to blue stepping, go through to try
to two components and if you go to bartends, you see this button, secondary, primary success, danger
and so forth and so on.
I'm going to stick with the normal button because I need to do something else to it later on.
OK, so we have Bozkurt linked up.
We have also linked up.
And if all we need to do now is link up our main source for this, I'm going to take the class of Maine.
So we're going to access first of all, let's do a general reset.
So margin zero.
Padding zero.
And then boxes and bought a box.
Now, I'm also going to create a few variables, if you never use variables in success, one to create
a variable is the way he can do it.
First of all, target the root, OK?
And within the root, the way to create a variable is by tapping Dash Dash, then the name of the variable.
For example, I'm going to name this crime scene to be my primary color.
And I thought, well, you could leave it a color, you could give it, you can type in here, whatever
you want, whatever characteristic you want to have this variable.
Now, I'm going to go with RGV and 255, 255, 255 and zero point eight nine later project will use
variables more often.
But for now, you're just going to create two variables.
So secondary color and this will be actually the same color almost.
Let me take this order copy paste down here and going to just change the capacity to hold all part of
free the you out and close up the SEMICON.
Not the way we use variables, for example, going to take the body and body tag and say color in a
bar and within parentheses, I need to call upon my primary color.
And that's it, that's pretty much it.
So if I would change this color right here, then also the variable would change or the color within
the variable.
Now, let me I want to link up.
Here is Google fonts.
And for this to just go into typing Google fonts.
And go and I think they use the phone space, something space.
I see space.
That is praise, grotesque, OK, and I think I use the regular form.
Yep.
So select the style, go to import and I'm going to import it in our success.
So let's go back to our document and I get to import it right after our reset.
So the first thing that will be called upon is this link right here.
Now, in order to use this, we're going to copy the font family.
So for font, font, awesome and the copied into a body and now if I type in any kind of text, I should
do as I said.
It will have that font now can see our text right here, because it has now a white color.
OK, so the last thing I want to do is when I hover over something.
All right, to have a HRO setting, for example.
We're going to take a let's call this a utility class, I constantly use utility classes and I'm also
going to explain to what their meaning is.
CTT class.
Well, utility class is a class that you wish to call upon when something is repetitive, for example,
Hober Effects.
And to be more specific.
This site has a lot of power effects.
If you go or finished project, you see, if I go over this icons, they all have a halo effect and
the effect is the cursors pointer and the color turns white.
And also you see the car turning white, but not instantly.
It has a bit of a delay.
And this means it has a hit, it has a transition and a transition is well, I used three zero point
three seconds and is a key each item has.
It is also the box here has a helper effect, but this is another how they affect this shadow hover
effect.
So let's create also this icon right here or this button has this hover effect and this button as well.
So let's create this class.
I'm just going to create a class called power, and when we hover over this class, the cursor is pointer.
The color.
Is actually primary color, so that variable called educated Savar and primary color.
And as I said, it needs to have a transition of zero point three seconds and ease.
So that's basically it for this class, and I'm also going to create another class, which is Box Shadow.
Delete this and say box the shadow on our box shadow.
So this class will have a few different specifications.
First of all, I want to have is that index of six.
Now, we didn't learn about that thing this says, but this just means this needs to be on a list.
Just imagine this as layers.
If layer one is that index one.
For example, then they should be on the atelier with the king, the six.
Obviously.
All the layers that are using that the index must be positioned, there are either position, absolute
or relative or fixed or sticky, but they need to be positioned OK.
Another characteristic is well going to the shadow, obviously, and it's punctured.
We have a transition and not a transition.
But it will have a collar, so it's going to be zero zero, the shadow itself.
Forty five pixels, the spread of it and the intensity of two pixels and the color will be a deficit
of white collar.
Now, the last thing is that it's going to have a transition to less property and I'm going to use all
the same transition again.
Point three seconds and it's.
OK, so how do we use these classes where we just apply them, for example, in a bottom here?
And we get to choose Hober and I could go back to our project we have over the button.
Well we can't say anything because we need the background color.
But let's listen to the background color, not the background color, but the background itself, not
the background itself is true.
We didn't take care of it.
So a Castlemaine container and within this class we're going to set the background.
Now, first of all, we need to have a few general settings with.
Of one hundred percent and a height of 100 Hupert Hind's.
And this just basically means that our entire page will have a height of one viewport now for the image
because I need to use his background.
Image and this will have a you are L and within here actually going to target our image folder again.
And this search, why the search bubbles?
And, Carol, I hope I'm going to find this image quickly, although this was this one, yeah, it was
this one.
So go here, go to free download now would suggest to take a smaller image, a medium size image was
noted for a patient load quicker.
So let's go with download free download.
You can donate something, but we're going to just go to a page into images and save our image.
And now we could actually choose it from the URL.
Images, and it was this one.
Probably not a single, so there's a website and it should be in here, a, oh, OK, I misspelled the.
Our container there, so there's a background image and there's a huge bubble, and if we hover now
over.
Or a button here, you can see the effect taking place.
I guess that's basically it for this video.
You can continue on in the next one.
So see the next one.