Now at this point,
we did use a lot of bootstrap,
both its CSS capabilities,
as well as some of its JavaScript driven capabilities.
And therefore,
we already saw examples for both third parties,
CSS and JavaScript packages,
even though it's from the same package, so to say,
but bootstrap simply is a third party package
that basically offers both CSS and JavaScript capabilities.
There also are other packages, for example,
Tailwind CSS, which are only about CSS in the end.
A Tailwind CSS, for example,
gives you a bunch of utility classes.
You see it here in this demo,
which you can put onto your HTML elements
to quickly add certain styles to them
without having to write the full CSS code on your own.
So such packages also exist.
But of course there also are pure JavaScript packages,
which simply add JavaScript driven functionality
to your site and no CSS styling,
no CSS classes that you add.
And I wanna show you an example for this as well.
And for that we're going to add a second page
to this simple demo website here.
I'll add a second HTML file here
and I'll name it, parallax.html
because I wanna show you the so-called parallax effect,
which is a visual effect where some elements scrolls
at a lower speed than the rest of the page,
which is a quite a cool effect,
you'll see it in action soon.
And that is a visual effect,
which even though it's a visual,
is actually achieved by JavaScript changing something
on the page under the hood.
So it requires JavaScript code to implement this effect.
And whilst we could write that code on our own,
it can be quite complex, that code,
especially if you wanna fancy effect.
And hence this is another typical example
where you often use third-party packages
because you don't wanna write all that code
for this standard visual effect on your own.
And that's what we're going to use.
But for this, first of all, in this parallax.html file,
I'll add a brand new skeleton
and replace the title here with Parallax,
like this.
And in there, in the body, I'll add a h1 element
where I just say, The Parallax Effect, just like this.
And then below that, I will add a section.
And in that section, I'll add a image.
And I will simply use one of the images I provided here.
It's up to you which image you wanna use.
I'll simply point at images/tasty.jpg,
and just give it a alt text of Tasty,
something like that.
And then below that, I'll add another section.
Whoops, another section where I say, A Dummy Section
and where I then just wanna add some dummy text.
And for that, I'll add a paragraph
and now I'll use a little utility feature
in visual studio code if you wanna generate some dummy text.
You just type, lorem
and then you also get this auto suggestion overlay
and you can hit TAB to get some dummy text.
And I pressed the Auto-format shortcut to format that.
And then I'll copy this paragraph and paste it in twice,
so that I have a bunch of dummy text here.
And I only add this text here is so that we later
can also scroll on this page because this parallax effect,
which we're going to add,
which will affect this image will only occur
or be visible if we scroll.
But first things first,
before we add any JavaScript code here,
we need some styling for this parallax.html file.
And for this,
I'll actually include that style.css file
with a regular link.
So styles.css, and in here,
I then wanna set up some basic styles,
which I now need to do because in parallax.html,
I'm actually not including bootstrap. I could do that.
We could import bootstrap here just as we're doing it
in the index.html file.
But since this page won't be about bootstrap,
I won't include it.
And instead here, I'll write my own basic styles
and in styles.css,
I'll just make sure that for the body,
I set a font family of sans-serif.
And then for my sections,
which I have here in parallax.html,
For these sections, I also wanna apply a certain styling.
I will apply this styling here to be precise,
from carousel-example without the height though.
But I will apply this width to my sections.
And I wanna make sure that we can go to this page
and therefore on index.html, in this nav bar,
this dummy nav bar, which we have here,
we have this "link" link,
so that anchor element that says, Link and I'll rename this
to Parallax.
And then here, the destination of that link
will be parallax.html.
And with that, if we save all those files,
if we click on parallax, we are taken to that second page.
Now we can't go back, besides the Back button, of course,
but again,
I'm just building this demo page here
to show different aspects of third-party packages.
We're going to build a real project again later
in the course, of course,
but now on this parallax.html file,
I wanna make sure that this image
is also properly styled.
And I wanna make sure that all the text is centered
and therefore back in styles.css,
I will actually add text-align: center here,
and then back in parallax.html,
I'll give this image an id, main-image, for example,
because it is the main image here and in style.css,
I will target that main image and give it a width of 100%,
save all files and reload this page.
And now I got this image here
and I will actually also give it a height of,
let's say, 30rem and then set object-fit to cover,
to make sure the aspect ratio is kept,
and it's simply cropped to fit
into this container, so to say.
Now we got this image and now I want that parallax effect
on that image.
I also want to have this text centered
and for that actually, I'll take text-align: center
and move it from this section to the body.
Because this h1 element here is not inside of a section,
hence it wasn't centered before,
but with text align on the body it will be.
But now back to this image,
I wanna have this parallax effect,
this special scrolling effect on this image.
If we scroll down here,
so if we scroll down to the text down there,
we should see this parallax effect on that image.
And to make that even more visible,
I'll actually go to parallax.html
and copy these free text paragraphs again
and add them again,
so that we have even more text down there,
and we have even more space to scroll.
And now we can finally add this parallax effect here.