So in this video, we're going to swell style, that's the format, because we're left off, this is
where we left off at the tablet format.
Now let's go to a responsive, complete responsive format.
So we're going to actually leave those.
Five hundred pixels, and this is from the phone format.
This is for the tablet format, and if we go now in a completely responsive format desktop, we reached
1500 pixels, for example.
Well, I don't like what this looks, so let's take care of it.
Actually, I don't have much work to do, but essentially we're going to start, first of all, our
main.
I mean, s. and let's start by targeting by limiting our own media queries, so we're going to go with
media and media and we're going to start with a Menwith.
Of nine hundred pixels, no, I said we still we need to, first of all, target our main so mean and
we don't mean we're going to change now the max width of the page to nine hundred pixels, not on the
entire page, but of our main section.
And the main section was until we started with the photo section.
So only this part will be styled.
But also, the header was in the main section, so that's, first of all, push it to the center of
the page.
We're going to use margin and order and this will push a page to the center right here.
Now, this doesn't look where this does not look very good.
So in order to differentiate our page form from this margins right here, we are going to now use a
bit of a box shadow.
So let's go in here, use box shadow, and I'm going to do with further pixels.
You obviously change this and also encourage you to constantly play around with this then for the pixels
and then for the color going through the RBA of two and now comma, who's minus for the pixels.
Zero for the pixels and R.G. B, A or B A two.
OK, so we save, we have this nice shadow and also our page just the bit pops out of the of the background.
Next up on took care of the button, so this one right here, let's.
Well, not only in a desktop format now we can use hover.
So let's take this button class and install it when we hover over it.
They're supposed to have a course of point.
Does it indicate that we are over our button and are going to also take out this effect of device toggle
so we can no longer change the devices?
OK, so now we know that's the format.
So as soon as we go over our button, we have this hover pointer effect.
But I also want to have another effect, and that is that the background color should change.
So let's go back on color and let's use our evil color again of 66.
OK, now we have our button, the that goes just a bit, uh.
In the greyish area now, that's it for the hover effect now also wanted to have a active effect, this
just means when we do something with the button in our case, we will click it.
So we're going to use the active and then we're going to scale it a bit.
So this is a transform then scale and we're going to scale it to zero point ninety six percent of its
initial size.
And I also want to try this out when we click it to consider scaling happening, but also want the effect
that the button is what is clicked inwards.
So let's take out the spot shadow.
And for this, we're going to Xbox Shadow and none.
OK, so as soon as we do this and click it, we have no more box shadow holding down the click.
Now.
OK, so that's pretty much it for Dysport.
Now I want to change.
A contact section.
Let's go down to our contacts section.
And we in here, we said that we want to have a hover effect on them.
All right here.
Not an architect, and we also did it up there, but I want to have it actually in here.
So this was within.
Try through contact social exactly.
We're going to take the social media icon's class no, not the social media.
I'm sorry about that.
We did not contact that.
We had contact.
I did the anchor tag.
And now within a couple state.
It should have a text declaration of.
OK, and as soon as I do this and I hover over our email address, we have now this online that you
could also, for example, give it the color of hash if you want.
And it would also have this white color when you go over it.
OK, next up, let's take care of a social context.
Now, I just want to have a couple of things for them.
First of all, each time I'm hopping over a I can't take what they have because so on the Christmas
to be shown as pointers.
So let's take our social have it actually get the tablet.
So social media icons.
And within here, we're going to target all of our income tax.
Now I'm going to set the cursus pointer and now for all of them, well, we have this point, but I
also want them to have a change of color.
So let's target, first of all, the class of this first icon here of Facebook
and let's say when we holler or Facebook or icon.
Then let's change the color to a hash one eight seven seven.
AB f two, that is the Facebook, but you could also Google us, so when we hover with the color changes
to blue.
Well, I was honored to have a bit of a ease in and transition effects I'm going to use transition options
for.
Transition.
Of zero point four seconds, you could go with more or less and ease.
So as soon as I hover or icon has, this is in effect and also changing the color.
But when I'm leaving the icon, the color change happens a bit too abrupt.
So the solution for this is also to put right here the initial state of of the icon to have a transition
effect.
So in a hover in it, has the color, the color changing affect them in a holler out also, and it's
going back to its initial state or its initial color.
This will have this effect.
Not the sort of the same thing for Instagram.
So let's go down here.
And this changed the effort to Instagram.
And it's now changed a color to the Instagram color, which is C30 to a and free ad for free, said
Save.
And let's take a look at our Instagram now.
OK, perfect.
Now we need to do the same thing for Twitter and YouTube, but what I don't like is that I'm repeating
myself.
So this one right here, this transition, I would need to do the same thing for Twitter.
And so it quickly changed to call this one.
The A one F two.
So when I'm hovering over, Tittered is also changing, but we have already three extra lines of code
that we actually don't need, and the solution to this is actually go to the social media icons.
And within this target, the class of F a, b.
A autistic artist, curser.
So by doing this and this Fibi class is actually from here.
OK, so each icon from our social media has a different class, but it also has the common class of
Fabi.
And I'm going to tell the class that, hey, we're going to hover over you.
We should have this transition effect so I can now she selected from here command or control the take
it out.
And now let's see if a whole lot of them.
Yep.
The fact still remains that we still need to change this to also YouTube.
You Tube and the collar.
Was actually pretty simple, one F to F's and four zeros.
OK.
So you saw that we just actually had four lines of code removed and just placed them here by targeting
an extra class.
I guess that's pretty much it for this project.
Hope you enjoyed it.
And as I said, this project was only meant for you to understand the basic the basic principles of
a mobile first approach, which with mobile, we worked as we worked ourselves upwards with a mobile
format and we worked USCIRF upwards.
And then we took care of it Thaxted format.
And then we took care as a tablet format.
And then we also took care of a desktop format.
So I hope you enjoyed this project and seen the next one.
Thank you.
Bye bye.