- In this video we're gonna
be looking at using transforms and specifically transform origin to do really cool and fun stuff like this. I think, maybe it's just me, but I think that's pretty cool. (light music) Hi there, my name is Kevin
and welcome to my channel where we learn how to make the web and how to make it look good with weekly tips, tricks, and tutorials. If you're new here I just love CSS. I love having fun with CSS. I love pushing and doing
cool stuff with CSS. And I really want to instill
this love of CSS in everybody. Like I want people to realize that it doesn't have to be frustrating. And in this video I do a lot
of things where we can see that there's problems you can run into that are really easily solvable, if you really understand how it's working, 'cause we're using transforms
and transform origin, but we're also gonna get
into the deeper things with a little bit of stacking context and just how suit elements work. I sort of gloss over those a little bit. But I mentioned throughout
that I have other videos that do deep dives into them, so but you'll see a little
bit of how they're working as we're going through it all. Because those were the types of things that can really solve your
problems and make CSS fun 'cause you understand how it's working. And just help you level up your CSS, and I think it's gonna
be a really good video, and we're gonna do some
cool stuff with it. Before we get to that cool stuff, though, I just wanna say a really
big thank you to Skillshare for once again sponsoring
one of my videos. If you don't know about Skillshare, how do you not know about Skillshare. Skillshare is, I'm sure
you've heard of them before, whether it's on my channel or another one or just through your friends telling you that Skillshare is awesome because it's a really cool platform to learn on. You're watching this video because you wanna learn something, so that means that they're the
right place for you as well, don't leave here. I still want you to watch my videos, but they have a lot of
really awesome content over there as well. They have stuff on CSS. I've talked about Rachel Andrews' grid series that's on there. But also, a lot of people here always want me to do more JavaScript. They have lots of courses on JavaScript, whether it's specific for beginners, they have some advanced stuff, they have all sorts of
JavaScript goodness. It's a massive huge learning platform. It's not just about coding. It's about a whole bunch of other stuff. I've done a whole bunch
of Photoshop classes, like I mentioned last time. There's Illustrator stuff, there's how to run a business stuff. There's just lots and lots of things that you can take advantage of. Not only are they being generous
by sponsoring this video, they're also being generous by giving you a two-month free trial to check it out and see what type of
awesome stuff is in there. That's how much they trust their product. So you just have to use the link down in the description below and be one of the first 500 people to do so and you get those first
two months for free. So finish watching this video. Don't run off right away, but when we get to the end
I'm gonna give you a reminder, click that link, and get
your two free months. So thank you very much to Skillshare. Now it's time to start talking once again about transitions and transforms. Now if you're not already familiar with transforms and transitions, I'd encourage you to check out an article that I wrote a little while ago. It was a few weeks ago,
maybe a month ago now where I took a look at
just the basics of it, and there's actually a
video embedded in that using a cool platform called Scrimba, 'cause it just worked out really well for looking at the basics of transform. So if you're not familiar with transforms, check out that article that's linked in the description below. It's going to go through the basics of how transforms work. And again, there is a
video that's in there if you're not a reading person, you're more of a video person, just scroll down a bit and
you will run into that video. But that's just gonna
sorta get your feet wet. But if you already know
how transforms work but you're just like, well how did he do that
stuff in the intro? I want that. Well, that's, you're in the right place, 'cause we're going there right now. All right, so I already
do have some styling here as you might notice. What I've done, though, is I have included a link in the description below that has the exact starting place I am here. So if you wanna follow along you can. I just did this to help speed things up so we can really focus on
those transition effects that we wanna be doing. So the very first one
I wanna take a look at is these little links here, 'cause that's really gonna
lead into everything else I ended up doing on here. I'm actually, I'm gonna do
a little zoom in on this. We can make this a little bit
bigger for what we're doing just to make it a little
bit easier to see. So I've created these fancy looks here, fancy looks, fancy-links. If we come to my code you
can just see I just have a class fancy-link, is all I've done for that. So what we can do on these fancy-links is I wanna add a pseudo-element to them. Now if you don't know
about pseudo-elements, I'm gonna be using them
a lot in this video. I do have another video, or I have a three-part series, actually, that does take a look at pseudo-elements in a lot more detail and there should be a card popping up for that now. So I'd encourage you
to check that out first and then maybe come back to this. But I think you could
follow along either way. So what we want to start with is our fan, I gotta spell it right, fancy-link. And I want the after
pseudo-element on there, and I'm gonna be using a
display of absolute on here. So that means I am gonna
come up on the original and do a display of relative just to make sure that the
positioning of this is relative. It's gonna get positioned within reference to the original link and
not of the entire body, which would happen if I did not have that. So with that I am going to
start with giving it a content because we need to have
content on a pseudo-element or it will never appear. And I'll give it a position
of absolute, like I just said. Next, we want to set it up. So let's just do a left of zero. I'm gonna do width 100%. I'm gonna give this a height as well. Say two pixels so it's big enough that we can actually see it. And I'm gonna give it a
background color of current, currentColor like that 'cause then it's gonna steal the text color. Whoa look at that. Clearly did something wrong. I did display relative here
instead of position relative, which is something I
do all the bloody time. But we can actually see that sort of fix things a little bit. So my left of zero is working. I'm also gonna say a bottom of zero. Not sure why it went so far down. But that's why the position absolute does eventually get us
to the right place there. So we have these underlines
that are coming out underneath. Now what we want to do, and we're not gonna do the entire thing. 'Cause I wanna sort of explain
how this is gonna work, but I'm gonna put a scale on here. But when they do scale
you can see I have scale. We actually have 3D scales
and X, Y, and Zed axis. And for this I'm gonna use the X axis. And I'm just gonna put 0.5 for a second so you can see what it's actually doing. So I'm gonna hit save on this. And you can see it shrank down to half of the original size like that. So that's really cool. We can control the scale
on the X or the Y axis. So Y we wouldn't be able to
see 'cause it's really small. We're gonna play around a little bit more with the regular scale,
the scale X and the scale Y when we get to our buttons here. But you can see it has scaled it down. So now what I can do is transform-origin and set this to left. So right now it was shrinking the center. It shrank on this side and on that side or it scaled down. Now if I do a transform-origin
on the left side you can see it is switched
over to only be on the left instead of, so if I make this
a bit of a smaller number, it's always sticking to the left side. Whereas if I don't have this, it's always gonna be stuck in the middle. So really, really cool. And now, what we can do is our fancy. Let me just move down a little. Fancy-link hover after. And what we can do is transform
scaleX and put it up to 1. So now when I hover on top you can see it's going to the full size. Now it doesn't look so
good when we do that. So I'm gonna come back up to
my regular fancy-link here and I'm gonna add in a
transition for transform, we'll say 250 milliseconds
and we'll do an ease-in. Now one of the other advantages with this is scaling is a nice performant
way to do transitions. Let's just save that. Yeah, there we go. We can see it's working. So transforms, or scale is one of the more performant options
we have for doing transitions. So you could get away with
doing the same thing here, with playing with your
left and right positioning. The left could be, or the
right could be at 100% and then we could have it grow and shrink. But this is actually gonna be a little bit better for performance. So we can see it is growing and shrinking. But what I did is my original
scaleX was actually to 0. So when I do that it looks
like there's nothing, but then when we come on and off we can see it growing and shrinking away. So that's a nice start but, you might have noticed
in the finished version we can go look. It comes in but then it
leaves on the other side, which I think is a lot of fun. So we can do that same thing. We can have it come and
go on different sides. But what we wanna do for that is come and change the transform
origin on hover origin. I want this to start on left. So this is when I hover I
want it start on the left and move toward the right. But then when I take it off
of hover I want it to switch. So I want it to move toward the right when I move my mouse away from it. So let's go and check that out. You can see it moves in but then it's moving off in the other side. So you get this cool little
like sneaking type of action. I think it looks really
fun and really cool. The one thing is you will
notice that the longer link, it does go a little bit faster, and with a short link it
does go a little bit slower. There's nothing you can
really do about that 'cause it has to do the entire
thing in 250 milliseconds. So if it's really long it's
gonna have to go really fast. And then if it's just one word or really, like the letter A or something, it's gonna go a lot slower 'cause it has less distance to cover. But I still think it looks pretty awesome and I really like that effect. So we can use the same principle to worry about our buttons over here. And because we can use
the same principles here, what I'd encourage you to
do is hit pause on this, go to those files that I've given you in the link down below, set them up so you're using my starter CSS and see if you can do
it on your own from what we've just learned 'cause I
think putting it into practice will be a really good thing to do. Once you've done that you can come back, or if you get stuck along
the way you can come and see how I did things at the, how I ended up doing it, whether you managed to do it, if you wanna see I did it differently, or if you just get stuck
and you wanna see what I did 'til you get past
whatever is blocking you. So I've already done a little bit of basic styling on my buttons just so they don't look terrible. But now I'm gonna come down and here I'm just adding my margin
in between those buttons. Those come down and
actually start doing it. Now for my buttons there's a couple things that are important is they
all have a class of button, but I have my button-one,
button-two, and button-three, so we can do things a
little separately as well. So what I'm gonna start
with is my button after. And once again we do have
to give this a content. And position absolute. I'm gonna give it a width of 100% 'cause I want it to be the full size. A height of 100% 'cause I
want it to be the full size. Now height is a funny
thing 'cause normally it will calculate based on
the width of the parent. But if it's positioned
absolute it will actually use the height of the parent then. Let's give it a background color. I'm gonna do rgba so
we can actually see it. Now I'm doing rgba and let's
do like a 0.5 or something. Because what that's
going to do is you see, it's gonna keep the color
of my box a little bit. So I don't have to come up
with a dark orange shade. I can just use an rgba value, and it's gonna darken it by itself. Now the problem is they're gigantic because I forgot on my button, position, I didn't do
display this time, relative. And now, there we go,
they're the same size. The only problem is they're
not positioned properly. So up in here and say top 0 and left 0. So they should be lining up right on top. Now the only problem is they're
also on top of the text. You might wanna check
another video of mine, 'cause what I'm gonna
do here is I'm actually gonna give it a z-index of -1. Which is going to push it to the back, but the problem is it was
in the back of everything. It's now hiding behind
this white box over here. Interesting thing, though,
is once you've given something a position you
can give it a z-index. So this is position relative. I'm gonna give this a
z-index of 1 and hit save. And then my black border's
where I want it to be. And you might be going,
what just happened? As soon as I give my button a z-index it's giving a new stacking context. So this -1 is now within this button and not within the page
in general anymore. So it cannot go behind my button 'cause it's living in my
button stacking context. And if that's really confusing to you, there is a card popping up now or soon, that will pointing to my
video on stacking context because it's an important
thing to understand and sometimes once you
know how to manipulate it, can make your life a lot easier. 'Cause if this is confusing
I would encourage you to figure out how zed, or
how stacking context works. Now obviously I don't want the to fill up the entire space like this. So what I'm going to do is let's come on and do my, we'll start
with one of them at a time. So do my button-one before, I did after, not before. And we can control the after
on this one separately. So we can do our transform
scaleX and we'll stick this one the same as what
we did on the last one. I'll start with a 0.5 just so
we can see that it kicks in. I can say that my transform-origin, transform-origin is left. So it's growing out the left side. And then just like before, we can do my button-one hover after has a transform scaleX of 1. So when I hover on top we
can see that it is working. Now what I'm gonna do is instead of having to do a transition
on my button-one, my button-two, my button-three, I'm just gonna come up
here on my button after. So this is for all of them. And we need to put my transition on here. So transition transform, we'll say 200 milliseconds this time, and an ease-in. And now we can see we have
my little animation there. But just like before I'll
go ahead and search that woops, not a 1, we want that to be a 0. And now we can slide in and out or we can do just like
before where this was right, let's just copy this
whole line of code here and paste it and switch
that one over to left. And now it slides in one side and goes off on the other like that. So nice and cool. So we can take a lot of
the same things here, and I think what we'll
do is actually just copy this whole thing and paste
it but switch these two over to a button-two. So with the button-two,
instead of doing a scaleX I'm gonna do a scaleY. So X is on the X axis,
so we're scaling our box. Actually, you know
what, I'm just gonna do, yeah let's do that. The only thing is now
we're working up and down. So this one I'm gonna switch to top and this one I'm gonna switch
to bottom and hit save. And now it comes up and then that way, and actually I think I'd like that if it was the other way
around more, bottom and top. And there we go. We can have it come in on one side and go down on the other side. So I think that's pretty fun that we can do sort of two
different effects like that. And the last one we'll do here. So that would be, we have
it all saved already. So this will be my button-three. So on my button-three this one I can just do a regular scale like that. So I'm actually gonna
put this to like a 0.5, take that off for a second. So this scale, 0.5, it's gonna scale on the X and the Y axis. And take that off. So you could even have it grow out the middle like that if you wanted to. So you can see that I'm scaling both ways, not just on the X or the
Y, but I'm doing both, whereas if this was scaleX
it's only shrinking it one way. And if it was scaleY you can see it's only shrinking it the other way. So if we just do that it's
doing both at the same time. So if that was a 0 we can have it grow and shrink right from the middle, 'cause the default
transform-origin is center. So we can have it growing and
shrinking from the center. But we could take advantage here, and we could do a, I'm
gonna say bottom right. 'Cause this is where it's leaving from and this is where it's entering from. So this could be a top left and hit save. And then we can have it come in and leave on the diagonal like that. Not my favorite, I think
I like this one the most, but you know, go with the one you think or play around with it. You definitely don't
have to leave it at that. You can do a whole bunch
more with this, I think. All right, so that is awesome. Now it's time to get
onto the really fun one now that we have our
little buttons there done. So just really fast, I haven't done very much in our card here. I've added a margin bottom there just so I could scroll down. But on my class I have my content card. I have just a card_title, a
card_body, nothing too fancy. Just in case you're
asking, this is with the BEM naming convention, which
I have done a video on, so it's why I have a
double underscore there, 'cause I usually get questions about that. So nothing too fancy
apparent, h3, a paragraph, and nothing else going on. And what we wanna be doing is making it so we have a little thing like that. So I think that's pretty fun. And with this we're gonna have
to explore one other thing. If not done just with transforms, well it is done with
just transforms actually, but it also has a little
bit of extra in there. So once again, I'd
encourage you to see if you can figure out how to
do that or how I did it. So pause the video, jump into
the starting file that I gave and see what you can do with it. And if you can manage to figure it out, but then when you get
stuck you can follow along. Or if you managed to finish it and you wanna see how
I did it differently, you can check that out as well. So you can see here
I've already had my card that has some padding on there. Has the background image. The background image, I'm just using a random placeholder from Unsplash It. I also put a background color
with the background blend mode 'cause without that probably
won't be able to read the text. There, see you can't read the text at all. So that just takes, I'm
blending the background with this dark gray color and multiply
keeps the darkest pixels, so you can see it's
darkening it and all there. I left the card_title here
empty just so I'd remember to, this is where we want to do most of our work at the beginning anyway. And at the very beginning, I think, I don't actually need,
we're gonna come back. Actually, no, we do need to do one thing, because once again, we will
be using pseudo-elements. So position relative. It's almost a masterclass as
much in pseudo-elements here as with the transitions. So a couple things. So let's come down and
do my card_title after, as you probably guessed. And once again we need a content on there with no content in it. And I'm gonna give it
a position of absolute. We'll give it, in this case I want the height to be a little bit more, like I don't want it to
be flush with the text. I want it to be a little bit bigger. So with the top of like -.25
I'm actually gonna use rem. Usually I use m for this but
we'll see why in a minute. And I'll explain my
decision to use rem here. And actually, yeah, you'll
notice here on my card my padding, I also sit with rem. So if you saw last week's
video where I looked at the difference between m and rem. So if you're not sure about
those, that could help you out. But I do say usually with padding margins I'm using m's. But in this case the rem
is going to help us out as we'll see in a second. We'll give this a width
of 100% to start with. And the background is my, that orange color which
just happens to be ee6352. So let's see, do we get anything? Width. There it is. So top is there. Let's give it a left of 0 just so. Now we're running into that same problem that we ran in before. So I can do a z-index of -1
on this to push it backwards, but now it goes behind everything. Do you remember how to fix that? Here where I set the position of relative, that means I can also
set a z-index on here. Index of 1. And the number here
doesn't actually matter, but what matters is I'm
creating a new stacking context, which now puts this -1 can't
escape outside of my title. It's just all the way
on the back of anything that happens to be in here. Now what I wanna do is I
actually want this to start all the way flush on the side there. And because my padding
is set to 2rem I know that what I want my left
to actually be is -2rem. So that should pull it perfectly flush. That's perfect. The other thing, you'll
notice that the width. I actually want it to be closer to the total size of my text. So instead of a width of 100%, what we can do on here is use a calc. And on my calc what we can do is 100% plus, oh actually one thing
I'm gonna change here, too, 'cause 100% it's doing 100% width, which is, it's a block level element. So even though it's a short text it's taking up all this space. So if we come on to my card_title, we can also give this a
display of inline-block. So the 100% is based on the content and not based on the size of the parent. So then this 100%, and then we can add a little bit to this, so I added 2rem to this side. So just to balance it we could do +4rem. So now I have 2rem on that side, 2rem on this side right there, and it balances out pretty much perfectly. So that is looking pretty good. But obviously I don't want it to be stretching that whole size just like that. We want it to be a bit smaller. So we can use my transform
and, you guessed it, scale, scaleX. I'm going to do it at like a
.1, see what that looks like. It's probably pretty good. We're stuck in the middle. And now my transform-origin would be left. There we go. So it's on the left like that. And actually that's pretty good. Maybe this could be like half that. I don't know, you could play
with the number a little bit to get exactly what you want. We'll go with that one. So it's sort of highlighting
my title which is nice, but whenever I hover not
only on the title itself, but if I hover on the card
I do want that to grow. So we can come here and say
card hover card_title after. And what is it we wanna change. We want the transform scaleX 1. Let's just see that out. There we go. Boom, and it's anywhere on
the card I hover it's working. We just need to add in
our transition note. Transition transform 250
milliseconds ease-in. Let's see what that looks like. Perfection. I think that looks pretty good. Now the real fun part
comes with this text here. So what we want is that grows out. Once that stops the white part comes and reveals this text that's underneath. So a few little fun
things we can do for that. So first that's my card_body. So the first thing is I'm
actually gonna choose my color. I don't wanna use black or a dark color, 'cause we can still see it, right? Or even, except we add the 333 on there, but I can still see that. It's really hard to see. It's getting pretty close to disappearing, but we can do one step better
and say it's transparent. So it's literally invisible
and we can't see it. So that's step number one. But I think actually before we keep going I'm gonna leave that
as transparent for now just because, I'm gonna
leave it off, I mean, while we style it, but that's
what we're going to be doing. So we can turn that back
on in a second after. Content is nada. Position once again is absolute, position, I spelled it right, that means my card_body
needs a position of relative. And then we wanna position
it where we need it. So let's just do a top of, I'm just gonna do top 0, bottom 0 left, left of 0 and right of 0. Background is white. Okay, good. So we can see that it's
there, which is nice. Once again we need to (voice
muffled) back so z-index is -1. We need a new stacking context so we can come back up to here, z-index is 1. There's other ways of
creating stacking context that's not just through z-index, but again if you wanna
know more about that check out the video on there. Actually, let's just make sure
we can see my text, black. Okay, so we can se the text. So that's a good sign. Now one problem I have is this giant space in between them in general, I think. So let's come on to my card_title itself and set a margin-bottom of 1rem, so I know exactly what that is. We still have too much. Card_body, let's just
give it a margin of 0. Make it a little bit easier. There we go. So we know, so my top. My top here. My top, it's not going to be 1, 'cause I can probably tell that space, -1, I think it's gonna be too much because you can see it's overlapping a little bit. It's overlapping because I
have my bottom of -0.25 here. So we're sucking down by 0.25. So we just have to make that 0.75. And I think, there we go. It'll line up perfectly. If I'm doing that on the top I want this same thing on my bottom, just to balance everything out that way. I think it's ugly that it's touching here. So on the left we might as well just stick with the same number. And this is where having like a custom property could come in handy, but I just made all these changes. Eww, I don't like that they're the same. It won't matter 'cause
this is gonna disappear. It's all good, it's all good. And the right 0 I think is fine. Or actually, I think a custom
property would go good there. Just, we have like here, this space, this space, and this
space all being equal. I think looks little bit nicer. So we'll stick with all
those being the same. So once again I can move my z-index and let's do our transform scale. But this time I'm gonna do a scaleY, just like with this button, cause we want it to be going, moving up and down. So scaleY will be 0. So it should disappear when
I hit save there, super. And then when we card
hover, the card_body after transform scaleY 1. There we go. So now we need a transition on that. Transition transform 250 milliseconds ease-in. And transform-origin top. Ha, look at that, it's
already pretty cool. I like what it's doing,
but we want this to grow and then we want that bottom thing to sort of slide out afterwards, 'cause I think that makes
it a lot more interesting. So the way we can do that is
we can use a transition delay. So I don't want this transform to happen until this one on the top has finished. So it's actually really easy to do. I'm gonna keep this
here with my transition. We can add, you can do a
transition delay like this with it's own, so it'd be 250ms, because I'm not worried about this timing. It has nothing to do with that. It's going back up to this one here. So I'm looking at, when
the orange box is growing it's taking 250 milliseconds. So it's saying when this finishes pretty much we can start that one there. So let's save that and see if it works. Here we go. Cool, right? Now if you want to, the transition delay can also come in, I think it's here. Yeah, there we go. So you can add it all in
with the shorthand here instead of having to have a
whole bunch of properties. So that's cool. Now the only problem, as I said, we can see our text even when we are not, when it's not there. Before it's supposed to come
in we can still see the text, which is a problem. So we can come back up and, where is my, so we can come to here and
make this transparent again. So hit save on that so it disappears. And my card, I guess we
can do it right here. Card_body, no, card, doo doo doo, I'm actually gonna leave that there and we'll do it right here. Card hover card_body color is black. I guess we should stick
with my, still dark enough. Still nice and high contrast. We'll go with that one. So right away that's sort of working. But the only problem is now when I start, if you have really good
eyes let's make this red. Just so you can, I think it'll make it a little easier to see. As soon as my mouse goes
on top the text appears. And as soon as my mouse
leaves it disappears. So it looks a little weird, right. So let's go back to 333, and you can see it even though it's super subtle. But it's really obvious when this leaves that it's disappearing. So what can we do to fix that? It's not that complicated. What we can do is actually, and this is not as
performant as I was thinking. With everything else I was sticking with transitions that are performant, which is on the scale. You can also do opacity and, is it rotates? But color isn't necessarily
the most performant. But hey, we can cheat a little bit here. It's not something I don't think they would put a big slow down, and if it doesn't move at a
smooth 60 frames per second nobody's gonna notice anyway. And I think on most people's computers this won't cause any issues. So we will want to actually
transition this color. So transition color. And let's do it a little bit
faster, 150 milliseconds. And doesn't really matter
what ease-in, ease-out 'cause we want it to
be a little bit hidden. So you can see it's sort of
glowing in and glowing out now. Like it's slowly fades
out when my mouse leaves, which is really, really cool. But I'm also gonna add in. I don't know, should I do a
whole 250-millisecond delay? Let's see what happens. That works out pretty good actually. What if it was actually longer? Ah, look at that. That's even better. The reason that's working is 'cause, is because the delay,
it's this is running, when I first go on it's 250
milliseconds for this to grow and then the other one's starting. And that's, so it's,
we're starting this one. So we're starting this fast transition after 350 milliseconds. So it's after this has
started to come down. And then when it starts
coming up it is taking, if you have really good
eyes I'm sure if that was actually red instead maybe
you'd see it a little bit, but the color's blending in enough that we're not noticing it. If we really needed to, or if
your text was standing out, you could set that to 250
and it would disappear just at the perfect time as well. But it's already faded off enough and with the faster transition
I think we're sort of making up for the
difference along the way, and there we have it. I just, I had fun doing that. That was one of those videos where when I was planning everything out and just playing around I got
a little frustrated at first 'cause I didn't know,
there's too many like, let's just look in, that's
sort of what my article was, looking at the basics of it. Oh we can rotate something around. That's cool but how do
you use that in real life? And so I think here we're
getting a better idea of how we could use it in real life, and that's always a good thing. That's what I wanna do here. And I hope you learned a little
bit along the way and saw what I meant by falling in love with CSS. I just think things like this are so cool. The type of stuff you can
do is so cool and so fun, and when you know how CSS
works it's not hard to do. So if you did like it, if you did learn something along the way, please let me know what it
was in the description below. If you've already done a cool project with transitions or transforms 'cause I keep saying transition when I
should be saying transform. If you've done cool stuff
with the two of them together or whatever it is, leave a link down there and let me know about it. 'Cause that'd be really cool
to know about and learn about. On another note, I'm gonna
strongly encourage you to also come and check out my newsletter. So there is a link to it
in the description below. I think at the end of the video it's gonna show up in a little box as well. And my newsletter, I've
transformed it a little bit. It's so you can keep up to date. So I'm sure you're subscribed. You're subscribed here right? You've clicked the
little subscribe button. But even when you're subscribed
you miss videos sometimes. And maybe you didn't know I had articles and you heard me talking
about that at the beginning. You're like, oh crap, Kevin's doing articles and
stuff like that, too, cool. So if you never wanna
miss out on any of that, subscribe to my newsletter. The link is in the description below, and then you'll just
every week, once a week, one email only, every Sunday. You'll get a nice little
recap of all the stuff that I've been up to. And if it sounds cool to
you just click the link and you get to watch my
video or read my article. And that's it. Just a nice way to keep up to
date with everything I'm doing and I try every now and
then to throw little bonus quickies in there that are fun 'cause say thank you for
being part of my newsletter. And speaking of thank yous, thank you so much for watching this video all the way to the end. I really do hope that you liked it. Also a big massive, huge
thank you to my patrons for helping me support my
channel and everything I do here with a bonus shout out to
John, Lauren, and Fernando for being my supporters of awesome. You guys are amazing. Thank you very, very much. That is it for today. Thank you one last time
'cause I'm all just exploding with thank yous right now. And of course I look forward
to seeing you next week, but until then, don't
forget to make your corner of the internet just a little
bit, just a little, tiny, nothing, little, little bit, more awesome.
