Webflow Position Relative

All right guys.
The nest thing I wanna work on

is the preview of how the movies will
look like, so when you click on unlimited

movies, it will take us to this screen.

A little title the nice 3D shape that we
exported from Vectary and some

additional text.

So let's jump into our Webflow, there's not
a lot you can do with this pagination

but you can start modifying some of the
class properties, so that this instead of

being in the footer, we can have it on
the top.

And then we just need to set this to
position absolute

and set it to the top left, and we wanna
give it a width of 100% so it expands

all the way to the end, and maybe we
wanna expand this so that it matches

it stays within the viewport, so notice
right now it's hidden by the Navbar

so we can just add a little bit of spacing
maybe not percentage but maybe about 80px.

The way we change the size on this
pagination is simply by using the font

because this icons are actually squares
but they're using a font to create this

square shape,
so what we can do in this slider pagination

is change the 1rem, we can change that
to maybe 0.8 or 0.7rem and notice how

the sizing of these squares now looks a
little bit smaller.

We can also change some of the spacing
now it has some margin that we don't need

and some padding, so let's just reset
those spaces

and making sure that the size we have
the height to auto, so now is gonna

match whatever the size of that actual
element.

There we go, so we now have the pagination
ready, we can toggle this 2 to go from

one to the other.

And on the details what I like to do is
similar, I can start bringing some of

what we did already, we start to add
a container, so the way I get to the

second slide is simply by going to
the properties using the arrows

or selecting here on the section and
then you can get access to the

slideshow from here.

All right, so let's get started, right away
what I wanna do is change that tittle

to unlimited movies and TV shows.

And I wanna contain this

so make sure that the heading 1
stays within

we wanna add a paragraph.

Right now we could just copy the same
paragraph we have here

We'll be changing the content of
this later

so I'm gonna create a div block right here

and in this div block we are gonna start
stacking all the images of the covers

but instead of just putting images in
here, we wanna interact with this

so for example, when you click on them
I want them to open up a movie preview

and the way we can do that with Webflow
is utilizing the component called Lightbox

so if you open up the components and
select the lightbox what it does is creates

kind of like a wrapper, like a link wrapper
and inside that link wrapper it adds

the image that you wanna use, so we can
remove this one, and on the lighbox

settings, you can choose whether you wanna
to open up an image on the overlay or a

Youtube video, so let's link that to a
video just for now so we can test

and right away we sabe that and let's
select the image that we wanna use

so let's upload the image from our
graphics that we've exported already.

This one is pretty big so we might wanna
turn on the retina display so it's high

definition and goes back to the 1X and
if we preview this, and simply go to the

next slide and click, it automatically
opens a nice overlay modal or lightbox

with the player on top,
so all that extra Java Script and interaction

it being added by the actual component
itself so we don't have to worry about that

which is pretty cool.

And if we repeat that process...

so for example if I toggle this link

and i give it a name, so maybe this could
be "movies"

we can do the same thing with the first
lightbox we created

we call it the same name though "movies"

so that the name or the group name
gets linked and that way when we

actually play any of these lightboxes
we are gonna have a preview of the

other movie that's on the same
Lightbox family.

Ok, so let's remove the auto play because
we don't want the auto play to be happening

and let's remove this extra arrow on the
left, by simply removing this and

hiding at each end, hiding arrows at the
end,

so that now, we won't see the arrow at
the end of the right and we won't see the

arrow at the end of the left.

Ideally what we are going to do in another
lesson is set up a way for us to click here

and take us directly into the next one
using a little bit of Java Script

but for now let's keep it simple and
continue.

All right guys, let's make this a flex
layout, and add some spacing between

each element.

So we are gonna select the div block we
created, and we are gonna rename this

I'll make this a flex layout with
horizontal

if you've notice, we've actually been
using this style of flex a lot throughout

so if we are gonna use flex, many times
across, what I recommend we do is just

call it a class name "flex" and that way
anytime we need to use this flex grid

we can just call it by the class name

I'm gonna rename it flex and then anytime
we need to do or align elements horizontally

we can start using this class.

All right, so now lets add some spacing
on each of these,

now I think that we won't need to add
the margin on all of them, instead we

just need some margin on the middle
one

so what I like to do is similar to how we
did our margin utilities classes of

margin bottom and all the way up to
40px, we can do something similar

for margin left and margin right, and
everything that is X or horizontal

we use the X value or the X label, and
everything that's vertical we use the Y value

so, if I wanted to create a class that
spaces out some of these elements

just the middle one

I could use the margin x and then I add
dash and the value that I want to add that

spacing, so we could say mx-12 and I want
the margin on the sides, on this particular

element to have...

12/16rem

and same on the other side
12/16rem

and boom...

just like that we just created a utility
class for margin right and left using mx-12

and there is no need to add a class in
these other elements because we just

want some spacing between the left and
the right of the middle one.

Ok, let's continue by adding now another
element and that element is the 3D shape

so we can call in the image

and because this image
is really big, we wanna try to

keep it as small as possible so we can
reference back the sizing that we are

using here it's about 300px so we can
go like this

and notice there is some spacing on the
right that's because of the shadow,

we can't see the shadow right now
but we can imagine that shadow kind

of working around, we can start moving
around this shape similar to how we did

with position absolute but instead of
making this shape float we are going to

actually change the position to be
relative and it's relative to all the

other elements rather that static,
which is the default.

So relative to all the other elements
I wanna start changing some of

these value, so for example I could
start moving this around a little bit

just to center it, right in the middle
and I can also use negative values

so that I can start putting and placing
things above it.

The actual space that you have here is
still gonna remain the same because

using the position relative, it's relative
to itself and so all the values that I'm

adding is almost like a ghost version,
I'm moving things around the space

that is already containing.

So, what we wanna do is, instead of using
these values of the top and left

relative to itself, we wanna use the actual
spacing, so notice how I start changing

the value of margin, it starts to offset
but it also brings out some of those

elements above it, down.
And this is exactly what I'm trying to

accomplish here.
I think this X is still a little bit too big

so let's make this about 250, that
looks a little bit better

and then negative for the margin right
is just gonna make sure that we center it

to the very middle of these layout.

All right so we wanna make sure that
is just barely above it and let's check

out the design, this looks good.

All right cool, this is exactly what we
wanted, if we preview this we can see

now that we have created a grid for
the detail page and the intro page

for the unlimited movies and games.

In another lesson we are gonna take a
look at adding some interactions

including a 3D flip, in another lesson
also I wanna show you how we are gonna

make this cards look a little bit more
like 3D.

All right let's continue over to our next
section which is the products.