 Oh, no. Oh, no. Oh, no. Oh, wait. Wait, wait, wait. Where's my first color? Can we do that? Oh, this better work. No, that's not what I want either. Hello, my friend and friends. It's been a while since I did a CSS battle, so I figured why not jump in and do their most recent one because there are always a lot of fun. But before we dive into it, I just want to mention my ground rules that I always have for these. So first off, I do not try and get high scores in these. I just try and get a 100% match as fast as possible. So it's not about how many characters I use. It's about matching the finished design as quickly as possible. And I try and do them all in under 10 minutes. And that also means that you can try and see if you can beat me as well. So whenever I start them, I time myself, I'll show the timer on the screen. So even if I edit parts out, you'll still know exactly how long it has taken me. And so what I'd actually encourage you to do is try and do the challenge before me, see if you can beat me. And then also you can compare the different methods that we use for each one. And I'm not going to do all eight of them, just because it's going to take a little bit too long. So what I'm thinking of is doing these first three and then 164 there. So the video doesn't become like three hours long. So yeah, I think it's gonna be a lot of fun. And we're going to dive right into that. So first up, let's jump on over to this first one. So it's what we're trying to create. No, it looks like they've changed things. You can actually see like an overlay. I haven't done a CSS battle in a while. So when I'm hovering, I get like a faded out version. And then I also get the full one. So that's kind of cool. And I'm just going to see if I can zoom in on this a little bit. There we go. Just to try and make the code a little bit bigger for y'all. I've now got my timer on there as well. So we're going to hit start on that. And let's see how I can do this. And I have an idea in my head already. 12345. And then 12345. I'm going to regret this a little bit. We're going to do a class is equal to orange on that one. Can I multi place my cursor? Oh, I can. Thank goodness. We're going to put class of orange there. Now all of these are going to get it. These are all class of orange. And maybe you already have an idea of how I'm going to approach this. So inside my style tags, we want grammar lease on that's great. Let's do body background. I'm a little bit concerned actually, because sometimes we want this one on the body actually. There we go. Body background that I'm going to do a display of grid and I'm hoping this doesn't muck things up. I'm also zoomed in. So I know in these battles sometimes being zoomed in does cause some problems and I'm talking and that always slows me down too. But let's just do a place content place content of center. I might need a min height on there, but I'm not sure there's a few little quirks with the CSS battles that do let you do things a little bit differently. So we can sometimes take some shortcuts. We're going to find out in a second. Let's say width is going to be, I don't know, 30 pixels. My sizing is hard to because I'm zoomed in. We'll say 30. We'll say a height or no, I always like doing an aspect ratio actually of one, because then I just have to change one value to change the width and the height. And for now, let's just give them a background of red so I can see. So I already know that my height is not working. That's okay though. And my width, we need to make that maybe 50. I think the width is actually good in my place. I can't tell. Oh, we can shift. There we go. Shift. So it is 50. So we're perfect there. So if you shift, it switches the axis there on the way around you are. So I have my grid there. Let's just try this then. Grid template rows, columns, I don't need rows, columns. I was going to use flexbox, but let's just do a repeat of five and 50 pixels. I think this might actually work. I think it might work. I might not even needed to do anyway. So div will take off the background from there. And then we'll take this one. And we're going to say that my Dodd orange has a background of that color. And let's hit submit. Where's submit? Submit. And see 100%. 100%. Yes, we got it. That was in just under three minutes. Or it was, I just looked at the time. It's a little bit over three minutes, but pretty happy with that. It's all good. And that was a nice, easy win. I like those. I was hoping that that's how that one would work, actually. That was sort of my plan going in when I saw the picture of it. So I'm happy that it was functional. I'll let you know now I'm thinking conic gradient for this one, but I'm terrible with conic gradients. So I don't think I'm going to have as much luck with it. And I'm going to try and remember how conic gradients work. So let's hit start on here. I haven't done one in a really long time. And let's go again for an easy win with a body of a background of that color right there. I think we want two divs. So let's just do div class outer and then a div class is equal to inner. And it sort of makes sense, I guess, actually, to nest them. I was going to use absolute or do I just whatever? No, yeah, we're going to do them separately. We'll find out. Maybe it's a bad idea. Let's just select both of them, though. We're going to do a div position. And I found a new trick here, actually, thanks to amachine position absolute. We do. Oh, I don't know if it worked. We'll try inset of is it negative 100 negative 50%. And then let's just try a background is going to be read just we see something. And then or is that not the trick? Is it negative 100% it's not working whatever I'm trying inset of Oh, 100. Aha, 50. 50. I wasn't negative. It was positive. Not out. We want to pull it in. And then let's give it a width of like 10 pixels and a height of 10 pixels. And it's sort of in the middle. I guess that does mean we need the trans form or translate of negative 50% negative 50%. And we don't need the transform on there. That's a new one. So I think that's dead in the middle. It looks pretty dead in the middle to me. So we'll find out in a second, I guess, both of them will also have a border radius of 50% to make them into circles odor. We'll have a width. Can I measure on this side? No, width is the total is 400. So maybe 300 pixels. And the height would be the same three. I should have used aspect ratio because obviously that's not correct. That looks bang on. Okay. And then so background, let's just try giving it two colors. So I have that first one is that one comma that one and just seeing how okay, it did work better than I expected already. So I want it to go yellow to 75%. And then this one starts at 75%. That was so much easier than I expected. Amazing. I got it. So that I thought this would be a struggle. I won't lie. Inner will be a width of that's 200. We'll do 150 pixels. Height 150 pixels. 125 maybe it's still too big 120. This is where the aspect ratio would have been a lot better. Apologies for my dog. We're going to rush though. So we'll do a background on there of that. And then we're going to hit submit. And we're going to hope for the best 100% in 325. I'm on a roll. I don't think I've ever done these so fast before. Awesome. So I'm sort of glad that my thinking going into them is working because that's usually not the case. Let's reset my timer hit start on there. And we're just going to go with it body. This one when I look at it, my thinking is that we want it to I did my classic mistake where I pasted before I put in the property. We're going to make the shape and then we're just going to turn it to make the shape. I'm actually wondering if there's a way of doing this gradients because it seems like most of these solutions can be done with gradients. But I think what we're going to do is and I'm going to make main this color main. So main will have a background of that color. Once again, let's do the display grid place items center content should also work on that it doesn't really matter. The width is probably the same right width 150 pixels height 150 pixels. Oh, no, it's not 190 in the height 185 182 23184. That's weird that it's that looks like it's right on though. So we'll go with 184. Usually you don't see those. Okay. And then what my idea is we just want something it's gonna Oh, no. Oh, yeah. Okay, this will work. I was originally taking entire shape and rotate it. But I only want these two things to be the rotated things, right? So let's just do I don't know line. We'll probably have two of these, but we'll do a div class. I'll do line one. And then we'll probably have a line to my line my line dot line. We've already mucked this one up a little will not mucked up. We're going to slow though. Line is going to be this background color. background can be that color. I think we're just going to do the position absolute trick again. So we know we're right in the middle. We'll give it a width of 25 pixels. And up for now actually background will be blue. And the height will be 100 VH whatever something like that. And then we can do a rotate of 45, not 345 45 degrees. It's a little bit too narrow with I guess is 30. That is it weird that something's off still. Is my width not enough here? That looks better. Okay, the whole size was when a for perfect. That's my line. And then as I said, we're going to do a line one and a line two. I guess I didn't need that one class, but we're going to do a two on this one. And then dot two will just get a rotate of negative 45 degrees. And then we'll hit submit. I took some easy ones this time. I think I usually struggle so much more with these 349 about, I guess. So yeah, we're going to we're going to go with this one as the final one for this video. Yeah, this one, I have less of an idea. The other ones, when I first saw them, I sort of had an idea. I'm just going to make some space before I hit start here. Okay, I think we might do that same trick with the conic gradient. It's basically actually now that I think of it, it's exactly like that other one. So one, two, three, four. You can use nth child, but it's easier. Obviously, if you have classes or IDs on them, if you're trying to save characters, IDs, I think are the way to go with these challenges, but I'm not trying to save on characters. So we're good. Would be good though, if I actually gave these different classes. Once again, are going to be a position of absolute. Oh, you know what I'm going to do? We're going to custom property this one. Yeah, let's come here and say color. And for now, I'm going to do red. I think this will work really well. And we're going to do a, I don't need that actually color is going to be red. And Grammarly wants me to spell it with EU. That's awesome. I'm surprised it picks it up in that but not when I'm doing regular ones. Anyway, don't get distracted position absolute, we're going to do the inset trick again to get to the middle of 50% and then the translate of negative 50% negative 50%. So they're all dead in the middle. We're going to have to move them a little bit, but that's fine. Okay, so on all of them, let's do the background background is going to be a chronic gradient. And for that chronic gradient, let's just do again, like a red blue. So we can see, I guess we need a size on them that would help. I still have nothing showing a position absolute inset is okay with 100 pixels. Is my back, let's just do a background here background of red, chronic gradient or red blue shouldn't there we go. Okay. So we should do a border radius of 50%, whatever the 450 there would have worked I think good. So what we want is one of the colors is going to be this color. So I'll set that as that one and that was at 75%. So this one is actually going to be a var of color at also 75%. There we go. I just realized they all need an inner but we're going to not put in those because I'm div after we'll just do it this way instead because it'd be easier, which will be content because it's a pseudo element. We need a position of ab so loot we're going to use the same trick actually here with I already have an aspect ratio. So it's a say a width of 80%. And then a background of yellow just so we can see it if it shows up which it doesn't content is okay position absolute with an inset aspect ratio with div after I'm inside another declaration. We don't have nesting. Maybe we do have nesting. I don't know. There we go. 70%. We might want to go with pixel values here but that doesn't look terrible. We'll have to position it better to know for sure. So the background won't actually be yellow. The background will be that color and then it looks more like we want but clearly the width is not right. That looks a little bit closer. So now we're going to do is we're going to choose a and let's do a transform translate and you know what I'm going to do to make this a lot. No, it's going to be fine. I'm just going to copy paste stuff translate. Let's just say 100% and zero comma zero. There we go. So that one's okay. We're going to fix the colors after translate. So this one will be a zero and then 100% down. Are these never okay? They're too big but let's get them all sort of spaced out ish. Let's copy both of those and then we do a C and a D because then it's going to be the negative version of the same thing. So the numbers way too much. Maybe it's a 50 and we'd actually be in the right spot. Let's just try really quickly updating those and then we'll fix the colors. They're not perfect. So we'll have to adjust this. Hopefully I don't have to do it with pixels but a so a is the one on the right. So that one is going to be the color and my color is going to be that one. There we go. And then the next one is I forget which one the next one is 50 is down. So this one. So that one the color is that then I guess it's going to be the orange one and this should be a color to do that. And then the last one is the yellow one at the top. So at least those are okay and I'm glad I did that. I think it's yeah because it's with the conic gradient. I do think this is probably the easiest way to do it. Rotate actually maybe no their positioning is a little bit off we can see. So the other thing a is actually okay. So b we're going to have to rotate rotate 45 degrees 90 degrees 90. Oh no it's rotating based on the transform so we can't do the rotate there. We're going to have to do the rotate here rotate of I said 40 90 degrees right 90 degrees. So that's one thing with the trans rotate property you can't control the order if using transform you can either rotate it first and then translate it or you can translate it first and then rotate it. So the transform is a little bit more useful sometimes if you have multiple things going on. So that one's actually okay. This one is we have to come here and do a rotate here rotate of 100 and 100. I always forget this. This one's just 180. No. Yeah. And then the last one would be the 270 rotate 270. I guess perfect. Oh no. Oh no. Oh no. Oh wait. Wait. Wait. Wait. Where's my first color? This one. Can we do this? Oh this better work. Transparent. No. That's not what I want either. Is that what I want? That's closer to what I want. Yes. Okay. I was really worried there. That's going to work. The weird overlap is this because we need to move them out a little bit. Can I use okay. I wish I had a custom property setup for this. So that's the first one. We're going to do 60. 60 is perfect. Okay. So that's not too bad then. Choose you. Choose you and choose you and do 60. It looks good. Let's hit submit. There's plugins now. Didn't know that. Come on. 100% match. Yes. In 827. So that one was longer. But yeah. That was fun too. So a few things that we ran into with the rotation on that one. I was glad that we did the conic gradients already though because that saved us and then being able to do the transparent on there. If that hadn't worked, we would have been in deep trouble because I was thinking we could set index. Could we set index them if I did it the other way? Maybe we could have because if this one were on the bottom, then that's the next one up. No. Sorry. I don't know. Maybe we could have mucked around but this makes our life a lot easier. So there we have it. I hope you paused and took your battles at it. Let me know if you beat me in any of them or if you had better approaches to any of them down in the comments. And if you'd like these videos and like seeing me do this, it has been a while but I have done quite a few of them in the past. So there is a playlist of them that you can find right here. And with that, I would like to thank my enablers of awesome, Andrew, Michael, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.