Welcome back.
Let's take just five minutes to quickly make this website a little bit prettier, just to show you how
easy it is to customize a website once you have the layout done.
I recommend a step that I've mentioned multiple times.
When you build a website, figure out your layout, make it responsive.
And once that's done, the rest is kind of fun.
You just had nice access, probably some images to just prettify it.
So in our case, I want to show you a website called Well No Shit, and it's going to really help you
out because, well, it gives you free design resources to use.
And they have fonts, illustrations, mockups, UI kits, everything for free that you can use on your
website.
In our case, we can use something like Endre over here that gives us a ton of MIT illustrated or licensed
illustrations.
So if I go to browse now, we see that we have a ton of images that we can use.
So in my case, I've downloaded one of these images and we're going to use it as our cover photo.
So let's go back to our project and in my cover photo over here, instead of just having cover with
exclamation marks, I'll just have an image tag.
That will have a class of.
Cover a property that we're going to or access class that we'll use and it's going to link to the image
that I just downloaded in my images folder.
Again, this you already be in your starter files that I gave to you.
So if you look in that folder, you'll see that we have an image folder.
And from there, we're going to grab the on draw, Scott.
If I save this and refresh and make sure I finish that half with an ending bracket and I refresh, OK,
and this is that that's refresh, that's a lot better.
But oh, boy, that's a big image.
We can easily fix this by going to our store.
Going to our cover and using the cover class that we've added to the image to just say that we want
the width to be well, we can say one hundred percent that, but that might be too big.
I don't like it that big.
Let's do.
Thirty m if I refresh for RTM, if I refresh, that's better, but we want to get rid of this red background
now let's have everything and wait.
It's going to go up to our HARSONO.
And we can just actually remove the red from here.
Now looks a lot better.
All right, so as we see the image size isn't growing, which is good, but it looks nice and pretty
as the cover photo.
Another thing that I noticed is that when I scroll down, I want the header tab to be sticky, that
is to scroll with me.
And that's another common pattern that we'll see that's fairly easy to do.
We can just give the nav element a sticky class and this sticky class.
Can say that they'll have possession of fixed.
And a top of zero that is sort of top, and if I refresh this, it will actually because of the position
fixed, although it works now, it messed up our width.
So we want to make sure that the width is always one hundred percent.
So all we would do is at the end, say, with one hundred percent.
Again, these three properties together is a common pattern that you'll see to make.
To make navigation sticky so that now when I scroll down, look at that, our navigation is nice and
sticky.
Let's make the green navigation bar blue.
So I'll turn this into blue.
All right, that looks a lot better.
What else we can change our font, let's say, to something.
Prettier font family, let's just say aerial fire refresh.
All right, that looks a little bit cleaner.
What else can we do here?
Well, just to finish it off, maybe we wanted to do something different when we hover over the zone.
Let's say that with the boxes, when we hover over them, I can just copy and paste this.
Let's make them tilt a little bit, so I'll say box.
And instead of shadow or box shadow, we'll say transform.
And we'll just say that we want to rotate.
Say negative seven degrees.
If I save and refresh, look at that, we have some grid systems that when we hover over them, they
rotate seven degrees.
I mean, I wanted to demonstrate to you how fast we can convert a website to start looking good.
By no means is this perfect.
But by just changing a few properties, we've now gone from this to our final view.
And you can imagine how within a day of improving this website, making this a little bit prettier,
maybe you really like.
This websites cards that they have here, so you can just inspect the element.
And perhaps just copy their success styles.
But there's a lot of flexibility here, the important point, though, is the fact that you start with
your layout using flex blocks and Scribd.
And then it's really up to you and your creativity to design beautiful websites.
I hope that was fun.
I definitely had a lot of fun playing with great inflects box, and I'll see you in the next video.
Bye bye.