Always Sunny 02: Home Page Structure

0:00:00
What’s up everybody welcome back. So we are working on always sunny. This is episode number two. COVID tried to take me out once again, but just like the first time it failed miserably. So here I am. You’re still stuck with me and we were going to get moving forward on this bill. There are a couple things that I needed to tidy up with regard to this template. We got the header, the footer kind of constructed out the first time. But there were some things that I missed and I wanted to go button those up now. I’ve already buttoned up some of them in the footer. I’m going to go do the header next and just check that out. But I wanted to show you what I change just so you that you’re aware of everything. So I’m going to collapse all of this. We have our footer here, which I’m going to name in the structure panel.

0:00:46
There’s our main container here. We have a block on the left and then I’ve changed this block on the right to be a nav element. So if I click on that, you can see that I changed the HTML tag to nav. Another important part of this is I added an attribute, an RELabel called footer. So then on screen readers, this will be announced as a footer navigation and not just a random navigation. We want screen readers to announce this as like main navigation. This is going to be footer navigation. And I did the same thing down here where if I click on this, you can see this nav has an RELabel attribute of legal. So that’s like the legal navigation down there. And you can see that this is a nav element as well. The other thing that I did on this nav is I broke out each block into list. So the links are now in lists, which means they have a UL and unordered list tag. And then there’s a list item tag inside. And then there’s the link inside of that.

0:01:48
And so the code output on the front end, if we go view and inspect, is very clean and very technically accurate. So here’s our nav element right there. You can see it. And I don’t know why it just moved around. Okay, here’s the nav element that you can see right there. Here’s the unordered list. And then here’s a list item. And then here is the link inside that. You can see the RELabel right here, a footer. So we are really good to go in terms of this footer. I do want to check this and make sure it’s a paragraph tag. Okay, that is all good. Does this have a alt attribute? And it does.

0:02:28
Okay, so this is looking all nice and buttoned up. I do want to one thing I’ve been doing here is we can actually echo. And I’m going to go to bricks, dynamic data. And there we go. I’m going to grab. There’s a little snippet for the current year. And I want to grab that. So where is it? Where is it? Where is it? Here we go. Current date year. So this is super easy in bricks. So we’re going to remove that date and put that in. So that’s going to dynamically insert the date for us.

0:03:02
Then I’m going to click on this dynamic data. And I’m going to go to site title. And I’m going to inject that as well. And that way our footer always stays up to date with the brand name, the business name, which is the website name, as well as the current date. So if we refresh this on the front end, you see copyright 2022. Now, obviously it says site title, which is letting me know, hey, I’m going to have to go into the settings general here. And do always sunny. Okay, save changes. Now if I go update and check the footer, it’s going to say always sunny down there. And it might be LTD in, I don’t know, we’re going to look up that and get to it later. But that’s nice and buttoned up. Now what I’m going to do is quickly jump over to our header template. And we’re going to kind of do some of the same updates with the navigation in the header.

0:03:53
And somebody did mention, you know, Kevin, why did you just go ahead and use the nav element inside a bricks? And it’s frankly, it’s because I have PTSD from using the nav element inside of oxygen. And I was like, well, I don’t want to get all tripped up in this bricks nav element. It’s probably going to try to overkill and do too much. And I don’t want to mess with it right now. I can just build this navigation myself. But then I thought to myself, all right, let’s just give it a shot. Let’s just see how it works. So I’m going to go up here and we’re going to do nav menu. I’m going to put that in. And I’m going to put it between our image and our buttons. So it’s right there in the middle. And then I’m going to select the menu, which apparently I don’t have one yet. So that’s probably going to be our first issue. So I’m going to go to appearance, not widgets.

0:04:45
We’re going to go to menus. Okay. And we’re just going to do main. Create a menu. Now, I don’t know if we can put a, well, we’ll see. We’ll see. We’ll get there. Okay. So let’s view all. I thought I created some pages. Let me go to pages and see what our status is here. Okay. They’re all just drafts. So I’m just going to grab these real quick gallery home. Okay. That one’s good to go. Legal privacy policy service areas services terms and conditions. Okay. And I’m going to go to edit, apply, and we are going to go to published update. And come on wordpress.

0:05:26
Okay. Refresh. There we are. Now we should be able to add these. So about us, contact us services. I’m not going to put service areas up there right now. Gallery. Let’s add those to our menu. Let’s get them in order. Okay. That’s perfect. Save. Now we can go back to our header and refresh. All right. So. Oh, there it is. Okay. Good. Nice. Let’s do nav main like that. And we’re going to select nav main show mobile menu toggle. Well, let’s see. Where do we need to do this? Well, I would say right there.

0:06:09
So tablet is where we need to switch that. Okay. All right. We’re off to a decent start. Let’s go back to here. And there’s a little space on the left hand side. I don’t know what’s going on with that style layouts padding left zero. Doesn’t do. Jack. Okay. All right. Let’s take a second and explore this element a little bit more. So content top level menu. Padding left. Okay. That doesn’t do anything. Backgrounds border typography. Active background active border active typography icon.

0:06:51
Submenu mobile menu. All right. Well, what we can do here is just inspect what we have. I mean, I’ve got. I’ve got links there, right? Oh, that’s interesting. Okay. It looks like there. So there’s a nav element. That’s good. There’s a UL. And there’s an LI. And then the A’s are in the L. So that’s all structured correctly. We see that the L.I. has. Oh, it’s a margin left of 30 pixels.

0:07:20
Okay. So that should be. Oh, there it is right there. Zero. Ooh. Okay. Hmm. Interesting. Oh. Why doesn’t the support gap? It seems like this should support gap. Okay. So nav main. Let’s see what the class actually is put on there. So I’m going to inspect this nav.

0:07:48
Okay. It’s not put on my nav element. Roll is menu bar for the UL. Okay. L.I. Nav main is put on a. So it wraps the nav in an extra div called nav main. So I want like nav main. Well, here it is right here. I could use that. I’m going to do nav main L.I. Let’s just target that real quick. So this is kind of why I didn’t use the nav element, right? Main nav. I hate how it tries to auto-guess when you’re writing comments. All right.

0:08:31
So nav main UL.I. And then I’m going to do margin left. And we’re going to do 1.5M. And let’s just see if that does what we wanted to do. It absolutely does not. Okay. Nav. Nav main. That’s correct, right? Nav main. Yeah. Nav main. Nav. I don’t think that’s going to matter. Oh, is it because I have zeros put in there?

0:09:09
It might be because it’s might be because the actual, yeah, it’s got zero at the ID level effectively. So we just need to clear that out. Even though it says 30 right there, I don’t know if you guys can see that very light. It’s more like a placeholder. It’s on an actual value. Unless this margin left, let’s put this in Z. We need to make sure that this is working. Okay. Good. It is. So that is actually taking that input. So we’ll do 1.5M. That’s going to get us our spacing. That’s going to get us our space. That’s going to get us our spacing.

0:09:43
Where’s our spacing? Where did it go? Oh, it’s there in the builder. It’s not there on the front end. Refresh. Wait a minute. Save. Refresh. Refresh. Refresh. Okay. It is there. Let me just make sure that this is coming from where I wanted to come from. L.I. Is post 48.min.

0:10:05
Okay. So that is WP code box. Good. Okay. We’re getting somewhere. So now what I want is we’re going to nest this. The first of type is going to get a margin left of zero. Not a major left, a margin left. It works better when you spell it properly. Okay. We’re good now. We’re good. So this is what I wanted to achieve. We have spacing between our items, but we do not have any on the first child.

0:10:39
Right? Okay. Good. All right. I can deal with this for now. What’s going to happen when we get to mobile? Let’s check this out. Can we preview it? I’m not seeing it. Sub menu. Okay. Maybe we can do it here. Okay. Super ugly, but at least it functions. Right?

0:11:07
So we’ll tackle that. That’s another reason I didn’t want to do this. Because I was thinking about using a light box from Oxy extras for our net. I don’t want to be forced into using that thing. Maybe I can never this. We can still use the nav element for this, but I’ll just make it disappear at this break point right here. So we can actually use, we’ll display L-NUN. And now I’ll make that disappear at the L break point. Nice little automatic CSS class there. So now what we do, what we need to do is we need to add an icon. Oh, man, this is going to be, this is going to be a lot of work.

0:11:51
Okay. All right. We will add an icon, which needs to be a button. And I’m not quite sure. Okay. So an icon. Can I, I can’t change. Okay. So I’m going to have to wrap this in a div. And I can’t wrap in a block. So I’m going to add a div. And I’m going to drag this over here. I’m going to put my star in my block. My div, sorry, my div.

0:12:25
My div is going to become a button. And my icon is going to become a, I don’t know what these are called. Bars, there we go. It’s this icon right here. Okay. This is going to be 24, now 34. So I’m going to add a div. And I’m going to add a div. I’m going to add something like that. Okay. And it’s obviously styled horribly. We need to do a background of none, really. And I don’t know how to do that in here.

0:13:09
Raw, none. I can just do like an RGBA, like, 0000. And then we’ll just save this. What palette do I want to save it to? How about. Let’s do global. Okay. Oh, dear. I just cleared it out. Save. Okay. There’s my, there’s my non-color. But it also did not help anything whatsoever. So I don’t want to get bogged down in this header.

0:13:32
I want to get to, why is it so much bigger on the front end? That doesn’t, that doesn’t make any sense. Okay. Button. Button, button, button, button. Okay. So we’re going to call this. Nav. Nav hamburger. And. I just want to see if this none on here will work real quick. Did it do it? It did it. Okay.

0:14:09
We no longer have that. Let’s see if this is still gigantic in our header. It is. Okay. Don’t, don’t know why that’s happening. I’m, bar, text, L. And let’s save and see what we’ve got. Text, m. I have a feeling that button size is being controlled by something else. I mean, there’s a font size on it right there. But well, if I take the. Come on now, you, you know that’s not what’s going on. What is there it is right there. Bricksy icon is 60 pixels. My gosh.

0:14:49
So what is this at the, but it’s not. It’s actually not. I don’t have a class on there. Why is it still acting like that should be 60 pixels? All right, we’re coming back to this. I refuse to get bogged down. We’re gonna go out and we’re gonna start on our homepage. We’re gonna deal with our menu later. No need to get all boggy right now. All right, so I’m gonna go to home and it with Bricks. While that’s pulling up, we’re gonna check out what we need. So I need a hero section. I need one section. I need two sections. I need three sections.

0:15:24
I need four sections. I need five sections. I need six. I need five sections. This section is actually probably going to be in our footer template. So I need five sections to this homepage. All right. So I am going to type section. One, two, three, four, five. There they are. Okay. I can label the mouth. This is gonna be our hero. This is gonna be our testimonials.

0:15:51
This is gonna be our services. This is gonna be our, what it was it? What was it? Ah, right there. The Y us and then we have our latest work. So this is Y us and then we have latest work. Okay, perfect. So let’s knock this hero out right quick. So what I need is in my container right here, I need a text, heading, text, button. Text heading, text, button. Okay. So I’m going to add text back up, add a heading, back up, add text, back up, add a button. There are my elements.

0:16:33
Okay. I can space these out. We’re gonna do owl m. And this is gonna be my H accent, my heading accent. This is gonna be an H1. This is gonna be a paragraph tag. This is gonna be a button primary. Perfect. See what we got here? All right, I’m just gonna copy this Lorm Ipsom bold headline goes here accent heading. Okay, so this is gonna say accent heading. This is gonna say Lorm Ipsom. And then this is gonna say I am a bold hero heading, something like that.

0:17:20
And then if you see on our design here, we have, we need our H hero to be, all of our headings are like uppercase. Pretty much all of, yeah, all of them are uppercase. Okay, I don’t even, I don’t think I have this control inside automatic CSS yet. I don’t. But I do have it inside of bricks, I bet. So we’re gonna go to theme styles, typography, all headings, uppercase. Bam, ACSS and bricks working together, solving problems. Okay, so we are going to put a class of lead on here. Yeah, I’m gonna do lead. And then what I’m gonna do in over here is, I’m gonna style my lead.

0:18:21
Oh my God, see, it always guesses what I’m trying to write in my comments and that’s no good. All right, so lead is max width of 40, 35 CH, maybe let’s go back and see. And maybe it actually needs, doesn’t need a width, what am I doing? Okay, go to code box, let’s do a width of 35 CH, a max width of 100%. Snip it saved, okay, there we go. All right, but 35 is not the play. How about 45? So that’s like my lead blurb, I don’t want it to really ever get wider than that. Okay, and then let’s just see what my H1 hero is 86.

0:19:20
My gosh, okay, that’s aggressive. So we’re gonna go to heading over rides and we’re gonna do 8.6. I bet you, oh no, not 8.6. I remember when that used to be rim. Now we just put an 86. All right, let’s get out of here and refresh. Did I not save? Save the work? View the work. Oh, that’s my template headers. That’s not even, what help if I was previewing the homepage? All right, let’s look at this. I’m, all right, I don’t know. I guess it’s about the same.

0:19:59
All right, so in automatic CSS for my heading caps, so I want my heading line link to the header. I want my heading line length to be more like 35CH. Let’s save there. This can probably be like 65CH while we’re here. All right. I’m a bold hero heading. Certainly. Yeah, all right, it’s gonna need to be smaller just because that is so large, but I don’t actually want this to… I feel like that’s not doing anything. Why? Of course, it’s doing something, right? How about 10? Let’s just make it super-gressive and make sure that it’s actually doing something.

0:20:50
There we go. It is. Okay, I don’t want to use this on my heroes right now because I’m gonna have to do this on my… Yeah, I’m gonna have to make a class for this. Just because that front size is so big, putting a small cap on it is gonna affect my other heading sizes too much. So I’m gonna do an H-hero, and then this one is gonna get a max width of… or just a width really of 25CH. And I need to refresh in the builder, so I can actually see the size I’m working with. There we go. Okay, and then clearly something is wrong. We’re getting some overflow issue here. So even if I put that at 100%, are we getting…no, okay, we’re not getting the overflow anymore.

0:21:41
So 15, let’s do 15. So it’s gonna cap that at 15CH, just the hero. All right, so you don’t really want these things stretching all the way across the screen. You know, it doesn’t look all that great. Line heights. Did I set these? Heading line heights. One point, we’re gonna need to tone this down. Probably 1.1 on each of these. I like these to be a bit tighter. That’s better. Okay. All right, I’m feeling good about that. Let’s get the next section going. We’re gonna come back.

0:22:17
We’re gonna put in a photo, and we’re gonna have to do that good stuff, a little overlay action. I’m probably gonna use a background photo there. We don’t have to use…I don’t know. Maybe we’ll do a real image. Why don’t we do a real image? It gets us the Alt tag. It gets us a source set. I think we use a regular image. All right, so in this section, which is my testimonials, all I want to do for right now, because I don’t have a solution for carousels yet. We’re gonna have to do some custom stuff with that. This is a custom card. So I need a div.

0:22:51
And… Actually, I need a block. I’m gonna use a block for this. We’ll do it in a two column. I don’t know. I don’t know. Let’s just use a div. Div. Text. Text. Div. Okay. Div. Text. Text. Div. So I’m going to insert a div.

0:23:14
And then inside of that div, I’m going to insert my text. What do I say? Text. Text. Text. Text. Text. Text. And then I need another div. Okay. So there’s that. This div is gonna be a testimonial card. This is gonna be the name. This is gonna be… What else was on that card? Like a little title. That title is not… We’re not gonna need a title. I’m probably gonna end up sticking the person’s city in there because that’s gonna help with local SEO.

0:23:48
So we’ll do city. And then we’ll do their quotes. And then we’ll do our stars wrapper. Okay. And then I want to give these things custom classes. So this is gonna be… Testimonial card. And then this is gonna be… Testimonial card name. This is gonna be… Testimonial card city. This is gonna be Testimonial card quote. This is gonna be Testimonial card stars wrapper. Stars wrapper. And then I am going to Shift E at icon.

0:24:33
This is gonna be… Testimonial card, double underscore star. And then for my star, I want to choose this one. Solid. Just a normal little star here. Nothing fancy. And then for this one, we want to put in like text M. And awesome. Okay. 2345 duplicate. Get me some more stars there. Alright, that’s looking good. So let’s just fill in some dummy content here. We got Johnson Charles. We’re gonna put his name there.

0:25:13
And then his city is gonna be like Naples, Florida. And then let’s grab his text, which is just Laura Ipsum, for right now. Okay. And what I want to do for this Testimonial card just for a second is… I just want to put a class on here. I have like with M. I just want to get it to normal card size for a second. So we’re actually gonna be constrained by the carousel or a grid or whatever we end up putting it in. But for… So I can just see it in a card format. I want to put this little width of M class on here for right now. Alright, so Testimonial card. I’m gonna grab this class. We’re going to put padding on it because if you see, there’s some padding, obviously. Alright, so we’re gonna do var space M.

0:26:05
Let’s get that to all sides. Let’s see if we can get away with space L. When we can get away with it, I like to have a little bit more space. Okay. So that looks good. And then on my Gap, my row Gap, I want var space S most likely. And why is that var space S not… Oh, it’s because this is a block. I needed to display Flex column. There we go. Okay, so now everything’s nice and spaced out. So this is a card name which needs to be bold and italic. So let’s go to Style. Let’s go to Typography. Let’s go to 700 italic.

0:26:49
Perfect. And then let’s see what size that is. It’s not our M size. And I bet it’s not L either. Let’s do Text. Ah, it is TextL. TextL would be a good fit for that. Okay. It says this is 18. I think that’s what we’re using here. So I’m gonna leave that. The thing is that these two things need to be closer together. So I’m gonna wrap this with a div. I hate that it’s defaulting to wrap with a block. I’m gonna go change this.

0:27:28
See, most of the time you need to wrap something, you’re gonna want to wrap it in a div and not a block. So I’m gonna go to Brick Settings. It’s like in Builder, I think. Wrap, wrap, wrap, wrap. Here we go. Wrap Element div. Save Settings. Okay. Perfect. Refresh. Okay, and let’s put a BG like base. What is what’s going on here? Yeah, it’s like a base ultra light on there. It’s like a base ultra light.

0:28:00
And then this needs our background color. So style, background color of white, which is that our global, there it is right there. Okay, perfect. And then it’s got a little bit of a box shadow going on too. I don’t care to match that exact box shadow. It’s a little bit of an old school box shadow. So I’m just gonna make my own. We’re gonna go to two, two, 20 minus two. Color is going to be, let’s use our base. And come in for ultra dark trans 20. Should probably do the trick. It’s a little dark feeling. 10. That’s a little bit subtler software.

0:28:49
Let’s go with 30 on our blur and minus five on our spread. All right, that’s I’m liking that. I’m liking that look. All right, I don’t think we’ve now. We’ve got no curved edges going on. Oh, we’ve got this little quote icon, don’t we? What is that? Quote. Oh, it’s just a font. Pada one. At 128. Let’s grab a quote icon. Let’s do it this way. So, hmm. And actually, I don’t know if I want to do that.

0:29:29
Oh boy. Okay. How is the best way to handle this? I’m thinking pseudo element. Thinking pseudo element. All right. Let’s do a before on the testimonial card class. Or should we be doing an after? I don’t think it’s going to matter either way. I think let’s do an after. Let’s do an after. I think it makes more sense as an after. So, I’m going to do typography, color, base, base, base, base, somewhere in the middle. Right now, actually, let’s just do primary.

0:30:18
Because I want to make sure I can see it. Let’s do this orange color. I just want to be able to identify where this thing actually is. We’re already getting trouble with like, I feel like I should already see it on the screen somewhere. And I’m not seeing it. Let’s refresh. Sometimes I have one or two other times run into this issue where the pseudo element doesn’t show up in the builder right away. All right. Let’s clearly not happening here. Let’s go to after. Oh, you know what? Yeah. See, there’s the, if I put an A in there, it works. How can I get HTML quote entity?

0:31:03
Maybe it’s this that I need. Double, double quote. Maybe it’s this right here. I don’t even know if I don’t even know if this is going to work. What am I doing? Where is my tab? Can we get back to the tab please? Here we go. No. No. Clearly not. Okay. Can’t do it like that either. All right. I actually don’t know what I’m doing.

0:31:28
I don’t know how to put a code in there. Sorry. So I guess we won’t be using a pseudo element. We’re going to wrap back on that. We’re going to figure that out and come back to it. Okay. But I do have, oh, other than this, this is why I fixed this. A wrap would div. And I can put this in the div with that. And then those two things are kind of grouped together. And, you know, they’re not so spaced out. The thing I do need to do there though is, we probably need to, man, I did this kind of quick. We’re going to call this header. And then we’ll do testimonial card header, just like that.

0:32:06
This needs to be a p tag paragraph tag. This needs to be a paragraph tag. This needs to be a paragraph tag. This needs to be a paragraph tag. My paragraphs aren’t fixed automatically yet. That’s a future feature. Don’t have it yet. So that’s annoying. I think, oh, no, no, no. Maybe it does have the paragraph fixed in, but because there’s both paragraphs. Okay. We’re going to come back to that as well. We’ll button that up later. Let’s check and see what we’ve got, what we’re looking like.

0:32:48
Okay. I’m feeling pretty good about that. What is our, I feel like the top and bottom are still impatting on that. Are they, is this truly L on every side? That’s L, that’s L, that’s L. That’s L. Okay. All right. Why am I, is it because of the paragraphs? I feel like there’s just extra spacing. No? Yeah, there is. There’s spacing after the star. What, why is this, oh, it’s that after and before. Okay.

0:33:39
Maybe they’re still like actually attached. So let’s clear that style, clear that style, save. I don’t know if that’s the case. That’s better. Now, now we have even spacing. I don’t know what it, what it was doing there. We do have to space out our stars a little bit. So we have our stars wrapper. And I want to grab that class content, column gap, vars. Actually, we just use like a point, we just use like a point five M here. And then that needs to be flex. Okay. How about point two five M? I want to be a little closer together. There we go.

0:34:18
Do we need a color on our stars? Yes, we need this yellow color. I’ll sample from there. And we will put into here icon color. Let’s go to our global pop that in, save it. And we’re good. Okay. Excellent. All right. I’m fine with this. Let’s move on. So now we need the R services section. This is going to be a container and a container. Okay. So we need to duplicate our container.

0:34:50
We need to owl space. These containers out, owl, owl. This is going to be our header container, which is going to have a text and a heading. So we’re going to go text. And we’re going to go heading. This text is going to say, I think it’s just as accent heading for right now. Oh, it says our services. All right. Our services, but this is going to be H accent. Even though it’s not technically a heading, it serves as a heading. But it’s not semantically a heading. But I’m still giving it that class. The tag should actually be a p tag. And let me make sure I did that on this one up here. I did not.

0:35:31
So let’s switch that to p. And you do see that we’ve got some spacing happening. There’s some default spacing. And I have a spacing fix on the way to prevent this from happening when it doesn’t need to be happening, like in these cases, but anyway, we shall proceed. Okay. What is that? That having these being H2. What does it need to say? What can we do for you? Well, that’s not good copy. So we’ll be changing that at some point. What can we do for you? I don’t like to paste in uppercase text because if you ever need to change it to not be uppercase, you can’t change it with CSS if it’s physically already uppercase.

0:36:15
Unless you want it like all lower. I don’t know. Maybe you can. Maybe I’m thinking old school. All right. What can we do for you? This is where I want to tackle. This is going to be interesting right here. This. That’s going to be very interesting. Let’s get this card taken care of first. So we need a this is going to be a carousel. But for right now, I just want to four column grid. Yeah. Okay.

0:36:37
Let’s do a grid for just so we can see what these cards are going to look like. We’ll put a gap of L between them. And I think that’s all we need for now. So let’s do a block add that in. That’s not going to little narrow, honestly. All right. But I need. Oh, this is going to be fun. All right. So I need a div and a div. This is going to be like a footer div. This is going to be a body div right here. That’s really all I need. So inside of my card, we’re going to add. Actually, these are going to be blocks block block.

0:37:17
Okay. I’m going to collapse these. And then reopen it here so you guys can actually see it. So this is my service card. And then down in here, this is going to be the body. This is going to be the footer. And then we are going to add our image last. And I’m thinking. If I want to wrap my image. Probably not in fact, if we look at this. We’re going to need an overlay on the image. So the image is all the way in the back. Yeah. The image is all the way in the back. Okay.

0:38:03
So let’s go with. We can actually put the image first. Image. And then. I think I want to do this. Okay. A div. Now another block. And then inside that block can actually go my body and my footer. This block is going to be the overlay. Then I’m going to have my body and my footer. Okay. So. Let’s get an image in there. Where’s the image image?

0:38:41
Only I hate about Figma is finding the actual images. Okay. Export. Export. Downloads. Here we go. Select. I’m just putting in. Well, normally you would see your folders over here for happy files. I’ve been having problems with that lately. So what I want to do. Downloads. And I think it’s this one. I would normally create a placeholder’s folder and stick this in there. So I would be kind of alerting myself that, hey, you’re going to end up deleting this at some point.

0:39:14
All right. So this is going to be service card, double underscore image. This is going to be service card. This is going to be service card overlay. This is going to be service card body. This is going to be service card footer. Look at me going all the way across screen with the mouse 5,000 times. I should be using that shortcut. Okay. How we want to handle this. The service card itself. I’m thinking is going to be. Hmm. It’s always tricky. You want to make sure it has. Well.

0:40:02
In a grid, it should be fine. Okay. Sorry. I’m just thinking about a lot of things. All right. I think this image. The overlay is going to be position absolute. So let’s host style position absolute. And that’s effectively going to put everything on top of our image. I don’t think our image. I do not believe it’s going to need to be position absolute. At any point, but it does need to be with 100%. It needs to be. I’m going to have to go ahead and type 100%. I believe we can get away with even though. I believe we can get away with that. I’m going to have to double check.

0:40:47
And then I need to object to cover it. Okay. Save our work there. So on our overlay, we’re going to position this with everything at the bottom. So end content, end content. No. It is flex column. End end. Style with 100%. High. 100%. There we go. Okay. I didn’t have a, I didn’t have a height on there. Okay. So now I’m just trying to think I want, I think padding inside.

0:41:39
I need this padding right here. So that’s looking like a space in kind of padding. So I’m going to do. On our overlay, var space, M. And I’m going to link that up. And that’s going to bring that inside. And now what I want to do is put in our heading and our text, heading and text. So this is going to be heading, text, okay. Perfect. On our overlay, now our body, I want to make the text white. So we’re going to global white. There we go. This text, what does this need to say? I actually don’t even know if, yeah, we can put a little blurb there.

0:42:28
That’s fine. All right. Put that in. And then I didn’t even put a class on here yet. So this is going to be service card description. And the typography here is going to be text s. Man, that’s, that’s just perfect. And then content. I want the row gap to just be like 0.5. Something like, you know, very, very small, that doesn’t have to be crazy. And then in here, what do we need? Like a learn more. Okay. So, text goes in here. This text needs to say learn more.

0:43:12
And in our footer, we can also style typography. Global white. Okay. All right. We’re getting there. Now what we’re going to do is on our overlay, we’re going to put a background gradient on here, which I think gradient has its own section. And this gradient area always confuses the heck out of me. So let’s try to figure this out. I’m going to do my base ultra dark trans 90. And then up here, I’m going to do, I wish it would stay in the palette you’re already in. That would be really cool. Trans 40. 20. 10.

0:44:04
Probably 10. Okay. But now we need to change the stop. So, there we go. 50% looks good. I mean, how about just nailing that on the first try, right? Okay. We need to in our overlay, set a little gap here of also probably 0.5M. That’s going to space out that learn more. And then that learn more is our upper case. And it’s also, oh, this needs to be service card. Learn more service card link. It’s not actually the link. It’s like visually the link, but it’s not actually the link. So, I don’t know what I want to call it.

0:44:51
Let’s do learn more. Let’s make it as straightforward as possible. Okay. So for this, we need that to be a P as well. We need typography, 700, and italic. Perfect. And then uppercase it. And then I want to see, oh, yeah, needs to be smaller for sure. Okay. Var text s. Good, good, good, good, good. Okay. Window-tenting is what it’s supposed to say. And then eventually what this is going to be is, it’s going to be in a loop.

0:45:35
And it’s going to be all this is going to be pulled dynamically. But I just want to get the card design kind of there first. Especially because in bricks, you can make the loop off of an existing item. And it’s super easy. Whereas in oxygen, if you design it first, and you drag it into the, the, the repeater div, everything just explodes and blows up on you and it doesn’t work anymore. So, this text right here, I want to color as shade light. Ultra light. I don’t want it to be white. Yeah. Not shade ultra light. Base ultra light. Okay. Base ultra light. Perfect. All right. I’m trying to figure out our spacing here.

0:46:21
I think I’m missing a little bit on our spacing. Right here probably needs to be 1m. Okay. Now what we can do is add this little dash ahead. So, I had trouble with pseudo elements before in bricks. But we’re going to add a before element. That before element is going to be blank. And then we’re going to go style layout with maybe 1m. We’ll see if that’s enough. The height is going to be, I would guess like three pixels. And our background color on that is going to be white. Okay. So, we’ve got, what are we missing? We’ve got a before pseudo element on our service card learn more. It’s not display flex.

0:47:20
This is what we’re missing before. Where we could not display it flex. Right here is where we need to be displaying it flex. Now we can do inline block, but that’s not going to give us our flex controls that we want. Or there’s block. Let’s try inline block and then let’s go back to our parent element. Because our parent element does have flex controls on it. Or should. Shit. We can’t do it there either. Okay. Yeah, that’s a big missing. And it’s already, I already submitted a bug report. Thomas already said you’re right. He’s to be there. He’s working on it. I get it.

0:48:06
All right. So what we’re going to do is before. Take that away. And then we’ll just happen code box real quick. So service card. And then I want to do what are we targeting here? So this is service card to learn more. And what we want to do is display that flex. And then we want to go with the before display flex on the before as well. There it is right there. Align items. Actually that would be done up here. Bam, baby. Okay. And then on the before the margin right is going to be 1m. And then we just need the width to be changed to 2m. So I’m going to go back to the before here.

0:49:16
Make this with 2m. Now we are in business ladies and gentlemen. Okay. So get back to the before. And I want to make that height 2 pixels because the height was a little aggressive. All right. Check that. Check that. Check that. It’s looking good. Okay. So now there’s our cards. I think I duplicated them a little too quick. Let’s refresh. Bricks can’t keep up with me. Oh, it just didn’t it didn’t do them at all. 1, 2. Oh gosh. Oh, it’s duplicated the overlays. Oh no. Okay. We did not want to do that. I did not have the right thing selected.

0:50:00
Okay. Service card. Try now. There we go. Okay. Good. Good stuff. This gap can be gap. Now, m. All right. That is where we want to be. Okay. I don’t think there’s anything else we have to do there except when we get to the actually linking it up and all that there’s going to be more work to do. But that is it for right now. Okay. Let’s do this section. We’re going to go with a two column grid image on the left. And then on the right we need text heading text list button. Tax heading text list button. Oh, just open polypain for no reason whatsoever. All right. So this is going to be grid two. This is going to be gap of maybe L. This is going to be a grid of probably L1.

0:50:58
Maybe M1. See what we can get away with. Let’s try grid M1 first. Let’s, I don’t think we need to stretch it at least not yet. All right. So let’s add a block. Two blocks. There’s our left and our right. We’re going to add an image. And then on the left hand side, we’re going to add our text, our heading, our text. Our list. Is it an icon list? It is an icon list. And a button. Bam. Okay. Let’s go owl M there.

0:51:41
Okay. This needs to be an H2. This needs to say Y us, I think. Let’s check it out. Y us. And then it says this says what makes us different. What makes us different. And then let’s just grab the Lorm that’s in here. Pop that in. Let’s grab. Okay. Selling point one, two, and three. And then this just says call to action, which is going to be a button primary. Call to action. Let’s tackle this list real quick.

0:52:19
I want to delete these two things. I want to call this checklist. And I want to make the icon a check. Want awesome solid. How we doing on time here? Let me do a time check. 52 minutes. But, you know, I was also messing with the header and footer ahead of time. So we’ll go a little bit over. We’ll go to like an hour 10. I got 15 minutes to try to, you know, tighten up this page. All right. So check mark. We’ll go with that one. The label will be selling point number one.

0:52:54
The background will be. None. We don’t want a background. So let’s go to global. There’s our none right there. Color is going to be base ultra dark. Great. Let’s do link type is none. No link type there. Here’s what I was confused on last time spacing items. This needs to be like 1m. Um, style layout. Is it this padding area? Okay. See this is what I was messed up on last time.

0:53:35
Spacing items. It’s going to be like 1m to. Background label. It’s in here somewhere. It’s in here somewhere. There’s a there’s a there is a way to remove this padding. And it’s like sometimes I can find it and sometimes I can’t. Some background link link type style. There it is. It’s at the ID level. That’s why. Okay. We’ll just clear that out. Now we’re in business. And now I can go back to my checklist.

0:54:06
Duplicate duplicate. And I get selling point number two. All right. Someone was at my door. So I had to pause for a second. Let me make sure that we are recording again. Okay. We are. So back in business. All right. So only thing I want to change on this checklist is I want to stack it so that everything is on top of itself. So that looks pretty good there. And let’s recheck this. Let’s grab this image. And export. I can actually it’s it’s the same one we already did.

0:54:41
So let’s go ahead and just select it. Grab it here. Insert. Perfect. And let’s go with. Of. Full. Make sure it takes it the whole space. It does. We can gap. XXL on this probably. Okay. And then obviously we’re going to have to style it the way that this is styled. So we’re going to have to. Yeah.

0:55:13
We’re going to think about that a little bit. But we’re good for now. We want those checklist items. Those little checklist. Things to be blue. And I don’t know if this gives me. Let’s go to primary or global. Yeah. Oh, okay. The color of. The icon. This is a downsides using the prebuilt list. See, I was like, I’m going to do a shortcut. I’m going to just use the list element. And I can’t color this separately.

0:55:55
Front. Let’s look at the underlying structure. Uh. Let’s do our base for now. Okay. So let’s just look at the front end right quick. I just want to see if we can cheat. So here’s an inspect. Oh. L.I. Eye class. Yeah. I mean, we could use custom CSS there. But you really shouldn’t have to. You know what I’m saying?

0:56:30
Okay. Let’s delete this checklist. Let’s see how we would build one. So we’re going to div. And this is going to be a UL. So I’m going to change this to unordered list. And then I am going to add another div. That’s going to be our L.I. Let me collapse this so we can get back to here. So we’re in the YS section container block. All right. Here’s that. This is the list. And this is the list item. Come on.

0:57:09
Let me refresh our builder. And get rid of whatever lag is going on for a second here. Okay. All right. And then we made a list none class, which we’re going to want to use on there. All right. And then in our list item, we’re going to have text. And that text is going to say, spelling point number one. Okay. And then we’re going to call this list. Let’s just call it list. Let’s call it checklist.

0:57:43
Yeah. Let’s call it checklist. Okay. And then list item can be checklist. L.I. And then the text can be checklist. Text. And also in that list item wrapper, I want to add my icon, which is going to be the check mark. Check. Perfect. And then this is going to be checklist icon. All right. The size is going to be text in. And then on our list, L.I. right here, we want that to be vertex, flex horizontal.

0:58:32
And we want that to be set to flex. And then obviously it would be nice if the icon came before. Oh, dear. Undo. All right. Let’s let’s try again in there. Okay. And now what we can do is column gap this with 1M of column gap. We can, okay, we aligned items to the center. So that’s good. Now we’re free to put our primary color on the icon by itself. And then the text can have no color or just our normal color. This, I think, I want 0.75M.

0:59:10
All right. Now I can, I’m free to just duplicate my list item three times. And then in my list, check list right here, I want a row gap of like 1M. And that also needs to be set to flex in order for it to work and column. And start. Okay. Start, start. We’ll just be safe with that. All right. So now really quick, we’ve whipped up our checklist. So let’s take a look at everything on the front end. I still only see one of them. Did it not save?

0:59:46
Why am I only seeing one? What’s going on? Okay. Align items center. Oh, there it is right there. I guess it did not actually duplicate the list item when I initially asked it to. Oh my gosh, it’s still not doing it. I’m going to duplicate it from the structure panel this time. Oh gosh, I hit the lead. Don’t do that. Let’s duplicate it from here. Can it handle two of them? Let’s see. Can it handle two? Yes it can.

1:00:25
Okay. Now can it handle another list item? Let’s see. Yes it can. Okay. So we’re back in the list item. Let’s see. Okay. So we’re back in business. Selling point number two. My kids just got here after school. So a lot of noise. Maybe about to happen. And that’s kind of our cue to start to wrap things up. All right.

1:00:53
So that section is good for now. Let’s go. Did this get H? This needs an H accent class. Okay. Let’s see what else we’ve got down here. So this gallery. Check out our latest work. So I need a container and a container. Two containers. Bam. We’re going to owl L that. Here we’re going to add text and a heading. And here we’re not going to add anything yet. This we’re going to owl M.

1:01:36
We’re going to center all center left. M. Okay. This is going to be an age two. Now my phone is ringing. Okay. It’s nobody important. This is going to say gallery I believe. And yeah. It does. And then this heading says check out our latest work. Awesome. And then this is going to be. It’s going to be either a WP grid builder or. Or I think what I’m going to do is try to maybe check on doing a query loop.

1:02:16
From straight through to happy files. I saw the other day if you go in here and go to query. And you go to. Media. I think it was in media. I saw it somewhere but you can query directly. From happy files. I don’t remember exactly where I saw it. But we’re going to find it and we’re going to test it out. We’re going to see if we can get that done. All right. Let’s check on our time here. So we’re at about an hour two. I’ve got the structure of our home page. Kind of taking care of.

1:02:51
I think what I want to do before we go. Before we call this a day. Want to get a little bit more work done. And I want to do this hero background image. So we’re going to need a background image in an overlay. Just like you saw before. Which is this is guys. Another thing that you just feel spoiled right. In oxygen. This would be a lot more difficult to do. I’m going to tell you that right now. In bricks because we have access to the inner. Containers. It’s so much easier. So what I’m going to do here is outside of that container.

1:03:25
See here’s my container for my section. But outside of that container. I’m going to add an image. And I’m not going to add an image class. I’m going to shift man. E and add an image. Okay. And then this image. I need a full res one. Let’s go to unsplash. And let’s do like Ferrari or something. There we go. Let’s do Ferrari dark. Oh. Okay.

1:03:54
How about this one? We’ll just use this for now. I just need a placeholder. And let’s go to squish. Squish. Please. Thank you. Resize. 1920. Download. We’re good. Hop back. Upload. Insert. Okay.

1:04:22
Okay. We’re good. So, there’s our image right there. We’re actually going to make that first. Again, it’s outside of our container. We’re going to add right after that image. We are going to add a div. Or a block. Let’s do a block. And the block. And the image. Are going to be set to position absolute. And layout come down to position absolute. We’re going to go with 100% width and 100% height. Okay.

1:05:00
So that should be taking up our entire hero. If I’m not mistaken, I don’t know why it’s not. Okay. We’ll check that out in a second. This is also going to be position absolute. And it’s actually, we’ll just do top right bottom and left of zero. And same thing on the image. We can do top right bottom left of zero. Now it’s taking up the entire thing. And so we have the image. And then we have our overlay. And so if you look at the overlay here, we need a gradient that’s very dark. And then proceeds 90 degrees to basically nothing. So I’m going to name this overlay.

1:05:42
And then I’m going to come in and go to gradient add two colors. I don’t know which is which. I believe this is going to be the ultra dark one. And this will be ultra dark trans like 90. And then this one will be ultra dark trans like 10. That’s correct. Angle is 90. Oh man, 50% on that 20% on that. Okay, that should be good there. And then this entire container, I can go text white. And we should be good. Okay, save. We also need to on our image go to object fit cover. So it doesn’t look all stretched out.

1:06:32
And then I’m thinking, yeah, we need a lot more hero padding. So this is where you know, a good old pad section L class comes in handy, which I clearly just added to the wrong thing. I need to actually add it to my hero. Pad section L. And I don’t even know if that’s going to get us big enough. So we’re going to go pad section XL. There we are. All right, let’s refresh here on the front end. And we have a nice big sexy hero. Sexy hero section with a nice bold heading. How about this accent? Let’s do this.

1:07:13
You already saw me kind of do it before. We’re going to do H accent. I’m just going to do all this in code box because the pseudo element thing is just kind of driving me nuts. So I’m going to go accent heading. Let me zoom in for you guys. And I’ll just do this at the top because you probably are like, why is that all the way at the bottom of the screen? I can’t see what the heck is going on. H accent. And then we’re going to come in here with like font weight. And this is why I say like builders, you know, builders kind of trip you up in some ways. You know, if you just, if you’re not a right CSS, it’s like a lot of times it’s just, it’s a lot faster. Font style is italic.

1:07:53
And then we’re going to do a before pseudo elements. That needs an ampersand in front of it. Good. So the before pseudo element is going to be a content of blank. It’s going to be a display. I don’t even think it needs that position relative. Yeah, let’s just do display flex. And then I’ll always here too. We can display flex. Okay, perfect. And then we need a background color of our white. Didn’t mean to do that. We need a width of probably 2m, a height of 2 pixels. And then on this we need a line items center. Awesome. And then we need on our before a margin right of 1m.

1:08:53
Okay. And then on that we need a text transform of uppercase. Bam. Thank you. Done. Okay. See, like sometimes you just go all fiddly with the builder and everything. And it’s like, why though? You know, you could just bang it out and be done with it. And not have to worry about how a builder structures things and where everything is in a panel. Just write it out. Write it out. You’re good to go. But and now you know, I’ve done that work where it’s like, I did this and I can use this everywhere.

1:09:25
So let’s just take a stroll down the page. And you can see that it’s here is good. Except my little divider. Let’s check this out. So in some places it notice it needs to be yet that yellow color, which is, what is that? Our secondary color. I put in a yellow color here. And I bet you. I should have just used our secondary color. Yeah. Can I delete this color? Let me go to the list and delete confirm. Okay. And let’s use our secondary color there.

1:10:03
Okay. So now what I want is there’s going to be an H accent. And then an H accent. Well, I could actually use our text probably. This could be background color. Current color. I think that works. I don’t, I’m not positive. Let’s let’s let’s. Oh, don’t do that. Let’s try this. So for here, I want text secondary. Ha ha ha ha ha. Look at that. My friends.

1:10:38
So the pseudo element with current color is going to adapt to whatever the text color is told to be. And so now I can just use my text color classes wherever I need to. Chances, which almost always it’s going to be. Except in our hero. Almost always it’s going to be yellow. I’m thinking I might want to. Hmm. Probably I’m not going to be able to change it. Hmm. That’s going to take some thought of what’s the most scalable way to handle that? Is it? Is it the way I’m doing it now? Or is it to define a color on it and then only change tried to change the color sometimes? We’re going to stick with what I’m doing right now.

1:11:28
I do want to see. See the lines pretty long. So let’s do. Back to code box. Let’s try five them just see how that looks. That’s probably good. I just don’t want to get in a situation like on mobile where we’re like. Our little headings are going off the page and everything. What is going on here? Oh, this these cards. It’s because that grid is not I never. I just wanted to put it in a grid so I could see it in a card format. But I never told the grid to stack. So it’s it’s running content way off the page. But I’m just trying to get general structure down here.

1:12:14
It’s not even going to be in a grid. It’s going to be in a carousel eventually. So okay, we got a little accent heading going. That’s looking good in all these different places. This needs H accent on it. Okay, perfect. That’s it for today, guys. We’re going to come back in the next episode. We’re going to button up some things like this. I definitely want to tackle this thing right here. It’s going to take a little bit of work to make scalable. Like I said in the first episode, we could easily drop these in as elements and you know, have a class to style them. But it’s not going to be as nearly as scalable as what I’m going to attempt as a solution. And then if I can’t make it work as the solution that I want to do, or at least that I want to try, we’ll do it the manual way.

1:13:02
But I would really like to avoid the manual way. We’ll also maybe take care of this image styling right here. And we’ll take care of this gallery probably as well. And then probably this footer. So that’s probably what we’re going to do in episode three. All right, I’m out. Peace.