Instructor: All right, let's now have some more fun
by building another component.
And so in this lecture and the next one
we're going to build a carousel component.
And just like with the last one,
I chose one of the components,
so, one of the carousels
that we saw before in component gallery.
So, in this case, this blue carousel here
that I thought would be fun to recreate
together with you now over these two lectures.
So, as I just showed you actually before,
this is what our final carousel will look like.
And if you ask me, this looks really, really cool.
So we have this image here basically floating on top of,
well, this background here
and then we have these two buttons here
also with the shadow
which make them look as if they float a little bit also
on top of this background.
And then we even have these four dots here in the bottom.
So this is gonna be a lot of fun to code,
so, let's get started.
Now, here we have this code from the previous lecture
and actually I'm going to copy all of it
and then I will just delete what we don't need
because we will once again use these same colors.
So, basically a similar design style,
so, another HTML file
and this one is called 02
and then carousel.html,
close down this one.
And so now let's start by removing all the html
except for the body, of course.
So like this.
And then also most of the styles
except for the global selector and the body.
So, just like this.
So we also want to keep the font
and so here is just the title.
And actually I will now copy everything again.
So, basically this empty state here
and create yet another file.
And so then based on that,
we will be able to create our next components.
So then we don't have to do this all the time.
So just some name here,
it doesn't really matter and okay.
So, this one will be a carousel component.
And so now let's get started with writing some html.
Now here we need some space
because this one is actually a bit wider
but that's no problem.
We do have enough space here.
And again, I will use a non-semantic diff element
which this time is simply called carousel.
So just like before it was called the accordion.
And let's get straight into the content.
And the first piece of content is the image.
So, we need to specify the source attribute
and now this image here is maria.jpg
So this was actually one of the starter files
for this section.
And now here as the alt text,
I will actually use her name
which is in Portuguese, Maria de Almeida.
Okay, we can close that here.
And now here for this testimonial,
we will use just like before the block quote element.
So this is a common way of marking up a testimonial.
So, block quote.
And so that is going to be basically
this entire block of text
and then in there we can put some paragraphs.
So, let's give this one here.
Let's say it's the testimonial text,
testimonial text
and actually we didn't put any class on the block quote.
Let's just copy this one and get rid of the text.
So this is called a testimonial
and then in there we will have like the text
and the author for example.
So here again
we will use our blind text generator,
which is just Lorem.
This is maybe a bit too much,
I don't know yet, maybe like this.
Oh, and here we want like these quotes
which we could make a little bit more beautiful
but let's keep it simple at this point.
Then here, another one for the author.
So, testimonial author and then again her name.
And finally,
this can be the job.
So we are using the job also here
along with the person's name simply because
in that example that I'm copying, they also had that.
And if you take a look at some pages,
then this will actually be pretty common at EDP Comercial
which is something that you know
if you live in Portugal.
And I think, well,
let's actually also add the buttons for now
so these two here at least.
So let's put them outside of the block quote obviously
and here at the very bottom
and you will understand a bit later why I'm not putting
like the first button here first
because it appears first and then the second later
because it is the last element here.
So I'm putting both here at the bottom.
So, button and well
let's simply call it button to keep it simple.
And now in here we want another icon.
So this time, this icon here.
And so we can get that again,
this time it's the Chevron left.
So, copy that and paste that here.
So, let's call that deep button icon
and then another one for the other direction.
Well, actually we need then of course also this other icon.
So copy SVG and replace this SVG with the new one.
So here again, button icon.
So I'll give it a save
and now when we go back here to our a live connection
which is of course still live
there's no need to reset, okay?
So, of course it is still alive because we never stopped it
and this is also still the same project folder.
So what we can do here is to delete all of this here.
And since we don't have any index.html file,
it will not open that index.html file.
So, if we had then index.html
is by default the page that will be opened,
but if we don't,
then it will show us this directory.
And so here is basically
all the files that we have in our folder.
So before we had this one,
so if we clicked, we would get back there,
but of course now we want to check out this one.
So we can click here and this is what we have.
Now, the image does as always,
by default take all the space that it can.
And so many times that is the first thing that we fix
because like this, it is completely unusable
and actually the image doesn't have any class
but while it is the only image that we have here,
so let's just keep it like that
and the height that it have for this image is 200 pixels.
And since we didn't specify the height actually in our html,
then the width will be set automatically
in order to keep the same proportion.
So that is at least fixed now
and so let's add some styles for the carousel itself.
So, remember that the background color
of this element is that green color.
So by now, you know that is the background color property
and we haven't used our green yet.
So copying that here, nice.
And what we also want to set first actually is a width.
So this one has a width of 800 pixels
which is why it doesn't fit
into that smaller window that we had before.
And now let's center it again
with the margin something and then auto trick.
So let's again specify 100 top bottom
and then as always left and right automatically set.
And so now this has the exact same dimensions
as our original.
Then let's give it also some border radius.
Here I'm going eight pixels
which again is one of the values in our spacing system.
So could have gone with 12
but the eight is more similar with the original one.
And let's also set the color here.
So, if we set the text color here
then as always it will get inherited
to all the other text elements just like this.
Then since we have this border radius here,
let's also set it on the image, okay?
And I'm still missing here some petting
inside of this container,
so that's why it still looks pretty bad.
So, petting and we will start with 32
but we will fix this later.
Now let's actually style here the text
and the author and the job,
and again, I'm pressing alt or option
to select all of them at the same time.
So copying and and pasting.
So, maybe you're noticing that just like before,
I'm starting to basically create
the visual styles on all of these elements, right?
So I style them first visually
and then after that, we take care of the layout.
Now, I don't always do it like that
but for a small component like this
many times that's a nice idea,
especially if layout is a bit more tricky,
like in this example.
So here let's use a font size of 18 pixels
and also let's make it a little bit bolder
because this is the most important content
so we can give it some nice visual hierarchy here.
And the line height of course needs to be changed from one
which is the default to 1.5.
Okay, nice.
Then here, let's use 14 pixels,
and in this other one, 12.
And now of course we need some spacing here.
So four pixels in this one,
and here of course a lot more after the text like this.
And this will look better here in a minute
once this is all side by side.
But now actually I want to do something which we did before
which is to improve the visual hierarchy between this text
by using that green color here in this text.
So, let me get those colors actually from here.
So this style css, remember is the one
from the project from the previous section.
And so in the text, I want to use this color.
So that changed ever so slightly.
And then here, let's just copy this entire line.
Okay, beautiful.
And the same thing here.
And now actually this one here
doesn't make any sense anymore
because we overwrote it
in all three places here.
Now actually, let's put this here side by side
because like this, it still looks very unfinished.
So, how can we do that?
Well, it shouldn't be too hard because in this carousel
at least right now, there are only,
well, actually right now there are four children.
So there's the image, the block quote,
and these two buttons.
But let's actually still do that
so that we can then a bit later fix it.
So this play flex,
so they are side by side.
And then of course, as we many times do,
let's center all of these elements vertically.
So, align items center.
So after all these times,
you probably already know this one by heart,
I'm pretty sure.
And now let's add some gap which we will change later
but for now, I'm going to use the same 32 pixels.
Okay, nice.
So this already looks like something actually
but we are still some way away from this, right?
And actually let's start here
by making the image finally this big.
So basically growing out of this element
so it looks like it is floating above
and that's even becoming more prominent
with this shadow that we added to the image.
So, how do you think we can do that?
Well, actually we never did anything like this
so that would be a hard question.
And so instead, let me actually show you.
So, there's no absolute positioning in this case
or nothing weird going on.
Instead what we do is that we can simply scale this image.
So right now it is this small,
but again, we can scale it.
And so for that, we will learn about
a brand new property which is called transform.
So transform is for many different things
and one of them is to scale elements.
So we can use scale.
And so here we use something called a function.
So it's a scale function.
And so here now we need to specify parenthesis
and then the value by which we want to scale.
So, if we write one
then the element will stay the same size.
If we use two, then it will double the size.
So like this, okay?
But in this case, let's try 1.5.
And so that actually looks quite right
at least here vertically.
So, the space that it has right here now looks just right.
Now of course, we need to move it
a little bit more to the right,
and the position that the image has
basically to the right is defined right now
by the padding data on the left, right?
So, let me show you that by inspecting.
And here actually it becomes nicely visible what happened.
So, you see there that original square,
well, if we click here, then we can see it.
So this is what the image was like in the beginning, right?
Just like this.
But then by scaling it up, of course,
it then overflows basically the original image
and grows this large.
So, if we take that off, we can see it very nicely.
So this is what it was before.
And again, the position here
is kind of defined by the padding
and so we can increase that padding like a lot.
And so then once we scale the image,
it will no longer be outside basically here on the left side
because remember that we want it like this.
So, we still want the green part to be visible here.
So, what we can do is to give it
some padding to the left here.
So increase the padding, which is 32 on all sides.
But again, on this side we want it to be more.
So, let's see what values we have here
and let's go with 86.
Okay, 86 pixels and there we go.
So now if we take a look at that like this,
then the image used to be here
but then of course with the scaling,
it now looks different.
So, it ends right here now.
So of course we now also need to increase the gap
because the image is also overlaying this text.
So, let's try to go also at 86
and see if that is enough.
And while that looks kind of the same here and here,
doesn't it?
Maybe it's a bit more here from the eye
but I'm not really sure
and so I will just keep it like this.
However, now we have a problem
which is the fact that
there was a lot of space created here
also in these other gaps
because we still have the buttons here
basically also as flex items
where we don't want them to be.
So, these should not be flex items,
but instead they are going to be absolutely positioned
but that we will do in the next lecture.
And so to just very quickly finish this one,
I will just add the shadow
that is still missing here from the image.
All right, so, let's add that here.
So, box shadow.
And so again, horizontally, we don't want any offset.
Then here, let's say vertically 12 pixels
then a blur of 24
and of course you'll have to experiment
with this values here in order to gain some experience.
So rgba, remember, and then black
which is usually my go-to with some offer value,
let's try 0.1 as always,
and while in order to really see it,
we would need to remove these buttons.
So let's do that.
And again, many times I do these kinds of experimentations
right in the browser using the dev tools.
So I will just delete it here
and delete it as well simply by hitting the backspace,
so the delete button on the keyboard.
And so now the shadow is nicely visible
but it is not big enough,
actually not dark enough.
So, we can keep going here again by using our keys.
So that's maybe a bit too much.
Well, let's leave it at 25%.
Now, the syntax here is actually a little bit different
so it's not like rgba, but don't worry about that.
So let's just set it here to 0.25 which is essentially 25%.
So that is fixed.
Of course the buttons are back, but nevermind about them
because we will now fix that actually in the next lecture.
So, after a break, I see you back here.