Guess what guys?

You are in the home stretch.

Are page has really come together, and we've got our media queries set for

smaller sizes.

So now, let's look at how to polish and finesse our design.

Some of the things I have in mind are styling our content at

the bottom to be a drop down nav of the top.

Arranging our benefits section as an aside to our requirements section.

And adding some nice transitions and animations.

First, let me explain the extra credit from the last video and

how we achieved this drawer effect for our aside content at larger screen sizes.

We set a break point of 64.125em, which is

just slightly larger than our 1024 pixel or 64em break point.

The reason behind this is we'll be utilizing a CSS hover effect

that won't work on touch screens.

And most touch screens are under this pixel break point.

Since we don't have access to the HTML or JavaScript to create on click event,

we'll utilize this media query to show this draw effect for our desktops.

It's not a perfect solution.

But's it's our next best option since we don't have access to

other tools to create a bullet proof one.

So with our min width at 64.125em.

I've set our aside to have a position of absolute.

A top of -26.5.

So the majority of it's hidden above our header section.

And a transition of all 0.4 seconds and

ease to create that nice sliding out effect.

Next, I've set the hover state to be a top of -1em,

which will be where it slides to once it's hovered over.

Then, I've added a symbol button-like plus symbol with

the pseudo selector after on our aside and set its content to be a plus symbol.

We've also positioned it to be absolute with the text aligned off center.

It's background same as our aside.

It's color is our sandy white tone.

It's font size is 20 pixels.

And it's okay to utilize a fixed font size and

width here, as I don't want these elements to change.

And they're so small that it won't make a difference on smaller screen sizes.

Next, the width, height and

border radius are all 30 pixels, which will make this element a circle.

I want to position it in the center with the dark navy meets the sandy white.

So I gave it a bottom setting of -.65eM.

A left of 50%.

And a margin left of -15 pixels which is half of our 30 pixel width.

Let's check it out just once more to see how it looks.

The drawer and it's function is noticeable through the use of our plus symbol here.

And it's sliding transition effect is a nice touch.

Notice how it disappears under the 1024 pixel mark, and

moves now back to the bottom of the page.

Now let's get in to styling out our benefit section.

I want this content here to work as a subtle sidebar next to

our requirement section once there's enough room to fit it in.

I've done some testing and found that at 752 pixels or

our 47em media query, is a good place to start.

Anything below that would be too tight to try and fit it in as a sidebar.

This is also nice, because the size falls right below the iPad screen size, so

people reading this on an iPad will still get the sidebar layout.

To do this, I'll set my benefits class to have a position of

absolute, a background of none, a float to left.

This will allow us to position it within the requirement section.

I found that I like where it sits with a max width of 7.5 rem.

I text the line overwrite.

And a margin top of 12em.

To position it to the left of the content, I've given it a left of 50% and

a margin left of -25.5 rim.

[BLANK_AUDIO]

This technique aligns the piece in the middle of the page and

then moves it back to the left through a negative left margin.

This helps line up the content near the left margin of our

main content block for requirements.

Let's see what that looks like now.

I'll save and refresh.

All right.

That's a good start.

But let's continue to hone it in by decreasing it's font size and

styling out our content a bit more.

For our benefits H3 here, I want a font size of 1em, so

it's gonna be a lot smaller, and a margin of zero.

I also want this to be small caps as it will create hierarchy to

the content below it.

So I'll copy that small caps code.

[BLANK_AUDIO]

And I'll set it's font style to be normal since our base H3 is Italic.

Now for our paragraph copy and our benefits class,

I'll set it's font size to be 0.75em, the next size down in our scale.

With a line height of 1.4,

so it's a bit tighter, because our measure is a little tight here.

Let's save and see what that looks like.

Great.

Our benefits has been nicely arranged to the right side of

our requirements section.

This will need some tweaking as the browser expands because the font

sizes change in our media queries.

So let's fix it up.

As we increase our browser size, we notice our font change here.

Our measure for our benefit section is now a little bit tight and

a little bit too close to the edge of our requirements.

So let's fix that up.

Our min width media query will correspond to our max width one.

So we have this one set up at 54em.

I'll change our benefits class to have a slightly larger measure of 8 rem and

give it a margin top of 12.5em.

And in margin left of -28 rem,

which will position it well within our requirements class again.

Let's check out what that looks like.

Good deal.

It's starting to work well for medium sizes here and

feels positioned well within the container.

[BLANK_AUDIO]

With a font size increase at 64em our benefits class could use

some more changes.

So I'll go in and adjust our max width, our margin top, and

our margin left here to align it well within the container again.

[BLANK_AUDIO]

Let's refresh and check that out.

Nice.

Our benefits are now looking good for our mid to larger-sized screens.

We're getting close, but we're not done yet.

I wanna make two more media queries for large to extra large screen sizes.

People usually sit a little further back from large displays.

So it's nice to have a font size increase for comfortable reading.

We're not going to be able to view larger browser sizes here,

because the max width of of this video screencast is 1280 pixels.

So I'll just talk through what our code is doing here.

If you have a larger screen size,

then feel free to build out this code in your own workspace and test it out to see.

I've created a min width media query at 94em or

1472 pixels and upped our body font size to 1.375 or 22 pixels.

Most of our typography still held up well here.

But we needed to adjust a few things, like the measure of our summary and

benefits classes.

And I've adjusted the width of our explanation and participation H3s and Ps,

so their content measure doesn't go overboard for those two columns.

I also did one last media query at 124em or 1920 pixels.

I've increased our body font size once more to 1.5em or 24 pixels.

This new size meant we needed to adjust the measure on our summary class, all our

columns and we needed to slightly change the margin left of our benefit section.

Again, if you have a large screen, be sure to resize your browser and

check out these changes and how they actually look on the web page.

Now, let's add a few final touches to the design to really finesse it.

So first, I want all my links to have a smooth transition effect.

So, I'll go up here to my a link tag and add a transition of all 0.4 s and es.

Let's save and check out the difference.

[BLANK_AUDIO]

So I'll refresh our page.

And up here in our links, we see we have them slowly transitioning into their

color instead of just jumping to that color.

It's funny how something so simple can add so much to a design.

I'll also wanna enable kerning and ligatures on my body through

the font features settings with the necessary prefixes.

So I'll write out that property and

paste in these other prefixes for browser support here.

This code is what we went over in our lesson on advanced typography.

Lastly, I want my header and top drawer to fade in as someone lands on the page.

We'll use the CSS animation property along with the necessary prefixes for

browser support.

Since this isn't so much typography, I'm just gonna paste this in at the bottom and

explain it to you guys.

Here's our key frames for our animation, and they're going to be fading in with,

first with an opacity zero and then landing on one for that fade-in effect.

This other code down here includes the necessary browser prefixes.

[BLANK_AUDIO]

So I'll add in an animation of fade in two seconds to our aside for

that media query where it's at the top.

And I'm gonna copy that and add that to our header.

[BLANK_AUDIO]

[SOUND] Let's save and check that out.

yeah, that's nice.

Just in case you missed it, I'll do that one more time.

That's the stuff.

Great work.

Our design is now complete, polished, and fully responsive.

No matter the case,

be sure to test your typography on multiple browsers and devices.

In summary, we analyzed the content, chose a typeface pair to work with,

put together a color palette, set up our web fonts and

typographic scale, laid out type with good measure and

rhythm, created typographic hierarchy in the design and polished it responsively.

[BLANK_AUDIO]

We've covered a lot of ground over this project.

So be sure to download and

look into the final CSS for a better understanding if needed.

Also, for extra credit, try creating your own Zen Garden and submitting the own

design, as this is a great way to participate in the web community.

I hope you guys leave this course with a better understanding and appreciation for

web typography, and know how to execute it well.

Go forth creating websites with nice type.