[FULL BUILD] Lightspeed Part 1

0:00:00
What’s up everybody, welcome to a full site build inside of the inner circle. I’m about to give you the project overview, show you what the goal is. Now I got this project from the Oxygen community. So somebody had posted in the Facebook group, I ended up messaging them, had a little back and forth discussion. It was a very easy sell. This is basically a project test. They want to know they’re testing three separate platforms for their company. One of them is Oxygen and WordPress and then two other different systems because what they’re trying to accomplish is having a landing page kind of system where they can add, let’s say, sections from a library. So if you think about the Oxygen library, there’d be all these saved sections pre-designed. But people on their team can go in and add and like, basically assemble a landing page and then just change the text, change the images and publish. And they want to make sure that the system is easy to use.

0:01:01
They want to make sure that it’s well coded and that it’s very fast in terms of loading times and passing core web vitals and things like that. So they’re basically in a test period where they’re going to have my agency develop the Oxygen version of this system, really just the landing page and they’re going to test the modular kind of functionality. And then they have two other developers internally developing on two other platforms and they’re going to compare the three platforms. And here’s the fun part. And the reason why I was really interested in taking this project on, if the Oxygen version wins, which the person who hired us is leaning towards Oxygen already, which is a plus. So if the Oxygen version wins, then I get to read, I get to do their entire site. And it’s a really good, it’s looking like a really good project. So I was excited to say, yeah, sure, I’ll do the test project for you, 500 bucks. Let’s go ahead and get that developed.

0:02:04
Let’s see if you guys like it. Let’s see how it performs against the other two systems because my hope is that they’re going to like it. They’re going to want to go with Oxygen and then they’re going to give me the rest of their site as a full site rebuild. Okay. So that’s kind of the overview. Let’s jump in and take a look at the actual landing page and then we’re going to get started on development today. All right. So I’m going to hop into XD here. This is the XD link that they sent me. And this is the landing page. It’s fairly simple. There’s not a lot of intricate design.

0:02:36
So we’ve got two header rows up here. We’ve got main hero section. We’ve got this little four icon columns. Here’s another kind of call out section, testimonials. This is going to have to be a carousel. We’ll use oxy extras for that. I talked to them about kind of doing custom post type for these versus just doing them manually. I’m still not sure yet. Basically they’re saying that they don’t want people on their team to have to know HTML or CSS or really much coding at all. They just wanted to be kind of point and click. And this is tough with this carousel because like if it’s point and click, they are going to have to use the structure panel to kind of navigate from testimonials to testimonials to edit each one. If we do a custom post type, somebody’s at some point is going to have to tell the repeater which ones to query.

0:03:33
Now we could do some sort of randomized testimonial. I’m going to have to ask them if those testimonials have to map to specific landing pages or if they just want to show five random testimonials there and they want to be able to add new ones easily all the time. I don’t know. That one we’re going to have to explore a little bit further. Then we’ve got a call to action at the bottom. Super simple. Then we’ve got this footer. I looked at this landing page. We’re going to have to save each of these sections to the oxygen libraries so that they can be added separately, drag and drop, move around. I was thinking to myself, hey, if they go for $500 on this, I think it’s going to be good for me, good for them as a test. I have the opportunity to potentially get their entire website, which if we go to lightspeed.com, this would be the website that they’re wanting to rebuild.

0:04:27
You can see there’s a bunch of pages. It’s a pretty good sized site. I think based on the type of company that they are, there’s going to be a lot of SEO opportunity, potentially. This could be a very big project. I have no problem starting with a little test. Let them test the three different platforms that they’re interested in. Hopefully they choose oxygen. Hopefully we end up getting this project and we can go from there. That’s the overview. I’m going to close this. To give you guys an update of where we’re at, I’ve got a dev site built. I just cloned my blueprint basically. We’re starting with a blank page. We’re going to build this entire thing from scratch.

0:05:08
We’re going to go ahead and get started. It’s got automatic.css already loaded into it. Let’s rock and roll. I’m going to start by going to the primary template and editing that. While that opens, while that builder opens, I’ll show you what they’re thinking. They’ve got all of these kind of sections designed. I don’t have to do all of these yet. These are just going to be for the future. These are kind of what they’re thinking in terms of being in the library. Imagine these being in the library. Someone comes along and is like, I want that section. They can add that to the page and then they can add this section to the page. They can drag and drop them, change the content, all of that. I think this is going to be fairly straightforward. If we can get this oxygen builder to load, I also want to make this a little bit bigger.

0:05:58
All right, we’re ready to rock and roll. The first thing I’m going to do is add a header builder to this page. It’s going to need two rows. I’m also going to add a section. This is going to be the footer. I’m going to add another section right below. That is, if you look down here, there’s this footer and then there’s this little privacy area. That’s going to be an aside, I think, that would be the best tag for that. We’ll do, okay, so use custom tag aside, something like that. All right, then this is going to be the footer, which we’ve already done. That’s the header. Awesome. I’m going to open the structure panel and there’s already an inner content here, so I’m just going to drag it right there in the middle.

0:06:48
All right, so perfect. Now, I’ve got the two colors loaded in, but what I noticed is they’ve got this gray color, which I don’t think I can use, can I use hoverify? Yeah, I can. Cool. That’s just a 3333. I might do that as their accent. They don’t really have an accent color. They don’t really have a secondary color either. They have the base, which is this bluish dark color, and then they have the yellow, which is their primary, and then they do have this orange. That might actually be their accent. I don’t know. I don’t even think I put that in yet. So I’m going to steal that color as well.

0:07:29
Let’s just go to color eyedrop or pick color, see if we can get on that orange there. Yeah, that’s good. Oh, okay. Sorry, I’m not used to hoverify yet. I think this is the one I just did. Perfect. All right, we’re going to make this their accent. This is 3259. I’m going to go over to vars, accent, 32, 159. Cool. Now, what I would ideally do if I had the automatic.css plugin, which doesn’t exist yet, is I would probably just make a second base color. Like it’d be like base alt or something, and I would make it that 3333. I’m wondering if the shades are going to, let me try something real quick. Let’s just, let’s add a div.

0:08:25
And then let’s go to vars. Actually, it would be in main. All right, so look that are here. Like trans shade, shade medium, shade dark. I wonder how close that like shade dark or shade ultra dark is. So let’s do bg shade ultra dark first. That’s looking, it’s probably going to be a little too much. All right, so let’s do bg shade dark. Okay. And let’s grab hoverify and see what that calculates out to. So color eye driver, pick color. Oh dude, it’s like so close. It’s way close enough. So that’s going to be 323332. All right, let’s get out of this.

0:09:09
hoverify. Thank you. Your job is done here. Thank you. Your job is done here. Thank you. Oh gosh. All right, it’s already been a long day. I’m starting this at like 3pm. This is not good. Okay, so that’s going to work out. So this is our footer. All right, and we’re just going to do bg shade dark. Bam. And that’s actually not our footer.

0:09:36
Okay. Footers above that. So, oh good, that’s going to be the ultra dark version. Perfect. All right, so we’ll just change that right quick. So we’re going to do this as shade ultra dark. And this is going to be shade dark. Perfect. That’s going to look just fine. Okay. All right, let’s do pad section XS on this to bring it way down. And then I think they’ve just got this like, oh, that’s the wrong one. I actually don’t even need these right now. So let’s close that. That’s useless as well.

0:10:08
They’ve just got this like, and I’m actually going to center that for them. That design is all broken. So it’s going to be these few links down here and then text. Perfect. So we’ll just do text for now. And then we will do that as well. And then let’s do text shade medium on this. Where’s my text? Oh, I don’t have my shades for text, do I? All right, let’s just do text white for right now. Okay. I’m going to come back and let’s actually make a note. I need my text shades. Let’s go to automatic CSS, website, no, not website, framework, add tweaks and fixes. Okay.

0:10:59
Text shades. Add this to do. Okay. And we’re back. All right. So we’re going to fix that up. All right. We need three. We need four columns. I really don’t think that column needs to be wider than these, like it’s shown here. I think three even columns and a fourth large column. So we might get away with five columns, span this one too. Let’s at least start there and try that. So I’m going to go with div and we’re going to go with columns. No.

0:11:31
See, I’m still an oxygen engine mode. We’re going to go grid five and then we’re going to add four divs. One, two, three, four, this one is going to be span, yeah, call span. And that’s going to be dose. Okay. Excellent, excellent, excellent. So that’s going to be their logo and then two buttons. And those are going to be outline buttons, which is going to be great because we just added outline buttons to automatic.css. But the first thing I want to do is the use kind of link columns. So we’re going to have a heading, we’re going to have a link. That’s all we need to add for right now. So I’m going to do a heading. We also need to put gaps in there. This is going to be h3.

0:12:17
Let me grab that whole container. That’s not a container. That’s a container. Let’s do gap, in to start with on here. And then what does that need to say? Light speed. All right. And then I’m going to add a link, text link. If you like this, how when you search for link and oxygen, text link isn’t an option. You have to type in text and then choose text link. All right. Enough complaining. Why light speed? Okay. Cool.

0:12:51
All right. So this obviously is going to get a class. This is going to be footer heading. Let’s do footer, double underscore heading. Okay. And we are going to make that var shade white. Awesome. We’re also going to add some margin to the bottom of this. Let’s go with var space m, s, s will do. Okay. Perfect. And then this is going to be footer link. Save. All right. We’re also going to need to make that.

0:13:29
And I get my tech shades going, we’ll get that all straightened out. And I’m not, well, I mean, I could duplicate them all and I’m going to have somebody else come, well, no, I’m not. I’m going to do this all for you guys by myself. We know how from the team. So I guess I will at some point go and type all those things in. They said that another stuff needs to go anywhere. It doesn’t need to be a functional navigation. Same with up here. We don’t actually have to build a drop down nav or anything like that. I probably will do the nav just so they can see how it will behave and just so you guys get to see me build it. But the links don’t actually have to go to any pages. All right. So we’ve got that going.

0:14:11
And they couldn’t give me a dev link for this landing page. So I can’t actually copy. That’s another thing that’s slowing me down. So I’m actually going to have to go and type all this stuff out, which is annoying. The other links that gave me your dev links, but this one is not. All right, let’s move up to the, well, why don’t we just finish off this? We’ll do the lights be logo and the two buttons. Let me go in and see if they have put in their assets, okay, modules. All right. Docs and files branding. Okay, let’s download that. And let’s go to downloads, put it in there. That’s a PNG. All right. I really like working with SVGs, but alas.

0:15:00
They can give me one. So, all right. Let’s drop that in. Mm. That is not going to work. They’re going to need to give me the white version of that. That’ll go up in the header. Why don’t we copy that real quick? Delete. At least throw that up into the header builder. All right. Where’s my structure panel? So we’ve got header row one. We’re going to need to add a header row. So I’m going to go to the header builder and click add another row.

0:15:30
I’m going to name this the top header. And then this is going to be the main header, okay. And we’re going to throw that logo into the main header. Thank you, Oxygen, for not throwing that into the main header. All right. Let’s put it in there. Perfect. And we’ll just give this a class of logo. We’ll do header logo. It’s like that. And Rem, how about 20? All right. Let’s see how big it is on here. Yeah. It’s going to need to be a bit bigger.

0:16:06
28. Let’s just do 30. All right. It’s good for now. All right. So on this header builder, we’re just going to go into spacing. And a bunch of people have asked me about this. You know, they’re like, well, there’s no padding inside the header builder. And I mean, you can see from the reason I didn’t do it is, obviously, this header row in this header row have different padding. Not by much, but most headers, it depends on the design. I don’t think, to me, it really doesn’t help to have the default spacing in the header. You just go to padding and just add it here with a hook. So var, and we’ll do space. Let’s try M first.

0:16:47
And then let’s do that on the bottom as well. And then see up here, we can do var space S. So that they’re a little bit different. Var space S and var space S. Cool. All right. That works. And then what we’ll do is a menu, pro menu. Thank you. And it put that in the middle. I’m going to actually drag that over to the right-hand side, I think. All right. We’re going to need this little search icon, which, again, it doesn’t really need to be functional. We’ll get to all that later.

0:17:22
All right. Let’s do the top. So we’re going to need a button, a button, a button. These two buttons are joined together. And then a phone number with a spacer in there. OK. All right. So let’s start by adding. I just like to add my components. Like, one, two, three buttons and a text link. So up here, we will go button. And bang, bang, bang. So there’s my three buttons. Let’s go up to the top. Let’s drag these over.

0:17:55
One, two, the drag and drop does work a lot. Well, that didn’t work, did it? Oh, yeah, that’s it. The drag and drop does work a lot better in 3.9 alpha. All right. So let’s do text link again. And that’s going to be also in there, most likely. And that is going to be 1-800-577. I have terrible short term memory. 1-800-577. And then it’s going to be 3123. Cool. And this is going to be header phone. This is going to be header open account. And then we will do header open account button.

0:18:44
Should we do button? Header open account button? Yeah. All right. On this one, header login button. And on this one, we’re going to do header demo button. All right. Now, the thing is, I don’t know what these drop downs are supposed to do. Oh, there you go. OK. So we can actually do this for them. We’re going to have to make this hover, though, because the one in oxygen by default is on click, not on hover. What I might also do is just, it’s tempting to also just make that another menu, because that’s going to make that drop down real easy.

0:19:41
Roll easy. I might do that. Screw this. All right. So delete, delete. This other button is fine. Let’s try a demo button. So that is the, come on, oxygen. Can I have my spacing back, please? Undo. Thank you. OK. Head or demo button. All right. Let’s style that up real quick.

0:20:05
So that’s going to be try a demo. They’ve got this other color in here, all of a sudden. Because that light blue, that’s going to be their secondary color. I think I saw that in here. Branding, branding guidelines. All right. Download. Let’s open that up real quick. This is why I was charge a base fee for websites, because just getting all this stuff set up in the beginning is a pain in the ass. Colorverse. Is it that color? Galilee.

0:20:51
Come on. Where are the colors? Colors, colors, colors. OK. I think it’s that color right there. But look, their branding agency didn’t give actual hex codes for these. And I can’t use hoverify. It won’t let me pick color, because this is a PDF. I’m going to just pull that into Photoshop real quick. And we’ll just sample it in Photoshop. It’s probably the easiest way to do it. These are not even these CMYKs, or I’ll just on repeat. So that’s helpful.

0:21:34
All right. Gotcha. Gotcha. All right. This is what happens when it’s late in the day. All right. Let’s put that there. OK. 214.34.69. 214.34.69. 214.34.69. 214.34.69. Is that correct? 214.34.69. Yeah.

0:22:05
OK. So that’s my secondary. So now let’s go to our button. Button secondary. Let’s look at it. Does it look the same? It’s kind of like a light blue. Kind of like a light blue. Kind of like a light blue. Kind of like a light blue. It looks the same to me. All right. Champ. Let’s move on. This is going to be a button.

0:22:31
XS. OK. Maybe not. We might just style this one manually. So let’s go back to header demo button. Yeah. Let’s just, since this is a class anyway, header demo button background is going to be var secondary. And then is that of a border on it now? Yeah. Of course it does. Because oxygen loves to put borders on buttons by defaults. OK. Can’t type. Secondary.

0:23:06
Wow. The lag is for real. I’ve noticed this when you’re typing variables into specifically into the color field of borders, it really like bogs down. All right. So that is that. OK. That works. All right. So this is also going to be typography uppercase. It’s also going to be font weight like 800. And then we just have to go line height like 1.1 on that. And then I think we’re just barely rounding the corners.

0:23:39
All right. So we’re going to do borders. And we’ll do rim 0.25, something in there. I like it. OK. That looks super close. Mine’s got a little bit more padding. But I mean mine looks better. But assuming they don’t want that much padding, let’s change this to M. We’ll do 0.25 all around and see. All right. And they do have actually this pop out effect. It’s like 3D kind of effect on here. And I think that’s done with a box shadow. I definitely want more left and right padding on that.

0:24:22
Let’s try this box shadow thing real quick, effects box shadow. Shadow color will do a var secondary medium. That should be hopefully enough. And then we’ll go like to, let me think about this, horizontal offset. That might be minus 2. Vertical offset 2, shadow spread minus 2. This might be like 5. No, no, sorry. There’s no blur. All right, let’s try that. Let’s just do big numbers so I can actually see what the heck we’re doing. All right.

0:24:56
All right, we’re getting there. So, effects. I must never do this with box shadow. All right. So we don’t want any horizontal offset. I think we’re done. I think that’s it. Yeah, we might be a little much there. Box shadow, shadow spread minus 1. Ah, minus 5. 4, 3. All right, let’s save our work. OK, that was fun. All right, so now we need another menu up there. So I’m going to put cursor right there.

0:25:35
And we’re going to do another pro menu which you also can’t find by searching for menu. OK, perfect. All right, we’ll get that done. All right, save. I think what I’m going to do here is, all right, then we need to have that. All right. I see, I see, I see, I see, I see. OK. So I’m going to put these two actually like in a div. And that’s going to get super easy to space them out. I also need to make that background up there. This is going to be a BG. And that’s that just base color.

0:26:18
All right, I think putting this menu in a div, which I can’t wrap with div in 3.9 or shit, we’ll just start disappearing on me. We’ll put that pro menu in a div. And then that div is we’re going to do a header top menu wrapper. And then spacing. And let’s do none. Let’s do var space s for now. Let’s see what that looks like. Maybe go m on that, I don’t know. OK. And then the margin left, I’m actually going to just paste the same space s on. And then on the left side of that, so the border is going to be left.

0:27:08
And I’m just going to do one pixel solid. And then we’ll do var shade white. And then that is this alt font. So I’m going to go to typography. And I put condensed in there as their alternate font. And it’s also a talc for that. So we’re going to come down to font style, a talc. I’m also thinking that’s bolded a little bit. So we’ll do five. It really sucks not having a dev link for this. I don’t think I, that’s 700. OK, that’s probably correct. All right. And I think they’re a little overzealous with their spacing up here in the header.

0:27:58
This is big spacing. This is little spacing. It’s not super consistent. So we’ll just keep it the way we have it, which looks awful because of this menu. OK. So those are going to be open account log in. Let me go to the front end real quick. We’re going to make that top menu. Just so I can get that fuggliness out of our face. So I’m going to customize. We’re going to go to menus, create new menu, top menu. This is going to be open account and log in. I’m not going to make, I don’t want to make all these pages. Let’s do custom links.

0:28:40
All right. So this is going to be that open account, add, and then log in. And under open accounts, we’re going to need stocks and options, futures, download forms, stocks and options, futures, download forms, stocks, and options, futures, download forms. And then under open accounts, we stocks and options, futures. I guarantee this Dragon Drop is going to f up on me. It always does. I don’t know if you guys have had this happen. Maybe it won’t while you guys are watching. But it’s like 99% of the time that thing f’s up. And I can’t drag stuff to where I want to drag it. People say, oxygen’s Dragon Drop is bad. Well, let me tell you.

0:29:29
I got a front end builder named WordPress that I can show you. It’s not so great. Lightspeed client portal, futures client portal, eFutureCQG log in. All right. Lightspeed client portal, futures client portal, ah, man. Love tabs. All right. Lightspeed client portal, futures client portal. And what was that other one? eFuturesCQG log in. eFuturesCQG log in. OK. I have to double check everything because I am dyslexic.

0:30:18
So under log in is going to be that and that. I’m convinced I would be, people say that I’m fast. But I’m convinced I’d be much faster if I wasn’t dyslexic. All right. So I’m going to jump out of there. And unfortunately, super unfortunately, let me do this. Advanced typography font size, none. Var text s. I got real small, didn’t it? You know what? All that text really needs to probably be small. I don’t know. Well, we’ll tweak and adjust as we go. I have to reload the builder to be able to access that new menu that we just created.

0:31:14
I probably should have created the main one. Well, while that’s reloading, I’ll just create the main one. So trading brokerage services technology. So where did it go? Customize menus, main menu, custom links. Don’t do this. If you’re doing a real site, don’t do custom links. I’m just doing this because we don’t need a functional navigation. Trading brokerage services technology. And then we’re going to have pricing, new clients, resources. And then we’re going to have equity’s options futures. Misspelled that one. Missed fire. All right, equitites.

0:32:15
No, don’t do that. Sorry. Not safe for work. Where did it go? It is disappeared. Did I hit the x? Equities. All right. Yeah, we’re going to need to figure out where we’re putting all these. So the ones I just added, equities options futures go under trading. Trading trading trading. Equities options futures. All right, just hit publish on that for now so that we can save our work.

0:32:47
All right, next is account types, funding information, account types, funding information, and then trading something or other. Trading account requirements. All right, this is under brokerage services. OK, technology trading software, equities and options. Cali. All right. This isn’t going to be any faster, I don’t think. Trading software, maybe for that one it is. Futures trading platforms. I’m not going to do all these. They’ll get the gist, right? OK, that’s going to go under technology. I just want to show them what a menu is going to look like and function like and drop that.

0:33:47
That’s enough for now. Let’s not torture ourselves. OK, I want to close that. I want to close that. I want to close that for sure. I want to close that. And we’re back. OK, so now here I can choose. Top menu. And that’s going to get me that. And we’re going to call this. Hey, top menu. All right, so desktop menu, typography, needs to be white, var shade white. And what we need to do is put a class on those. First I want to get rid of that fugly icon.

0:34:31
Answer me this. I think I mentioned this in the other tutorial. Why would they put this fugly icon in here? Who’s going to use that icon? Why is that the default icon? All right, let’s go to desktop menu. I think it’s desktop drop downs, right? The name of the drop down box arrow drop down icon. Yes. And we’re going to go down. And we’re going to use this little carrot. And we’re going to make that carrot like three. No, I was way too big. Just you 1.2. Okay, that’s much better.

0:35:05
Icon margin, icon space zero. Rotation, open rotation. I don’t need to worry about that right now. That’s going to be var shade white as well. Okay, we’re going to go back, drop down colors. We’re not going to worry about right now. I want the spacing figured out. So desktop menu, spacing, item margin is going to be. Left center, right. I think we need that. What’s the system center? So item margin. If we look at this again, there’s actually going to be no margin between them. So that’s going to be set to zero. But there is going to be spacing in them.

0:35:44
So that’s going to be zero and zero. And then the padding is going to be, we’ll just do M’s for this. Because it’s so small. It’s like, let’s do 0.5, fly all. And then what we’re going to have to do is go to desktop menu, typography, line height, 1.1. And I think I’ve got the bones of what we need. So we’re going to hit save. We’re going to go to admin. We’re going to go to appearance menus. We’re going to go to screen options. First I want to select the top menu. screen options enable CSS classes. Come down here, open account, log in. And this CSS class is going to be top menu.

0:36:35
And this is going to be open account button, copy paste. This is going to be log in, button, and save menu. Okay. So we can go back to oxygen templates. So now I can basically make those links look like buttons by putting that custom class on it. You wouldn’t have needed to do that, obviously, except for the fact that they’re two separate colors. So it’s the easiest way to do that is just give each one a custom class in the WordPress menu system. And we’re going to be able to style them now. All right. If the builder ever loads, we’ll be able to style them. Oh, I don’t even, are these links in the, okay, those social icons aren’t in the landing page.

0:37:25
So we don’t need to worry about those. All right. So let’s go to style. Look, look, look how there’s two now. There’s two icons. How cute is that? That’s, that’s great. All right. So just make sure they’re not there on the front end. They’re not. All right. It’s just a little oxygen. Easter egg, I guess. So let’s do add style sheet. And we’re going to call this one digital gravy.

0:37:46
This is all of our custom stuff. All right. So paste. There’s that little class we had. Top menu, open account button. And this is going to be color var. Great. That is like tiny text. Var primary. Not back. Sorry. This is background. Okay. Is that correct? Open account is yellow.

0:38:09
Excellent. All right. We’re also going to do. Yeah. Okay. So let’s do font weight by 800 in there. It’s going to have a border radius. And we could hook into the radius system here. Let’s do var radius XS. And copy that. That’s top left. Zero. Zero. Var radius XS. So what that does, we go to our front end here.

0:38:58
Okay. You see that we have the, it’s no radius on the right hand side of the button, but you have the radius on the left. Because in the landing page here, you’re going to have to join these two buttons together. So that’s going to do that. Text transform. And that’s going to be uppercase. Perfect. Why did that? I don’t know what I just closed. Reopen closed tab. Oh, the brain guidelines. Okay. All right. We’re going to do the login button now, I think.

0:39:31
So let’s grab that. And that is login button. This background is going to be var shade medium. Shade light. Definitely medium. And it’s going to get all the same thing. So actually top menu. So really the text is the same. I just want to make this a little bit more efficient. Where’s my, okay. The text is styled the same. It’s just a background color that changes. And we’re going to need to add that little box shadow to it as well. Okay. All right.

0:40:23
Cool. So we’re going to do top menu, top menu button. Okay. Whatever. I’ll just for sake of time and because we’re not getting paid all that much on here, we’re going to do this. So I’m going to grab that. So now it’s zero on the top left. It’s var on the top right, bottom right is a var and bottom left is a zero. And so now if we go look at this on the front end, yeah, we’re basically there. We just don’t have our box shadow yet, which we will, we will get to. We do need to make sure that this drop down menu is tamed. So I’m going to save this. I’m going to come out of here. I’m going to grab our menu and we’re going to take a look at this now.

0:41:18
So desktop drop downs, drop down colors. Awesome. So we need to have two separate drop down colors. We’ll figure that out later. Okay. So right now we’re just going to do the primary. So the background color is going to be var primary. Perfect. The link color is going to be var shade white, that is correct and drop downs, child links, left align. That’s not working. I love it. I love it. Drop down icon. Yeah.

0:42:04
Well, that’s, I mean, that’s the only drop down child links. I mean, we might just style that with CSS and override or something. Like you love how you can do a color here, but then you go over to colors and you can do a color here and stuff. But this is like, so you have link. Yeah, there’s your link color. They really got to redo this. Okay. Desktop menu, desktop drop downs, child links, font size, var text, text, let’s do text text, that’s better. It might even be excess really. And then the font style is going to be text decoration. Text transform is none on this. Because if you look at theirs, yeah, it’s just normal. We got to change the weight on that too.

0:42:57
So that weight’s going to be 400. Yes. That’s, that’s pretty much perfect. Except the buttons are a lot smaller. We didn’t, we got to fix up that button text. So I’m going to go back to here and we’re going to do font size, var text, s, yeah. And we’re going to do that here as well. Wow. Okay. Save. Boom. We just got to get those left aligns. I don’t know why it’s not behaving right. I also don’t like that transition effect that’s got going on. So let’s go to drop downs, animation type.

0:43:45
Let’s just do fade box shadow, drop down icon, drop down colors, drop down child links. It should be, let’s do this. You know what I also probably on just here in general. There you go. That’s yeah, that’s yeah. Okay. We need a little bit more padding in those buttons. We’re a little tight, little tight on the padding. Item padding, two, one and one. See if that helps. Much better. That white on that yellow. Doesn’t really, oh, that’s that alternate font too. It looks like. Okay.

0:44:38
No problem. So we’re going to go to desktop menu, typography, font family, condensed. I’m just going to put a little solid, like a little bit of text shadow on there, which I don’t think I can through the menu. Let’s try it. Var base. Now, let’s just, let’s just make this easy. Black and bring it down. That’s not going to do anything. Oh, yeah, it is. Okay. But is it going to do it to every freaking link? Okay. We’ll figure that out later. I want to get a little bit of contrast.

0:45:23
That’s not going to pass a contrast test. I can tell you that right now. Okay. Why? Oh, yeah. It took the bold off because, see, if I make that 800, everything is going to, no, did it behave? Let’s check it. Oh, it’s not behaving. It’s completely ignoring. Okay. I want to go back in here to here and font weight. Helps if you code things, right? Still, still not, still not respecting what I’m asking it to do. Even though it isn’t the builder, it’s not on the front end.

0:46:14
Look at that. Oh, I know why. I know why. Smandage settings. Global styles fonts. Nope. Yeah, fonts. Condensed 700. 700 italic too. Okay. Safe. All right. Now I should be able to see. There we go. Now it’s bold.

0:46:40
Okay. We’re in business, guys. We’re in business. All right, let’s check out where we’re at so far. Feel like we’ve come a decent way, right? There’s our builder. There’s our preview. Here’s our landing page. So that top bar, if we look at that, we’re coming along pretty nicely. Remember, this is like zoomed in a lot too, right? Okay. Now we need to handle this right here. So let’s go into our builder. This is just going to be main menu. And we’re going to go desktop menu, hover and active, hover text, hover text, hover active, active, active, typography color.

0:47:32
It’s that like dark. It’s like that gray color. So we’ll do var, not base shade medium. No, it was shade dark that we were using. There we go. Okay. Font size is going to be var text s. It looks like it’s a little bit bigger. Let’s leave it at medium for now. I think it is the condensed though. Yeah. All right. And we’re going to do the same thing with our icon. So desktop menu. No, desktop drop down, drop down icon down.

0:48:15
Okay. Var shade medium size rim 1.2. That’s what I think we use. All right. And then this one, we can actually do margin between the items. So we’ll just start with M’s. I think that’s going to get the job done. It’s a bit much. All right. Let’s save this. It’s a bit lighter, which we can get away with just typography here. Or now we can’t. We can’t do opacity. I’ll come back and fix that later.

0:49:10
We’ll tidy things up. So desktop menu, desktop drop downs while we’re here. Oh nice. Got a little drop down. It’s got a little two box shadows going on. It looks like. So you’ve got that yellow box shadow. And then you’ve got a normal kind of box shadow. That’ll be fun. That’ll be interesting. All right. Right now we’re just going to do the white background and get to the. Now this is kind of bad UI in my opinion. Where these links are larger than the links up here.

0:49:40
I don’t know if we’re going to stick with that or what. All right. So let’s do drop down colors. Background color is going to be var, shade white, link color. It’s going to be the same var, shade medium. Do they hover? Hover background is the primary. Oh look, the light versions. Where those shades come in handy. Hover background color, var, primary. Let’s try ultra light. That might be too light. Yep. And we can’t do it on in the builder.

0:50:24
Can’t test it. Yeah. We’re going to have to do light for that. Save back to the front. That’s better. OK. All right. So now we will do some spacing. Child links, link padding. 0.6m and 0.6m font size. We will leave line height 1.1. See what we got. We’re going to take care of mobile menus later. That’s fine. It’s very close.

0:51:18
I typically like those menus to be a little bit wider. But let’s do that. All right. Save. OK. We can throw the normal box shadow on there for now. And then I’m going to come back later and do the fancy box shadow. Drop down. Box shadow. See what it looks like on the front end? It’s really hard to see because it’s especially when it’s on the dark on the door. But it’s there. I’ll make it a little more.

0:52:18
I don’t like the one they have. That’s super 90s box shadow. Dark and not soft enough. I’ll do this 25. That’s more prominent. All right. We’ll keep it like that. OK. All right. Good. Let’s see where we’re at here. How long have we been recording? Does this thing have a timer on it? Yeah. 55 minutes.

0:52:45
All right. I like to do it in our chunks kind of. Dang it. Zoom, zoom. Fix the zoom. All right. Yeah. I like to do it in like our chunks. So I think we’ve done. We’ve gotten a pretty good amount of stuff done. I’m going to just knock this out real quick. We’re going to stretch. Cool. Duplicate. Duplicate.

0:53:07
Duplicate. Duplicate. And then I’m going to put margins on the bottom of this. We’re just going to use M’s for this like 0.25. Let’s check theirs. Yeah. They’re fairly close together. These I can actually do, at least we can get away with, I think, just doing typography. VAR shade medium or let’s do. Whoops. Let’s just do this and then drop the opacity down. Because I don’t know. I can’t really sample that. But I think that’s pretty much what’s going on there. We’ll do 75.

0:54:00
All right. So I also can’t really see that font size, because we don’t have a dev link. But I’m going to go ahead and just make that text S. Let’s see here. Yeah. Look how small it is on there. I think we’re good. These are typography uppercase, none, VAR. These would be like text M probably. Yeah. That looks good. Why light speed about management team? Why light speed about management team? And contact us careers news shareable giving. Contact us careers news shareable giving.

0:55:07
OK. Those need hovers. And because I put a class on them, super easy to do. Typography, color, VAR, primary, hover. That’s going to be our hover color. Awesome. So if we go look at this on the front end, refresh. Thank you. There you go. Boom, boom, boom, all looking good. All right. So the next one is resources and then products and services. Perfect copy, paste, paste. OK.

0:55:48
This is going to be support futures trading tools. Futures trading tools. And there’s a couple other support futures trading tools. Active trading blog web partners. Customer feedback. All right. And then we’re going to do open account brokerage services, account types. And trading software risk management trade reporting. Perfect. All right. We’re going to throw that logo over here. Just even though it’s the wrong one, just to have something in that spot. Footer logo with is REM 2030.

0:57:09
We’ll do it the same. And then it’s actually smaller. Let’s do 20. Then we need those two outline buttons. We’ll do owl, M, and we’re going to go. There’s these need to be in a div because they’re side by side. And we’re just going to do a flex with a gap. Yeah. OK. So we’re going to go button, button, grab the wrapper, and then we’re going to go flex row. And then we’re going to go gap S. There’s your side by side buttons. And then if you want those to stack, we actually we got to figure out our mobile here real quick.

0:57:53
Let me do these outline buttons. So this is going to be, if I can remember what tab we’re in. So that’s just a white outline button. These are new classes. I don’t even have to memorize. So it’s like button. Let’s just do this. Outline button outline. Yeah. And then what is it? Button white. There we go. OK. And then button small. And probably going to need to make a custom button anyway.

0:58:29
Open an account, try a demo. OK. We’ll try this with classes first. This one is going to be why is that like an orange when this is a yellow? I’m not rocking a little bit with that. OK. I think in Vars, style sheets, Vars, I can’t I set like a default border radius on the buttons? Or my buttons, button, button radius 0.25 or M. Point. Well, those are different though, right? No, no, no, those are yes. That’s about right.

0:59:31
OK. I mean, that’s super clean. I feel like this is super fugly. Like they got like giant text and like no padding. This could have a little less padding. I think button padding is one of those things we were going to really talk about and maybe revamp. I’ve got it right here for 0.5 and then 1. That’s probably good. Save. Let’s check that out. These can be they don’t have to be small anymore then. It’s good enough. I’m rocking with that boom, boom. All right, let’s check out this stuff.

1:00:20
It looks on mobile. It’s going to look awful. So first, I know I need to put some mobile classes on this. So at at the L, let’s take a look at what it looks like at XL. XL is good. I don’t see any big issues at XL. At L, we definitely have issues. So this needs to go to, remember, it’s a five column grid. So at L, this needs to go to four columns. So let’s try that first. Let’s go grid L4. And then this one, we’re going to do grid. So call span L3. No, it’s got to go all the way to four. Call span L4.

1:01:24
This is where the dyslexia mad kicks in. I’m like, what are we doing here? OK. Everything’s like backwards and doing math and all right. So L4. No, we wanted L3. What was I thinking? So grid L3. There we go. Now this one spans three. I’m just going to do this and this. And that should be good. We can also add a little var space s on there. Just space that out a little bit more. All right.

1:02:02
So that kind of takes care of the L break point. Now we have this to deal with. So at this point, I’m going to just say we probably just need one column and just let everything stack. Let’s at least look at what that’s going to look like. So this is so grid M1. We need to remove this span now. So here is going to be call span M1. Boom. That’s going to make sure the grid’s not broken anymore. I’m thinking that’s the way to go. I don’t know if we should, at this point, go back to the left with that. I think we should. And then we should be good from there on out, unless these buttons collide, which they’re not.

1:03:01
But I’m going to stack them anyway. So this should be flex call s. That one works. OK. Good. All right. I’m pretty good with that. I’m pretty good with that. So now if we look at it on the front end, yeah. I don’t even know that that needs to be centered. In fact, it might look bad being centered. I think that needs to go back to the left. So that was at the L break point that we were doing that. Let’s take that off. Yeah.

1:03:46
Yeah. That’s much cleaner. I got much cleaner. What do you guys think? All right. Have I tortured myself enough today? Have you memory usage? Thank you. I mean, our primary template’s looking for an hour. Basically, it’s an hour of work. We’ve got most of the primary template structured done. It’s not we haven’t fixed everything on mobile, obviously, yet. But I feel like this first hour, we made really good progress. So I’m going to actually tackle what I like to do now is I like to give my brain a break from the primary template.

1:04:27
And I’m just going to go start working on the landing page, but that’ll be in the next episode. So make sure you’re subscribed. And you check in quite often. All right, guys. Peace.