[FULL BUILD] Lightspeed Part 3

0:00:00
Alright guys welcome back. So it’s going to be hour number three and we’re going to try to button up the landing page a little bit and then start to start to work on the mobile and start to just clean up the little details here and there. So the first thing I’m going to do is insert this graphic here that we need. It’s this giant ugly computer screen like this 1990s keyboard action. I don’t know what’s going on with this but we are going to attempt to insert that. So I’m going to throw an image in here. I’ve already got it uploaded and we move this window out of the way a little bit. Alright cool. So typically what I do and of course this image has like a gigantic enormous amount of padding around it. Trying to support I think that shadow but it’s still got a lot of extra padding but doesn’t really matter because we’re going to absolutely position this and yeah. Okay so let’s get started. So what I’m going to do is on the parent wrapper I’m just going to go ahead and do layout and position that relative. That’s going to contain this image and then I’m going to do layout position absolute on the image itself and you see that it just kind of jumps out of control a bit. I’m going to put this over to the right for now. It’s actually kind of like kind of there. We need to constrain its size a bit. So what I’m going to do is change its max width in rims. Let’s do like alright that’s not going to be big enough. 120 rims. I actually think it needs to be bigger than that because if you look at the landing page design it like fills almost all of the container and then it’s kind of like cut off over here. Alright so what we want to do is let’s get it a little bigger like once that might be too big. 150 and then let’s just try to position it a bit. So I’m going to do position right minus like 30, 50, 40, let’s do minus 40 and then the top position let’s do minus like 10, 15. I think that’s a little it’s a little big. Let’s drop that down. So we’re going to go to 140. I think that’s going to be better and then we’ll go back to position and this is going to go to like minus 10, 12 minus 12 somewhere in there and I think that’s good in terms of like if you think this is like the edge of the screen. We’re not going to do the true edge of the screen.

0:02:45
Let me save this and show you what’s going on here. So when you look on the front end you don’t want to you don’t want to align this to the right edge of the screen because then as you know on large screens it’s going to get pulled way over here and there’s going to be a giant gap in the middle. So we want to pretend like you know this is kind of like the edge of the screen and so it’s going to come off a little bit and then as this degrades down that’s where you’re going to see that clipping start to happen and then obviously we’re going to have to fix things as it goes beyond that. But I think I’m actually pulled over just a little too much. So I’m going to pull this out and let me close some of these apps here quit, quit, okay and quit. All right and then we don’t need to loom either. Okay. All right so minus 40 to the right. I think this only is like minus 35. Just a little bit off the edge of the screen so to speak. So now you can see on the front end yeah that’s better. And then as this comes in like that now you’re getting that clipping that you were kind of seeing on the landing page. Now if you compared it to the actual landing page it’s not clipping quite as much but I mean clipping that just that like tiny little inch is just not I don’t think that’s a good design anyway. It needs to be like you know cut off the whole side of that laptop or don’t cut any of it off. So I think I think we’re pretty balanced here. So when we come in that’s the kind of clipping we’re getting. I think that’s perfectly fine. And just for safe keeping I’m going to grab this whole section and do overflow hidden on it. And now we’re going to have to work on the break points. So I’m going to go down to the 1280 break point.

0:04:40
I’m pretty much going to keep the laptop that size I think but we’re going to what just happened. Am I selecting the image? Yeah. Okay so let’s go lay out. Absolute again. This time this time we’re going to go like I’m just going to cut a lot of it off really. Well not that much. Nope not that much either. 80, 60, 70 kind of like that. You know I don’t really have a mobile thing to go by like they didn’t give me what they want the mobile design to look like necessarily but I mean like it’s already a terrible graphic but you know you’re still able to get the picture here of like you know what’s going on and it’s not crowding out the text. So I think this is this is fine. So I didn’t just do that. Okay good yeah I didn’t. Alright so let’s go down to 992. Now I’m going to have to change the size of the image for sure. So the max width on the image now is going to go to like that’s too small. Let’s do 100. Well not 1200. Let’s do 100. And then we’re going to have to change the top now. So this is going to go to like minus 5 minus 2. Yeah like minus 2 is perfect for that. And then the right I don’t even remember what it was the last break point. Wow I’m just typing random things on the keyboard. Apparently 65. How’s that look? Alright it’s not bad. The next break point down I think for sure we’re going to have to stack things. So now we’re at the 768 break point. I’m going to go ahead and say that this is going to go to relative layout and then top and right are going to be zero. Really all of these are going to be zero. And then the size and spacing is going to be 100% max width. And now we just have to fix the grid. So this is the M break point. So we’re going to go grid M1 to say that we only want one there.

0:07:04
And now we have a problem because now that that all that extra padding on the image that you wasn’t causing a problem earlier is now definitely causing a problem because that is not yeah it’s not it’s not the way that we want. So let’s try something now. So with this we’re going to we’re actually going to change this to VW and go to like 120, 130, 140, 130, 120, maybe 120, maybe 140. Alright and then do we not have a gap on this grid? Why is that? Oh, I got you. Okay. I was like, why is that breaking out? I think it’s because on this grid div we’re going to have to go overflow hidden or maybe I need to be putting this in a div on its own. I think this is if this didn’t exist that text wouldn’t be breaking out. It’s only breaking out because this image is breaking out. Like if I change this back to percent, that 140 percent actually still does it since it’s relative to. So I can actually go lay out left minus 50. I think I’m going to go minus 50 or maybe it’s 50 percent from now. It’s definitely. Maybe it’s 50 percent from the left and then I always forget because there’s two different techniques for doing this. Transform, translate x. Boom centered it. Okay. Yeah. So it’s left 50 percent, translate x minus 50 percent to get that centered after you F with it. And so now it’s at 140 percent. Now I think now we’re safe to just dial in the size. Yeah. And now we’re not getting any breaking happening up here. So I’m thinking that this is going to need to be like centered to look good here. So this is the M break point. I can really just do center all M. And then we have to stack it as a column. So flex call M. Boom. Okay. This feature bullets typography left at this break point. All right. I think we’re good. And I just don’t like, you know, yeah, I don’t know. Is there any gaps on this? Oh, dear. What have we done, friends? What have we done? Flex call M. Is that not centered all M? That should only be happening at the at the medium break point. So I wonder if we’re going to have to check those. We might have to check those classes double check. Okay. That’s fine.

0:10:26
I was going to try to do it with the utility classes, but we can just do it manually. So let me go back down. That’s good there. That’s good there. And at this point, we need to center. And what I was going to check was the gap on this to see if I put a gap. And we didn’t. So gap is going to be L. Let’s try L first. The gas thing I do anything here, but I want the gap when it’s on. See now you can see there’s a space between that button and the graphic. So that’s behaving the way that it should. So, you know, we’re kind of getting here. I wonder what this will look like left aligned. And I wonder if this, if they’re going to keep that graphic, like honestly, at this break point, watch this. Like, wouldn’t it just be cleaner to like not have that graphic there? Oh gosh. Let’s try something else. Image. I’m just playing with it right now. Because again, I don’t they didn’t give me anything to go off of. What if it was still absolute? Yeah, I don’t want to mess with that necessarily. Let’s try making it just huge. And 180, 170, 160. I’m going to have to look at this without oxygen stuff all in my way. Yeah, I really don’t know. I’m leaning still towards centering this. I just don’t like the way this is breaking. So that’s with M. I can make like fine tuning adjustments. 32. Size. Let’s not do that on the width of the screen. So that’s a little bit better. Kind of get everything tightened up. I don’t need to look at it. Let’s go look at the next break point. Yeah. I think we’re fine. I mean, they didn’t give me anything to go off of. So, all right. Everything else is already looking good. This is going to need a little bit of adjustment here. I also wanted to look at, where’s their landing page here. So we need to change these arrow icons because those are not the same icons. All right. I’m going to call the hero section done for now unless they want to make some adjustments on their own. One problem here is that like if this image covered this, the button wouldn’t be clickable. See how wide that image is if that ever gets over and covers that button, that’s going to be a problem. So I’m going to do layout.

0:13:56
Z index on this is going to be zero. And then I’m going to grab this whole container right here. This div and just make this Z index one so that that will always that if that ever tries to overlap like the blank part of that image that’s overlapping will actually be behind that content. And that should protect that content. Ideally, we get a better graphic, you know what I’m saying? Like, but yeah, it is what it is. So, okay. Let’s move on. Let’s go to the carousel again. The good old carousel. And let’s go to navigation arrows, previous icon. So let’s do left like that. It apparently didn’t have to apply. Nope. Oh, maybe it’s because they colors background color. None. Okay. Sure. Just do your own thing. Do your own thing, buddy. Disabled colors, borders. Does it matter that I’m not doing it now? The ID would be overriding it. I’ve selected built-in icons. Let me go back to the ID built-in icons. What if I do none? Okay. Well, that did something. All right. So built-in icons, previous icon left. Next icon right. Okay. Wait. Why? Why is that inheriting itself? That’s a bug. All right. We may have to go with our own icons then. Disabled colors, borders, borders. All. None. That did absolutely nothing. Shadows. There’s no shadow. Oh, the background colors back. Okay. Now we’re getting somewhere. All right. So this is going to be var base.

0:16:02
Aha. All right. Let’s go to navigation arrows. Why isn’t there an arrow size? Why is that not an option? I’ve got padding. I’ve got everything but the size. Okay. Let’s go to the front end. See what’s going on here. Inspect. Okay. That’s going to be a pain in the ass. No, it’s not. Okay. Oxy, carousel, builder, icon. All right. Manage, style sheets, custom. Well, already has the period in there. Fonsize three. Rim. Important. Okay. And then what I need to do. Look at their home page. They’re landing. It’s a little bit thinner, you know, but I don’t know. Navigation arrows. Previous icon. Chevron, right. Let’s do right. See what our other options are. Oh, there’s a thinner one right there. Next icon. I don’t know why it’s pretending like I’m not selecting different ones. Okay. So previous icon left. Was this just my dyslexia the entire time? Was I angle left? Nope. That’s the angle left too. Oh, gosh. Oxy extras. You kill me. All right. We also need to check the, so this is testimonial carousel. So when I go into my style sheets here, I should be doing testimonial carousel. Four, five, four. Let’s try four. All right. Cool. So we got custom arrows. You know, this is really not the scale. I still think they’re bigger. Just slightly. We’re going to go five room. All right. And then while we’re here, let’s check out this mobile degradation thing.

0:18:42
This is having to do with the spacing I put on the carousel, I believe. So if we look at testimonial carousel and we go to size and spacing, yeah, look at that. All right. So that will take off. And then we can also do navigation arrows position spacing. Let me go back to the ID because that’s where it’s set. Top 50%. All right. So left is the left truly zero. Zero seems like it should be at the container edge, right? All right. So I’m just going to put minus 20 on here. Oh, wow. Minus five. Man, that’s jumpy. Minus four. And then the next navigation right will be minus four. Okay. That pulls those out a little bit. Then when we’re on mobile, it’s not like, why did that happen? Why did that do that? Why these come in? That doesn’t make any sense whatsoever. Like if you’re there, if you’re on the outside, you should stay on the outside. Ain’t nobody asking you to come in. All right. I’m going to put testimonial carous centered text. Well, good thing I put classes on those. All right. So this is going to be that var space XL. So now we’re good. I just need to get these arrows tamed again. So let’s go to structure testimonial carousel, navigation arrows position spacing. So one up from here, they still need to be left more. So this is now minus eight. I would gather. And then this is going to be minus eight on the right.

0:20:45
And then I’m going to come down here. They continue to like creep in for no reason whatsoever. Position. This is going to be minus 10 now. 12. And this is going to be minus 12. This doesn’t make any sense to me. This is not behaving like left and right behave. Percent. That was super manual. All right. And then here, you know, I don’t know that we need that XL spacing anymore. So at this break point, we’re going to go to var space L probably. Pretty good. I also don’t know why it’s. It needs to be centering this vertically. I thought we’d already said it to do that. Carousel. Sell line into center. Man, like I like that oxy extra gives us this carousel functionality. You know, oxygen doesn’t do it. But at the same time, I think they just kind of make this easier. You know, there’s a thousand different settings. Oh, apparently that spacing is because there’s page dots that I can’t even see. So I’m going to disable those save. Now let’s look at what’s going on here. Okay. It’s pretty acceptable. I mean, I think the navigation arrows here still need to be pulled out a little more. So we’ll do minus 18 minus 18. I want to avoid them like going off the screen or really not being able to interact with them. Like I don’t even know if you’d be able to interact with them with a scroll bar over there. Let me back off 1%. You still interact with these. Okay. All right. It’s good enough for now. What does that button down there need to say open an account today? Save. All right. And by the way, I fixed these outline buttons in the latest update of automatic. So that’s good. All right. Let’s do. We got to do this one right here. I don’t have this graphic. I put in a request for it. But I will just do an image for now. Just this placeholder image. And doing this to the ID level because like I don’t, you know, this this image I think is only going to be it’s only going to be used in this section. Like it’s yeah. I think it’s fine. All right. So same kind of concept as before. I’m just going to grab this. Are there is that in a div in there? I don’t think I need that in a div. We’ll just delete that div. All right. So I want this whole wrapper.

0:24:30
We’re going to go layout relative on that. And then for my image, I’m going to go to absolute. And then I’m going to go to max with REM is going to be 80 50. Okay. Is this an auto grid? Yeah. Let’s not do an auto grid. Let’s do a normal grid. Okay. And because we’re going absolute with this, we are going to have to put this in its own div. So that div I deleted. Yeah. I actually need. So we’ll put that there. And then this is going to go in there. Cool. Okay. All right. It’d be easier to do because now we have to we have to attach this to the top of this container, which means that if this container was the relative parent, it’d be very easy to do that attachment. I just don’t know how the left and right is going to behave. So yeah, let’s do that. Let’s at least start that way. So this section is going to be the relative parent. This parent div is going to go back to having no specification. This now being positioned absolute if we go top zero, it’s going to fix it to the top. Oh, don’t get rid of padding. All right. We actually might be good there. Let me just size this up. And if we look at the LP, yeah, this is this is this is what we’re trying to create, by the way. Yeah, I think we’re I think we’re good. And let’s go 60 on this. That’s a little bit crowding out. We don’t want to do that. Let’s do 58. Let me look at it on on it’s hard to do kind of without the real graphic to we’ll definitely probably have to make adjustments to it, but all right.

0:26:47
Just slightly needs to move to the left, you know, but I’m afraid if I put in a left value, it’s going to go all the way, you know, if I put in a zero. I don’t even want to do that because what’s going to happen is as the browser, well, maybe because it’s coming from the left, it’ll be all right. Yeah, I think I think we’re good. Is that in line with everything else? I mean, they have look at this. There’s like no alignment control here whatsoever. Look at this logo is just like floating toward the top of the header up there. So I wouldn’t even call this a pixel perfect design file, right? To start with. I think we’re pretty good here. Like if I can actually make these appear further apart by just putting a larger gap. The gap XL not work. Gap XL didn’t work. Oh, duh, because I’m okay. Yeah. Now it should work because there’s a yeah, is that putting it on the wrong thing? Wasn’t there gap, yeah, gap L’s working? Why isn’t gap XL working? Gap XXL. Gap XXL is working. All right, save. All right, that’s better. And then that’ll put that in perfect alignment with everything else. I think we’re fine. We’re good to go there. I’m calling that a done. Okay. All right, let’s look for it. Let me extend these icons out. I’m just going to grab icon. Let’s delete. Delete. Delete. All right, what sucks is that I can’t put, you can’t paste things above, right? Drag, drag. I’m still waiting on the icons here as well. They haven’t given me those. So those will get swapped out, but at least it looks better than you know, having little spray blocks there. Okay. Now we’re going to tackle. I think a lot of the responsiveness of the primary template. We’ve gotten pretty much the landing, oh gosh, you gotta see that. We’ve got a detail a little bit. We never did the responsiveness of this.

0:29:36
All right, so we’re going to go here and let’s go size and spacing, bring that max with down for sure 40 at this point. Yeah, 50, 44. Okay, I think we’re still good there. The problem is it’s going to look a little short, you know. Like you see, there’s a big, yeah, there’s going to be a big gap. I’m not a fan of attaching it to the top of the screen at this point. So I’m actually going to go back to positioning it relative. And I’m hoping that, yeah, that’s fine. It’ll still look okay. It’ll still look fine. All right, so I can also just come here and make this 100%. All right, excellent, excellent, excellent. The gap’s a little large now, honestly. So here’s what I’m going to do. I’m going to tackle this differently. We’re going to go back to desktop. I’m just going to take off the gap. And I’m going to add, I’m just max with this. I could probably use a class with like M. Yeah, there we go. And then I’m just going to go size and spacing margin left auto to push it over there. I want to see how big that looks. Yeah, that’s that’s not, it’s not bad. All right, so if you wanted to, you could take off the width M and you could really just, you know, dial it in manually. So this could be 44, 64, 54. I just want a little smaller, 52, oh wait, 56. Okay, something like that. And then when you come down, boom, now, we’re just going to need to make sure there’s a little, a little gap on there. And then the gap will take over at that point. So we’ll do gap M, which you won’t see any adjustment there. But when you come down, now you’ll see that there is a M gap, which is not quite big enough in my estimation. So we’ll do gap L. And then I’m going to come down and check it. There we go. That’s much better. And then at that point too, I am going to center that. Okay, then we’re going to check it out. At this break point should be great. And then this break point, we’re going to need to stack it.

0:32:24
So that is the M break point. So we’re going to go grid M1. Shazam, just like that. Looking great, looking fantastic. Okay, all right, let’s pop over to the primary template. Let me see how long we’ve been, we’ve been at it. Okay, good. We still got half of our hour left. How do I get this out of my face? All right, let’s go back down. All right, back to admin. All right, I’m back in the primary template now. I love how oxygen doesn’t show me any styling until I like click on the element. And then it magically magically reappears with its styling. So the first thing I’m noticing is this logo has been a bit large. And if you go to their existing site, I checked their logo size there and it’s like 227. So if I do 22 RAM is 220, so that’s pretty close. So that’s good. We’ll also throw the Alt-in on here. So I’m going to do light speed logo. And these, I actually looked at their other site. And you know, we are initially, I was putting a box shadow on this to try to accomplish it. And I’m not. I’m just going to take that off. Why can’t I reset? There’s no, there’s usually a reset icon there. All right, so I’m just going to take all these things away. And it’s really just, all they did was a bottom border. So bottom, probably like two pixels. And then I believe, I don’t know if I updated this install. But I believe I added all of our shading dark, dark opacities for every color. So if I go to border bottom, let me see if I updated it. So this technically should be secondary dark trans. And then like 70 or something. All right, let me see. Manage style sheets automatic main. It’s ultra dark, not dark. Okay. So and they are in there. It looks like. So now it’s just a matter of seeing if they work. So border bottom secondary ultra dark trans 70.

0:34:56
70 is not an option. 80 is 60 is. Let’s see how that looks. All right, yeah, you can see it there. But is it is it lighter on the landing page? It’s slightly slightly darker. So I don’t know if these transes are going to transes. This is, this is, this is are going to get it done. Secondary secondary medium looks like it’ll do the trick. Oh, that’s it right there. Secondary medium. Okay, so we got to do the same thing on these, which I styled these. You remember back. I believe with a style sheet. Because this is login button and open account button. Okay, so we’re going to go border bottom. And this is going to be two two pixel solid. And that’s probably going to be primary medium. I would imagine primary medium. Definitely not primary light. Primary dark. I don’t know. Let’s see. I don’t know what that is. It’s almost like a transparent and I can’t do alpha with these variables. So there’s a way in CSS to inherit the color. Well, I think it already does. Yeah, I don’t I don’t know if you can’t use alpha transes with that either. I don’t think. All right. Okay, border bottom two pixel solid bar. And then this was shade. Yeah, that’s way too light. Shade dark. All right, say if let’s take a look. We’re going to need to fine tune this probably with some manual. You can see it, but it’s not it doesn’t match their design. So we’re going to have to do some manual fine tuning there. Why don’t I just why is cheat and sample it because you know, we don’t have to force automatic to solve every problem.

0:37:31
The problem is I can’t well, actually, I just steal it from their existing site. So a it’s probably on the a. Maybe it’s on the li there we go. Yeah, so it’s showing like a slightly dark version of that. I guess the automatic generated are just too dark. So open account is going to be this color right here. Take the var away. And then. Yeah, this will be the only thing that uses hacks really. Grab that li. Grab that. Okay, that matches now. Let’s check it out. Yeah. Okay, all that works. Inspect. If not li right here. Okay. All right. So. Top menu log in button. Submen you. That’s sub menu. Okay. So that’s sub menu top menu log in. All right. Let’s go to primary. Top menu log in button. Top menu log in button. Sub menu. You. Background red. Let’s just see if that’s targeting. That’s not. Okay. Because I have to change the background color of this if you remember. Class sub menu. Oh, it’s in the it’s in the a of the item. That whole item and all of those items together. So it’s sub menu menu item. Sub menu menu item. A. There you go. Check that out. Okay. So now we just need the same as this, which is shade medium. I don’t even know if we need them. Porton on there. Yeah, we do. Perfect. Okay. That me worried. All right. So that’s perfect.

0:40:49
That’s perfect. I believe that how it looks on their site. And then we just need. Yeah. Like text underline. If we want to throw that little detail on there. Oh, whoa, whoa, whoa, whoa. Calm down. A hover. And we’ll go text. Decoration. Underline. Okay. Yay. That was. Whoo. Man. All right. Next. This header. We got to tame the header. My friends. 22 rim. Size and spacing. Max with 100%. All right. This we’re good at 992. We need to go to mobile. So main menu. Less than 992. Please break to mobile. So we end up with that. And I’m just going to say right now that I hate once again the default icons and such. So desktop. No, it’s mobile menu. Open icon layout. This is what is that called? It’s called a hamburger menu. But if you search hamburger, you don’t, you don’t get it. It’s like bars or something. Yeah. Something stupid. All right. And let’s go down to 992. Okay. There’s our bars. We’re going to get rid of the menu text. We’re going to get rid of the padding around the icon. Margin above below. Zero. Margin right. We don’t need any icon size. I think it’s fine. Icon color is going to be our base. Icon hover color is going to be base hover. Padding’s already set to zero. I don’t know why you can’t like it’s not possible to get rid of the look. It’s it’s showing is showing padding in there and is showing margin on the bottom.

0:42:58
Rem. Three. Four. Three. Okay. Padding color. What does that mean? Padding color. Well, you mean background color? Okay. Whatever. All right. Open icon layout typography. That doesn’t fix it either. All right. Menu styles. All right. Close icon layout. All right. I guess we’re fine there. Click this and you get this nonsense. I don’t even know what their mobile menu is supposed to do or look like. Okay. It’s a, wow. That’s awful, isn’t it? Mobile menu. Where is it? Menu style? Here we go. Off canvas. Off canvas width. 80. Left. Of course, I can’t like it’s not changing. Even if I do it the ID level doesn’t it. It’s probably going to change when I reload it. I also don’t think it’s really stacking them like that. I’m going to have to refresh the builder. My apologies. All right. We’re back. So yeah. The off canvas is working now and so are the, this is stacking correctly now. So we’re back in action. So now what I’m going to do is menu styles. So the link padding will do M’s for this. And I’ll do 1m. We’ll do that 0.6 on the top and 0.6 on the bottom. And for the typography, we’re going to go var text L. It should be pretty good.

0:45:33
The color, I don’t know if you can set it here. Yeah, I guess you can. I guess this is where you set it. Menu styles background color is going to be var. Let’s do primary. I like that a lot better. See, there’s link text color. So it’s different from the typography color clearly. Let’s take that out. Menu styles link text color var. And this is going to be primary ultra dark. What if I did primary dark? I don’t think I has quite enough contrast. Let’s do ultra dark. And link hover text color. I don’t think we need it. God, that is ugly, isn’t it? Okay. Off canvas animation fade right. How’s that look? Okay, if I didn’t fade at all, I actually probably want to slide right. Right. Let’s take a look at this on the front end and see what we’re getting here. I actually make it much larger with the text. That’s nice, right? These icons need to change at this point. That for sure needs to change. And I don’t even think they give you control over this. We might have to do all that manually. Okay, so I think we can I think we can stand that bigger text actually. Let’s open that up again. And we go back to typography, I suppose. Yeah. So that’s going to be Excel. Yeah, that’s much better. Okay. Let’s see if they give you control over this. So close icon like a close icon. No, many styles. Where am I? Mobile menu, mobile drop downs. Okay. Yes.

0:47:54
All right. So we’ll do var primary ultra light. Border top with zero. Oh, yeah, we don’t want to do that. Primary ultra dark trans 10. I don’t even know if we want to do that. And notice, I don’t have typography control over the like I can’t make this text smaller. And I also can’t add padding. Well, if I can’t add padding, then having a background color is ridiculous. So let’s get rid of that. Maybe we maybe we can use the border top at that point then. And I’m going to border bottom either include drop down links in response when you show in line toggle hide. Entire parent toggles drop down. Yes. I can’t change my icon color at this point either. All right. So we can we can denote it with a color change in the links then. So we’ll do var primary dark. And that should make them lighter. But it didn’t do anything to them. It’s it doesn’t care. Oh, that’s the border color. Well, in that case. Yeah, primary dark primary darks the way to go. I guess we’ll stick with solid. Why don’t I have control over the icon color here? Why don’t I have control over the link color here? Like I can do nonsense like put a background color with no padding. Why would anybody want to do that? But we’ll drop down. Yeah, there’s another guy can do here. Okay, off to CSS land we go. So this is called a. So this is a sub menu. And it’s in this oxy pro menu off canvas container. Okay, let’s just grab this all.

0:50:42
All right, so this will give us some control here. Style sheets digital gravy. All right, this is going to be mobile menu. Let me zoom this in so you guys can see what I’m doing. Mobile menu. It’s going to look all broken and fugly over there while we are zoomed in, but you should be all right. So font size is going to be var text L. Okay, pro menu. I’m going to talk us as children you. Okay, this links to go off camera has children you. L. Let’s grab this. Oh my god, wrap it, please. All right. Hey, all right, so text that goes to text L. Color goes to var. T. A var primary dark. There you go. And I’m going to get rid of that line now at the top. And then I actually want to do padding left. And we’re going to do var.

0:52:27
Space M. S. S. Yeah. And let’s do a border left. I think I can yeah, I think these all one pixel salt. Yeah. That might work well. Two pixel. Solid and var primary dark. Okay. And then when I get rid of the top one, that should all look pretty decent. What if it’s one? What if it’s dotted? What if it’s dashed? Dotted. Solid. Whatever. Okay.

0:53:22
Okay. All right, let’s do that real quick. Let me go back here. Zoom out. Back to here. Click it again. Please open it again. Thank you. Mobile drop downs. Zero. How’s that? Come on now. Like this. That’s pretty decent, right? Here to here.

0:53:47
You know, at least it shows some continuity and has some contrast to it. I think those links are a little big still. So we can go back to here. And we’ll just change that to M. Yeah. Yeah. I’m like that. Padding. Okay. So we’re going to have to do this. We already use padding once. Sorry. I’ll zoom in. All right.

0:54:22
So let’s take that. Take out the padding. We’re going to padding. So top is going to be 0.25M. Left is going to be space S. Right’s going to be zero. Bottom is going to be 0.25M. I’m sorry. That puts this on the right. Right is zero. Bottom is 0.25M. Left is space S. Save. We definitely don’t want to lose our work at this point. Okay.

0:54:57
Let’s check it out. So here’s our mobile menu. Let me zoom out because it’s breaking everything. Boom. Boom. Shazam. I’m liking it. I’m liking it. It’s much better. It’s much better. Okay. SVG. I’m going to just have to open a SVGA. All right. So we’re going to come back to here.

0:55:26
I’ll zoom back in for you. We’re going to go at media. All. Well, we’ll do screen and max with is 991 pixels. This would be min with actually. And then we do this. And then we do this. Let me just see if we’re targeting that. We’re not. Okay. Main menu. OxyPro menu drop down list has children. A SVG.

0:56:06
We can actually just do. We can simplify this a lot. SVG color red. Leave that on there until I can target this properly. Is it because I’m not set to view at the 991 breakpoint or breakpoint are we viewing at right now? Yeah. I’m less than 992. So that should be right. We zoom back in. Oh, there it is. No. It’s like changing in between me switching that. Okay.

0:57:00
Yeah. It’s not any of that. Min with 991 pixels. This is super annoying. I’m going to have to super annoying that I have to keep coming back out to this one. So I’m going to break this out. I don’t know what this is going to do to recording guys. I’m sorry. But I just want one to open that I can. Oh, okay. You can see both. All right. That’s cool. That works. All right.

0:57:40
Let’s just put this in and see what I get. Okay. So that’s targeting properly. It’s just not doing it inside the media. Oh, why am I doing Min with? Dude, I’m like. Deep breaths. Deep breaths. Deep breaths. Okay. I don’t know. Sometimes I don’t know. I don’t know what I’m doing. Yeah. Totally.

0:58:31
My brain was totally backwards there. All right. So we’re good. All right. Let’s not make those red though. So they’re gray. Maybe I did all this for nothing. Like, why were they gray in the first place? They should be base. Or really primary dark to match there. Watch. I’m going to go out and let me expand this again. Zoom out. Click back in here. Click in here.

0:59:09
Desktop menu. Desktop dropdowns. Drop down icon. Main menu. All right. Let’s go back here. Yeah. There you go. Oh, yeah. Yeah. Because these links were. Yeah. That’s correct. Actually, that’s correct. Save.

0:59:31
Okay. We did have to do all that. We didn’t do it for no reason. All right. We need to put those are a little too close together. Desktop dropdowns. Drop down icon. On icon margin left is going to be m.2. 5.2.5. Okay. 0.4. Save. Let’s take a look. That’s better. Okay.

1:00:11
Now, these should not be. Yeah. That needs to be dark. What happened there? And why is this off the screen? Like, let me refresh the builder yet again. Okay. We’re back. All right. So now I need to figure out our dropdowns here. Desktop dropdowns. Drop down colors. Link color. Varshade dark. Why don’t we just make these bakes?

1:00:43
Why are we using shade for this? I get it that it’s like in their landing page. It’s like this. I think it’s this gray color. It’s actually hard to tell. If we go to their regular set. No, that’s a base color. Did I do that yesterday? Did I put shade yesterday? I’m just going to do base. Var base. Okay. That fixes that. All right. So now we’re going to take a look at this.

1:01:15
Inspect li. All right. Border left. Five pixels solid. And then a box shadow. I’m going to steal that code. And we’re going to have a box. We’re going to have to target this inspect. So this is inside the submenu. It’s a submenu li. Minute style sheets. Digital gravy. OK. Don’t do any of that that I just tried to do. Menu item has children submenu.

1:02:09
Top menu log admittance submenu. And you want to make. OK. This is main menu submenu li. I think. Why is what I’m pasting blank? Inspect li. Copy, copy, copy. OK. So that does that. I don’t know. It’s not submenu li. It just submenu, I think. Yeah. OK.

1:02:48
And then the box shadow. Not actually doing anything. I’ll let you guys look at what I’m looking at here. Let me look at the front end. Is it because I maybe need important on this? Let me take a look. Yeah. But that’s that 90s box shadow. We don’t want that. I was trying to see what they were doing with. OK. OK. I must be missing a border top somewhere. I don’t have to make that. I don’t have to make a border that doesn’t go all the way across.

1:03:56
Unless I use a pseudo element on the submenu. So we do like submenu, main menu, submenu, main menu. Let’s do this position relative, which I don’t know if that’s going to break anything. I don’t think it will. Submenu. And we’re going to do before. And we’ll do with 40% content, height, five pixels, background, var, primary, change that as well. Look at that. I probably do need to put a top on there. Top 0, left 0. But I think we already got it. I think we’re working. There it is.

1:05:14
All right. The top needs to be. That’s weird. There’s like a little gap in that one. Oh, that one too. OK. So left minus five pixels. I don’t think that’s going to bring it off of. Let me see if that’s actually doing anything. It’s probably because it needs to be. Wow, that border. Oh, it’s zoomed in. It’s probably because I’m zoomed in. Zooming in has lots of unintended consequences. Yeah.

1:05:55
But if you look at theirs, I’m just like nitpicking now. It’s outside of the thing. So it actually needs to be top minus five pixels. And then I’ll just do 0.5 rim now to keep everything consistent. Now that I know what’s going on, left can actually be 0. And border left 0.5 rim. And then 0.1 rim. OK. We kind of fixed all those. 0.2 rim and 0.2 rim. OK. Safe. Everything good? Nice, nice. I can’t tell.

1:06:48
I think it’s fine. I think it’s good. I think it’s good. OK. I think that needs to be more than 40% though. If you look at theirs, no. It’s about. theirs is actually different depending on. Yeah. I think we’re fine. OK. What else? What else do we need to do? Clean this up. I bet that top bar is a freaking mess.

1:07:13
Yeah. If you look at theirs, their top bar right here, I was looking at this earlier. So their phone number disappears, which means they don’t need a phone number. And I think that’s all we’re going to have to do to make ours fit everything. So let’s hop up there. And let’s look at where we’re at. So good there. Good there. Good, not good there. And in fact, I have no idea what just happened between those two jumps. So oh, it’s because this is going to be a header builder issue. It’s because those two columns are over here.

1:07:53
And I can’t target them or do anything I don’t think. So if I bring this down to here, except they’re not there in the real version, they do collapse. It’s I guess they just don’t collapse in the builder. So this text link at 7.68, I’m going to hide. And I’m just going to see how that behaves in real life. We actually need to get rid of that border that we had, too. But that’s all going to fit. It looks like OK. It was here. So layout, no. Order, left, zero, none. Yeah. And then the spacing here, padding left, can go to zero. I think we’re all right.

1:08:58
So now as this comes down, we’re good. We’re good. OK. So next step is we need to get that graphic in. And we need to start doing the process of, oh, I got to fix this down here. All right, let’s check that real quick. So let’s come all the way down. So 992, that’s actually OK. At 7.68, it’s not. And I bet it’s just because this is not allowing this to break. Yeah, allow multi line. And then I’ll come back down and it’s going to do that. 7.68, it’s there. And at this point, I can just vertical it, center it, size and spacing it, max with 100%. I don’t know.

1:09:57
I don’t know what’s going on with that. So here we are. Oh, did I hit vertical? It need to be center here. And then at this point, I can take out my brain, I’m doing some stupid stuff today. So the after, I wonder if I should take away the after at this point. And you know, those items are going to be, it’s going to get the items too close together, warning clickable items too close together in Google. So we’re going to need to space these out a little bit more too. I’m going to get rid of the after. So we’re going to go lay out none on the after. That’s going to get rid of that little divider thing that was between them. And then I’m going to add a little bit more padding here. So 0.25 top and bottom. M, M, please, M, which is doing absolutely nothing.

1:11:00
I’m in the after. That doesn’t help. So let’s go back to the original. M and M, 0.25, 0.25. That’ll space those out. I think we’re good. We actually probably shouldn’t do that in padding because those are technically still the item. So I’ll do margin 0.25, 0.25. Now they’re legitimately away from each other. I believe padding now can go to 0. We’ll just use margin all around. But left and right will do like a decent like one. That’s better. Let’s see what that looks like at the very bottom. Yeah, I’m good with that.

1:12:00
Okay. I think we’re done. It’s really a matter at this point of the next step in this process. We’ll be checking site speed optimization or doing some site speed optimization. I’m going to go ahead and we got left. Let’s look for small little details that we might have missed before we dip out here. We don’t have the magnifying glass, but again, they said non functional. I’m not just going to throw it in for shits and giggles. You know what? We need to do alt. I didn’t really do alt because when I replaced the image, it’s going to clear the alt tags anyway. I guess when we do the final pass on images, we’ll do the alt at that point. We do need the little dots there. So I’m going to do that real quick, but I want to check site speed. I don’t see any other little details that we might be missing.

1:13:06
I don’t think we… Oh, yeah, yeah, we are right there. Look, before we jump out of here, we need these lines. All right, so we need to add the lines above these things right here. Then we also need to make this modular. We need to add the text section to the oxygen library so that it can be added in pieces. The next part in the series, which should be the final part, is going to be modular, make it modular, and speed optimization. I’m going to add this little line right here, which is super easy. I’m going to do what was this footer. This is going to be called link column. Then I’m going to add that to this as well, footer, double underscore, link column. Then I’m just going to type in link column, and it should come up. Link column, there it is. All right, so the challenge here is, yeah, so those three align with the logo up top.

1:14:06
So we’re going to go size and spacing, padding, M2, 1. Yeah, we’ll do one to start out with, border top, RIM. 2 solid, and we’ll do var primary. They have it is like this one is yellow, but these two are gray. I don’t know why that one’s yellow. I don’t think it needs to be yellow. I think that’s a little confusing. So I do like maybe doing it that gray color that’s of the links though, so like base medium, or not base medium, shade medium. So there we go, that’s much better. And I could actually do a hover on it. So we can do hover. So when people are interacting with this column, that’ll turn yellow. How about that? Will that make everyone happy?

1:15:02
RIM.2, actually we don’t even need to do any of that, just do var primary. It should just pick up the styling, yeah. So now there they are, and when you’re interacting with this column, it’ll be yellow. I think that works. That’s kind of, that’s good. Should we transition that? So do a little effects transition. 0.3 seconds, timing function. That’s going to just say it’s default, no delay. And then I think I got to do that here to 0.3. All. Let’s see. Yeah, that’s sexy, isn’t it? All right. Cool.

1:16:06
All right, next in the series is speed optimization and make it modular. Oh, let’s do a speed check real quick. Let’s just see where we’re at. How far off are we from where we need to be? So I’m going to go into a private window, Google page, speed insights. Enter. Now there’s no caching turned on at the moment and no optimization yet. No caching, no optimization. 86 on mobile. Not bad. Eliminate render blocking resources. So a lot of this is going to get cleaned up in, yeah. A lot of this is going to get cleaned up in the speed optimization. Reduce initial server response time. That’s probably, yeah, I think, I think we’re easily going to get into the 90s here.

1:17:06
I think we can get this to 98. Desktop’s already a 99. On mobile, I think we can get this to 98. So speed optimization and make it modular. That’s next.