Webflow Flex Layout

All right,
the next thing I wanna do is bring over

that background that we have from
our design in Figma, I've already exported

my assets so I'm just going to go ahead
and start selecting that image and adding

it into our assets, so this pano-cinema-zoom
I'm gonna click on that, it's gonna upload

it and boom... right away I know I
have that in my library and I can start

utilizing it in my canvas, remember the
body has a global class but we don't want

to have that actual background to be
in every single page we actually just

want it on this homepage, so for that
reason I'm gonna create a class called

"cinema-bg" and I like to just have a dash
on my names, just like that, cinema-bg

you can call it however you want but
this particular homepage is gonna

utilize that background image, so
the dark color from our swatches

notice how that is actually changing,
now everything is not visible the tittles

are gone because the tittles are using
the overall body styles.

I can change the typography to be white
so I can change that back to white, so

that all font sizes use the color white
so now we know that this cinema-bg

acts like our dark mode overall class,
so the cinema-bg is gonna take care

of the colors of the fonts and is also
gonna take care of that background

image, right know I've only selected
the color so I can click on the + icon

and over here you get a little pop-up
with additional settings, I'm gonna

click on choose image and find the
one that I just uploaded.

I click on that and just like Figma,
what Webflow does and HTML documents

do is they upload the image as a
background and start tiling it, so

repeating the pattern.
It doesn't matter what size it is,

it's always gonna do this by default
so because it does that by default

we wanna remove the tile horizontally
and vertically and just toggle it off

just like that so I don't want any
tiling but then the image is extremely

tiny, you can see it on that top left
I want actually make that expand

or cover the entire container, if I
click on preview notice now that

that background is tiling all the
way to the full with of that container.

But if I start scrolling down, well
what's happening is that the image

is not repeated anymore, the tiling
is gone, what we want is actually

to make that image fixed throughout
as we scroll down.

In order to do that, we simply select
the setting over here and make sure

that the image is selected as fixed
image.

Notice when I click on preview now
that image is gonna follow us and

it's almost that illusion of all the
other elements are in front of it.

Cool.
All right let's add now our logo.

We have a couple of items here and
we created an auto layout with some

of the elements and space between
of 16px, so we have the logo Stream VR

Video on demand now on VR and then
the paragraphs, so this could be an H1,

this is a paragraph, and this is a simple
button.

So, let's simply add that now so we
have here on the section, we can add a

just add by ⌘K we are gonna add an
image.

And on this image we wanna upload
the SVG that we've already exported.

There we go it's about 300px, we wanna
swap this out so that the logo is on top,

then this would be Video-on-demand
now on VR.

Ok, so we have the H1 heading, notice
there is no classes, let's add a paragraph

and the paragraph is...

...

And finally we are gonna add a button
so, like the button is gonna just say

Get started.

So this button we already have some
classes establish, if you remember on the

playground we are gonna call button
and we call the primary button because

this one has a nice gradient that we have
established.

Now, what I wanna do is I actually want to
align everything to the center.

The way Webflow allows us to do that
is by using something similar to how

the auto layout works, in Webflow this
is called The Grid, right.

So, we could use a grid to start adjusting
and adding some spacing between each

of these, notice how if I click on the add,
you have the grid component, but before

I actually show you the grid and how it
works there is another solution for this

and it's called flex layout, so on this
layout property panel, and by selecting

the section I can actually have this turn
into a flex layout, so just turns both the

children into a horizontal or into de
vertical axis similar to how auto layout

works, and what is happening as soon as
I created the section to become a flex

it starts to put all those elements into
columns, because right now we've

selected the horizontal by default,
but I actually want to have them

vertically to each other, so I can
click vertical and now they are stacking

one over the other and we can adjust some
of the alignment of each of these elements

just like we saw on previous lesson.

So I wanna center those and I wanna make
sure I am justifying everything to the

center, so justify is the actual setting
that allows everything to be completely

justified to the width or to the height
of the container.

Let's jump in to the next lesson so
we can take a look at how we can start

adding some of that space between
these elements.

I'll see you there.