So, what we'll cover here is password-protected
pages. Sometimes we want to offer something specific,
we don't want everyone to see, maybe a potential client. We'll create a password-protected page, then
we'll design the page that prompts users for the actual password. Common passwords include: [McGuire and Sara] Iceland, keyboard... [McGuire and Sara] How are you doing that? [Sara] You didn't add a password to your notes. [McGuire and Sara] So, you're just proving
a point? [Sara] Okay. [McGuire and Sara] Brussels, keyboard, Cinema
4D, Premiere, Resolve, iPhone. [Sara] I can do this all day. [McGuire and Sara] 1, 7, 3, 4, 6, 7, 3, 2,
1, 4, 7, 6, Charlie, 3, 2, 7, 8, 9, 7, 7, 7, 6, 4, 3, Tango, 7, 3, 2, Victor, 7, 3,
1, 1, 7, 8, 8, 8, 7, 3, 2, 4, 7, 6, 7, 8, 9, 7, 6, 4, 3, 7, 6, lock. Ikea has mediocre food. [Sara] Rude. [McGuire] Let's start by creating a password-protected
page. Let's go in. Instead of going to the utility page first,
let's create our password-protected page. We'll call it, password-protected page, press
return. Now, this is going to be an advanced design. Let's go to our ad panel and let's grab a
heading, we'll drag it right in, double click to edit, secret, press escape to de-select. That's the password-protected page. Let's move on to the second part and design
our password input. Let's go to the utility page for password. Now, the beauty of designing with classes
and having already designed one utility page before, is we can copy and paste and have
a great starting point. So for right now, let's delete this image. Let's delete this heading. Let's keep this field label for password,
enter your password, and let's keep this button as well. Now, we can select our utility page form. Let's go into our navigator here, open utility
page content, utility page form, and remove the existing class and apply instead, you
guessed it, frosted glass. Press return. So, we're inheriting those styles we designed
on our previous page. Let's go and add a heading. Let's add an H1. We'll do this above password and we'll call
this, this page, this project is password-protected, or we could say this content is password-protected. And there's a few things we can do here. For instance, on our heading, we can create
a new styling. In fact, let's see what happens if we grab
our traditional heading. That's okay, we might want to duplicate this
and create our own style for this page. Let's say, password heading and we can change
a few things here. Let's go down and decrease our size. Let's set a line height of 1.2, hyphen to
set unit less, maybe 1.1, and we can set a maximum width on this. Let's narrow it a little more. Say 280, and we're just going to add a few
more things. Let's go in and add our SVG, this lock. Press escape. The default size looks great. Maybe add a little bit of margin underneath,
15 pixels or so. Let's rename this to, lock. And if we start messing with frosted glass,
for instance, if we start changing the padding here, let's just add a bunch of padding for
this example. And if we go back to our 404, it's using the
same class. So, it's also going to make that one giant
as well and we don't want that. So, instead with frosted glass selected, let's
bring that back to 30 pixels on all sides. And with our lock selected, let's add some
margins, so there's a little space above this, maybe 30 pixels. That looks pretty good. Now, we can always add a paragraph for instance,
we can add a paragraph in between these items. So, with our password heading, let's reduce
this to maybe 20 or 30 pixels. Let's do 30 pixels and let's set a paragraph
here. Again, we can set a maximum width. We can set this to 60. Let's delete a bunch of this extra text here. Let me put some of it back and stop right
here. We have a few lines maybe right here, let's
rename paragraph three to, password paragraph. And usually we'd set constraints on the parent
element like the frosted glass, but because we don't want to affect both pages or make
any changes that are going to negatively affect our other page, we're setting this on password
paragraph. Let's add some margin, 30 pixels here as well. Let's drop the opacity a little bit more,
it's 0.9. Let's drop it a little bit. And of course our submit button, we have a
class here. Let's look at our buttons button and we have
utility button from before. Let's press escape to de-select, that looks
pretty good for now. Keep in mind, frosted glass does not have
the frosted effect. This is a great plain password page, it looks
okay. Let's do two things to change this. One, let's go back to the 404 and let's grab
that HTML embed, copy it to our clipboard. And we'll go back to password. In our body, we'll press paste and we'll move
that to the top. If we preview, that effect is not very visible. How can we make it visible? Let's build an interaction. So, let's de-select here. And for right now let's open utility page
rep and for our utility page content, let's set its display to none, just for a moment
because we want to build this interaction. Let's go in and build an interaction. We're going to use a grid. Two rows, two columns. Let's change the color of our outlines, so
it doesn't sere. So, maybe use black, much better contrast
and let's add a bunch of columns. Let's do, let's say seven columns, eight columns,
no seven columns and seven rows. Let's call our grid, password interaction. And if we preview now, the grid, it's just
a guide. There's nothing actually there. We have to put content inside. So, let's add a Div block and we're going
to build one of these and then we'll copy and paste to have a bunch of them. So, let's go in and password cell and it's
going to have seven children. And here's what they'll do. We'll add another Div block with password
cell selected, command K, Div block that puts a Div block inside that Div block. We'll call this one, password cell color. We're going to choose a default. Let's go and start with red. We're going to go through the color spectrum
ROYGBIV, so let's start with a red color. And we're just going to copy and paste. So, now there are two sibling elements inside
of our password cell. This one, we're going to add a combo class. This one is going to follow the spectrum order. Orange, and we'll set its color to an orange. Same thing, copy and paste. This time we're going to duplicate the combo
class, yellow. And of course we'll select a yellow color
for this. We can rearrange the order later, let's copy
and paste. We're going to add another one. This time, we're going to duplicate the combo
class and call it green. The color of course, green. Copy and paste. This one's going to be a duplicate class. Orange, yellow, green. Blue. We'll choose a blue color. Copy and paste. Indigo. And we'll choose an indigo. And finally, copy and paste one more time. Duplicate this class, violet. Then of course, let's choose a color towards
violet. Almost a pink, right here. Let's go up to a pink color like that. And let's rearrange, red is all the way out
of view here. Red, orange, let's move this up here. Let's do yellow right here. Green should be next. Use blue, indigo and violet pink. And because all of these are combo classes,
we can go to the base class and effect all of them at once. For instance, if we size these two 20 by 20,
it resizes all of them to 20 by 20. Let's remove both of those because what we
really want to do is set its position to absolute. now something we want to do here, when it's
absolutely positioned is we want it to fill the available space inside its parent. So right now, its parent, because nothing
else is set to relative, is look to the body. We wanna select this password cell and set
its position to relative. Now, we need to give our password interaction,
this grid, a defined width and height. Let's set the width to, let's say 75% of whichever
view port dimension is minimum. Let's do vmin and the height to 75 vmin as
well. So, what that means is we have these cells
colors. Let's decrease the opacity a little bit. Let's drop the opacity of these cell colors
to a lower value, maybe 20%. And it's getting kind of grayish because the
colors presently are stacking, but I'm going to do something different here. In fact, we'll select our utility page rep
and we'll add transform settings. Let's set a children perspective of 1000 pixels,
and this enables a 3D camera effect. So now, we can go into the password cell color
and one by one, we can start moving them backwards, along the Z axis. Here's how that'll work. On orange, let's move this back a little bit. You can see it's moving back. Let's say minus 10, because this is easier
to count for us. And then the second one, this one's yellow. Let's move it back. Let's move it back to minus 20. Same pattern here. This one will move, minus 30. This one will move back minus 40, minus four,
zero. And we'll continue that pattern, minus 50. And then of course, one more minus 700 or
minus 60. So, before we create our interaction, let's
fill up the rest of the cells with password cell selected. Let's go ahead and create a Symbol out of
this. That way, we can make a change on any one
structure and it'll affect all of the cells. Let's create Symbol. We'll call this, "password cell." And we'll go back to the instance, then we're
just going to copy and paste several times and you can see that 3D perspective take effect
as we do that. It should be just enough. That's our password interaction, at least
the grid itself. And now, if we apply any type of transform,
that's a rotation, so let's rotate. We can see that 3D effect in action, we'll
make this a lot better than the interactions tab. But just to demonstrate, we can do that in
2D and 3D transforms, holding down option to click and remove that transform effect
because here's where the fun starts. We're going to create an interaction, over
in the interactions tab. On the page, let's add a trigger when the
mouse is moving in the view port, and we're only going to do this on desktop and above. Let's create a mouse animation. Let's add a new one. This will be called, password interaction. And when the mouse is on the left side of
the screen, let's rotate this. Again, the password interaction grid is selected. So, let's rotate that to the left. Let's do minus 40. That looks pretty good. On the second one, we'll do a positive value
of 40 and let's add two more y actions, it's moving up and down. We'll do rotate. Up here, we'll do, let's say 30 or maybe 20. And then, on the bottom one, we're going to
do the same thing. We'll do minus 20. Of course, at any time we can go into live
preview or just go into preview mode to see how this is going to look in real time. And that looks pretty good. Now, let's make some changes. Let's go out of preview mode and for our password
cell let's double click to edit our Symbol. With our password cell selected, let's press
done and let's change our background color of the password cell itself to black. And the top password cell color is positioned
at, let's check... There is no 3D transform on this one. So, let's move it back, let's say one pixel. And let's go back to the instance preview. Now, I have this darker color in front. There's a few things we can do here. Number one, we can make sure that black color
actually matches our background color. So, let's check our utility page wrap, let's
see what that color is. In fact, we can go here and set that color
as a swatch, dark, dark, dark gray, blue, save that. And we can use that in the password cell,
double click to edit, and we'll go in and change that to match. Now, if we go into preview mode, we're matching. Let's increase that depth and rather than
reposition, rather than change the Z value for each and every position of all of these,
we can just go in and make one change on the password cell itself. We can emphasize that Z depth by making one
transform, and that is scaling along the Z axis. The higher this number, let's make this much
more dramatic, the more it scales the depth value for each of these. Let's do something like five or six. Then, we'll go to preview. We have a depth right there. That looks pretty good. Could we take it further? Yes, but let's see what the frosted glass
looks like in front of this. So, let's go back to our utility page content,
of course, remove, reset our styling there so we can see it. Let's select our password interaction, what
we just created and let's make sure this is positioned absolute. And because the utility page content, because
that is Z index of three, that means it's going to stack on top of the password interaction
and because we have the HTML embed, it's going to blur everything behind this. So, let's go to preview mode and see what
the interaction looks like. Now, if we want those colors to be more vibrant
and we want to decrease or increase that opacity, we can always do that. Let's open up the password interaction, double-click
the password cell, and of course select our base class password cell color, increase that
opacity. And we can make it as vibrant as we want,
let's say 50%. Let's go back and preview, then we can see
what it would look like on a more vibrant set of colors. And really quickly, let's add smoothing. Right now, it's pretty responsive to our mouse
position. Let's go out of here and back to the interaction. Mouse move, and we're going to add smoothing,
let's make this, let's say 96%. Then, we can see the smoothing, the damping
has increased. Now, if we do want to see that red a little
more boldly, we can go in and in our style panel, we can move this back. Instead of one pixel, we can make this minus
10 and we'll have to go in sequence, which will time-lapse right now. Due to the magic of editing, we'll look back
and it's done. Let's go back and preview mode. We can see everything stacked, including now,
even spacing between the black and the red all the way through the ROYGBIV spectrum. Now, we haven't connected these two things,
our two steps here. Let's go out of preview mode and let's connect
our page. So, if this is a password-protected page,
let's press the cog. We're going to add password protection. We're going to type a password. Ikea, we'll press save. And once this is published, if someone wants
to access our secret page, they'll have to know that the password is Ikea and that's
it. We created a password-protected page and we
created the password page that shows up to let users type in a password that lets them
access the password-protected page, is a very confusing sentence. But we did both, the page or pages we want
to protect and the page that prompts the user to enter a password. That's password protection in our portfolio,
project. Grimur... [Grimur] I bet you can’t guess my password. If you guessed #21DayPortfolio, you’d be
wrong, because that’s definitely not my password. But it is Stacy’s. Share your password page (whether or not it
has advanced interactions, or it’s maybe just a really clean design). And I’ll change my passwords to the username
of the designs I like the most.
