All language subtitles for 006 Time To Add Styling & A Logo_Downloadly.ir_en

So let's continue working on our layout,

the navigation, the logo.

And for that, let's add some styling.

Again for this, attached,

you find a couple of CSS files.

You find a logo.module.CSS file,

and a main navigation.module.CSS file.

And you should download those,

and add them in your layout folder,

next to the logo JS

and main navigation JS file.

Again, there I'd find some CSS styles for you,

which you can of course, tweak and override.

And in the main navigation JS file,

we can now utilize these CSS files.

We can import classes,

from main dash navigation.module.CSS

to take advantage of CSS modules,

and import the classes that belong

to this component, from the CSS file.

And then, we can add them,

for example, on the header,

we should add a class name of classes.header,

which sets up the styling for this header.

And that is actually the only class we have

to add in the main navigation component,

because, all the Abra selectors are just,

nested selectors then, so to say.

That then allows us to work on the logo.

We can already import it.

So let's add an import to,

of logo, from the logo file,

and then let's work

on that logo file, a little bit.

Now the logo component,

will be a fairly trivial component.

Again, created and export it as we always do.

We will need some styles in here.

So we should import classes,

from logo.module.CSS.

So this CSS file we just added.

And then the logo here for me,

is a simple text-based logo.

I'll just set up a div,

with a text of Max Next Blog.

Of course, again, use your name here,

and then I'll add a class name here of,

classes.logo, using one of the CSS classes

or the only CSS class defined in here.

That will style that logo.

Now we add that logo to main navigation,

and we use main navigation and the layout.

And the layout is then wrapped around,

our rendered component

and underscored app JS.

So that should be everything now.

And if we now go back to our page,

we should see this header here,

which blends into the hero section here, on purpose,

where we have the, logo,

which is clickable,

and takes us to the starting page.

And then our two links here,

which are all the clickable,

but we haven't added any content

for those pages yet.

So at the moment,

they won't do anything.

But that is now the layout added,

and the navigation added.

And with that, let's come back

to the starting page and complete it,

by adding the featured posts below,

the hero section here.