Hello and welcome back to our portfolio series. In the last case we built out the skills section here and now we are going to go ahead and move on to this the big work section which is gonna be the most intensive section of the entire thing Excuse me. Um So let's get started. We're gonna start with this upper area here and we're going to start primarily with the buttons. So what we're gonna want to do is same as before. We're going to make a resection. We're going to give it that I. D. Which is going to be work and then Yeah. Mhm. Yeah. Yeah we will um Let's give this one, make sure we have our margin at the bottom there as well. But let's start with creating that button, those little button section. So we're gonna make it give and inside of that let's create the very first button Which is going to be our Trivia game one. Yes. So I you can use the button class to make them. Um I often honestly just use the big class because I find you have to override a lot more stuff with the buttons. It's better for semantic. Html to use button. Um But just for override purposes, I will obviously often just use div I'm gonna use the destructive class but we are going to be overriding quite a bit of stuff with it because we're gonna be making our own button class as well and you'll see that in a second there. Um And so what we're gonna do. Yeah we'll do that and then we'll give it a unique class called trivia button and we will say with his career trivia game, be a game. I don't want that extra space there. Go ahead and save. We have this there, which is a button that has just as a percent of white background for now. Um and we're going to create that exact same thing and we're gonna say podcast. Don't ask. So let's go over here and let's start off by creating our, why do we have an angry are we missing something is missing something loco skills with height. Mhm. Somewhere here dot logo. Mhm Yeah. Mm hmm. Why are you angry? Are we missing a semi colon? Somewhere tight because you're deaf. Yeah. Mhm Do this for a second. Nothing was wrong. It was just a weird. Okay, that's fun. All right. Um anyway, spectral, we're focusing on, let's make our own unique button class here. And what we want to do is we want to give it that background color and define um the button shape and the font inside of it and everything there. So we'll start with giving it that um background color. Oops, I clicked one too far there. It's going to be this one here. So let's say background color. You can go ahead and paste that. I pretty much like to do a standard padding for most of my buttons. Um I'm gonna do a 16 pixel and 24 pixels that besides this. Um Or the cop is 16 and the size of 24 so now we're seeing it looks like that but it's a lot more um Mhm. Me I feel like that is yeah. In our border radius to be better radius. Uh let's do 16 pixels for border radius. That's what we get here. Yeah, I do a lot of standard things from my buttons so that's why I kind of already know what I'm going to type here. Um To our front family. We're gonna define all of our fonts and stuff in here as well. So we're gonna go ahead and do roboto as well as sand saref. Our weight's going to be that good again um We're going to do a font size of Uh huh Let's not let's say 2024, 25. All right, Food to take uh 20. That's better. We would like the background color to be white. Stop. Sorry, not the back fellas the font color perfect. And we'll worry about the hovers and stuff like that later when we do our finishing touches. But now we have our two buttons there, which is fantastic. Okay, so where are we here? So for the trivia button and the code cast button we're going to do to um separate classes and it's literally just going to be defining their position with absolute positioning because we do we are going to be kind of defining this whole section. Um really specifically uh Again I'm sure this is by far not the best way to do this, but that's what we're doing. Uh Okay, so what we'll do here is we're going to give yeah, give this a position relative class. Yeah. Then we're going to yeah, how much space do we want between these? They were just going to set that up with absolute there. Um So let's go over here and do tribute podcast. So do trivia button, let's say a cop uh like down a little bit probably. Yeah, because we want a big gap because of these so 100 trivia button. Oh, let's give this a position absolute. So that's 100 down there. Yeah. And then we're gonna do do we want it to be over from the edge a little bit here. No, that one's okay. I don't think we wanted too much over from the edge. Um What we will do is with the code cast one. We're going to do the same height down, but we're gonna have to move that one over a lot. So back over to style is gonna close app out here because we're not using them at all right now. So yeah, let's do podcast. What's fun. Uh huh mm hmm Top nine, same 100 pixels there. Yeah. And then let's say left 200 pixels as it happens. Well, again, we forgot a proposition absolute give me mhm um We want this a little bit further apart. Let's say 302 happens. Oh that's too far, So let's go back to 200 people like that for now from then let's get the arrows in. So for the arrows, whereas are we using here, we're using this curly down one to find that arrow, that's the area to start raising for the co cast button. The other one is 1 reason for the other one that's nice and easy. So for the trivia one, we're gonna do our image and we're going to say assets, flash one, let's go trivia arrow for my oh there and then I'm going to go ahead and copy this down there. I'm gonna say arrow too and we're gonna say code cast arrow. Perfect. So those are right underneath and now we need to go ahead and adjust the size of these. Um It's also his son classes here into a position absolute. Mhm. Yeah. Okay and now we're going to go over, well actually listened to by the classes, I will say trivia arrows are class and then we'll say co cast arrows or other class. Oh yeah pharaoh, um the trivia arrow, it's our height looking like here Because it's 100, let's try it at 100 and see You could have stayed 100, I was getting to the end of the week. Uh that looks really blurry but it's looking a little bit better. Um Oh it's because it says stop PNG but they are pnds not beautiful but we'll see if we can keep improving that. Um and then we of course need are rotating here. So let's grab our transform. Mhm Perfect. So that's in a better spot. So let's Increase the height was for a top, let's do negative 10. Mhm. I think I want to change the Height a little bit. Let's do 90. I don't look so blurry And I need to have a better asset later. We'll see how it goes. Um Okay, and then we want to move it over a little bit. So we're gonna say uh for the left let's do 100 It's looking good so far is a little bit more over maybe 80. Mm hmm. Apparently working here 80. Okay, perfect. And then we're gonna do arco cast barrow. Yeah, our co cost arrow is going to be underneath. So co cast arrow. So is our height is the same there. So let's keep our height exactly the same. We'll do 90 pixels there. Um let's copy our transform over. Oh, that was not transformed. That's easy. So save this. Perfect and we need this one to be underneath. So we're gonna do a top of let's say 100 and see how far down that goes. You know, first is not 200 too far. Say 1 80 that area looks bigger than the other one even though they are the same. So I'm gonna actually change this to see if publix. Yeah, it does okay to that height and evil girlfriend. More being finicky now enough and then we will move it over from the left. Um How far over was the button? 200. So let's take 2 40. 2 40 if our 10. Yeah. Mhm. 100. I'm 20. Okay that's looking good enough there but I can say that we definitely are not far down enough for our container. There's no way. Um What do we name that container? Where did I put it? I didn't put it anywhere. Mhm. I feel like I made a container and I feel like it's gone. Yeah. Oh so it's just it's just in my head. Okay so let's go ahead and give this section. Okay Hey work you know they're over here and do that. I'm gonna move this one. I'm going to go up a little bit um and try to keep them going in order from the sections. Um Yeah I think what we're going to want to do is put our Massive amount of padding in there. So let's say like 200 again you can't just type that amy you have to specify what you're doing. Stop my friends Padding. Top 200 Safe. Mhm. Oh that's gonna make a difference for the other thing. Um I think we need these to move down a little bit more. Let's see here. See what rap. Okay so for our arrows and our buttons. Let's let's just work with this for now. Um let's skip over the text for a second and let's put in our um big work there. Um we can help wind it up a little. Um so I'm going to actually copy what we've done for a different section. So for the skills here, I'm gonna go ahead and copy that down. Uh and I'm gonna change it to work and then I'm gonna change it to work heading. So we'll go over here and do work heading. Yeah. And copy pretty much was in here, but we're gonna need to be we're gonna need to change some stuff and you'll see why in a second. So, um this is where we want it. It's going to be on the opposite side because of course it is. So we need to flip this over here. So the easiest way to do that actually is going to be changing. We're just going to change this to a flex. We're going to see flex end. Bye. Okay. You cannot take and I figured that would just be screwing that up. Put it up here. Mhm. Yeah. Okay. All right. These are there. Yeah, mm hmm. Um accident. That was not helpful, is it now. Okay, let's undo what I just did because I definitely screwed something up. Yeah. Yeah. Let's move this underneath here. Okay. And then we'll say this is going to be, it's not oh, let me just think here, don't we do justify content between we have oh, but in this one needs to be inside of this, move that one out one too far there and saying what's this needs to be up in here and I put this on the wrong one so let's move this down. Thanks. There we go. Okay so now we just need to correct this so we have it as left in our style. Um we're going to change it to right and so it's hanging off the edge there which is perfect. That's what we want. Um I want these to move over a little bit. I'm not happy with where they're sitting. So why don't we um just go ahead and increase this here. Uh huh podcast button, trivia button left Let's say 1 10 but that was the arrow, there's my button. Okay Left a little bit over by like 80 pixels and we'll just adjust everything over there. That's it too far. Let's move over by 60. Make that look. Yeah that's better. Okay um it's a little the this over let's add 60 to this so that it's even to what it was before the trivia game button or saying I think it's still mostly in the right spot but let's go ahead and move this over. Uh 60. Perfect. Um And what I do want to do is the top we're gonna drop the top down Let's say another 80 Yes that'll be better. So let's drop that down 80. Uh for the top here It's at 80 collapsible. D 70. Mhm. We're gonna add 80 to this, which is gonna make that 2, 50, Beauty. Okay now let's go ahead and add in the text. So let's go over to our index file here and we're gonna do a span. Yeah and the span is gonna just say this so you can actually just copy that tax rate over and I'm gonna give that the class of first of all position absolute because everything is going to have its absolute position for these and then we're going to do um we'll do trivia text, keep it kind of that same theme. Um and then we'll do another span under here. Okay um Go ahead and copy it. This one, we'll do a class of position absolute and we'll do a podcast text. Yeah. Perfect. So now let's go over and add in with the button button, sorts through trivia text. And what we want is we're gonna using that different font family now because we're gonna be using that permanent marker. Thought that we did before. So the permanent marker font is going to be a font family. It's gonna be permanent. I don't need to be in a Perma, hint marker and then I think it's cursed. It's going to be our default there because they're gonna want it to be kind of Okay. Um and then we're gonna do a up our font size. Uh let's just pick let's just make this no display for a second. We can see this better over here. Okay, so font size. Yeah, I was 24. Looks pretty good. Maybe a little bit too big. Maybe we'll do like 22. Um and then we're gonna started to find with so we'll start to find with to like 300 pixels that directly. Yeah, that's roughly the same. Um And then we now we need to control the height and make sure it's in the right spot. So first of all let's just move it over a whole bunch. So if the arrow is for the trivia arrow, the arrow is over 100 let's say left. Uh Yeah, one pen. Yeah, Romero left. Oh it's at the end of the arrow. Going to the beginning. Okay, so let's upset a lot. 2 80. Yeah, 2000. That's what we want to 80. Is that far enough? Looks good. Right. Are there is a little blurry which is kind of annoying me but how much we can do about it at this point? Um Let's do let's change the bottom one here to not have that Dean in class now and then we're going to go ahead and make we're gonna copy down this. We're gonna change just a code cast And then we're going to we really need to change the top for this one. So the top is going the contest arrow is starts at 250. So let's do the tops 300 and see what happens. Not quite far enough. We'll see. 3 50 perfect. But we don't want our left to be over that far. So let's change the left a few 100 Way too much. Let's say 1 50 Too much. Let's say 100 Better. But our tops too high. Select six through 10. Too short. 3 30 better. Yeah. So now those will stay still when we move it. Just what we want because it's positioned on this side of the screen and then we'll worry about updating it responsibly later. So those are done. Uh Okay we're 26 minutes in. Um I think what I'm gonna do is yeah, I'll end it here and then we will build out the second half of this which is going to be this part here in the next video.