So the other day somebody messaged me and said, Kevin, how can I build this? And I said, you know what? That looks pretty cool. I'm going to see if I can do it myself. But I wanted to challenge myself and try and do it without having tried it before. So it's my first time running through this entire thing. You're going to see mistakes I make.  And what I really want to try and do with this one is to do the whole state management thing with CSS, which I'm not 100% sure is going to be possible. Because when we hover on top of these things, it actually pauses for a little while, right? Like everything pauses, but not all the animations pause and everything. I don't know how. And just being able to do that, it's one of those things you go, should we use a JavaScript for it? Is there a CSS solution? I'm going to try with CSS. If I have to fall back to JavaScript, I will. So yeah, I think it's me a lot of fun to build. Let's go and take a dive into it. Hello, my friend and friends, I'm glad you've come to join me once again. And if you're new here, my name is Kevin and here at my channel, I try to help you fall in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least get you to be a little bit less frustrated by it. And today, we're going to be doing it with this spinning thing that we can see on the screen right now. And I don't want it necessarily moving the entire time that we're here. So I did take a screenshot of it that will keep this version of it on the screen most of the time, just so it's, yeah, so I have something that I can actually be looking at, but it's a little bit less distracting than something that's moving around. And to do this, you will notice I am using SCSS. This is SAS. I'm not going to use anything too fancy with it. They will do a few fun things, but it's going to help us save a little bit of time because I think we're going to need some loops and stuff, especially for the intro animation. They're sort of going to explode outward. So yeah, there would be a few things that are going on here. But if you're not used to SAS, I'll do my very, very best to help explain everything that's going on. And we'll look at the compiled code to see what's coming from it and everything. And so here I'm just going to do an MPM start. And if you're curious about this process and how my SAS is being compiled and it's running browser sync and all of that, I've covered this in a previous video. So you can check that one out. I'll put the card here and it'll also be linked down in the description. And as you can see, I actually have nothing going on. We have a blank file. So let's come in and give ourselves a little bit of content. And for now, actually, we can probably make this a bit bigger, right?  But we'll sort of just keep that off to the side a little bit as we're doing our work. And let's call this orbit like that. And the only thing, the other thing that I have done is I have grabbed the images that are actually used from here. So we have all the images that are there. They're all SVGs.  So I've stolen that from their website. And we can get into this. Let's call this or orbit is my main class. I don't really know what else I would call something like this. And then from there we have the center thing. And then we have this 12345678 elements that are going to float around it. So right away, the first thing is the image, each one of these has text in it. So like, if I don't put the image there for my orbit, I think what I would actually do is do this as a list. Because it is, if you think about it, it's like a list of items when you hover on top of each one, there's some texts in there. So it's sort of like informational points, I guess, about like the stuff this product can do. So to me, a list makes sense here. So let's do a ULLI. And then inside each ally, we're going to need two different things because if we look back at the original design here, as I said, there's the text, we need the image or the icon. And we also need something for the text, which obviously complicates things a little bit. And it's just makes, so what do we put inside the LI because we need both. So yeah, I think what we're going to do is inside each one of these LIs, we're going to put in two divs, I think would be the easiest way to do it. Okay, we're going to try it, I'm going to try it with just doing an image plus a paragraph. And what I haven't done is actually got the actual text. So what I'm going to consider these decorational, I think. So if you have a decorational item, you don't actually have to put in the alt text, you just leave it blank. And then for the text of each one of these, I guess what I'll do is I'll actually fast forward that part as I'll pull the actual text in that they're using just so we can keep a little bit more realistic on that. And yeah, this part could be really boring. So I'll just fast forward as I work through this just to get the different elements on the page. All right, there we go. We have all the text in place and all of those. Now the other issue is my image that I want in the middle. How are we going to do the image? I think what I'm going to do here is do we'll call it IMG center image, just so I can easily select it. I think if anything else classes, I think we'll be okay with that. I think, except the center image actually should be a div, right div. And then div center image because we need both images inside of there. And so then image times two to actually bring them both in. So this would be my assets and my men will be on top. And then we have the woman, or actually, we'll do that the other way around. I want, because whichever one is first here, we're going to do position absolute, I guess they have to be. I think it's the easiest way to do it. Now I could do that as a background image that also changes. I would be perfectly fine. I just think it's easier to deal with something when you actually bring the image in. So yeah, I'm going to do it that way. Again, we're treating these as decorational. So I'm just leaving blank alts on them. I think that's going to work. Yeah, pretty sure. So I'm going to come into my SAS folders. And in here, I've created an actually, there's one important thing that I didn't mention, but I took all their colors. Those are the actual colors being used here. And so I have them all here in a SAS map, which just makes it easy for me to use them where I need to with SAS. And we'll sort of explore that idea a little bit. And some things you can do that are nice with maps that you can't do with just straight up variables or custom properties. And actually, speaking of custom properties, let me just bring this up. So it's not spinning in circles. What we're going to do is jump over to my custom properties file here. And we're going to have all those colors generate custom properties for us. I still like having my colors as custom properties, even in SAS, just so if I want to light mode, dark mode or do other theming and stuff, it becomes very easy to do because you can manipulate them. So the first thing I'm going to do is at use because I need to go and say, like, get this color file from here. So I'm doing an at use of go back a step and go to my abstracts. So I'm leaving this base folder. I'm going into the abstracts grabbing that and we'll just say as star. The reason I can do it like this is because I have an index file here. So the index is forwarding my color. So it's pulling it in and then spitting it out. It doesn't make much sense when you only have one file. But if we go here in my base, I can bring in all the different pieces that I'm doing. So I just have like a general CSS reset that I'm applying here. Nothing too fancy. I'll link to it in the description down below. I have the orbit where I haven't done anything and here where my custom properties are. So they're all coming into here and then getting sucked into this one. And I'm not bringing my abstracts into this one because I shouldn't need it to actually come through. If you used to SAS and you've never used the use and forward, it is part of the Dart SAS way of working because import is being deprecated. I'll go in there's a video in the description that talks about how we use and forward work and because they're kind of different from the old import syntax that we used to have. And I just realized, did I have an import there? I did. I should have had this as use. And in this case, it won't make a big difference. But again, imports been deprecated and at one point will not be used, will not work anymore. And so I'm going to do an add use up here, but I'm going to bring in one of the built in SAS modules. So we're going to write SAS and then color. And so as I said, that's a built in color module that's part of SAS. So for all the built in modules, you just do SAS colon and then the name of the module. And that module comes with a whole bunch of built in functions that we can use, which we're going to use right here if all goes to plan. And so what I'm going to do now is I want to loop through my list of colors. I haven't done this one before. So we might run into an issue along the way. But let's open up my colors on the side. And then we'll see what the compiled CSS is after as well. And so we have all the colors. But when I hover on top of them, let's just go back to here. When we hover on top, you can see it gets a little bit darker for each one of them. And I didn't grab those darker colors because I'm going to do it with SAS. So here we're going to say each color, name and value. Let's just put name and name, just to keep it shorter, name, value in colors. And so we're going to loop through and grab each name. So green, blue, orange, those are all my names. And then value are the values that are on the side here that's in this colors map. And then let's come in here. We're just going to open up my CSS file that's being generated here. Let's open this to the side as well. And let's split that down. And I'm doing that just so we can see I can still look at this colors map and explain things there. But then we can also see what's actually going to get output. That will happen sort of down over here. And yeah, so name value colors. So the first thing we're going to do are actually, let's come up, we're going to do this inside my root selector. So inside my root, we're going to loop through and make a whole bunch of custom properties. Now, for this simple example, maybe we wouldn't need to do this, but whenever I do these builds, I like to do it as if it was part of a larger system. So I think, you know, this would be more useful if we were actually using these colors in multiple places. And so what we can do from here is let's say for each name, there were in my root. So we're going to say, we want the name and name whenever we have a variable in SAS, it has to be a value. And if it's not being used as a variable, we have to use interpolation, which just means putting a pound symbol and then wrapping it inside of curly braces. And then we can say name. So let's just do that. And then here, put value and use value going to work, value didn't work. You can see it did do the green, the blue, the orange, the purple. Now, if ever you're doing something like this and you're, this is because it's a custom property. And with custom properties in SAS, when we use variables, it's going to keep this because a custom property, this is a valid value for a custom property. So it's saying, okay, maybe you just want to put that because custom properties can contain anything. I don't want that though. So once again, we'll just do a bit of interpolation. And basically, if you don't know when to use interpolation or not, do it without using it. If it doesn't work, then stick, you know, wrap it in this, hit save again. And now you can see that it actually worked. And at this stage, this seems like a bit of a waste of time, because we could have just set that up instead of setting it up like this. But what's cool is let's do this as my color light. And then we're going to come down and do a same thing. So we can just copy this one, actually. But we're going to call this one colored dark. And we'll have to shrink this away a little bit. So we have my name colored dark. And then what we're going to do, and that's why I brought this colors in here, is let's do an color dot adjust. And this is one of the built in color functions that I mentioned that SAS has. And if I actually hit save now, it's going to work. I think. Oh, look, we need interpolation again, because it's actually sticking color adjust there. Interesting. Okay, so we'll pound symbol and wrap that whole thing in curly braces. And hit save. And let's just see. Oh, we're getting an error now. It's not a color. HSL is not a color. Okay, it might be because I'm not actually adjusting it. Let's find out. Color adjust or this whole idea is about to go with the window. I'm going to adjust the lightness by negative 15%. Oh, and you know what? Here we probably don't need interpolation. Did that work? Maybe that's what the problem was. I think that's what the problem was. Too much interpolation going on. Look, it worked. So here it's spitting out the HSL values, like we'd originally set up the 123 47 and all of that. And here it thinks it's a post CSS file. But let's just put that as CSS. We should actually get see we're actually getting a darker one now. I don't think they're quite dark enough. So let's just adjust this lightness value here by maybe negative 25%. And then those look quite a bot. Let's even do like negative 40%. That looks better because if I'm going to put white text on them, I do want them to be pretty dark. So yeah, that's the white light and the white dark. Maybe I should have come up with a better name for those or included them somewhere else, but whatever. We have a white light and a white dark, which is great. But for the rest of this, this works fine. If I was actually doing this type of thing, I'd probably have a little bit more of a robust system actually in my colors map. Maybe instead of doing it this way, but I wanted to show off. This is something I'm working on a SAS course right now. So it's sort of front of mine doing these types of things that let us work kind of a little bit faster. Okay. So we have my custom properties in place. Let's come over and actually start styling things up a little bit and close down these. So let's open up my orbit and dot orbit. Let's select it. And let's just say background is red because I don't know if I linked. I don't think I linked to my CSS file yet. I didn't. So we're going to say link CSS. And this will be my CSS style CSS. Let's just go and make sure that's actually working now. So that should be open right here. Ha, there it is. Perfect. Let's get rid of that red background because that's very aggressive. But at least I know my styles are working. Cool. And we'll shrink this down so we can actually see everything on the screen. And let's do first, this would be demo only, demo only. We'll do a body of display grid. Min height, 100 vertical VH and a place content center, which should put it right in the middle. It does. We're scrolling a little bit now because of how we have this set up. But that's fine.  But we're going to, let's start there actually. How did I, I just called this in an orbit and then I just have center image. So there's different approaches to this. If you're more of like a BEM person, maybe you're going to have orbit double underscore center image or something. Because of how this would work and how this would be set up, if ever I had this orbit component, I'd have to have a very structured way to actually build it out. So the idea of these not having classes on them doesn't bother me or anything. So like, I think nesting everything here actually makes sense. And not worried about having descendant selectors, because I think descendant selectors and taking advantage of the cascade is fine. So center image, we're actually going to have a little bit of this going on, but I think it's okay for, for how we're going to do this because it's so specific, the elements that we're working on right now. So let's just say that it has a width of, I don't know, a hundred and, I don't know, a 10 rem. That looks not too bad actually. And then we're actually going to come in here. And I don't do this level of nesting too often. It scares me when I see three levels of nesting. But again, I think it'll work. So we'll say position absolute. If those are position absolute, this should be a position of relative. And they're overlapping each other right now, which is exactly what I want. And then we want it. So when we hover on top. So what we could actually do is image and not not last child hover opacity of zero. No. Image not last child. Oh, not first child. One second. Ha, ha, ha. There we go. So if we're hovering, I mean, I could do the hover on the center image as well, but this works. So let's us do here a transition of opacity, 350 milliseconds, 350 milliseconds. There we go. Maybe that's, we'll do 500. I think there's was a little slower. I'm going to go check there's out in a second, but that looks a little bit better. So basically, the images are overlapping. And I bet you there's people asking about what this is actually doing. So let's split this to the side and take a look at it. And yeah, so it is a very, as I said, we're getting descendant selectors pretty heavily here. But we're sort of that enforces the creation of this in a very specific way, which it would have to be anyway, it's such a specific type of component that we're creating now. This doesn't bother me that much, even though it is a little bit on like, descendant selectors always scare me a little bit. But then what we're doing for the hovering, it's orbit, the center image. So the div, we have the two images. And the image that is not the first child, when we hover over it, it will get an opacity of zero. And if we come and take a look at the index, we have the woman is first and the man is second. So when we did the display of absolute position absolute, I should say they overlap each other because they both came out of the flow. And because they're both out of the flow, they're here.  And then the hover on not the first child. So this one is keeping the opacity. Whereas this one is not keeping the opacity when we have her on top. Perfect. I'm pretty happy with that. Now we'll leave my style there, because I'm sure we'll come back to it as we go through this. Now the next part is where I'm not too sure. But first let's turn off my list. So we have the orbit. So we'll come here and we'll say UL. I just thought of something. My idea originally was to take the whole UL and to spin it. But if I do that, the icons and everything are going to turn with it. So this idea might not work. We'll see what happens. But on my UL, I'm going to do a position relative again, because I think we're going to need a position absolute on all of the li's. Position relative. What else do we need on this? You know what? Do we need anything else on this? Position relative and then a position absolute on the li's. So we can come here and say, you'll notice one thing with the nesting. I'm not coming in here and nesting the li, because it has to be nested anyway. Like an li will be in the UL. So I think this is fine. Position absolute. And what I might do for a second here actually is, let's say li first, we're going to do an opacity of zero. So they all just disappear. And then li first child is going to have an opacity of one. I'm going to do a transform translate x of, I don't know, 300 pixels. Just we can see it. There we go. Perfect. We can see it right there. Just so I can actually like set this up, style this one, and then we can worry about styling everything else. Okay, so position absolute opacity zero. Now, okay, the opacity zero is going to get turned off. So let's move that up. Position absolute. Oh, let's just do list style none here. List style of none. One thing I didn't do, let's come on the body here. This would normally be in my base. Like this is demo only, just so I'm not jumping between a whole bunch of files. Let's do a font family of system UI with these builds. I generally don't try and copy them perfectly. Just because I don't want to like waste time getting the right Google font or whatever. And sometimes we can't even get the right font. So let's start by giving this a background. And we'll use my var. We'll do this is actually it's analytics, whatever, it doesn't matter which one. Let's do orange light. Or give this a width of 10 rem, which might be a bit too big, actually, and an aspect ratio of one over one, which will make it a perfect square. And the nice thing with that is then a border radius of 50% or whatever, we get a nice circle. Then we want to do a position or let's do this might work display grid. I'm not even sure if this works. And stars we select all the direct children. And say place. No, I don't even need to do that. I'm thinking grid place items center. Or do I even need to do that place content center would actually get them a little bit closer together. But do that. This is I don't really need this actually. What I want to do is on these allies, we do want to go inside and do a position, a lot of position absolute in this absolute. And then they're both lined up right at the top. So this is where we have to use that trick, like the sense the position absolute trick to center something is to do a text text align a position absolute a top 50% left 50%. And then a transform translate of negative 50% because the course that didn't translate to not translate x is this looks at the top left corner. And then this looks at itself. So you get it in the top left corner and then you move it back on itself to get the thing right where it needs to go. Now I think my circles too big. So let's make this six and maybe we'll actually go measure theirs. But yeah, let's go look at the actual site here. We'll just pull up the picture. Oh, they're a bit bigger. They're smaller than this though, right? So maybe we go with like an eight. Let's shrink this down. We can make it pretty small. We'll do something like that just so we can see both things at the same time. So maybe maybe 10 was okay here. And maybe my picture should actually be a bit bigger. So let's go fix that we'll do the picture at like 15. The ratio of them looks a little bit nicer. I think I'll do like 12 and eight, I think would be I could always go and actually measure them, but we'll stick with that. And that I don't mind. I was looking at the icon size. The icon size actually looks okay. I'm pretty happy with that. We do want to put a, we'll just do it here text align text align center and a line height of one. Okay, so here we'll come inside here and say the paragraph. So this is a paragraph that's nested inside my ally. So it's a descendant selector again is going to have a background of we're going to do it the hard way. And then I'm going to see if I can automate this a little bit with sass dark because obviously we're not getting the right colors here. That's true. I need that dark background to be the full size. Okay, which is okay, which is okay. But how do we do that with 100% will get me the right width, height 100% will not get me the right height. Oh, it does. And then can I do this? Nice. Perfect. I am going to go back to the actual site here for a second because I want to see, oh, look at that. It's different on mobile. But if we do that, it's white text on all of them and a little bit bold. One thing you'll notice actually their text isn't centered vertically. I'm doing it vertical because that drives me nuts. It's not actually vertically centered. So yeah, we'll stick with a real vertical centering because it just looks a little bit better. Okay. So that said, let's just do it here on the paragraph because we're already text, we have the text stuff coming here. So we'll keep it all here just so all the text things are related to each other. Text line center will come up one. Let's do font weight. It doesn't look fully bold. It looks like semi bold. So we'll do 500 because system UI, you do get like, I think you get from 100 to 900. Maybe it's 300. I'm not sure. And the font will look a little different on different Mac or PC because it's the system UI font, but they always look good. And then the color of them will be my bar. I have my orange light so that or it's always white, right?  Then we'll come back here and where did I do my border radius? Because here I could just do an overflow of hidden. There we go. Now I don't want to see my paragraph unless I'm hovering on that. So what we'll say then is the paragraph has an opacity of zero. But when I hover on the ally, the paragraph inside of it will get an opacity of one. Let's just make sure that works. There we go. So again, this is the parent selector. So my parent is the ally. So if I hover on top of my ally, we can even see, let's look here. If I hover on my ally, the paragraph then gets an opacity of one. And if you like the direct descendant selector, you can even do this when you nest things. It works. So there we go. So perfect. And then we can just do a transition. I didn't save the transition as a variable, transition opacity of, we'll stick with the same one that we had before. Cool. All right, I'm happy with that. That's actually quite a bit done. Now what I want to do is position them all the way around. It looks a little far out now, the 300 pixels. I think what we need to do, I just, I do see one cross.  The reason it isn't is because they both sharing, if I bring my mouse all the way across the top, or even let's open vizbug. And yeah, so they're with vizbug. Vizbug is a tool by Adam Argyle that lets us highlight, and you can see lines, and you can do a ton, you can move stuff around on the page and do lots of cool stuff, but you can see they're both lined up at the same top point. So the easier solution right now is actually because all the images or all these icons would be in the same spot, but here, to get them perfectly centered, the easiest thing to do would actually be to move the image up rather than try and move them all down because then I need to also spread them all out and have them rotate around and everything. Actually, you can see where they are right now. That's that square that you see there is where all of them, where all, where they all are. So I probably want to move the image over. Or I'm not, let's try. Yeah, they're, they're positioned absolutely on everything. So we can't like use grid or flex to actually get things to go where we'd want them to go. So if that's the case, I want to move the image left. So the center image will do a transform, translate negative with this work negative 25%, negative 25%. It's too far negative 20. How come this one didn't work? 12. You know what? Negative. That's 12. The other ones four. I want negative two rim. So like here, I have 12. And here I have eight. So eight, there's four left over. So I want two on each side, which is why I went to, but that's two there. And then I also want to go negative two rim move up. It did work. Okay, there we go. Perfect. That's good. That's a victory right there. So that means when we move things off, they're always moving from the center of the image, which is a little bit better. Yeah, I think that would be fine for something like this. So now we want to get this guy. This is where we run into some things we have to think about. So I think the first thing we'll try and do is get them in the right spot. Then we'll worry about trying to animate them around, because there's a few things in there that are going to be hard to do. And then we'll worry about the animation actually coming out. So how is there an easy way to spread them all out? There's probably, if I was good at math, I bet you there is one. Because I could do a loop with SAS that could prompt me. Maybe not, though, because I need to go sort of up and over up and then up and over by less. What would be the best way to do that? The distance is always the same, right? Like, if I drew a straight line, but that means like, oh man, I don't even know how to make a circle like that of everything moving off. There's probably a mathematical way to do it. Okay, let's turn these opacities. That's okay. I want li opacity zero can go away. We'll have to bring them to the back eventually, too. We still have to sort out the colors and everything. Li and child one, we're going to start there. And let's just say we do, I'm a little bit worried, actually, I might use instead of using transforms, because I think I don't know if I can use a transform for this. Let's do this at a Y. So that moved it there. Oh, that's first child. Okay, that makes sense. So this will actually delete all that now. And this can be a lot smaller. Let's do 15 rem. Okay. So I think that sort of makes sense in terms of distance. Because now, okay, well, let's try and hard code it and then see if there's a better way to do this. So then that would be a translate, I guess I'd be 15 zero. This should be a regular translate zero rem, whatever. It's not working. Oh, they're in the same spot. They're overlapping. So 15 comma I used 15. I don't want to use 15. Do I or whatever 7.5 rem? No. Yeah, because basically the problem is the further down I go, like on the four, these way or the four that go out and the four that are going to go straight up are going to be fine. It's the four that are at angles, which I need to figure out. So the this is going to have to be bigger. But if I do 15, I think it's way too far. Oh, maybe not. And then I did this maybe as a 7.5. It seems so far apart. It's not quite what I want. I want it to be more here. Let's just do 10 and 10 and see where that puts us 1012 and 10. Okay, and we're going to do the third one and do this one as a zero 15. I just want to see what that looks like now. This one's not perfect at all. Okay, that actually doesn't look bad, but I don't know why that's the right numbers to put there. Is there like a trick for this that I'm just, I don't know. It's very possible. Okay, I'll just, we can just, okay, we have four, five, whoops, five, six, seven, eight. So 15 done there, zero 15. This would become a negative 12. Negative 12. No. Yes. And then this one would become a negative 15, zero. What? What? Oh yeah, okay. This one would become a negative 12, negative 12. And then this one would be a one, two, three, four, five, six, seven. I'm not even sure, actually. I feel like it's a little closer here than here. And I feel like these maybe should like a 12.5 me. I don't even, that's going the wrong way out, whatever. It's close enough. I think that looks okay. We got them all in the right position. And then I'm just going to go through, I guess, and set the right colors on each one of them. I was trying to think if there was actually a better way to do the colors. I just thought of something interesting actually, because I was thinking to set up all the colors and then set up all the background colors, that whole loop that I just created, like it doesn't really help me out. I could do it very easily. But I think what I'm going to try this. And we're going to see, it's not quite the same thing. Or could I even use the dark end then? Yeah, it's not quite the same thing I was originally thinking. But if we say, here I have the background as my orange light, if we said that it's actually, okay, there's a few different ways we could do it. No matter what we need to hard code the colors onto each one of them, the icons obviously have the color in there in the first place anyway. So I don't really have much of a choice. So background red, so I can see what the first one is. The first one's that one, so that's the blue. So if I say background, I'm going to let's just try a var blue dark. I was trying to think of a way I could play with the opacity, but I don't think it would actually work. So yeah, we'll do that. Okay, yeah, I think this is what we're going to do. I'm going to come up here. Oh, man, no. Yeah, just so I don't, it's not like the best system in the world, but I'm going to come on these allies and we're going to say color light with a custom property, which would be my var. Let's just call it, let's just do it. This is color light is var, no, not color light. And we're going to say is color, like, let's do icon BG, which will go to a var. I'm just going to give it a fallback that we can easily overwrite. So and we're going to have our text BG the reason you'll see why I'm doing this. So yeah, I think it's like a small making our life easier. It's not going to make a big, big difference. But it makes our life a little bit easier. So my and again, this is because I'm hard coding them in. If I wasn't hard coding it, maybe there's a way I could loop through, but I can't think of it right now. Just so we can really, I could do it with SAS where I could loop through the map using a for loop, and then have that for my nth child. And then use that to set a background color based on the map because I get the number of the item like for item one in my map, take this for item two, take this one for item three, take this one. But I think this is a bit more of a robust solution, just because the icons are colored. If they weren't colored icons, maybe there's a way that we could actually build this in a little bit better. I stole these directly from their site. It's how they did it. Because if not, you could sort of link the color, you could have like all of them using custom properties, including the SVGs, and maybe there'd be a bit more like a clever way to go about it. But let's do it this way because it's not that bad. I think it's a little bit easier than the alternative. So icon bg is going to be a, I'm just going to put red here because we're going to overwrite these, red and blue. Don't worry about too much. We're going to see them all come on and then we're going to change it. So here, we're going to say, we'll do it right up here, background is going to be my icon bg. Actually, no, we're not going to put it there. We're going to put it. Oh yeah, actually, one of them should be here. The icon bg will be here. So background is my var icon bg. And then they should all become that red. Let's just make it pink. So it's not burning our eyes. And then, and we could even do this as like a, have, like, apply a variable and then have a fallback or whatever if we want. But what I'm going to do is then come down on the paragraph. And then we're going to put it here. And then on the paragraph where I did the orange dark because right now they all have that orange dark. I want to switch this instead of orange dark to my text bg. And so they should go all to blue. Now the advantage with doing this is the hover is linked to my text bg and my icon is linked to my icon bg. So I don't actually have to come in side each one of these and come in with an and hover for each one of them. And actually, these should all also be focused. So let's just do that comma. Actually, can these, they can't gain focus anyway, can they? Okay, we'll leave them like this then I think. But yeah, so we don't have to like come in and make that hover selector because what we can just do is come here and we can get rid of you and say that the, it was my icon bg is the var blue light. And then my text bg is my var blue dark. If that worked, nice. And so we'll try that for one more and then I'll fast forward through the rest. So this would be my let's just hit save to see which one changes that would be green then. So let's just choose you and you and change them to green. Sweet, right? And yeah, I think that makes it like pretty a little bit easier on maintenance anyway. So I'm going to stick with it like this. And I'll just fast forward as I do this for the rest of the icons. Awesome, there we go. So we have all of those working. I think I can close this bug down now. And yeah, cool. So hey, they're all working. So that's good. Now what we want to do, let's come in and say, we'll come back up to my UL. This is where I'm a little worried. Let's try this. I have a few ideas. I have a few things. I'm not sure if this works or not, but let's let's we're going to try. I'm going to try to rotate 45 degrees and just see if this works. This would if it works. Oh, oh, oh, no, it's not rotating on the center, but it worked rotates. They've broken out some of the properties from the transform, which is a good thing. Oh, wait, maybe that would actually let's do whoops, let's do that again. Come on, come on. Let's do that again actually rotate 45 degrees and just do a transform origin of center. Okay, let's try doing this rotate not here. Transform, rotate 45 degrees. Oh, I forgot a semicolon. Oh, it's the same problem. Okay. Okay, let's actually make this an animation then because I don't know why it's off. And it could be because I was playing around with stuff, but Oh, those aren't that's not looking. Now that I zoomed out, these actually need to be a little further out, right? I made like a triangle almost. We'll come back to that in a second though. Yeah, we'll fix those now that I'm looking at it. But let's let's create our animation. So I'm just gonna we're just gonna come here and say key frames orbit. And that means we're just going to do 100% is a rotate of one turn. Is it one? Yeah, must be like that turn the turn unit. And so you don't need a 0%. The 0% will go to your default for whatever it is that you're doing in an animation. And since we're just doing a full turn, I think this I think it'll work. We'll find out in a second. You'll notice I'm doing the UL. I don't want the image to rotate, which is why I don't have like I did the orbit and then I had the UL separate. So let's come here. We'll stick with the transform origin of center because we need that to be centered. And then let's do animation orbit. It'd be say five seconds linear, because it's just always the same speed and infinite. So it never stops. That's five seconds is wow. Okay, 25 seconds. Really? Wow. Okay. Now what I don't get is the center of this thing. Why is the center all the way out there? Where's my UL? Why is the UL moving? Okay, one second here. With 100 pixels, height 100 pixels background of red. Oh, okay, maybe we're okay then let's do orbit. We're going to call we're going to make a variable called size. And my size is going to be 12 REM. And then we can use my var size here. Uh, size is a bad name, but whatever. If I do that there, we'll do this here too, var size. And our size you could use an aspect ratio here too. Maybe I just need to make sure. Oh, okay. And then there's that weird thing I did on my image. Remember I had to move my image because it wasn't positioned properly. We could take that off now. Where did I do that? This. Oh, yeah, center image. Perfect. Yeah, I think I can actually take that off now because I gave that a size. Now do you notice something wrong? Because I noticed something wrong. Okay, so these ones are a lot closer and these ones are a lot further away. And that's because by default, everything is positioned in the top right, wherever the top right is now, which isn't what we want. Now I'm just going to slow that animation down. We're going to do like 600 seconds. I want it to keep running, but just it's annoying to watch animations. So because yeah, if we don't transform them, they're all sitting here. They're not in the exact middle before we do the transformation. And I don't think I can transform them anyway, because I want them to rotate. Okay, let's we're going to try this and I don't know if it works. On the allies, we're going to do an animation of orbit 600 seconds. So it's the same linear reverse infinite. Can I do reverse infinite? I don't think that worked. Let's refresh the page. And I think we'll speed things up a little bit. If this works, I'm going to do it as a custom property. Oh my goodness, that's trippy. Oh, you know what? It worked. It did work. They're rotating around. And it's that thing I said before. Okay, cool. That did work. That's amazing. So basically, the whole thing is spinning. But because the allies are spinning at the exact opposite speed, as the other thing is turning in a circle, the whole thing's off skew, right? It's not centered right now. So when this is on, it just looks like there's this weird like movement going on. And we just have to refresh the page. So they're all actually vertical at the start. And then it's the whole thing's moving, but the other things are turning the opposite way inside. So it looks like they're not moving. And then there's scroll bars and other annoying stuff happening right now, that sometimes caused the page to shift. Not worried about that. Cool. So if we actually get these all, oh, and we're using an animation. And okay, this is what I wasn't sure about. Because I'm using the rotate and again, rotate browser support, not 100% sure how great it is. We could check. Can I use rotate? Firefire, it says it I'm in Chrome. Aren't I? I am in Chrome. And the rotate property is working. So I don't know. But I'm glad it's working. Yeah, they basically they broke rotate out from that. And there's a few other places too. I don't remember what all of the ones they took out are, but I know rotates one of them. So you don't have to do a transform to rotate, which is good, because then you can do a rotation and a transform, and they won't overwrite each other and conflict with each other. And that is really, really nice. And so I didn't think this would work because I thought I'd have to use more positioning on these instead. Now what I might do is do anyway, because I need them to be centered before we move them out. Is there an easy way to center all of them? When their position absolute? So let's just turn off this guy's one here. See, that's where it is. And I need it to be dead center. That's my ally. So on my UL, I can't use or can I because I haven't put a top bottom left or right. Let's just do it here really fast. UL display grid place items center. Okay, cool. Nice. That works. It's true. Position absolute and grid actually work really nicely together because items will be positioned on their cell. So let's grab this here. This is when solutions just fall in your lap. When you think something's not going to work, try it anyway. And if it doesn't work, well, who cares? It didn't work and you come up with something more complex. So now we have a problem. I said it was working, but it's not working the way I wanted it. The UL is turning, but I wanted the allies to follow, but just turn the rotate. I didn't notice this before I said it was working, but it's not working.  Now the allies should still be turning in relation to the UL, but they're not doing that. Right? Why are they static actually? I'm Asian because the L. Okay, just for fun. If I refresh, they should all be like sideways. No. Oh, because this is overriding it. So now if I refresh, they should all be sideways or upside down. Okay. So how, okay, let's just, we're going to try backwards, backward, hold position, animation, hold position, 30 seconds, linear, infinite, just for fun. The rotate. Okay, so how come if I do it as an animation, the rotate is taking all the allies and moving them like that instead of rotating them on their own axis, which I don't understand why. Okay, one second. Am I doing this like somewhere wrong? This is on my ally animation. Okay. Hold position is here. That's on my ally. So what I'm going to do, let's, okay, let's comment that out. Rotate, 0.5 turn again.  Refresh the page. See, it did a 0.5 turn. That's okay. They're upside down. Now, if I come on to there, let's go find that 0.5 turn. Why is it doing the whole thing all together? Because the transform origin is here. It's basing it on the transform origin. Instead of here, how do I fix that? Oh my goodness. Yeah, okay. So the transform origin for everything is here. So it is rotating opposite, but it's rotating based on that point and not where it is. So just for fun, let's just say transform origin is I'm guessing it's like that we would do it. And now if I rotate, it's not doing anything. Refresh. Now that's mucked up because of where he is now, because that, see, I can't do that. So if I say left, 15, right, zero, where's my rotate one second? Rotate now.  Rotate 45 degrees. Why isn't it spinning at all? Oh, that's my paragraph. Whoops, li. Rotate 0.5 turns. It's still completely mucked up. So if we look inside my, in my li, we have, I don't know what I clicked on inside my li's. The problem right now is the transform origin is completely mucking everything up. But I have an li and I have content inside the li. If this doesn't work, I'm in trouble. So what we're going to try and do instead of this is we're going to put it over here. Now I still have this going on here. I'm actually, we'll leave that on here. Let's just see what happens. So that's sort of what I want. But I think this is mucking that up. And this is mucking that up. So here, I don't know, we did this before display grid and place items center. Oh, there we go. That's what I want. Okay, put this back up to 60. Turn this back on. Cross our fingers. Yes. Oh, thank goodness that worked. Okay. Let's come all the way back up to orbiter size. Let's do speed will be 60. 60 is still fast. I can't believe how fast this is a little 120. And then the reason I want to do that is here we can do var speed and do the same thing here. And here, I think we can do what we did before orbit. Change this to my var of speed and linear, infinite and reverse looks a little busted. So if it doesn't work, we'll go back to what they're all upside down. Why are they starting upside down? Okay. Whatever, hold position it is. Oh, no, why is everything upside down? Oh, because the reverse the reverse is starting, whatever. Was everything upside down before too? And I just didn't notice. But if I do it transform, rotate now of point five turn, or do I do I have a I have this? That's why they're already turned, which I don't want them to be. Ah, okay. So orbit, we can stick with orbit and just reverse the orbit reverse. And that's just when the page, there we go. Okay, that's just the hot reloading coming in.  I won't lie. Cool. Look, it worked. Let's fix my positioning like I promised we would. I don't think it's going to be too hard. I forget I keep forgetting which one the first one is but the first one is okay. The first one is the orange one. So two is the blue one. The blue one, we need it to be a little bit lower. So maybe this goes to 15. That not move anything. Oh, that was the green one. Whoops. That one. No, it is those. It's those corner one. No. Hmm. Okay, I could either move this farther out, or I could suck these ones in a little bit. So what if I did that at 10? Let's just move this over so we can actually see everything. Wrong number. This is where like these things are so finicky. I have to move both of them then. If I did a 10 and a 10. Yeah, that looks more like it'd be circular. So all the 12s, 12, 12, 12, 12, we'll get changed to 10 remp instead. There we go. It's still not perfect. Let's just see what happens if I take all these 15s. I'm just pushing control D to select all of them. If all these 15s get changed, like a 17, what happens? 12. I don't know. See that now it's like, okay, we'll just stick with 15. Maybe it's okay. Maybe it's not whatever. Someone will let me know what I did wrong with these numberings and there's probably a better thing. I'm happy. We're good. I'm pretty happy with that. We have the hover effect is working. Now the hard, this is another part that is really, really tricky actually. And that is when we have her on top, we actually want the whole thing to pause, right? And it might have to get bigger. Look, they're throbbing the whole time too. That's actually going to be annoying too. But the whole thing pauses. Oh, it doesn't get bigger. It just pauses and stops its throbbing animation. I'm not actually a fan of the throbbing while it's turning. There's a lot of motion going on right now. But so let's start with the pausing because the pausing, there's two possibilities, one of them. There's two possibilities. We're going to try one of them because we don't want it to pause when we have her here, which it seems to be mucking up a little bit on. Oh, because we have the red box on top. So we can't see it because but it's there. So it just means that my center image is going to get a Z index of like 10 rem that's just going to bring it on top refresh 10 rem. What am I doing Z index of 10? There we go. So it's just on top of the other stuff because that's good. Now what we want to do is when okay, we're going to break this up a little let's come here and say and so when we hover on top of the UL the animation play state, it's paused. No. Oh, it's already working because I can't hover on. Oh, I was like, this is going to be so much work because I'm going to have to make it so I can't hover because I know I have to hover here and I thought by coming here but because my image is on top of the UL I'm hovering on the image. I'm not hovering on what's below the image. My first thought when this wasn't going to work was actually to change this to also have a pointer events none and then see if I could bring the pointer events back in. Oh no, I just is everything working? My text looked a little crooked. I was like, why is the text crooked? The text keeps spinning when we hover on top and every the inner bits are hovering right now when that happens. So that is a little bit trickier but yeah, I was a bit worried that if we hovered on anything else but it looks like that's working. We just need to fix the other part which is interesting because I want to say when I hover on the UL hover, oh, I think we can just do this and star anything inside too, right? Which apparently it doesn't like that should be an okay selector animation state paused for when I hover on my UL but that just breaks the whole thing from happening at all. How come it was working and now the whole thing's busted? What did we do? Body, orbit, center image UL. Oh, Kevin the pointer events none. I didn't even see it there. It's just like, why is nothing working? Okay, that's doing that. So and star also gets this. So when we hover on that, this plus anything inside of it should get. So it's refreshed, everything should be straight. It's still spinning. Did I not save? I didn't save. Saving always helps. I was looking at it like, is it going? Now the problem with that is if we had the throbbing animation like they do, they're all throbbing and it's only on the one that's actually being hovered on. So maybe what we could do is actually, we got rid of our hold position, but we might actually need to bring hold position back in. Except no, we're going to need hold position throbbing. The throbbing is annoying because the icons aren't actually getting bigger inside. Are they?  Because I want it to hold position should also stop. Yes. Okay. So it's fine. So maybe we do use hold position and we just say, hmm. Okay. Can you put two animations on one thing? We're going to find out something I should Google before doing it, but at frames throb, just because the speeds are so different. So we're going to say 100%. And the reason I want this as an animation and not a transition is because I need it to keep repeating itself without me interacting with it. So we do a scale, one of the ones I can do on its own now, scale of 1.2. We're about to find out everybody. We're breaking ground here with Google be damned. So the LI where I have, so we have my animation of orbit. Now, if we follow conventional CSS, we would do a comma. And then we could do a throb of 10 seconds is infinite. Does that work? No, hold position is working. It's not working on hover anymore. Oh, wait. Wait. It is working. I see. I put this on the wrong thing. Undo, undo, undo. We had to put our animation on the stuff inside. But we want the throb to be on the LI itself, animation, throb of two seconds because that looked really slow. He's infinite, infinite, alternate. But we're screwed again, because I do really need this to be over here, because I don't want it to be doing that, obviously. Which is okay. Okay, so it was working. So we can break this onto two. So we're going to break this down onto two. I'll paste that in. But what I'm going to have to do is instead of you can see the icons are actually growing and shrinking right now. We'll do that as a one. And if I hover on top, we can still see those are kicking in. So we'll have to fix that and make sure those don't actually run. But what we're going to have to do then is the background, which might muck things up a little bit, because those are images. Because I did this as an image, I sort of need this to have a background on it. So I think what we'll actually have to do, can I let's select, I can't do multiple of those. Okay, let's just come here. I'll just do this fast. I'm pushing alt on my keyboard to be able to select some like multiple things. I'm just holding alt as I come and select all these. Then I'm going to do a command shift P, which brings up my command palette. In there, I can start writing emit choose emit emit wrap with abbreviation. And I can just do a div, which shouldn't actually change anything that we see. Everything looks exactly like what was going on. But if we come back to my orbit now, the Li is not going to have the background, the color is fine, the background color is going to come off of the Li itself. And it's going to be put. This is okay. There's my paragraph. So let's come here and just say div. And the background is going to be on that. I'm going to do a background red just so I can see them. So the div, if I do width 100% height 100%, what's going to happen? Cool. Display grid, place items, center, once again, that's good. And then the background goes to the one that we had before, which I should have done background color on and not background at all. Now the wrong thing is still throbbing because I have the width. Oh, you know what? I had to do that step anyway, but I have an overflow of hidden here, which is mucking everything up. So this overflow of hidden will actually come off of here, which will now have boxes that are growing and shrinking. But what we'll do is the border radius will come onto this. We can just do here. I'm going to do it on the div. I don't want to muck up my paragraphs. I think it would be fine, but we'll just do it here. And we'll do a border radius of inherit. That way it's getting the border radius from the parent. So if ever we do change the border radius here, you know, if I change that to 10%, they both change at the same time because they're being inherited. Okay, now that's way too much. We're throbbing. We're going to do a 0.5 maybe. Okay, that's better. Now I don't want them all throbbing at the same time. So what we can do to change that, that one, so we could come in on each one of these and, you know, any animation delay. And this, you know, the first one could be zero. The second one could be 100 milliseconds. And then so we should see actually now, but you save that. Oh, those are not on the right thing anyway. But yeah, we could go through an nth child's and do it all and set it all up with animation delays. We need only this one, because I'm using a, we want to change the animation delay, but only on the throb and not on the orbit. So I think what I'm going to do, I think this is like, if I put one second here, let's just put 10 seconds, I just want to make sure putting the value at the end here works. Refresh. Yeah, so there's no throb going on. And after 10 seconds, the throb is going to come in because we put this delay on it. But what we could do is make this a variable var throb delay, right. And then maybe it has a default, a fallback of 100 milliseconds. And then we could use sass to actually generate these. So I could say for whoops, not fun face for I was trying to do Oh, look at that. For var. So we're just gonna say for I from one, this is a little off one through eight, because we're counting one through eight, we're going to do a and and child. And I think we have to use interpolation here, like I mentioned before, and I can use my eye.  I think this is going to work. We'll make sure it does. But I'm going to change this from zero through seven. The reason I'm doing that is just so the first one, this is multiplied by zero, so it's going to give us 50 times zero is zero. So the animation delay for the first one is nothing. And it's sort of going to like cycle through. So let's just see if I hit save and I hit refresh, I think it worked. Let's go look here and see what that actually generated to see if it works. Oh, we need interpolation. So it didn't work. No problem. Wrap that like that. And there we go. Now 50. Oh, it's not doing it in the if I do this, usually SAS will do math for you. But that's okay, we can just do a calc on that, I guess. Oh, yeah, that's okay. I feel like it's not working. Which would be the, that should be here. Right? Maybe the nth child. Okay, let's just see if this is throb. This should be working. Oh, it's throb delay, Kevin.  I don't think it's working, though. Okay, we're going to try two different things here. The first one is I do this. What happens? Okay, so now the throb delay actually makes sense. It's just not working. Which I don't quite get. I just had to interpolate the whole thing because again, it's a custom property. So it was trying to put out now the calc should have worked too, but you can see throb delay is 1000 milliseconds. So my next choice that I'm going to try, because those should be working. Let's just take this off of here and do it like this animation. Okay, we'll just try an animation delay here of var. Oh, Kevin, one second. Oh no, it was okay. Var throb delay. What am I doing wrong? I fixed it. What I did, I was putting it here and I just moved my loop up to here and it worked. You'll see things look a little bit different than they did because I was going a little bit crazy. We saw this was actually coming out. I just, I don't know, I tried a bunch of stuff. It wasn't working. And then I said, you know what, I know custom properties are inherited, so I'm going to move it to the parent because maybe it didn't like how it was because here it's a star selector. I don't know. There was something that clearly wasn't working. So I just moved my loop up here to change where the delay would be. And as you can see now, they're not in sync with each other. The one thing I will do is change this from an ease to an ease in out because I think that way it, like the speed going both ways, it just bounce around a little better. We obviously, I was worried about the overflow hidden on the paragraphs, but I forgot that we had this here. So there's actually a few things here, like we have my and star, which is getting my div and my paragraph. So I think what we can actually do is delete all this from here and delete all this from here and bring it all on this one place. It's going to do the same thing, but we can also on here have the border radius of inherit on that as well. So now we don't get that weird thing that comes on. So that's a good start. The next thing we want to do is bring back on that. And I don't know why I got rid of that before star or star. I'm just going to make sure nothing inside of their animation play state is paused. So if you hover on top, everything stops. No, I want the other ones to keep going. That's why I took this off. So, okay, that's okay. Li and hover animation. That's going to be a problem play state, play state pause. The reason that's a problem is the other ones will keep rotating. They all keep rotating.  Because I think they didn't do that on theirs, right? I was going to do this with CSS only. I didn't want to use any JavaScript. But yeah, those keep running. It's only the one I'm hovering on has stopped. They're pulsing is a little more aggressive than mine, but that's okay. Is there a way? Okay, we're going to try something. We're going to try something. Is there, okay, animation shorthand. Is the play state in here? It is in here. That's good. So where does it fit in paused and then slide in? So do you need a specific so, okay, paused. Let's just come here. So here we have this animation. This is the second one. So this is for the throbbing. So here I'm going to do a orbit play state. And then here we're going to do a throb play state. Because we want the orbit play state to stop. But the throb one always be running the throb one, I guess we don't need. So when we hover here, that's the one that's my ally that. So okay, so here on this one, we'd say is animation, animation throb, throb play state is paused. Does that work? I did it for all of them though. I don't want it on all my allies. I only wanted on the ally that I'm on. It also stopped it from rotating for some reason, which is weird. Notice, okay, we muck something up because now everything's fine. Oh, no, everything's rotating. It's rotating. It's not fine. This is breaking things. Oh, Kevin. Kevin, Kevin, Kevin. We're still broken now. So it doesn't, okay, one second, let's see why that's broken. Is it just because there's no value for it? So it's saying that it's not defined. Is that a problem? Okay, let's just say it's not defined. Let's just say, is it play and pause play, play managing state with CSS guys. One thing I just saw is this is running and not play. So that doesn't help matters that I'm using the wrong thing. Let's just try a comma running. Let's just stick that on both of them. Hit save. I broke something. Maybe they're not so that it doesn't like a custom property being here at all. Now let's just try something else. Then if that's not going to work, if I come here, and I say animation, play state like this, and I say running comma running, does that work? That looks like it's still working. I still see it running. And then if I do running paused, pause that one. The plane's not turning. Now some of the other stuff is off in a second. Okay, everything's doing the right thing. My gravel one is mucked up. I don't know what's up with this one, but whatever. Okay, it's working. So now what if I do a custom property here? Var one comma running. And then we'll just do this one as var two running. It really doesn't like. Oh, no, it is going. Okay, that was the delay. Yeah. So, okay, I mucked up this guy. This guy's broken for some reason. We'll fix him after. Oh, because I'm not plus one. I was looping through, but this was getting up to the seventh. So the eighth one wasn't included in like the full list of stuff. That's what the problem was there. So they should all be doing it. There we go. Okay, so everybody's throbbing now that there is the issue with that that while they're all throbbing like at the very beginning, none of them are throbbing, but whatever. It sort of kicks in. I'm not going to worry about that. Now what I want to do, okay, so let's change to to throb play state and see what happens now. He's not throbbing. The other ones are still throbbing. We're managing state with CSS. This is so cool. The custom properties are incredible. So, okay, that's good. I'm going to close this. I don't think we need it. That's okay. But I need, oh, wait, wait, we should just be able to pause both of them then. Throb play state because it only worked on that one and my orbit orbit orbit play state change this one to orbit play state. Let's see, let's see refresh the page, close my dev tools. Something's in the way of me closing them. There we go. Oh, no, the other ones are rotating still. Oh, okay, wait, wait, no, we can fix that. We want all of them to stop. So that means the orbit play state paused is going to come all the way up here. The animation play state, the orbit maybe could use a better name here because of how I've set that up. But let's try that again. Why is that not getting it? Let's just go on you and choose hover on the ally. Where's the ally? Take you on the ally, do a hover. That should have paused everything, but it doesn't for some reason. Oh, we don't want it on there. We want it on the UL, the UL. Hover on the UL. Hover, cool. Now if the hover is on UL, the orbit play state should be paused, but it's not. So let's come in here, the orbit play state.  Take you off of here. I don't actually need this one either. We just want to do that. Refresh. Yes, it's paused. It starts again. It's paused. The other ones keep throbbing. It starts again. That was so much harder than I thought it would be, but I'm so happy that it's done. Wow. Okay, cool. And we've pretty much matched. Now there's, as I said, a faster one. They're throbbing, actually. I'm not even sure. They all look like they're together now. And I did that whole offset thing for nothing. I like mine being all different. So whatever.  And I think that's why I thought the timing of them was a little bit different. They do have this fancy animation that I was originally going to do. Not this, not this. Let's wait. That where it sort of like spins out before they all start, they load in. That I think compared to what we just did now is actually not that hard. It just means another animation to start them all out on. And I think what I'm going to do is let you guys do that. And if you get it done, send it to me over on Twitter. I'll have the repo to this link down below. If you want to build it from scratch, you can do it from scratch. If you want to just add in that part that I talked about, anyone who does it, I'll retweet how you did it with your thing, whatever. But I'd love to see, you know, if you guys can come up with that type of thing, you can even complete the page, fix things up, whatever you want. And if you like this video, and you'd like to see other ones that I do like this, where I build out something from scratch, there is the last one that I've done as well as a playlist of all the ones that I've done right here. And with that, a very big thank you to Jan, Johnny, Stuart and Tim, who are my supporters of awesome over on Patreon, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your record on the internet, just a little bit more awesome.


I'm the comic weekly man, the jolly comic weekly man, and I'm here to read the funnies to you happy boys and honeys.  Right out of the pages of Puck the Comic Weekly, straight into your living room, your friend the comic weekly man, the jolly comic weekly man. Hello, hello, hello. Little Miss Honey, how are you today? I'm just fine, thank you, how are you? I'm fine too, and I have a special announcement to make to you today. What is that? Well, you know the American weekly, don't you? Oh yes, it's the magazine that comes with the same paper as the comic series. Well, you just tell them that next week we're going to have a special announcement for them that's going to make them very happy. What's the announcement going to be? Oh, if I told you that now it would spoil the special surprise. Can't you just listen? That would just spoil the fun for you. I promise, I won't tell. Well, I know you won't, but you might talk in your sleep. Oh, what's the matter? Oh, be sure to tell them that. All right. And I know they'll be very pleased and very happy. Oh, I know. Puck the Comic Weekly, I will in just a moment, but first here's that nice man with something interesting to say. Oh, with Puck the Comic Weekly, and at the top of the first page, Hopalong Cassidy. Magic words for the music, please. Very well, my lady. Six guns blazing as your thunder's along. Give us music for Hopalong. Two crooks had stolen the deed to Buck Peter's ranch and tried to get out of town with it. Hopi had gone after the crooks and captured the one who had the deed. And he's brought them back to the bar 20 ranch where they've held him a prisoner. In the middle of the night, the other crook slips into the shed and releases his pal who has been tied to a post. He whispers, I saw your capture from the train window. I jumped off and doubled back here to the bar 20. They go to the door. Last picture top row, they open the door and see Hopalong and Buck coming toward it. Hey, quick, the rear door, they're under us. Run to the rear door and see Lucky in California and some ranch hands coming toward it. As Lucky steps in the door, they push a stack of feed bags at him. And in the confusion, they run to a window and climb out. First picture bottom row, Lucky spots them far off, heading for two horses staked out in the brush. Hopi and the others run for the corral for their horses. But they find that the corral is empty. California says, Hey, it's too late. Our horses were turned loose to block pursuit. The buzzards were too smart for us. Buck Peters replies, Well, let him go. I still got the D to that Wyoming homestead. Hopi says, Yeah, and they've got the information that you and Rose will be heading north to claim that property. Well, and I might be riding that trail straight into trouble, Hopi. Hopi answers last picture. Yes, but that's where you will pull them. Yes. So do I. I hope it's a good one because those outlaws were clever to escape when they were surrounded. They weren't. We'll find out next week what Hopi's scheme is. Now? Well, now could we please read Prince Val? We certainly could. So let's go over the page to page three. And hearing a bird catching contest. Yes, it's called the falconry contest. Val, Alita, and the king have each trained a bird to catch other birds. And whatever they've got to eat for dinner that night and hope for Val, his bird is caught a crow. And I've never heard of anyone eating a crow. Neither have I. So let's read now where Prince Valien has to eat here. Very well. Here we go with Prince Valient in the days of King Arthur. Eckert Breckert, Grimulkin, and Quince. Music romantic for a fair, fair prince. As Val holds up the crow, his bird has caught a shout of laughter goes out. Everyone knows that Val has to eat that crow for dinner that night. And now that the contest is over, Val, Alita, and the king turn their hunter birds loose. For having been trained for this one hunt, they've done their part and have won their freedom. But Alita's beautiful little Merlin comes back to Alita's wrist. It seems the little Merlin has fallen in love with her mistress and wants to stay with her. Last picture second row, the hunters sit at their table and their food is brought to them. The king's eagle has caught a heron, a very tasty bird. Alita has a delicious partridge.  But Val's a good sport and he begins to eat. At first picture bottom row, he finds that it's very delicious. And then he realizes it tastes like a partridge. And he knows that his sweet wife Alita has played a double joke on it. She's had the cook put the tasty meter of the partridge under the crow's feathers and skin.  After dinner that night, a commotion is heard outside the castle. And then in comes Rufus Regan, the battle-scarred and travel-stained home from the long overland journey from Rome. And last picture Val tells Alita, Rufus is brought with him the Christian missionaries. And now we can have the twins properly christened. Yes, it was. Oh, and now the missionaries have come at last and they can baptize the babies. Happy night. You bet it will. And we'll find out some more about that next week, I'm sure. Could we please have been captured by those giants who are trying to conquer the world? And rescue rockets from the earth have been sent to search for flash. But the giants have seen the rockets coming and they're ready to attack. All right, let's read now and see what happens. Here we go with Flash Gordon. Rigorigodoon dunes, haschematage. Let's have music for heroic flash. The rockets from earth speed toward the moon Rhea. Suddenly they see the enemy rockets speeding toward them. Strap to a chair under the brain wave recording apparatus. Flash can only gaze helplessly at the space scanner watching Rhea's armada attack the outnumbered rescue rockets from the earth. And he hears the king barked terse orders spelling the doom of the tiny earth fleet that is already reeling under heavy blow. On board his flagship, Icey Stark is appalled as he sees the havoc brought by the reen guns. Frantically, he orders his surviving rockets to break off the unequal battle. I don't want to have that quote. Last picture top row, as the struggle rages, a gun spotter in Dale's rocket is gravely wounded. Quickly, she takes his place in the turret, helping her crew fight a rear guard action against the swarming attackers. But first, picture bottom row, wave after wave of the reen ships come diving in with guns blazing to cut off the earthmen's escape. And the battle becomes a rout. Suddenly, there's a burst of flame as one of the reen missiles scores a near miss on Dale's ship. The craft rocks crazily and then disintegrates. And Dale is hurled out of her shattered gun turret into space. The enemy armada hurts the remnants of Stark's cripple fleet back toward Rhea. Meanwhile, last picture, Dale drifts alone through space, her precious supply of oxygen leaking slowly from its damaged container. As she floats down, Dale sees a tiny sphere approaching. It's a mere fragment in space, spinning slowly in its orbit around Saturn. Desperately, she grabs at it and her fingers find a precarious grip. The Dale before. Yes, I'll bet he is too. And just because lost in the air and she can float like that then she won't be able to breathe because there isn't oxygen up there so high. You're absolutely right. You remember everything you learned about outer space, haven't you? Yes. Well, we'll find out next week what happens to Dale. Maybe the giants will capture her and bring her back to flag. I hope something happens so she won't be left like that forever. We'll find that out next week. Now, let's go to the first page of the second section. Oh, and Dagwit does today. Very well. Here we go with Dagwit and Blondie. Say the magic words with me, please. Ramaphoo, Ramapham, Zimzam, Zambi. Come to the music for Dagwit and Blondie. Dagwit is enjoying his newspaper when Blondie trips into the living room and says, We're having cream potatoes for supper and I have no parsley to sprinkle on them. Oh, what's the difference? You can't taste the parsley anyway. I'm not on cream potatoes. Dagwit gets his hat and coat and says, Okay, I'll get you some. As he goes out the door, last picture top row, he says, Is there anything else you want while I'm at the store? No, dear. Just the parsley. A few minutes later, he's going down the street. First picture second row, he hears. Uh-oh, what's going on? I hear shooting. He looks over his shoulder and sees a robber shooting down the street, followed by police. Hey, they're coming my way. Last picture second row, they head straight for Dagwit. Dagwit who doesn't want to get shot, at least in the front, turns around and dashes off down the street beside the robber. Around the corner they go. First picture next row, they dash down an alley. Hey, we got him cornered. They can't get away. In a short time later, Dagwit and the burglar are brought into the police station in chains. Dagwit faces the police chief and he says last picture third row. I wasn't doing anything, Captain. I was just walking down the street. I'm innocent. I'm innocent. I'm innocent. The police chief says, okay, okay. I won't hold you. You can go. First picture bottom row, Dagwit comes in the house. Hey, buddy, something terrible happened. I got caught in a cop and a robber chase. They took me to jail. I'm lucky to be alive. And Blondie asks, did you bring the parsley? Oh, my goodness. I forgot the parsley. Last picture, Blondie turns to the children and says... I asked him. And Dagwit goes... Did he look funny when they brought him into jail? Yes, one thing about Dagwit. No matter how sad he looks, he always looks funny. Yes. Well, now look underneath Dagwit and Blondie. There's Roy Rogers. Oh, read that, please, because Roy is starting a new adventure. I'll read that in just a moment. This man again with something interesting to say. Now, here we go again with Puck the Comic Weekly. And on the bottom of the first page of the second section, Roy Rogers, King of the Cowboys. Magic words for the music, please. Very well, my lady. Ha-yip-pa-yo. Now, here we go with Roy and Trigger. Ha-yip-pa-yo. Roy and his friend Chubby were riding along the trail when they came upon a broken wagon. They saw tracks leading to a nearby water hole. They followed the tracks. At the sound of an approaching horse, a girl who's at the water hole quickly powders her nose and then arranges herself on the ground as though she has fallen in a faint. Roy and Chubby discover the girl lying there. They dismount and splash water on her. She comes to and tells them that her name is Nadine Drake, that she's on her way to Sagebrush Bend to apply for the position of school mistress. Chubby says, I'm the humbrier you got to see about that there job, miss. Of course, I built that schoolhouse. When Miss Drake hears this, she tells Chubby that everyone has heard of him and his fabulous mansion. Last picture top row, Roy says, Am I named Roy Rogers, Miss Drake? I'll ride back to the busted wagon and fetch your bags and the horse. First picture bottom row, Roy discovers that the wagon is gone. He sees a cloud of dust where the trail curve is behind a huge rock. He lights out after it. While in the wagon, the driver is saying to another man, Well, it worked, Goucho. That rich desert rat swallowed Nadine's story. They're already on their way to his hacienda. She's a smart girl. At this moment, the man named Goucho looks back and sees Roy approaching and explains, Caramba, senior Derby Don, we are in trouble. We've recovered the wagon too soon. A strange cowboy chases us. The driver whips up his horse. Get up there. Get up there, will you? Come on there, get up there. Hang on there, Goucho.  As he swerves around the curve, the wagon wheel breaks. In last picture, the wagon and the men are plunged over the cliff. Hey, Caramba, look out! Roy gallops up and rains in. He looks over the cliff and exclaims, Well, Miss Drake's wagon has gone for sure this time. And those road agents with it. Yes, I wonder what her game is. Well, it must not be nice if those men who were in the wagon didn't want to be caught by Roy. You figure that out very cleverly. Yes, I do, do I?  Thank you. You're welcome. And maybe next week we'll find out a little more about what this girl is up to. Now let's go over the page. Well, let's find out right now. Here we go with Donald Duck. Say the magic words with me. Sweet jump, sweet jump, squiddly, chicken jack. Let's have music to fit a quack, quack. Donald is going out for lunch today. He looks in the paper, and he sees that it says it's going to rain. So Donald decides to take his umbrella with him. He goes out the door and locks his door behind him. And by the time you can say a double banana split with a chocolate soda on it, Donald is downtown at a restaurant finishing his lunch. First picture about him, Ro. He goes to a hat rack, takes down his hat, and grabs an umbrella hanging there. When a big bruiser standing beside him says, Hey, just a minute, pal. That's my umbrella.  And the man grabs the umbrella. Donald yells, Why, you quack, let go. I smile, umbrella. The man answers, Don't kid me, chiseler. And jerks the umbrella out of Donald's hand. And he goes out the door. Donald follows him outside where it's raining. He yells. The man walks down the street saying, Boy, what brass. Last picture, Donald comes home through the pouring rain, soaking wet. As he pushes the key in the lock, he sees his umbrella outside the door where he had left it when he locked the door before going downtown. And Donald feels just like this. As Donald was just lucky, the other man didn't have him arrested. Yes, and it's just proved you should never accuse anyone without being sure you're right. No, you're not. Okay, now let's go over the page and look, there's Uncle Remus. Oh, is that please? Very well, my lady, say the magic words with me. Hippity hoppy, making a habit to give us music for old Bre Rabbit.  Bre Rabbit comes into town one day and he sees all the critters lying around on the porches of the stores sound asleep, filling the air with snores. Bre Rabbit listens and then says, Just looking under, the whole town sleeping like a nasty alligator. Just listen. My, my, my, my, what a racket. It's about time they was woke up. Bre Rabbit listens to the racket, thinking a little bit, and then he has a cute idea. He says, this ought to shake them loose from their hibernations. And he runs from one critter to the other and begins to yell, run, run, run. And they all wake up and they shout, one, one, one. And they start running down the road. Down the road they run, yelling at the top of their voices until they're finally exhausted. Bre Sheriff shouts, hey, hold up there, hold up. What is we running for? Bre Buzzard answers and Bre Buzzard says, us just run. And last picture, Bre Rabbit was hiding behind a tree giggle. I bet they don't know what they were sleeping for either. And Uncle Rima says, if you insist on doing nothing, you might just as well do lots of it. Yes, it just goes to prove that people often do many things without thinking. Yes they do. I don't think they would. Oh, now could we read Dick's adventures? We certainly could. So let's go over to the very last page and here we are with Dick's Adventures. And Dick is having a wonderful adventure. He's in the early days of America and he's a sailor in the American Navy. And he's aboard the ship Constitution which is one of the most famous ships in American history. He has to take the bridges back to the captain so please quickly read that so we can meet the captain. Very well, here we go with Dick's Adventures. Say the magic words with me. Exactly. Let's have music for adventurous Dick. Dick is holding up the trousers and looking at them and he exclaims, Gee, Captain Isaac Hall must be a big man judging from this. And then he looks up to see Captain Hall standing over him. Oh, they're fixed, sir. Last picture top row, the captain smiles at Dick and says, The British are saying we Yankees are growing too big for our bridges, lad. Dang this sail against them for a fight that we'll soon see. At this moment, first picture, second row. A loud cry from the lookout. Browsers them both. Sail on! On the starboard! The captain shouts, Run it out! Run it out! American sailors eagerly spring into action to chase the British ship. First picture, bottom row. In the gathering twilight, Dick sees that the Britisher has turned tail and is running for life. But the Constitution, with all sail spread, is gaining. Meanwhile, last picture aboard the pursued enemy frigate. The British captain sees the American ship coming after them. And the captain gloats, Well, good, good, jolly good. The Yankees taking our bait. Keep out of range of his guns, but don't let him lose us. Won't he be surprised in the morning? That's exactly what they're trying to do. Yes, but what kind of a trap? I'm afraid we'll have to wait until next week to find that out. Oh, this is exciting. Yes, but here's something else that should be exciting. Below Dick's adventures Rusty Riley. Oh, yes, because Rusty and Peep have finally escaped from the cave where those crooks locked them up.  Yes, and now Mr. Miles and the sheriff are sure to be led to the old abandoned house where the crooks are. Oh, and I hope they will capture them. Let's read and see if they do. Very well, here we go with Rusty Riley. Gallop and run till the road is dusty. Give us music for his horse and Rusty. At the Milestone Farm, Tex and Mr. Miles climb in their car. Tex asks, where are we heading for, boss? Somewhere out on the state road, Tex. Sheriff Thurlow and the police will be waiting for us. Meanwhile at the sheriff's office, the sheriff says to Rusty, file into my car, you kids. We're going to meet the police, Mr. Miles. And believe me, your story better be on level. Rusty replies, of course it is, sheriff. You'll see. Last picture, top row, the two crooks, Sir Percival and Nob, are still searching in the basement of the old abandoned house for the trophies. They feel sure the boys have found the trophies and have hidden them somewhere else in the cellar. Suddenly, first picture, bottom row, Sir Percival exclaims, Hey, Nobby, look here, under this junk, a cistern. Nob's exclaims, Hey, cistern, hey, where do I get something to fish around in? I saw a rake a couple of minutes ago. Sir Percival takes a rake and he fishes down into the cistern and draws up a bag with a loot on it. By Jove, I've got it. Hooray! Blinking good luck, I suppose it. Come on, Pius, let's clear out of these here parts. At that very moment outside the house, Rusty is saying to the state troopers and techs, Hey, this is the old house, sir. You can get in through the back door. One of the troopers says, last picture, Hey, there's somebody in there, Inspector. I saw a light in one of the cellar windows. And the detective says, Okay, you get everything ready. I'm going in there. I'll give a signal of my flashlight. Then let's have the floodlight right on that back door. Now they will catch those crooks and am I glad because they were very mean to Rusty. Yes, it looks like they've got the crooks at last. And next week, we'll find out for sure. Now, that's all the time I have. But before I go, here's that nice fellow with some more interesting information. Honey and all you boys and girls, I've got to go now. All right, Mr. Comic Weekly Man by last week. Okay, that's that date.  Be sure to meet me with our little friend, Miss Honey, next week, when I read Pucked the Comic Weekly. For I'm the Comic Weekly Man, the Jolly Comic Weekly Man. I'll be back to read the funnies to you. Happy boys and honey. Don't forget, boys and girls, see you all next week. Your friend, the Comic Weekly Man, the Jolly Comic Weekly Man.


Hi all and welcome to this video about using the water supply section of ECAM. In the section I will talk about water supply in general and then the three stages of water supply abstraction treatment and distribution. So that I can show you all I have created an assessment it's called water supply the assessment period is one year and I've used Jordan as a country. When we go over to the inventory you can see that there is some general information for the water supply. I've already entered 45,000 people as my resident population as always this general information doesn't actually calculate your greenhouse gas emissions but gives some context to the assessment so if you want you can also include the costs of the facility you're evaluating. What I will do is go through each stage and then finally for distribution I will enter some data so you can see how it works. It's relatively similar for each stage because the emissions from water supply actually are only indirect emissions that means that all emissions come from energy use in one way or another. That means that especially compared to sanitation it's a relatively simple assessment. So taking a look at abstraction I'm going to create a sub stage and now I can see the data that I have to enter for it if I want to evaluate abstraction. Here it is the volume of abstracted water and the energy consumed from the grid the emission factor is then estimated for me of course you can change it and just filling in the energy consumed from the grid already results in the GHG emissions being calculated. There's also a few other options these options also look similar across the categories for water supply if you have fuel engines then you can enter a volume of fuel consumed you should also have that recorded for your utility and then you can also evaluate pumping efficiency that is something I will go more into afterwards. If we move on to treatment we can see that it doesn't look very different the same basic options and inputs the only new input is this treatment type which is a drop-down menu based on the characteristics of your facility and what these acronyms mean is you can see here when you access the detailed information about the treatment so you can then select which treatment chain is being used for in your facility. Okay distribution also doesn't look very different you have in this case service population I'm going to enter it as 45,000 again volume of water injected into the system in this case 171,550 meters cubed remember that this should be per year so that's how many meters cubed per year. Energy consumed from the grid 184,300 and now we can see already if we show the outputs that there is a value for GHG emissions we can also say that we are transferring water in trucks for example and say that we use this I'll just use the number of 5,000 liters of diesel per year and you can see that that also pops up as emissions from distribution. The other option that I wanted to talk more about is evaluating pumping efficiency this gives you the ability to evaluate how well the pumps in the facility are working this is something that people use fairly frequently also in Ecamm and that's why I will make another video describing how to enter pumping efficiency. I hope that this video helped you all understand a bit about water supply in Ecamm and that you all will check out other videos if you have more questions. Thanks for listening and happy assessing!