0:00:00
All right everybody welcome back to the Peachtree fence build. What we’re going to try to do today in this next hour or so. And I’m using Firefox by the way now. I’m going to test Firefox and Oxygen and CFR performance is any better. But what we’re going to try to accomplish in this hour is the homepage, just kind of general homepage structure. And we’re also going to try to tackle the about page, which is fairly simple and straightforward. And then we also may try the top part of a service page and the reason why we would do the top part is because I typically like to do those when it’s kind of like this set up and it’s going to be the same for every service page. We build this as part of the template. Now the rest of the page would not be templatized oftentimes, but the very top hero section, especially when it has a form like this, would most likely be templatized. So that’s what we’re going to try to tackle in this next hour. So let’s go ahead and get to it and somehow we lost our logo.
0:01:06
I wonder if that’s there in Chrome or Brave. Let’s say Peachtree fence. Yeah, it is. Look at that. The logo is there in Brave. This is the old dev site. This is not the new dev site. The old dev site has the logo in Brave does not have the logo in Firefox. Super interesting. But this right here, this back end is the new dev site. So I’m just going to head on over to the homepage and we are going to edit with oxygen. All right, I did notice by the way that it loaded a lot faster in Firefox. Okay, so let’s get back to the homepage so we can use that as our reference. So basically what we’re going to need is a section, a section, a section that’s three. A one, two, three, four, five.
0:01:54
And then that’s actually going to become part of our primary template. We’re going to have to go back and add that. So we basically need five sections for the homepage. That’s three, four, five. I’m just using hydrogen keyboard shortcuts. So this first one is the hero section. And one thing that you can do if you want all of your heroes, the padding in your hero sections to be consistent is you can do pad double dash hero. So you’re making your own class effectively. And then what you’re going to do is just use a variable from there. So we’re going to do var space and it would actually be because of the section, it would be section space and we will try L and we may end up going with XL. Let’s try XL. Okay. So now I’ve made effectively a new class called pad hero.
0:02:44
Still hooks into the automatic.css system. But obviously it’s not just a like I can now control all heroes independently instead of just using a section padding class of XL everywhere, which I then can’t have any global control over. All right. So for now what I’m going to do and there’s another trick that I like to do. I’m going to go to like unsplash and I’m going to do fence and I’m literally going to choose like a generic photo. And we’re going to use this photo everywhere and where that what that does instead of using placeholder photos like all different kinds of placeholder photos everywhere. I pick one placeholder photo and I use it in everywhere because that now signals this is a placeholder, right? We don’t have to go through any sort of dance of like was this a placeholder or was this one of their real photos. If you use the same placeholder photo everywhere, I like to use one that’s in context obviously.
0:03:46
But if we use the same placeholder photo everywhere, then there’s no confusion. Everybody’s on the same page with that’s a placeholder photo. The problem is there’s no good fence photos. Okay. We’ll just use this one. All right. Sure. Okay. It’s a little dark, but it’ll work. Save. Okay. Is there another while I’m here? Look, let’s just use this one. This one’s like brighter. It’s not a good fence.
0:04:14
Obviously, it’s obviously it’s a placeholder. So we’re going to download and can I actually get it? Thank you. Okay. Save. Firefox definitely a little slower on the saving files front. All right. So to squish and I have nothing in my history because I don’t use Firefox on this computer. So where did it put that? Here we go. All right. We’re going to throw that in there. Resize it right quick. And we’re going to resize that to 1920. Let me move my little window.
0:04:51
I know you guys probably can’t see this as behind my head, but it’s really not that big of a deal. Okay. Let’s close all that. And let’s go background and we will first make a new folder. Wow. Everything looks different in Firefox. It’s crazy. All right. So we’re going to do placeholders. And really, there’s only going to be one of them. But I still like to organize stuff. Okay. So where’s the one that I just downloaded? It’s not that one.
0:05:20
It’s not that one. It’s that one. Okay. We’re going to pull that in. And what’s happening? There it is. Image. We’ll go cover and left 50 percent. Top 50 percent. Perfect. Wow. That’s really, really awful. Okay. We may need a… Well, let me just see if I can do like…
0:05:43
No, that would be 20 percent. Oh, geez. This photo… I don’t think this photo is going to work. All right. Let’s try again. Unsplash. Or let’s try Pexels. I’ll do like a residential fence. Fence, fence, fence. I also don’t want any of these that are… Okay. Let’s just… Let’s go with this. I’m hoping that that one is a little bit further away.
0:06:12
All right. So this one… Yeah. Let’s see. Resize. 1920. And… Save. Okay. Still huge, man. 1920. All right. Anyway, we are going to swap these out. And select. Okay.
0:06:40
It’s a little better. All right. So we’re going to do 40. All right. Wow. Great. Still not fantastic. All right. It’ll do for now. Next thing we’re going to do is this little box right here. So this is going to be a grid. We’re probably going to do a 3, 2 grid in a blue box. All right. So I’m going to add a div. We’re going to call this…
0:07:10
It’s kind of like a… It’s not… No, it’s not really a hero’s CTA. We’ll call it a… CTA box… Long. Wide. CTA box wide. So CTA… We can do CTA box. CTA box wide. CTA box tall. We can do a bunch of… This is just a CTA box. This one’s going to happen to be wide.
0:07:37
So I’m going to do… CTA box… Because if we look at the other one… It’s a little bit more of a sense of installation. We’re going to make another CTA… Okay. So that’s CTA box is a different color. But I mean they can still share some features. What are the shared features? Like padding is very similar. So any shared features can go on the main class. So we have CTA box. We can go with padding. It’s going to be var space L. And then I’ll apply that to all sides.
0:08:12
So we can change it with a different style. But with the 100% is pretty safe. And we’ll also go with the background of var base. Then what we’re going to do is take the top off of this section. So no padding top on this section. And then we’re just going to move this up. We can use negative margin in this instance. So we’re going to move this up. And then we can use negative margin in this instance. So what we’re going to do is… We can probably add this another class. So we’ll do CTA box double dash. We’ll call this negative. And the only thing here is going to be negative margin. And I’ll probably do…
0:09:02
Let’s do… Let’s do a little aggressive. 8-rem. 7-rem. Let’s do 6-rem. And that should just naturally be on top of the other. There’s nothing in it. So let me put something in it. Then we can see it. If we go to the front end right now, we won’t be able to see it. So I’m going to do grid 32. We’re going to do a gap of L. We’re going to do grid M1. Okay. So we’re going to do…
0:09:35
This is a lot snappier in Firefox. I’m just going to save for a second so we can go back and look at our reference. So that’s going to be… Get a free no obligation quote. Heading. And put that in there. Awesome. CTA box is going to get typography of var text white. What am I doing? Varshtay white. Not the Varsx white. Okay. All right. That is a H1. It needs to be an H3.
0:10:09
But it’s going to be a CTA box heading. Which is going to get its own typography of… Because we want it to be big. Text XL. XXL. There we go. Now we’re going to have a text below that. This is going to be CTA box double underscore text. And we’re going to add a margin to the top of that. So that’s going to be Varspace polyM. S. Something like that. And then our form is going to be over on the right but we don’t have one. So what we’re going to do is add… I want to add anything. I’ll just leave that there.
0:10:55
I’m also going to stretch this out. And then let me copy this text over. Perfect. And then typography is going to be Vars. And then that’s going to be a shade light. There you go. Actually I’m going to do base light. Base ultra light. Just so it has a little bit of the base tent to it. Instead of that gray. If I use shade it will have a gray tent to it. If I use base ultra light it will have the base color tent to it. So it’s going to look better I believe. All right. Now we can actually view what we’ve got going on on the front end.
0:11:41
So now we’ve got that box overlapping our hero. I’m also going to do an overlay on this. So we’re going to do overlay base trends. And it’s actually going to be base ultra light. Base ultra dark trends. Did I not do classes please? Are we not importing these? It’s definitely a class. I know because I created it. Overlay base ultra dark trends 60. 50. Oh wait. 50 is definitely not an option. Base ultra overlay. Base ultra dark trends.
0:12:23
60. So let’s just darken it with the base color a little bit. Let me save that. I get a check on that. So that’s the thing to double check why those particular overlay classes. Those dark ones are not getting imported. All right. So we’re going to add a heading. No. Heading. And it is going to be an h1. Now what I’m going to show you guys is, okay, professional fencing gate installation. We’re going to have to do a little work on the typography in automatic. That’s the SS. Pad hero.
0:12:59
I’m going to also give this a class of hero. And we are going to make the typography in this class white. There I go again. I’ve got the word text in my mind today. Okay. There we go. All right. Let’s, uh, hero. Let’s just center all. But we’re not going to use a class because we have a custom class called hero. So all we’re literally going to do is go to layout, flex, column, center, and center. All right. Perfect. And then what’s underneath? Got this little.
0:13:41
There’s no content for it yet. Text. Okay. And what’s under that is two links, okay, which is basically going to be a div. And we are going to call this hero, double underscore. Link links wrapper. It’s not a link wrapper. It’s a, it’s a links wrapper because there’s two horizontal flex middle. You could put a gap on this to space these out, but it’s not well supported in flex. Everybody really wants it to be because that would be just so magical and easy. Um, but I’ll show you kind of what we’re going to do here. So fence services. In gate services. Wow. All right.
0:14:37
So we have fence services and gate services. And then this is going to be a hero. Link. Yeah. And that is going to get a margin right of var space s. Cool. And then this is going to be a hero link. But the last of type. Is going to get a margin right of zero. And then what we’re going to do is just kind of assess real quick while I’m here. How that’s going to break down to mobile. It looks like depending on the link. You know the amount of text in that link will depend on whether that needs to stack or not. We’ll figure that out in a little bit. Okay.
0:15:29
So this is a hero heading. Um, yep. And then this is hero. I call it a lead. And then that’s hero links wrapper. Okay. So literally this. Um, can get a margin of top. Var space m. And then this can also get a margin of top. Var space m as well. Now the lead can actually be. We can change the max width on that. So I’m going to go 100% on the map. I’m going to go 100% on the width.
0:16:08
The max width I’m actually going to do in characters. So we’re going to choose none. And I’m going to do like 60 CH. Um, let’s try 80 CH. So if you’re not familiar with that unit, it basically counts the characters. The character width. Um, it’s a character width unit. And I believe it’s based on the the character zero or oh, or zero that it bases it on, but it’s a really good way to instead of just a random percentage. It’s a really good way to constrain text to a specific kind of like character width count. All right. So I am also going to typography center that. Perfect. And I don’t think we want it necessarily to be like larger text. Um, now I think it’s, I think it’s good the way that it is.
0:17:00
I think all of that is pretty good the way that it is except for. Okay. I think I want my H one. What did I make this an XXL because that’s going to get really big too. All right. So we’ll play around with the typography scale in a minute. All right. So I’m going to save there. We definitely have an issue here with, um, you know, readability of these lengths, readability of this. Wow. I really hate that in oxygen. All right. So I’m going to take an actually because we’re doing this in the hero. I’m just going to do it on the hero class.
0:17:35
We’re just going to do background. And I’ll actually just do a gradient. And you can make your own gradients with the variables. So we’re going to do base. Um, ultra dark trans. 60. I think that’s it. Base ultra dark trans 60 that should be a working variable. And then let’s try 40 here. Angle 90. Linear. And then. Yeah. For some reason we are not seeing it.
0:18:11
So let me go background. We have our gradient. Base ultra dark trans 60 base ultra dark trans 40. All right. I wonder if those just did not get imported or something fairly certain. They are actual classes. Okay. Bar base ultra dark. I just want to make sure the gradients working. Okay. The gradients not actually working at all. Let’s check this out for a second. All right. So I’m on the hero. Oh, okay.
0:18:52
Yeah. Yeah. That’s going to be the problem. Because the background, all the background stuff is set here. So we’re not going to be able to just do this with the hero class. Okay. Section image. Oh, never mind. I’m sorry. Yeah. We can’t do it on the hero, but we can do it on the ID. The problem is I’m not going to be able to really save that. This is why I’m going to be developing custom gradients in automatic. That’s the SS. Okay.
0:19:23
So let’s just for now, let’s see if we even like it. So we’re going to go to add color, add color. So var base ultra dark trans 60. And then this is going to be trans. Let’s see if I want to do lighter to darker. So 40 to 60. 40 to 80. 20 to 80. That might work. 20 to 80. Something like that. What if I do 80 20? Hmm. 60 to 40. That might be a little bit better.
0:20:04
It does not fix our problem here, though. I may just end up going with buttons there, honestly, because it’s hard to deal with links over images and, you know, all that good stuff. Okay. So let’s save that. Here’s the general rule of thumb, though. Like I don’t like to spend tons of time troubleshooting stuff and like making things perfect at this stage. I’m literally trying to get the structure down. And if I look at our time clock here, I’m 20 minutes into this. We’ve like we’ve got to keep things moving. So I’m just going to leave this for now. We’re going to come back to it. All right. So now I’m going to look back at my reference. We’re going to get these this section knocked out. So this is going to be another three two and a two three.
0:20:42
This is going to be like a staggered grid. So I’m going to add a div here. And this is going to be a grid three two. And then I will do a gap of L again. I’ll do a grid probably an L one on this. What am I doing? Grid L one. Hmm. Should do L one or M one. Let me take a look at it in a minute. We’ll start with grid L one. And then I’m going to duplicate this one’s going to get a margin top of XL. That might be a little bit big on the gap. So let’s do a margin top of L. All right.
0:21:23
And then we’re going to do a div and a div. Definitely liking the snappier. Nist in Firefox. All right. So we’re going to be a tagline and fence installation and fence repair. Okay. Heading. This is going to be an H two fence installation and fence repair. We’re going to get a little blurb after that. Okay. And then we are going to get two links that need some custom styling. So we’ll add a. Yeah. We’ll just add. I don’t think we need these in a div.
0:22:09
I’m just going to add a text link and a text link. We won’t add two yet though because that’s going to need custom class. All right. I also know that this is basically the only spot. Well, actually. We will probably also use these on the services page. So I’m going to do all of this. We’re going to do all of this with custom classes. The other thing you’re going to notice. I said I’m all about just structure right now, right? Not perfection and making everything perfect. I’m not even going to worry about this right now. We’re going to come back and do this later. I’m going to just put a placeholder image here. So I can just get general structure down and keep moving very quickly.
0:22:50
All right. So we’re going to stretch these. And in that div. I’m going to add an image. And just like you see how this saves time, right? I don’t have to go searching for more photos. Like I already have this little placeholder photo. All right. So what I’m going to do is call this. Service. We’ll call this service. Block. Service services block. Because these are fence services. These are gate services.
0:23:24
So it’s a services block. I can just go ahead and delete this for now. Believe. Okay. Yeah. Oh, well, I’m duplicating. Not deleting. Okay. All right. Let me put this window back here that you guys can’t even see. All right. This is going to be a services block. Image. This is going to be a services block. Heading.
0:23:54
This is going to be services block. This is going to be a services block link. Okay. All that should be good. This services block text. I know for sure. Var space. M. I can also do. Excuse me. Services block. Text. I can actually do the same thing. Okay. Perfect.
0:24:24
There’s maybe a little far away from each other. But we’ll figure that out in a second. So what we’re going to do is fence installation and fence repair. And fence repair. And then I can go margin. Okay. We’re going to just do real quick with this real quick. Okay. Typography. 1.2 ish on the line height. And we’re going to go, I think, just border bottom really. Fence installation, fence repair. Okay. So that’s interesting. And we’re going to need the arrow as well.
0:25:11
Okay. All right. The arrow is going to be an aster. It could actually be a before. It could be a before pseudo element. It could be an after pseudo element. I’m just wondering if I should do. I’m going to have to do this when you interact with it. Okay. So. I think I think we’re just going to go straight up with a border here. So we’re going to go border bottom. I’m going to be actually going to choose my combination. So on the arrow, play with your control post differently. Just a little bit more, you might want to take a look.
0:25:51
We have to have the Beloved Jorge, do this on how our project works. We’re just going to go ahead. Anyway. I think that’s the simple thing. It has to be consistent.atchet. And we can even lay out flex. Okay. We do want kind of, I believe, even top and bottom padding. Because when that hovers, it’s going to need to, you see this? Like you’re going to need padding above it when it hovers. I don’t like the way it squishes in though necessarily. I almost feel like, oh yeah, now that I’m looking at that, we definitely don’t want that border that color.
0:26:41
So we’re going to either go with var primary or var shade light. And I think var shade light is the way to go. Let’s take a look on the front end real quick. Okay. Good. I also need to name this block right here. So this is going to be, what do we call this, services, services block content wrapper. And then this div that’s wrapping my image is going to be content block image wrapper. Just in case I ever need to do something with that. Now in the services block content wrapper, I convertical and middle. Cool. Now they’re all going to be like that. And then this services block image, I can round the corners and we’re going to go borders, border radius, var radius, m. Okay.
0:27:45
That’s all looking really, really good. This is an h2 like it should be. Okay. We can try quickly HTML arrow right. You can try quickly just throwing arrow in there. Not that one that’s terrible. Where’s a good one? Right, right, right. Come on now. Here’s a usable one. Yep, yep, yep, yep. I don’t want, like this one up here is like too elegant. Right, like I wanted one of these that are sharp, but I don’t know why those don’t go straight to the right. I know they exist.
0:28:34
They’re just not on this page. Let’s try again. Let’s go back arrow symbols. Maybe this is better references. Yeah, I, yeah, half these are not even showing up. I don’t want that one. That one’s no good. This one might work. You can literally just copy it usually. All right, so we’re going to go after. Throw that in the content. There it is. And size and spacing margin left auto. There it is. And now we’ll go back to the services block and spacing.
0:29:16
I’m just going to add a little bit of left and right, like 0.25. Okay. Maybe we’ll just do 0.5. Maybe we’ll do 0.5 all around. All right, safe. So now what we need is a little hover action. So when you hover services block link, the background is going to change to var primary ultra light. See how awesome it is to just have like all these shades automatically generated for you for use. You don’t even have to think about it. You just know they’re there. And then we need that to not hover with the primary. It’s these links default the hover to primary hover. But with that being ultra light background, we actually don’t want that to happen.
0:30:08
So this is going to go primary. We can actually do primary like medium. Yeah, so they’ll get like brighter like that. Let’s see. There we go. That’s a much better that’s a much better hover. Now we can actually add a transition to that. So we’ll go back to original and let’s go to effects transition 0.35 timing function. E’s CSS property background color and color. I don’t think you need background color color. CSS transition property shorthand margin right margin right all to ease in out. Okay. Margin right margin right margin. Okay, can you use more than one property please so I can see. Property step position.
0:31:21
Okay, well, let’s just try it. I don’t think you need comments, but we will see. All right, so save. Okay, that’s pretty good. I think that accomplishes what we want. All right, I’ll come back. I’ll double check that in the I don’t think you need to do. I yeah, I don’t think you need to do that. Maybe you do. I’m going to have to check it. There’s too many things to keep track of. Okay, so I’m going to save on this. All right, and now one thing that we may want to do here is a services block. Let’s try this. Let’s try this.
0:32:02
We want to take the grid classes off because those are all manual right and we don’t want to we we’re not going to have any global control at that point. I’m actually going to use just a grid. It is two columns, but I want that three two staggered so five three two yes, this is going to be five. And then just let me figure this out for a second. So this one is going to span three. This one is going to span two. The gap is going to be. Var space L. The gap here, which isn’t really needed, is also going to be var space L. We are going to stretch both ways. Okay, now I’m also services block. We’re going to go we’re going to take off the okay, I took off the margin class. So I’m going to add a margin top of var space L except first of type is going to be zero now I’m going to duplicate it.
0:33:16
Okay, now we’re going to try to do actually we can’t do that yet until we handle the mobile version. So I’m going to go down here. Okay, we also need yeah, this doesn’t do this by default, which is ditsy 100% width on your grids. Otherwise, it’s going to break out of its container as you just saw us well still breaking out of its container. I have this problem before with grids in oxygen. It may just be the break. So let’s break here. We’re going to have to go with so back to our grid. And now it’s going to be three, two. Let’s try. Let’s just try two. Now you’re not going to see anything because our spans are still all funk defied.
0:34:13
Let me get a structure panel. Oh, so I haven’t had the structure panel open and I know that like, you know, really grinds y’all’s gears. All right, so grid, I’m going to come down, default child span, child span override. Here we go. One and this one, one. Okay, all right, that’s better. That’s manageable. Now we get to here and I actually want to stack them. So now it’s going to be that’s at 992. We’re going to open the grid again. It is going to default to one and now we should just be good from that point forward. Okay, sorry, that was complicated, more complicated. The reason I’m trying to get global control over this, which means don’t use utility classes.
0:35:02
We go on this, but this grid is, you know, these, when you’re doing the manual grids, it is a little bit more involved. And then the other thing I want to do is try to be able to flip this. Okay. So what we’re going to do, if I just grab that and flip, you see the problem that we have. So what I’m going to do is do services block and this is a modifier, right, of the services block. So double dash and then we’re going to call this reverse. Okay. And then what I’m going to do is open the grid here. Oh, man, oxygen is going to make this really annoying. Okay, because I don’t have to rebuild the grid again. That was the whole point of building it like this. All I wanted to do was change the, okay, we may need some, some custom, all right, services. So I can target it by the content, I bet.
0:36:06
Services block content wrapper. All right. I’m going to go to a style sheet real quick. I’m going to add a style sheet. This is going to be called custom or, yeah, we’ll just, we’ll call this general. I don’t know. I don’t know. All right. Services block reverse. So for the services block reverse, I want to target the services block content wrapper and I want to change the order to minus one. And yeah, that would have been way too easy, right? Services block content wrapper order minus one. Save. Take a look on the front end.
0:36:54
Okay. Oh, this is interesting. Like, do we want to even do this? Hmm. Do we want to make it alternate automatically? Oh, we could do that. We could do that. Okay. Sorry. I’m getting a little, like a lot more technical than I normally do at this stage of the game. But I just want to kind of get these right because I know I’m going to use them on other pages later. So we don’t even need services block reverse. I mean, we kind of do, but we don’t necessarily need to do anything with it. I don’t know.
0:37:27
I don’t even think we need it. All right. How about we back out whatever oxygen just did to destroy my grid? Okay. Thank you. So let’s go back to our structure panel. Let’s flip these like the way that they were. So every in child to in. We can reverse the. Okay. That’s going to, that’s definitely going to need to be done in style sheet. All right. Sorry. I’m just talking out loud here. So services block.
0:38:02
Inth of type. To in. And then we need to target. What was that called? The content wrapper, right? Inspect. Yeah, services block content wrapper. Okay. Awesome. Order minus one. Look at that auto flip, right? Now let’s go back. So literally, let’s just take this off. Keep it simple. I duplicated again.
0:38:44
Look, flipped itself. Look, it flips itself again. So it’s going to auto stagger these now, which is fantastic. And I believe. I believe that just literally just solved my problem. We were trying to accomplish. Except on mobile. So on mobile, we’re going to have to make sure that all the images are always on top. Okay. So we’re going to have a media query at 992. Yeah. And then you see why I did all these custom class names. I can target these things. Like I can now make decisions and things are already structurally appropriate because I gave everything it’s BIM custom class, right?
0:39:31
So it’s all good to go. So I’m going to go to general. We’re going to do services block. Actually, we’re going to start this with a media query. So at media, and we’re going to do max width of what did I say 992? I think it was 992. So inside of that, we’re going to do services block. And so at this, we need literally just the images wrapper. That’s really, I think all we need to target. And we’ll do order minus one. So that’ll put it first. It’ll prioritize that at that break point. Except this is image wrapper, not content wrapper. Safe. And see how BIM helps me there?
0:40:21
Like I can easily remember that that was content. This is image. Everything is the same except I’m targeting content here and image here. Like it’s easily readable. And if anybody came behind me trying to figure out what the heck I did, it’s easily readable. They know that these image wrappers and content wrappers are part of the services block. They don’t have to guess because these names aren’t just all random. So I’m going to hit save there. We’re going to go back. Sorry, that was a lot of thinking through things. But you guys say you want that stuff, right? You’re like, I want to see Kevin think. All right, inspect. I never use the inspector in Firefox. I literally don’t know how to do responsive.
0:41:03
OK, here we are. I can just do that. I can just do that. All right, it’s not quite as good as Chrome. Is it? All right, so we’re going to come down and BAM. OK, my images did not flip places. Let’s think about this for a minute. Because I’m trying to force things to do kind of the same thing. I just want to try this real quick. I just want to see if I’m on the right track here. Save. Refresh. OK, I’m still not inspect image wrapper. Good column span one.
0:41:49
OK. All right, I’m not seeing. OK, this may be something we come back and troubleshoot later. Because again, I don’t like to get super hung up on this stuff. At media, max with 992 pixels. All that should be fine. Services block image wrapper. Quarter minus one important. Seems like that should do the trick. I could be making a really just basic mistake that I’m not catching. I don’t know. Let’s move on and come back to it. So we’re going to figure that out later. All right, what else do we got going on? So I need that’s going to be gate installation gate service.
0:42:45
We also need the tagline and gate service. And all right, so I’m going to add another heading. Or we can probably just use text for this, honestly. And I’m going to do, we can actually use these accent headings in other places. They don’t have to be in the service box. So I’m going to do H accent. And we’ll do accent, H accent lined like that. But I actually want to do H double dash accent, double dash lined. OK, and then go to selectors. And I just want to delete that nonsense selector that I just created. That one right there, which you guys can’t even see. Didn’t mind my head. And we’re going to keep moving instead of worrying about how to move me.
0:43:43
All right, so this is going to be called, I just believe accent, oh, tagline or something like that. We’ll just do accent heading. All right, so let’s tackle this right quick. So we’re going to do layout flex. We are going to do typography primary. Nope, it’s base. So var base. The lines are primary. And so we’re going to use it before. And we are going to layout flex on that size and spacing with two looks about right color color background. All right, so background color primary height. One pixel, two pixels, maybe two pixels. All right, and then I can go back to the main class.
0:44:47
And we’re going to go layout flex row center. I can go now back to the before. And I’m just going to bump the text away from the pseudo element. So that’s going to be, I’m actually adding margin to the pseudo element. So margin on the right of the pseudo element, we can go with 1m, maybe 0.75m. Let’s try that. And then unfortunately, you can’t duplicate the styling from the before to the after. It’d be really nice if you could. But oxygen feels like, you know what? You should have to do all of that work over again. So I’m going to do 2m, 2 pixels, layout flex, background, bar primary.
0:45:38
There it is. And then on the after, making sure I’m there, we’ll take, wait a minute, after. Yeah, OK, that 0.75 should be there. All right, so there is an accent heading. And it also needs to be uppercase. So we’re going to go back to our main class, our original class, typography uppercase that. And then why don’t we drag it into position. And we can also give it a little bit of spacing to move it away from things that it’s near. OK, safe. All right, we have an accent heading. See if I can copy that and paste it and put it right there. And all of these, by the way, are not even necessary.
0:46:26
I was just doing that for fun. So we can delete these. OK, but we now have an accent heading, which is good. All right, let’s take a look at what we’ve got. So far, can I get out of that? Thank you. OK, good. We also need to take away. So really what I could have done here, we don’t need bottom or top. So I’ll do pad section none. This is why, guys, I’m showing you this, because it’s a good time to show it to you. Everybody’s like, why doesn’t pad section none clear up all of my padding left and right as well?
0:47:05
It’s only clearing the top and the bottom, because you still need your content to line up. See, I don’t want any padding in this section top and bottom, because of how it’s structured. But I still need the left and right padding. Otherwise, this would be wider than my content down here. So that’s why the pad section none class leaves x, y padding, sorry, x axis padding, because x axis padding in most cases is really important. All right, so I’m going to save there. And now that’s going to tighten that gap up. So I come down and see now the flow of the page is much better, right? All right, so I’m also going to go back here, because I noticed that something is missing on my CTA box.
0:47:49
We’re going to get borders. And I’m going to hook in for radius m. All right, and we’ll probably end up adding a box shadow to that at some point. But I’m not going to worry about it right now. Let’s see what else we’ve got going on our page. And we’re going to be like, I think, way over time. Yeah, we’re 49 minutes into this. I didn’t get most of the stuff done that I wanted to do, because we got a little bit more advanced on some of the things. All right, so we’re going to need a recent install box, or really like a featured project images box. I don’t really know what to call it. OK, so let’s add a div. Let’s call this a featured gallery.
0:48:38
How about that? Featured gallery. So just rock and roll with that. All right, and then that is a base. So we’re going to go background color, var base on that. And then we are also going to go with some padding, var space, Excel. I’m probably going to want a lot of padding in there. We’re going to go to the heading. All of our typography in the featured gallery can be shade white, at least a start. We’re going to get some text in there that is not shade white. This is going to be featured gallery lead. This is where we go back to base ultra light. Featured gallery heading, var space, M. OK.
0:49:41
Perfect. We need to get a quote there. I didn’t even see that. It was hiding on me. All right, so this is actually going to be an S. And I’m going to add a div to put those in. And let’s go back to your structure panel. Oh gosh, guys, I’m so sorry. We’re getting long in the structure panel. And I don’t want to pause to just figure out how to move my head around. So you all just got to deal with not being able to see some of the structure panel. I’m real sorry. I’m real sorry.
0:50:12
All right, so we’re going to go grid. Let’s just go custom on it again. Featured, because I surely were going to use the featured gallery somewhere else, right? So this is going to be featured gallery top. Grid 2. Can we get away with 2? We need divs in there. That needs to be in the div. OK. And yeah, I mean, we kind of can, like our recent installs. This is going to be an H3. But it’s going to be an H3 with a custom font size. XL. Let’s just rock with XL for now.
0:51:17
I want to see how this kind of plays out. This grid needs to be 100% width. And now we just throw a button in here. And then this is going to be a button primary. And let’s stretch this. And we want to align that middle. I think we do. So this is going to be featured gallery top top top right. OK, featured gallery top right. Vertical, middle, right, save. What’s that saying? Get a quote. Beautiful. OK. This is going to need a margin bottom on it.
0:52:24
You guys see how powerful these variables are, right? Like that was the huge thing with Oxygeninja. And the other’s the systems that I tried, like not having access to variables and creating custom classes was just totally disconnected from the system. You see how important it is, right? All right, so featured gallery, borders, none, var, radius, m. All right. And then this is going to be, it’s going to have a tabs. But we’re going to tackle those later. We’re going to tackle this fence thing. Well, let’s see if we can do it right now. If I can steal it real quick. So it’s in there somewhere. Where is it?
0:53:12
Save, save, save, save. I can’t save. OK, view. Page source. Ooh, is that an actual SVG? Looks like it might be. OK. All right, we’ll come back to that later. Again, that’s one of those little details that will really suck a lot of time. We don’t need to spend that much time. All right, so this is going to be testimonials. So we’re going to add a div. Call this, we’ll call it review, review, carousel. And we’re going to go 100% grid to end var space L for our gap.
0:54:01
Maybe even X, though. We might want a lot of spacing there. Minimum with 0. Oh, I need to do that on this grid as well. 0. OK. All right, let’s come back. So we’re going to have an image and a div. So an image and a, whoa, a div. I have no idea what’s going on there. All right, let’s look at what we’ve got going on. Call him count to minimum with 0. Gap is what is happening here. Wow, I’ve never seen that happen before. What if we had a real photo?
0:54:52
Does it still do the same thing? Oh, you know what? It’s getting a little buggy feeling on me. Oh, yeah, that’s doing something insane. Let’s turn off the grid for a second. Ooh, that’s just gnarly. I can’t stretch it. I’m going to refresh the builder. I think I don’t know if something’s going wacky or what. Still messed up. OK. Let’s take a look at it. Well, let’s do this. Like, automatic CSS works. What’s the problem here?
0:55:44
Well, for one, I’m doing it at the div level, which I don’t want to be doing. But that’s not going to matter. My variable didn’t mess it up. I literally feel like I just decided that it’s not going to work today. This one worked just fine up here. All right. We’re going to come back to this. We’re just going to do a grid too for now. We’ll do gap L. Sometimes you just got to move on and come back and address it later. These are actually probably going to get pulled from a CPT. So I’m literally just styling this and we’ll come back later and make the carousel, we’ll make the CPT, all that stuff.
0:56:46
But I just kind of want structure for right now. Persons name. OK. And that should be in a div. We’re going to stretch that. There we go. Now we can see the div. So text person’s name. OK. So this is going to be review carousel text, review carousel name. The name is going to get margin top. This is going to be review carousel call right. And then vertical middle. OK.
0:57:41
This is going to be review carousel image, borders, var radius m, safe. And what we may want to do here is var base, var base medium. We don’t want to do that. That gets too bright. OK. We’ll leave that for right now. What we’ll probably do to make this, I don’t know how long these reviews are going to be. But we could try going with larger text. To offset that, we need a little hierarchy in the design here. OK. Let’s take a look at what we got on the front end. And we’re just super like, it’s real basic right now, but we’re just building out structure.
0:58:57
I’m not liking our default padding necessarily in our sections. I think we may need more, I like a little bit more breathing room maybe. We need to figure out something to do here. I know it’s got a box shadow on it, and that kind of helps. But I feel like we need some backgroundage going on. So we’re going to have to try to address that as well. And then like I said, we will tackle this as part of the primary template. But I’m at a time. I know we spend a lot of time on a few different things, but I feel like this was a really good kind of like, we did a lot of stuff I haven’t normally shown. So from tutorial wise, I feel like it’s good, even though this page is still just kind of coming along.
0:59:44
Still a lot to do, right? But at the same time, we made some good progress on certain things. So yeah. All right. I’m going to cut it here, and then we’ll be back very soon for more.
