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, 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?
[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.
[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.