Peachtree Fence Part 04: More Tweaks + About Page + Form Placeholder

0:00:00
Alright guys, welcome back. We are going to continue working on the home page. Kind of flesh that out a little bit more and then probably get the about page done as well. Any other stuff that we can fit into the next hour we will try to accomplish. But as we saw last time, it doesn’t always go according to plan. So one thing that’s really cool is let me click out of here. I’ve got this little, it’s called an Elgato Stream Deck. It’s the Stream Deck Mini. But I actually programmed it to where when need be, I can actually quickly move myself. So that’s pretty cool. I don’t know why it’s zoomed in. Let me zoom out. So yeah, if I need to show you guys the bottom of the structure panel, I can just pop myself up there real quick and then I can go back to the bottom when I need to be in the bottom. But anyway, let’s go ahead and move on. So first thing I want to tackle is this issue of things not lining up properly on mobile with the order of the content. So we have image content, content, image. And you saw in the last episode, I was struggling a little bit to figure that out. So we’re just going to try to tackle that right now.

0:01:11
Before I do that, I know that this wrapper is also not named properly. It’s called Content Block Image Rapper. But this is actually a services block. So I’m going to remove that. I’m going to go to Services Block Image Rapper. So now that has the proper class on it. And I’m going to go to Selectors. I’m just going to see if I can quickly find that services block image wrapper. Where was it? There it is. Content Block Image Rapper. Okay, we don’t need that. It’s not a real class. So we’re going to go ahead and delete it. And let’s go ahead and take a look at Style Sheets now. So I’m going to go into General and this is what we had. And I was trying to use the Services Block Image Rapper, forcing it to order minus one. And it just wasn’t working. I don’t know if it’s going to work now. Now that I’ve named this properly, we can go ahead and look at it. But if it doesn’t, I have a plan B. Yeah, it doesn’t.

0:02:08
So I think what the obvious thing to do would be to just take this code right here and paste it in. So normal, like it desktop, I took the every second services block and I flipped the order of the Content Rapper. So I made the Content Rapper go into first position on every second services block, which gives us a staggered look right here. And literally I can just undo that at the 992 breakpoint. And the way that I undo that is just take off the negative. And now that will force that to be second or should force it to be second in theory. We actually have to test it and look at it. So now if I go to the 992 breakpoint and cool, it’s working. So I have the image and then I have the content, I have the image and then I have the content. And so now if you notice, I have the ability to just duplicate these and they will automatically stagger themselves, which is really awesome. And not only will they automatically stagger themselves without any additional classes or anything else, they will always have the image prioritized before the content, which is even more awesome on mobile. So I’m going to go ahead and delete that.

0:03:22
And I’m going to go ahead and delete this one. So we only need two for right now. But in the future, when we need more, all you got to do is duplicate. It’s already set up and it’s already working. Okay. Next, what we’re going to do is, let’s see. Oh, this gradient, I decided after looking at it again that I want to flip it back to the way that it was. So it’s currently 6040 and I want to go 40 and 60. I would like the lightness to be at the top, which I think makes sense. Like the sky is lighter than the ground. Typically, like, you know, in a photo like this. So it makes sense that the lightness is up top. I just want to make that little adjustment. I’m still not even like completely sold on that gradient and overlay and all of that. But at least that’s not bugging me anymore.

0:04:11
All right. So let’s scroll down the page here. This is the next thing I wanted to tackle. I built this whole custom box, but I’m not sure I want to actually use that. So I’m going to duplicate it and I’m going to delete this. And I am going to just give this whole container a BG. And it’s going to be BG base. And then we’re going to take that top section and put it in there. And I think what we’re going to do is we’re going to go text white. And I think I’m just going to put that gallery that we saw right here. It’s going to be fences and gates in this giant section right here. So instead of it being in a boxed in section, it’s going to be in a full width section. And I think that’s going to help break up the page a little bit better. So if I go to layout and none and just hide that for a minute, we can now go to the front end and just take a look at the actual page flow and see if that helps break things up a little bit, which I definitely think it does.

0:05:13
Instead of like kind of everything just floating in the center being like blocks, now it’s I think much much better to the eye and to the flow of the page to have that be a full width section. Now I’m still not ready to do the actual gallery yet or the tabs really. We’re going to come back and tackle that later. But at least that’s set up better now. And we’re starting to look like an actual homepage. I’m also going to take a look at this primary template. Let me save this. I’m not liking the gray and black shades. I really think that needs to be the base color, but just the dark versions of the base color. So I’m going to go back to dashboard, oxygen templates. I’m going to edit with oxygen. All right, so we’re coming down to the footer.

0:06:10
I’m going to try. First of all, we’re going to take this one. And instead of BG shade ultra dark, we’re going to do BG base ultra dark. And then we’re going to do BG dark on this. BG base dark. All right. And we are obviously having an issue with our dark version of our base color. So what we’re going to do now is we’re going to head over and make some tweaks in automatic.css. All right, so let’s take a look because that obviously is not darker than this. Right? So sometimes this happens because of the way that the shades are generated. And it’s easily taken care of. So I’m going to go to the dashboard. I’m going to go to automatic.css. I’m going to put this tab in front because that’s the one I’m going to be working with.

0:07:00
And I’m going to go to shades. And we’re going to be looking at our base, which if we scroll down is right here. So the base ultra dark is set to 10% currently. Let’s take a look at how that is. I actually think that’s good. I want the dark to be very close to it. So let’s start with 15 and just see what that looks like. We’re going to hit save changes on that and refresh. And that’s, oh, did I not put an actual value in? Let’s go back down. Yeah, 15 doesn’t work by itself. Let’s try 15%. Okay, save. And refresh. Okay, there we go.

0:07:45
It’s still, it’s too close to the actual base color though. I’m going to go a little bit darker. So we’re going to go with base dark. Let’s do 12.5%. That’s really only 2.5% lighter than the ultra dark now. Okay, and I think that’s a bit better because the base is already a very dark color. So these dark and ultra dark versions need to be much darker. And what we can do to push this a little bit more is we’ll come down to base ultra dark and go to like 6% with that. And now 12% with that. So now they’ll be further away from each other, but just both of them darker. Okay, that I think that’s going to tie everything together much better than just, you know, using the base color again, right? We’re using black and gray. I don’t think black and gray looks that great.

0:08:47
All right, so go into the primary template now and this has a class on it, a footer heading. That var text color is incorrect. Let’s go with var base light. And we’ll just chill with that for right now. I think that looks pretty decent. I’m also not satisfied with the spacing here. So one thing I’m going to try to do is probably a nested grid. So we’re going to do a div here. We’re going to do grid. And we’ll do one, three, maybe the most suitable. Just trying to think through this in my head. So we’re going to go div. Oh no, div is not a class. All right, over to selectors, uncategorize and delete the div.

0:09:35
Okay, let’s add an actual div element this time. Thank you. And there we go. So we have our one, which is about that wide, which is good, especially when I add a gap on there. So let’s put our gap of M. And then in here, I’m going to add a div, which is going to get its own grid. So now this is going to be grid three. And then what we’re going to do is I don’t know for sure that this is actually going to improve our spacing situation. It actually will, if I put a larger gap, maybe. But we can still play around with the different grid structure altogether. Let’s see these have already gotten tighter. And I can actually take this out. I’m giving my structure panel back so I can do this real quick, figure this out.

0:10:21
All right, so there’s that div. Let me back up a little bit. That confused my brain, deleting that out of there. All right. So, okay, there’s that div. We need this div right here to be pulled in in place of that. Come on now, oxygen. And place that empty div. There we go. Now my brain’s not broken anymore. Okay, I’m going to go ahead and delete that. So we’re getting better on the spacing. But we’re going to try something else here. Instead of a grid one, three, let’s try a grid two, three. Okay, that’s, and that’s much tighter spacing.

0:11:00
That’s forcing this one to a second line, which I’m not sure I like. Fences, gates and operators are company. Even though I like the columns are the way that they should be now. And this doesn’t have a gap on it, does it? So that’s probably something we need to address. We’ll take this gap xL off. That’s not even needed anymore. Now we’re getting there. Okay. And again, this is something that I’m going to have to come back to after looking at it just like I came back to it today and was like, I don’t like that spacing down there. We’re going to figure it out. It’s always tough when you have like a long heading like this. Like if this was just gates, that would look super clean, right?

0:11:47
But it’s got this long gates and operators that we have to deal with. One thing we could do here is drop this font size down. So this is going to be var text L. Probably not. It’s already an L. So we’ll go with M. That’s probably where we need to be. These can actually, I wonder if we should take these down to text S. Or if that makes those a little bit too small. If we work on the typography after that, those probably won’t be too small. So I’ll just leave them like that for now. And let’s just take a look at what we got on the front end. Okay. Yeah.

0:12:30
They’re definitely too small, I believe, right now. But if we work on the typography, which we already talked about doing, because we need to improve our heading sizes and things like that, we’ll do that. I haven’t made any automatic.css typography adjustments yet. In fact, we may want to just spend the time right now kind of playing with that. So I’m going to go into typography. Based text size, I’m pretty sure is fine. I like that. I might go 14 here on mobile for now. Typography scale is perfect fourth. Okay. Or augmented fourth. All right.

0:13:11
One point, yeah, 1.33. This doesn’t really behave well in Firefox. Does anybody else experiencing that? This doesn’t stay open in Firefox. And you got to kind of drag. I was just playing with that for a second, because I want to see what that user experience is like. Might have to improve that. All right. So mobile typography scale will leave at 1.2. Text size multiplier. 1.5 doesn’t really matter. And I may just end up doing, let me save this. We may end up just overriding the xxl size. Okay.

0:13:55
Let’s drop down the typography scale again. So yeah, let’s do major a third now. Save changes. There it was before. I can close that copy. Okay. All right. Just kind of surveying everything here. I actually think this is pretty good. What we need to do now is just increase these H ones. So the way that we can do that is with the xxl override. So I’m going to try 3.2 as the mobile size. And I’m going to try 6 as the desktop size. There we go. So now we have giant.

0:14:45
That’s an xxl right there, even though it’s an h3, but we can fix that. So now we have large h1s without having giant fonts everywhere else. Now 6 might be a little aggressive. So let’s try like 5.2. And then we’ll need to see what that looks like on mobile. Okay. And let’s inspect. Let’s click on responsive. And let’s bring that down. Okay. That’s pretty good. All right. So what we’re going to want to do now is I’m still in the template. So I can’t really grab that heading and fix it.

0:15:28
Actually, I can kind of stay like that. And we may do additional tweaks and dialing in here. I don’t know. It’s kind of like in your face, right? You definitely aren’t going to miss it. I need to see what it looks like when there’s a form right there. I don’t know necessarily that it should compete with the h1, though. So we might want to go. We might want to use a calc in this situation. So I’m going to get out of here. I’m going to go to edit page. We can use an XL times like 1.2. We could use the text larger class, but a lot of times, you know, that might make it too large, especially on mobile. I’m not a fan of the text larger class.

0:16:10
You’ve seen my discussions about it. It was a temporary fix for a specific issue. But it’s eventually going to get deprecated, especially in automatic.css when we can generate our own custom font sizes with the built-in calc with the built-in clamp function or clamp calculator. But right now it’s there. I’m definitely going to deprecate it, though. Anyway, all right. So CTA box heading. Let’s do XL. I mean, XL by itself is like pretty close to where it needs to be. So calc bar text L times 1.2 gets us a little bit bigger. See what I’m saying? It’s fairly easy to drop in a little calc there. And then we check it on mobile.

0:16:53
And it’s still, it’s not out of control. And it’s a little bit larger. But now it’s not competing with the H1. Oh, I’m just reloading that for no reason. I thought that was the front end. All right, let’s go to the front end. There we go. Okay. Much better. I do think, though, that this 3.2 needs to be a grid 2. Okay, that’s better. We’ll put the form over here. All right. Let’s go ahead and drop in the form real quick. So I’m going to go to not the front end.

0:17:27
Let’s go to the back end. Admin. I think WS form is already installed ready to rock and roll. So we’re going to WS form add new. Click the start. I’m a developer. Oops. Definitely just shows the wrong thing. Hopefully that doesn’t break anything. And then we’re just going to go to the blank form. All right. So this is going to be lead capture. Okay. So we’re going to drag a field here. We’re going to start with text.

0:18:04
Another text. Actually, we probably want to ask for last name. Let me see what they’re what we’re doing here. First name, email address, mobile number. And then it starts the quote. So this will say start quote. All right. So this is going to be name. This is going to be email, but I want an actual email page. And this is, okay, I got it. Let’s skip the tutorial. Let’s delete this. We can grab an actual email field. And then we can grab an actual phone field. Okay.

0:18:34
This is going to be called first name. We’re going to go to advanced label position. You can actually do this globally. Let me think about that for a second. Because I don’t want to do it on every field. I’m going to make first name required. And I’m going to hit save and close email. I’m going to make that required. I’m going to hit save and close. And then phone. I’m going to make that required. I’m also going to go to advanced and input mask. And I’m going to make sure that this is masked like that. And I’ll show you what that does in just a second. So I’m going to hit save and close there.

0:19:13
I’m also going to add a submit button. And that is going to say, I believe, yeah, start your quote or start quote. And then what I like about WS form is you can drop a class on any field. So we’ll just call this. And then yeah, button. I don’t think you need the dot. I can’t remember. Let’s try it with the dot. Let’s try it with the dot. Maybe WS form smart enough to deprecate the dot if we don’t need it. OK, so let’s publish this. Got it. Publish. Thank you. All right, let’s just take a look at what we’ve got so far.

0:19:57
So I am going to refresh the home page in the builder. All right, now all I have to do is add form. And WS form has its own module. And I can select the start quote form. And then I can add a class to it. And we will call this form dark. So it’s going to be form and form dark. So form and then form dark, which is always confusing to me. Because it’s like, is the form dark or is the form on dark? I might even say on dark like that on dark. Because I don’t want anybody else to come after me to be confused either. You know what I’m saying? Now my dog is barking. So that’s always awesome. All right, so form.

0:20:45
Let’s just do form on dark. OK. I love all these decisions. OK, so the form itself is going to be 100%. And we still don’t know what we’re going to do there yet. All right, so let’s just take a look at it. And it will render itself in the builder, by the way, just not when you first add it. All right, so we see, and then that button primary is not taking effect. And it actually may need some custom class. But before we jump to any conclusions, let’s take out the dot. And then I’ve already been talking with Mark. This is going to be tightly, tightly integrated with automatic.css going forwards.

0:21:37
We just have to do some more work. OK, so yeah, it’s not liking it really either way. Let me see if it’s actually applying it here. Class button primary. Yeah. OK, it’s making a WSF button button primary. All right. So it’s actually not inheriting the styles properly. So I’ll ask Mark about that. But I’m sure it’s an easy workaround. All right, so we’re going to go advance. All right, we can style that in just a minute. Trying to clear my brain of what else we need to do. OK, so form on dark. It’d be easier if I could see it in the builder.

0:22:18
So I’m going to refresh. There we go. So now I can see it. So now on dark is going to get typography. Var text white, which is not working because we’re going to have to target those labels by themselves. I’m pretty sure. OK, so let’s go ahead and grab inspect. And oh gosh, Firefox Firefox Firefox Firefox OK. Label WSF label. All right, and then this is called form. Right? So we can go to style sheets. And I believe what I’ve had to do before. Actually, I’m going to add a new style sheet.

0:22:58
Forms. OK. And form. So that’s like your default. I’m going to zoom in real quick while I do all this. So you guys can see better. All right, so class of form. And then the label in that form is color, var, shade, white. And I believe we need important after that. And that’s not working either. Oh, because I put from. Always help. Well, that doesn’t work either. So all right, let’s hit save. Let’s figure out what’s going on here.

0:23:33
Form WSF label. Should be working. And it’s not. All right, inspect element. Searching, searching right here. WSF form color. There we go. OK. I wonder if I need important there. Nope. Don’t even need important. OK. So there you go. Just had to do a little inspecting. And now we should, yeah, should be there.

0:24:05
OK. So now we have to tackle this button, which is this. And we’re going to do that inside our form. Actually, we don’t even need that in a form. I just want that to be kind of everywhere. All right. So we are going to do background color, var, primary. OK, that’s going to need important for now. We’re going to do font size is going to be var text L. And then border radius, I think, is fine. Well, let’s do this. Border radius, var radius m. And then we’re going to do all those inputs as well. Border radius, var radius m. There you go.

0:25:15
OK, save. We can do better on the targeting there. But and actually, I don’t even need to do this label coloring. I’ll tell you why in just a second, because we’re actually going to hide those labels. So we’re going to do a hover here. And this is going to be background color, var, primary hover. And that may need an important important. There we go. OK, save. Refresh. You can go zoom out now. All right, let’s take a look. Cool. All right, we just got to fix spacing and stuff.

0:25:57
And I believe it looks like there’s a border on there. Or yeah, border color. OK, so we’re going to do border color, var, primary as well. Save. Like I said, so much of this is going to be unnecessary, because when this is much better integrated with automatic.css, it’ll all be automatic. All right, that’s cool. So on the hover, we need to go border color, primary hover, save. All right, now what we can do is go to our form. And I was going to look at the settings here. OK, skip tutorial. Styling, default label position, I want it to be inside. And I’m going to save and close, publish those changes, and now watch what happens.

0:26:56
There we go. Now it’s actually a problem that they’re white. So let’s not do that. There you go. OK. And there are a little far apart for me. Like if you look at this, those are much closer together. And those border radiuses on inputs, which I kind of like those that more rounded border radius. So let’s go radius xxl and radius xxl and save. So that fixes that. And then we need to give them a lot more padding. So in fact, let me look at what’s available to us in the customizer, because you can customize WS forms in the customizer.

0:27:52
So borders. I want the border taken off of those as well, which we’ll do with CSS in a minute. Box shadows, transitions advanced. OK, grid gutter. I want that to be like 16. Spacing used for Legends checkboxes radius, spacing small inside label behavior, move or hide. I want it to move. OK. I’ll feel for field labels help text. Does this do anything? No. OK. That’s fine.

0:28:32
Typography though. That’s why. Oh, let’s try this. Text m. I don’t even know if this is going to work. I’ve never tried this before. Fondesize large. Fondesize small. I don’t know if this is going to work. This may just blow everything up, honestly. All right. Let’s refresh. OK, it didn’t work. But it’s OK. We can get there. So 18.

0:29:09
Oh, no, sorry. Yeah, 18, 20, 16. Publish. All right. Now we need to take the border off of there. So input, border, zero. I don’t think I need important. It looks like it did it properly. OK. And then padding is going to be, we can also do line height 1.2. And then padding 1m 1.5m. See if we need an important on that as well. Inspect. Background image. All right.

0:30:20
OK. Fondesize 18, margin, padding, padding, padding, padding, padding. Well, there it is. But it’s clearly doing nothing. Div, input. OK. Let me leave that for a second. And then we’ll come down here and order background color, webcaterpillar, none. Is it because of the height? That’s part of the reason. OK. Let’s try this. Let’s make this easier, honest. I have a hypothesis.

0:31:06
So if I go to styling and I go to top, but then I go, and I’m going to save and close that, I’m going to go to first name. And I’m just going to make this the placeholder. And if we do this with placeholders, I think it’s that JavaScript. Yeah. I think we’ll get there in a second. Just hang on. Email, placeholder email, save and close, phone, placeholder phone. And I’ll say best phone number. OK. Publish. Here.

0:31:47
There we go. OK. Now we can actually hide the labels. All right. So we’re going to go back here. And label is going to be hidden. Save and close. It was because of the way that that JavaScript has to be, that he has to position those. Absolutely. I’m pretty sure. And it just makes styling them. Cust. Oh, no, no, don’t do that. OK.

0:32:07
Go back. Go back. All right. What did we just lose? Hidden. Oh, is this the, oh, yeah, we don’t want to make the field hidden. I’m hitting the wrong buttons. OK. I’ll do that. I’ll do that. All right. So we’re going to go to phone, advanced label position. Top right bottom left inside. Now where’s the hide?

0:32:38
Oh, show label. I just got to read. Sorry. Things are 1,000 times. I don’t know if you guys have ever recorded tutorials. But when you’re trying to think of talking and all the things you need to do and all this other stuff, this is like really obvious stuff. So sorry, Mark. He’s probably watching this like, oh my god, it’s not that hard. All right. OK. Golly, we got there. We made it. OK.

0:33:04
Woo. All right. See, that’s the mask right there. So it forces them to put in the phone number a certain way, which is kind of cool. All right. So all right. I’m confident in that now. Yes. We’re going to come back and style that placeholder text later, but I want to kind of move on here. So I want a little bit bigger of a gap. You can go gap XL on that. It’s save. And then I want to center this.

0:33:39
So we’ll do center left save. And let’s take a look at how all of that looks on mobile. All right. The question is does that actually fit? Now, we’re not seeing the real representation here because I haven’t reloaded the builder. I think it does. I think we’re OK at that break point. And then there it’s going to stack. Everything else is stacking nicely. Except this is a little sketchy. At that break point right there is not going to work. All right. So featured gallery. Was this another custom grid that I did?

0:34:14
Yeah. So here we’re going to need one column. And then there we’re going to need to vertical left. That’s probably the way to go. And then that down there is really funcified. So let’s check out what’s happening with that. That actually still looks good. So at 768 we’re going to break. That is the M break point. And so we’re going to go grid M1. And that is fixed. Save. Ooh, look at our footer. I never did the mobile on our footer. The things you forget when you are recording.

0:34:54
OK. So we’re going to go oxygen templates. I’m leaving all this shit in. This is how it goes. I don’t know. This will make you guys feel a lot better about yourself. You watch my other tutorials on YouTube that are super short where I’m like, oh, I know exactly what I’m going to do. And exactly how to do it. But I’m actually building a real site. It’s just like, yeah, especially when it’s 4.40 pm in the day. And we’ve already been working since 7 am this morning. Things get a little trickier on the mind. All right. So this is 992.

0:35:26
Whoa, hold on. Hold the phone. What just happened? Oh, yeah. OK. That’s still using the styling we had before. Got it. OK. So what does that mean for this div? Why is that div? OK. Hang on. Hang on. Because this has a, where’s my structure panel? Oh, OK.

0:35:54
That’s the div with the grid. If that doesn’t need to be the case, that can just be like that, right? Yeah, pretty sure. Right? OK. That makes more sense. So that is grid 2, 3. OK. Because that one’s not. That’s why. This one’s not breaking at all. So we have to break this one first. So this is going to be grid 1 at the m break point. Grid m1, it was grid 2, 3.

0:36:33
Now it’s grid m1. This should be going 100%. There’s no reason that this div should not be 100%. Grid m1. Grid 2, 3. Stretch. OK. Let’s go back. Let’s pull this out for a second. It’s definitely 100% there. If I put it in here, it’s going to conform to that. But at the m break point, I grid m1. Oh, there it is. Oh, I needed an L. OK. I am so sorry.

0:37:32
Usually my brain works better than this. OK. So now we’re good there. We come down to 768. And this grid right here needs to be grid m1. There we go. Now we’re better. OK. So we’ve got our fixed grid on desktop. And we are still good through pretty much every break point. Except this one, I still, let me do the Excel on that. I want to push those a little bit further away. All right. I’m going to hit save on that.

0:38:09
Man, we escaped two treacherous situations, a form and a footer. OK. Woo. What are we doing on time here? Let me check my clock. 40 minutes. OK. Guys, I think we have time to tackle the about page. We’ve spent too much time on this home page. We’re going to go to a about page. Let’s go to about page here and see what we need to do. So one section, two section, three section, done. And then I’m going to also try to squeeze in the footer CTA. All right. So get rid of that.

0:38:44
Let’s organize here. All right. About the about is not linked yet. But it is a page, right? It is. OK. So I’m going to edit. Oh, no. Not do that. Edit page. Edit with oxygen. So we need three sections. One, two, three. This top one is going to have this H1 in it with our accent heading. So I’m going to go heading here.

0:39:21
And then we’re going to add a text. And this is going to get H accent lined. Remember that? Hop it up there. Center all. Right fence company. Yep. Got that in. And let’s do width of L on that. Woo. Perfect. BG base ultra light. I think I might like that better than this gray. All right. So we’re going to go text base ultra dark.

0:39:59
Much better, much better. See, everything’s cohesive when you use everything from the same color family. Pretty, pretty good. All right. And that says about us. And I’m going to make a little change here. Because that kind of like that. I don’t know. We’re definitely using a different font. We probably need to switch the fonts up too. All right. Anyway, we’ve got a two, three grid probably. Or that could just be a two column. Let’s see.

0:40:32
So we’re going to div it. Grid will start with a two, three. And we will go gap of XL. And we’re going to add an image. And then we’re going to add a div. That’s going to be the content. This is going to be the heading. Things are going to start to rock and roll a lot faster as we start to go further into the development. Because all this stuff that we’re setting up at the beginning with custom classes and all that takes more time. That’s why when you’re pricing, by the way, just let’s pause and talk about this. Because it’s very important.

0:41:07
When you’re pricing and somebody’s like, well, I just want a one page website. But you saw how much work goes into just getting the one page done. All the other pages that come after are based on all the work you did on the first page. So those go a lot faster. So you can’t just say, oh, well, it’s just one page. So it’s super cheap. All the DevSite set up, all the prep work, all the project management still has to take place to do one page. All the additional pages happen easier than that first one did. So don’t let people just say, well, I just need a one page site or anything like that.

0:41:40
It still takes a lot of work. All right, so I’m just going to grab all this lorem. I’m going to pop that in. And this now, we can just fly through with classes. Because there’s only going to be one of these sections like this. And I’m just going to steal this image because we do need a tall one. And I don’t have a tall one yet. So I’m going to go to the downloads folder. And now we’ll pop that in. I’m actually going to do this in the Media Library. And downloads. Thank you. Fence installation, Georgia.

0:42:22
It’s already got the name properly, too. All right, we’re going to hit select, perfect. And then the size is going to be medium. Now it’s going to be full. I don’t have my custom sizes in there. Yet another thing I have to fix in my blueprint. All right, so we’ll just put full for now. And for the all text, I’m going to do fence contractors installing a fence, a wooden fence about that. All right, and then in this, I’m going to stretch this out. That’s going to make this side div go all the way full height. And then I’m going to be able to do middle. Or you could do another class, like center left, like we did earlier.

0:43:09
All right, and then what I’m going to do is probably shorten this up. So here’s one trick you can make to make this a little tighter is just put a width class on here. Probably XL is going to be best. And then we’re deleting padding on accident. And then I can just come to this. And I can do, you could do center all on this, or you could do margin left and right auto, which I’m going to make a class for this. That’s padding, hold on. We’re on the wrong thing. Size and spacing, margin auto, margin auto. OK, now that’s much tighter. And then these, I still want to be tighter.

0:43:52
So this is telling me instead of grid 2, 3, we should probably be doing grid 2. That looks better. This is going to get a rounded class of M. Let’s take a look. Perfect. All right, how’s it look here? We need one of these. And we also need to do, this is where we can probably go into oxygen settings, global styles. I still haven’t played around with this enough to know if there’s going to be an issue with overriding this. In certain cases, let’s test it now. So if I did text primary, would it still? Yes, perfect.

0:44:38
All right, love it. OK, but now that’s going to be the base color by default. All right, so I’m going to hit save. Probably do that with the h1s as well. So let me go back settings, grab that, grab that. OK, my nose is itchy. All right, text. Now we’re going to make a new accent class. So YP-Street Fence and Gates. Well, I didn’t work. Did it? YP-Street Fence and Gates. All right, so this is going to be called H accent. And not lined, it’s going to be left bar. H accent, left bar.

0:45:22
H accent. We’ll just do H accent left. Try to make it as simple as possible. OK, so this is going to get a layout of flex. Now we don’t even need to do that. Let’s just go to the straight to the before. Layout flex on the before. Height is going to be 100%. Width is going to be 0.5 rim for about 5 pixels. And what in the world have we done? What happened to my text? Hold on. Hold on, sir. Why did flex do that on the before pseudo element? That makes no sense whatsoever.

0:46:09
Is it because of this height, 100%, it is. OK. Rim, let’s do M1. OK. Flex row. No. OK. We do need on the original flex. OK. Now I can go back to before. We’re going to go to background. Man, this is not my finest tutorial ever. Not just be honest with you. To M, should do the trick there, and then margin right 1M. 0.75M.

0:46:47
That looks pretty good. And then let’s go, let’s make sure we’re not on the before. Margin bottom. Var space M, S, yeah. And then typography. 600. And var base. By can type. I wonder if we should try shade. Base dark. Just want a little bit of extra contrast there. I think that’s fine. Maybe it’s just font that it’s like, I don’t want it that light, but I don’t want it that thick either. I think when we change the font, it might help us out.

0:47:48
I feel like that’s pretty, pretty perfect. I can also try to maybe do a little letter spacing. Maybe not so much. 0.025. Now 0.025 is what I’m trying to tell you to do. OK, maybe that’s better. Let’s see what we got on the front end. All right, we’re getting there. See if more spacing helps. Maybe so. Something I got to, again, got to look at it with my eye later on. We’re going to call that section a day. All right, we’re going to come down here to our service areas and we have two grids. And we have a map.

0:48:39
Can I steal this map while we’re here? All right, let’s go down here. That is a, it’s probably also going to be a 2-2. Whoa, whoa, whoa, no, we don’t want that div. Grid 2. Div, div, grab the wrapper. Gap, Excel, grid, M1. I’m guessing L1 is probably going to be more appropriate. Image, Georgia Star icon, pop that in. 100% with our service areas and this text, H2, text, margin top. And then below that, we’re going to need a nested div, our nested grid of 2. And grid M1. Perfect.

0:49:59
That’s inheriting the gap from above. So we’re going to do gap of M here. And then we’re going to need this map pin icon with coming Georgia. And what I’m probably going to do here is we’re not going to do all this yet. We’re going to come back and do some extra styling. But what I’m liking to do more lately is an actual list. So we can do like coming Georgia, I’ll just do GA. And then John’s Creek, Georgia, I’m just going to rattle off some of these Duluth, Georgia. We’ll do, I cannot think when I’m like, the camera’s on me. Can’t, my brain doesn’t work that well. Coming, John’s Creek Duluth, Alpharetta, trying to think of what else is Lawrenceville. And we’ll just get one more in there.

0:51:00
Let’s get one more in there. View for Georgia. OK, save and close. All right, now I’m going to duplicate and paste. So now we have two there. And then I’m going to grab that whole wrapper, margin top on that of L. Maybe that was too aggressive. Margin top M. There we go. And then I’m also going to grab that main grid. And we’re going to stretch. And then this content can go center left, safe. And I do need to put our service areas in there. Perfect. OK, we are going to end up taking all of that padding off. So this is going to be a list double dash pin because it’s going to have the map pin icon.

0:51:57
So it’s going to be list pin. And then this is also going to be list pin. And then what we can do is dive into our style sheet here in our general and make a new comment for lists, lists, double dash pin. And then this is what we’re going to be doing as styling the UL. So we’re going to do margin zero on that padding zero. And padding top right bottom one in. OK, that aligns that pretty well. All right. And then we can do one cool thing if you just wanted to do this without like a, well, I’m not going to do. Well, let’s not do extra work for no reason. This is a day like, let’s just learn fun things tutorial.

0:52:54
The only thing we need here is in this section, BG primary ultra light. Perfect. OK, that just ties everything together nice and neat. OK, we’re going to come back and add the pins later. But again, we’re just working structure right now. We’re not working finer details. We’re working like necessary stuff. All right, let’s save that page. Let’s hop out of here and let’s get back to our template. And we’re going to tackle real quick. What do we have for time? 55. I got five minutes. I got five minutes to do this.

0:53:40
OK, let’s go to oxygen templates, primary, head it with oxygen. All right. Oh, that’s interesting. Did that do that on the front end too? Yeah, it did. So I’m going to have to come by and put my white class on that to fix that and then same thing here as well. That’s one of the challenges with setting a global color for your headings that you run into that issue. But it’s easily fixed. It’s not a problem. All right, so we’re going to add another section here. And it’s going to be BG primary. And it’s going to have this giant heading.

0:54:29
We’re also going to put a text class of white on that heading. It’s not going to be an H1. It’s going to be an H2. But it’s going to be, actually, I don’t even need to put a class on it. It’s going to be the only one of its type. So var text xxl. And then we can also put this text in here. And then we can put the text white class on here. And we can do width l. We can do width l. I can center all. If I can click it right, I can margin bottom it. I can margin bottom. Actually, let’s go.

0:55:25
Because I’m about to do a tutorial on this, let me get, I’m still making the transition. Margin top. Oh, did I just do that wrong? Margin top m. There’s another selector I need to delete. OK. And add a form. And this is going to get a margin top of m. You could also do owl spacing in here. Let’s just do that since you’ll like it. And you’ll always ask me, you’re like, what did you do owl spacing? So I’ll do owl m. And then we will select a form, start quote, except this time we’re going to do form horizontal.

0:56:12
And I’ve never done this before, but I would like this to work, because I don’t want to create two separate forms. All right. So apply parameters. Oh, you can hit apply, by the way. And it’ll load the form in here like this. But to see this is going to create a lot of custom, you know, we’re going to have to do more customization. Because before we did form on dark, now we’re going to have to do form on primary like that. And so on in the on primary version, we have to change the button color. And then in the horizontal version, we have to make these inputs line up next to each other, which I’ve never done this before.

0:56:47
So I have to look at the grid structure. Let’s go ahead and edit this page, the home page. I’m going to hop out of our primary template, so I don’t screw anything up. I’m going to fix those little heading colors, and then we’ll take a look at what we’ve got. And then thankfully, I can sign off with a day, because my brain is absolutely fried. All right, so this is going to be text white, text white, save. And this actually might be, instead of text white, text-based ultra-light. So it’s not, again, not competing, necessarily with the H1 up there. That looks pretty good. OK, come down.

0:57:36
Come down. Oh, yeah, that’s going to look much better, full width. OK, so we got on a bout page. Let’s take a look at our bout page that we got. Oh, still can’t go to to it, because it’s not linked up. OK, pretty good for now. I mean, just working on structure. All right, guys, I’ll be back. See you.