Building a Luxury RV Resort Website in Oxygen Builder

[Music] [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] good morning everybody super stoked to see all of you guys in the chat things are already buzzing this morning which is super awesome hopefully all of you are doing well uh let me check my mic levels real quick here make sure all is well on my end looks like it is so super awesome to see all of you familiar faces in here heinrich elijah allen stratos vit simon so many people i love it this is really exciting so welcome again to another live stream oxygen build now this one is a client site so this is going to end up being a real site at some point in the near future however the mock-up we're working off of is not quite and shea welcome in super glad to see you john hi everybody uh so the mock-up we're going to be working from today is close but it's not quite perfect because this is a brand new business so a lot of the details of this mock-up and this this website are to be decided with a goal of going live in the beginning of may so we are basically going to get some structure on the site so that we can get the the you know website going and the property isn't even built yet it's not even completed so a lot of the stuff we're going to be doing is with with some stock photos and just kind of general information for now so this will be kind of an evolution so if you guys check back on this site in a few months and maybe we can do a video on it then we you know it would be kind of cool to see the evolution of this site so that's kind of the goal today now let me go ahead and switch over here to the mock-up so you guys can see this and let me make sure that it actually switched on the screen there it goes perfect um so i wanted to double check i'm switching to the proper things over here yeah so hello from greece looks like we got two people from greece which is awesome stratos and georgios hopefully i said your name right now what we're going to do is build this basically so this is done by the same designer that did uh the premise site from a few days ago so it probably feels pretty consistent although it's a completely different business completely different sort of feel for the site but principally this is a luxury rv resort that is nearby the beach not quite on the beach so this photo will end up changing but essentially the uh the motor coaches that go to this place look like that and they don't allow anything less than that um so i don't even know if that one's like up to date but in any case that is the idea here so we're going to be building this site one thing that i think is going to be super cool is trying to build this sidebar menu so i'm not exactly sure how we'll pull this off but i think it's going to be a lot like the pop up little tool tips that we did just a few days ago on the permaslug website those are really clean and i haven't found any issues with them so far they work on mobile they work nicely on desktop yeah elijah says totally yes basically these are people that are gonna drive for months and months at a time and go to different stops which sounds great but that is not my ideal kind of vehicle personally but then again i've never even stepped foot in one of those so i might not know what i'm talking about maybe it's absolutely amazing you're living in like a luxury hotel on wheels basically but in any case um hello from germany hi from florida that's where i am so ls hopefully if that's your name i'm just taking the first part of it uh nick says what's an rv that's a good question so an rv is a recreational vehicle it's like a class of vehicle and basically they look like that so there are plenty of smaller ones they get much much smaller than that but typically they're like self-propelled luxury hotels on wheels like i said so that's what we're going to be working on today um i'm going to try to move a little bit more quickly today for the sake of time uh so if you have questions i will try to pay attention to chat um i was going to mention there is the super chat function as well so a couple of you guys donated last time which was amazing and then we'll just kind of cruise through this uh so yeah elijah says can't imagine having a relaxing vacation while driving a tour bus i imagine it would be pretty difficult um because i drove one of those like 25 foot rvs um like you know it's basically like the ford chassis on the front end with like the stuff on the back and that thing was wobbling all over the road i did not enjoy that so hopefully those are better uh chris says there was an rv on top gear where they had space for a supercar in the bottom yeah yeah for sure the top gear rv episode is fantastic where they race them and crash them all i love that okay so one thing i wanted to cover real quick is the typical setup for me with a brand new website like this is i use cloudways as my host of course i have a video here on the channel if you're interested in checking it out in detail but essentially what i do is have a base wordpress install with oxygen and all of the typical plug-ins that i use that look like this so most of these on here are going to vary depending on your specific preferences but in my case i like everything that you see there and have had really good luck with it all over the years so these are already pre-installed they're already updated as best i can sometimes they do get a little bit out of date but i do like the um the you know portion of the uh i do like all this stuff here so anyway that's what i use on a typical install i have some basic pages set up of course we're going to change all this and then i don't oh there's there is a template created but i'm pretty sure this template is blank so we are really going to be starting from the very beginning here sorry let me mute my phone so that we don't get a bunch of buzzing in the microphone um so basically we're just going to go ahead and kick off with the um with the mock-up here so i'll get rid of cloudways and we'll stay here let's take a look at this mock-up real quick and let's kind of see how we're going to do this so one question i am unsure of which means that will probably change later is how we're going to um you know accommodate this header on the inner pages so we might end up doing something like we've done in other streams where we have you know a situation where the header just shrinks but in this case i kind of picture this to be full screen this says it's a height of 890 pixels so it's going to be pretty close to full screen on like a 1080p display so we're going to kind of play with that and then this header i think is going to be pretty sweet it'll basically be like one giant tool tip we're going to have it be essentially the full container height there um as far as this arrow you know i've actually struggled with making active links pop up um i think there's some javascript you can use and i might be able to steal it from somewhere but i probably won't worry about this arrow today the really interesting thing is this hover effect so we have this path and i'm not sure if i export that and then there's a way to make the path pop up or if you can do it maybe as like an svg or something so that will be potentially some details that we skip over for now the arrow and the little hover effect there but i think this is going to be fairly doable so we're going to have that and then of course this content will be pretty straightforward that will this stuff right here will be specific to the home page and then the company doesn't actually have a logo so we will need to basically just import this so i think we'll go ahead and get started by moving into um let's see what do i want to do squiggly underline is that a is that a built-in thing or am i able to do that i think what we'll probably do is start with the page content because it's going to be a lot more interesting i think to work on that header or excuse me this uh pop-up menu when we actually have page content so we have something to see there so let's go ahead and do that i think i'm going to need to export this photo right here although that rectangle is not what i want i don't think let me figure out where that image is is it this uh no where is that's the site logo i already have that so what happens if i export this rectangle is it going to bring out everything let me take a look uh no it's actually that photo with the uh kind of beach color so amazingly that water although this could be photoshopped um that water that you're looking at is not a gradient it's part of the water which i don't think this is this is this is nothing close to our part of florida but uh the beach is pretty similar so in any case we now have what we need to get started so let's take a look also at what font this is so prata is what this is called um line height of 64 size of 52 pixels and a weight of 400. so maybe i just didn't expand the typography last time but for whatever reason in the previous stream that we did the weights were all written in like bold and extra bold and stuff i like having the weights exactly similar because then of course it's super consistent so yeah let's go ahead and uh go to our pages and we're going to edit the home page directly although we need an inner content element in our template so we're going to have to go do that real quick elijah says squiggly underline is probably going to be an after element with a background image that repeats so you need a slice of the wave okay that is helpful so a problem for future jonathan uh so i'm gonna stick that enter content in our template so that we can actually edit our home page directly so now we'll switch back over to home and then we'll go from there so i have the image exported and it was 890 pixels high so i want to see how that behaves on mobile as well so that will be interesting also we have the page width here is 1440 pixels again kind of like last time so 1440. and oh well let's see yeah yeah yeah that's what i want is our page with that 1440 um the let's see what's up next so the fonts we had prata and then what was the other one this body font i think is oswald is it yeah it's oswald 300 which is actually pretty light um so we're going to potentially make that then a little bit uh let's see so what we can do is i actually i think we can go ahead and use a section in this case because last time on the premise lug website i was doing a div that was basically our padding on the left and right edges and then the inside div was the one that was restricted to 1440 pixels wide but in this case i don't know that we'll need to do that i think we can just restrict everything to a section and then in the case like this with the map we can just use a div because everything else i think should be pretty much exactly 1440. that says 726 but i don't think well maybe i'm just not measuring the right thing if i select these two elements does it give me the measurements here i mean it's exactly in line with this stuff um i just want to know what the space on the left and right edges is which i guess is going to vary based on screen size so i'm just going to go ahead and get started and we'll pop some stuff in here so we really don't have anything except some default stock photos that are uploaded to these sites so that i have something to play with so we're going to go ahead and stick this rectangle in i actually need to go ahead and rename some of this stuff so that i have uh you know something better than rectangle 3 1 there as you can tell so we'll select this and then for our height let's go ahead and define it as 890 but we're definitely going to have to change that and i'm going to get rid of the structure pane so we actually i'm going to leave that open i was going to say so we have extra space but we have plenty here and then we have just this stuff over here on kind of like the left really it looks like the left quarter of the page it's a pretty narrow box so this is um gosh i wish i could see how wide these containers were i guess you can if you just click the container there we go so it's 380 360 and that one's 360. so what we're going to do is add a div we are going to set this to 360 pixels wide and then we'll need to play with positioning a bit because right now this is completely over the water and then in the mock-up it's mostly over the water but slightly on that white edge of the sand so we'll just kind of leave this at the moment there was a way that i could copy the text without having to click in that field which i discovered which is pretty cool so this is going to be a heading element we'll pop that in there and then let's go ahead and create a class here so we're going to call this rv uh what do we want to name this i want to do something unlike what i did last time where i have kind of a base class for my headings so i'm going to go um rv heading trying to think here how do i want to do this i should have planned this out but this is what i would be doing on a real site kind of thinking about this and trying to use classes more intentionally so rv heading rv heading um i guess we'll go with h1 because that one's going to dictate the size and then what was this one it was 52 pixels and then it was white so let's go with rv heading white and then this one is going to have our font size of white what other specialties do we have on this so it's a weight of 400 which i think is already there style is normal doesn't look like there's anything else except maybe some letter spacing um i can't tell it just looks like it has a little bit more breathing room on that container there unless it's something to do no i guess that looks pretty close okay so that will work and now we need to figure out the margin beneath this which i imagine is going to be fairly consistent to our other design because it was the same designer as before so that one is 20 and then underneath our text block here to the button is 48 so i'll try to my best to remember that so our rv heading h1 i let's see i'm gonna go with rv margin uh let's see margin medium and then this is going to have a margin well let's see no i don't want margin medium i'm trying to think of a way to name this so that it is margin bottom i guess it's just going to be on the h1 class actually because we're going to need that for basically every single one so then we're going to do a text element we are going to copy all of this content and again all this stuff is pending for the most part in terms of it being real copy but we will probably keep a good bit of it so that to me doesn't look like i guess it is oswald no not default i want inherit there we go and then underneath this text element we had 48 pixels down to the button and this one's going to be kind of interesting so liam says i think your font weight is bold for the h1 might need to tone it down a bit okay yeah that might be what was kind of throwing me off you were right that was it so it must be that our h1 is inheriting that larger that heavier font weight there so there we go good call i appreciate that and then same thing i think this body font is actually 300 which is why it probably looked a little bit different so that will work for now we might end up playing with that just a little bit so our button here looks pretty good it has this nice white edge on it so i'm assuming that's just a border left of one if i can select that little rectangle where actually is it uh i guess i can't select that that's okay not really a big deal so we basically are going to make this button full width and then we have this arrow and book your state so this arrow i believe we can just pull in as an icon element so we're going to use a link wrapper here so we're going to pop in a link wrapper and this class we're going to call rv button we'll go with primary because i think almost everything is similar to that button then we are going to set the background color which i don't actually have yet as a global color to this guy and then he said arthur says hey jonathan switch on layout on the frame please it will help uh not sure what you mean let's see the layout on the frame i am happy to make whatever adjustments uh just not sure what you're talking about so switch on layout layout columns oh uh let's see is it view is that what you're talking about [Music] no rulers layout grids outlines i'm not i'm not super familiar with figma so i'm not exactly sure where to go click frame active first sorry not sure what i'm supposed to do here sorry arthur and on the right make the layout visible ah i don't know i'm not sure what you're talking about i'm sorry click on the main frame jonathan in figma oh are you talking this thing and then click on the main frame got it and then what the frame containing everything he means okay i got that so now we got the whole thing and then then what am i changing some sort of view it's not outlines is it oh gosh that is not what we meant to do all right so i got the main frame selected now what and on the right make layout visible um i don't know on the right you guys are probably like screaming at me i just don't quite understand where layout visible is and how that's gonna help me in styles inspector okay uh i wish somebody could just take control of my computer and just do what arthur's talking about i'm sorry let's see i'm i'm being patient here because i want to i want to get what you're talking about arthur so in styles inspector isn't that is that not what i meant the inspect tab right here make layout visible i see nothing with the word layout or like lines or anything pixel preview layout grids rulers outlines we already turned on outlines and that's what made it that like awful um inverted cube you have view only oh okay okay gotcha so something is missing that i don't have that makes sense i was like i it didn't feel quite right like there's clearly something that is missing here yeah no worries at all i am going to go back to this button here and we'll uh jump back into this so let's take a look at the button there's 48 pixels on the left and right and then there's 17 on the top and bottom so just to be consistent we're going to do exactly what it says i don't want to deviate from the designs too much and then i also forgot to to grab the green for the actual hex color itself so we need to set that background color oh not 100 i don't need that and then we're going to use the rv green and then we are going to set this um actually i don't think we're going to set a width on the class itself so we're going to go rv button primary full width like that and then i'm going to set this to 100 because in the our layout it has the full width like that and then i'm going to go add a left border that's just white with one pixel looks like my figma mockup is refreshing in the background so i might have more options here there we go i see what you're talking about now arthur so we have layout grid i gotcha okay sweet thank you i appreciate that so that's gonna help quite a bit that's perfect sweet so is that what you were talking about arthur this is what you were asking me to turn on was the layout grid so it looks like it's 60 pixels so you could essentially just count each column right because if each column is 60 pixels then you'll know roughly how wide something is so like 1 120 oh i guess that's not quite it because you have to account for the gap but in any case that is very helpful indeed so i'll turn that back on and off as needed i wonder if there's a shortcut for that is there a way for me to toggle oh i accidentally grabbed this somehow that's not what i meant to do okay so back over to this button real quick that's the one you were missing the design tab in the top right okay yeah that makes sense now i understand cool so um this arrow like i mentioned i do believe we can just use the typical icon element and then we'll look for an arrow right i think it's going to be linear icon instead of the font awesome because the linear icon one is a lot cleaner so that one is going to be white and then i'm sure the icon size is way smaller right here it says 24 by 18. so we will go with oops that is the wrong zoom not what i meant to do we'll go with 24 and then before we were using eight pixels of margin on the right side click on the four square dots if you want to increase column gap in the grid so if i go back to the main frame then i can play with that a bit cool i'm learning more about figma i like it yeah okay so you can change the column count the color highlighting positioning width all that kind of stuff cool sweet the grid icon on the left yeah perfect okay so now we have this text here which is a font size of 16 and then we just have a regular font weight so i don't think we're going to need to change it and actually i meant to double check what the spacing was between these it's actually 16 so i'm glad i looked at that i probably would have assumed that in just a little bit once i realized that it wasn't exactly the color and the size that i needed sean says i signed up for figma always thought it was software for mac today i discovered it's web based yeah you can use it with basically anything that's what's so cool about it i actually really really like it i'm going to go back to our full width class here and let's see rv button primary is our base class so i'm going to set the typography on that class here to white because that green background is going to be white pretty much all the time then we're going to want this to be horizontal layout and why didn't it adjust is it because this text is too long book oh yeah that's why book your stay is the text there and then it is our other font it's not oswald it's prada and then the font size was 16 which i believe is what our base font is set to and it looks like we have a bit of line height that's pushing our text up above the arrow so if we just change that to one or maybe it's that the icon is too big [Music] there's a bit of margin underneath it it looks like for whatever reason is it that icon yeah there's something pushing this up obviously i don't want line height of zero for some reason it's just ever so slightly off do i have to be like i don't i you guys are going to judge me hard for what i'm about to do but forgive me just because i want to see yeah it's off by about four pixels but why would that be does the icon have a line height no i didn't think so that is kind of annoying do i have to go negative margin on this negative four i guess that's what i'm gonna have to do we were talking about this last time but elijah got me on the figma train because it's just so good now this button definitely has a lot less space on the right side here or well it doesn't kind of seems like it just seems like this font is bigger i guess it's letter spacing that's what it is so isn't it it doesn't look like it here in the design but it almost certainly looks like there is some letter spacing so i'm going to go ahead and do that looks like it's even more actually is it too even more maybe is it three if if you're still here arthur uh please give me any feedback because i don't want to i don't want to do things incorrectly here now i probably should have changed this text to be on a class because we did make some adjustments here to make this line up so i think what i'm going to do is take this rv button primary and i'm going to add a class to our text there oh it's 36 percent oh oh okay i was looking at this for some reason that's line height um letter spacing is 36. i wonder if i can google that 30 36 letter space spacing to pixels so we need to convert tracking to pixels tracking value of 1000 is equal to 1 em in css so your case tracking 100 should be 0.1 em that okay em yeah that's exactly what i'm looking for elijah is stack overflow it says how to calculate css letter spacing versus tracking in typography so let's see 100 tracking case tracking 100 would be equal to 0.1 em yeah that's what i'm i i think you're right i think it's four pixels and then it's done we can sit there and mess with it all day long but none of us have any interest or time in that so now what i want to do is rv button primary text is what i'm going to call this class and i'm going to copy everything that we just did from the id to that class because we're going to be using this button a lot and so i don't want to have to restyle everything if we decide to make some adjustments later so that button is looking pretty solid it's pretty much identical to the uh button here i would think the only thing i don't know is how to show a hover state so if there is like an intended hover state here what that is one thing that i kind of pictured was that button or that border on the left edge kind of gets thicker um so we'll we'll just leave that as is for now so we can actually see this a little bit i'm going to go back to the main frame and turn off these grid lines so we're going to mess with the menu in a little bit we're going to go down here to some of this stuff now these are actually going to end up changing to some of the amenities around the facility so these are just good placeholders for the moment but we are going to end up swapping those and some of them will be close like some of the activities like boating and fishing restaurants stuff like that so in fact i could realistically just change this to restaurants and it would be uh more applicable which is fine so let's see where did oh export's down here now there was a tab for it when i was in read-only mode but we're gonna go ahead and just export these in fact i think i can select all of them and in my export tab if i export three layers does it give me the individuals it does yeah it zips it which i guess is okay makes it a tad easier but i could probably for something like that with just a few items go with those four all in the like one at a time and it would be reasonably quick enough so these look to be roughly 255 pixels wide so what we're going to do is add ourselves a new section in here open my structure pane so you guys can see what's going on and then let's go with a div inside of this although i just remembered we do have some default padding on the left and right edges of our section so we might need to adjust that to make it consistent with our designs but we'll come back to that and then i've been really enjoying using grid for pretty much everything so that's what i'm going to do that's what i want to do so i'm going to change our grid here to a column count of four and then we're going to add in four divs but before i clone this one i want to go ahead and give this a class to make it really easy to adjust so ps i actually saw a ps i'm going crazy here wrong site rv um what do we want to call this home actually i don't know we might not need a whole lot of styling here because it doesn't look like there's much padding inside of the divs which is what i was kind of assuming because right here it lines up with the left edge of that photo and then our gap here is really going to be down to the um the grid gap so in this case let's just go ahead and add in some of this content so there's 24 pixels there and then there's eight underneath the heading so i'm going to actually ignore that class for the moment we might regret that but that's okay we can fix that so we'll upload some of our photos here so we have those three and then we also need one more which is our restaurant so the restaurant one is the first one we're going to use so i already forgot 20 is it 24 pixels um and then we had a heading so this one i'm gonna have to change these heading tags eventually but this one is going to be h2 now looking back over here i guess i kind of oh i don't know if you guys just heard my my stomach she's rumbling um let's see here so i guess the sizes are going to be different i was thinking that it was a mistake to name this class with an h1 but that actually is our h1 it has a different font size and a different font weight than this so this one is much smaller maybe this is even actually an h3 so this one's font size of 28 and then a regular font weight so let's go ahead and switch this heading here to an h3 i'm going to add a class of rv heading h3 our heading is just going to say restaurants like that and then 24 is already what it is uh and then there was eight pixels underneath that not nine that's eight and then just some filler text which is oswald and it's actually it's set to light but i guess for some reason i don't have that font weight on my computer which i'm like nearly 100 certain that i do so i will just go get some different filler text because i don't want to mess up the design and for whatever reason i can't copy it so i only need like one sentence so it's going to be pretty short something like this and then uh font weight is 300 pretty small and light but we are zoomed in a little bit okay so that is pretty close to what we want so i'm going to duplicate this div four times and then let's just go swap this stuff out so we're gonna have uh fishing is gonna be a big one so fishing we probably want a fishing pole instead of the little fishy but i guess that works might be considered restaurants not gonna have camping because of course this is an rv resort but that's what we're going to do for now and then this other one elijah's sent five dollars for spelling restaurants correctly that's so funny i don't know if you noticed because i actually i always have to say it out loud or you know like think in my head like rest a you ront rant so i always think rest aurant and that's how i get that one done there's a few others i'm trying to think um there's there's definitely others that i have to think like that but uh guarantee is one i always get wrong guarantee is always wrong um trying to think i can't remember appreciate it though that's hilarious i had to google it [Laughter] that's hilarious you're super funny february is another good one yeah you're right liam february it's like it's supposed to be february not february that's hilarious um what's another one i'm trying to think there's definitely other ones like that that are super clumsy it's funny okay so then the other thing we had was boating so that's going to be another big one for people that want to rent like jet skis and pontoon boats and all that kind of stuff and then we need a bit more gap here i believe it's 20 pixels but i'm assuming these are actually more yeah it's 45 so what we can do is go back to our div here and then in our gap we can change this to 45 and it basically does it for us now one thing that i didn't do i don't think during the stream last time on the premise lug site for our grid stuff which i fixed off camera later was adjusting the grid as you drop in screen sizes so it's essentially like you would do with you know if you manually built your divs but more or less if you go to 1440 that still looks reasonably okay it's a bit crammed but then if we drop to 992 then we actually lose a row entirely so if we click on the grid and go to column count i think at this point two wide is going to be good and it positions everything for us which is just so awesome and then at 768 that honestly doesn't look that bad but i think it's small enough that dropping down to one makes sense and it's just so nice because you don't have to bother with setting the widths of the divs and all that it's just going to make it fit for you so in my opinion i used to manually build divs instead of using the columns element but now i just think that using grid is is the ticket so i don't know if there's any like performance implications but i imagine if there are they are fairly small so not too worried about that so now looks like i wanted to double check the spacing between the top of these sections so there's 80 there and then there's 105 there amelia says you're 4 pixels 36 in figma is at 0.36 em that sounds about right because you can just type em in this right oh yeah you can use that so 0.36 oh i made no change i'm just going to leave it as pixels because i'm reasonably happy with that i guarantee you spell aluminum differently aluminum is out yeah and you're probably laughing because i said aluminum but i know everybody else says aluminium uh any in any case i'm gonna leave the letter spacing on this button as is because i'm reasonably happy with it now the other question is there's 80 pixels on that particular section but what oh whoops did not mean to realign that what about between there so there's 72 so we're going to need to make some adjustments later because i added the image here to the actual home page instead of to the template so we'll deal with that that is going to be a problem for future jonathan now this one has 100 pixels of spacing down to this next box but we also have another thing to consider here which is this layout so we have this really neat looking repeating background that kind of splits this div in half and in order to achieve that what i was thinking initially was oem is font size i thought we were talking about letter spacing though um what i was thinking initially was that we would do something like one div for this whole portion right here then we would have um let's see well actually i guess we could just position the background on that div i was thinking we would need another one but yeah we could just use the background and just push it down so let's go ahead and try that um in fact we could probably just use another section to make it really simple so we're going to go with section there and then let's go ahead and stick in a div which is going to be for that first section so we'll set this to 100 and then we're gonna go grid with a column count of two inside of that we're gonna use this div which will be the image and probably want to set this as the div background instead of instead of an image element itself so that's 560 high and 560 wide which makes it nice and simple so let's go ahead and just set that so 560 and 560. then we're going to go to our background image which i actually don't have that one uploaded so i'm going to go ahead and just grab a bunch of these images that we're going to end up needing in just a little bit and export those so we make it nice and simple no you're not too late we've been going a little bit now how long has this been um i actually don't even know 45 minutes but we still got plenty more to do liam says how about an after pseudo element for the background um yeah i mean i guess you could do that it just seems like it's more complicated than it really needs to be but i think it's certainly possible so we're going to oh i need to unzip those files that i just downloaded close those bad boys did it actually unzip i guess i'll find out here in a second um yes it did so i'm going to upload these three so i was going to mention something that i thought was kind of funny to you guys so with this particular website this was the first time that i've ever actually had to pay for proper stock images which i thought was kind of funny because normally with you know like pixels and unsplash and all those kinds of sites there is pretty much always a usable photo for the sites that i've done even for like this fabrication company like a metal fabrication company i did like a year ago they had you know welding pictures and stuff like that but they had very very few of these so i actually had to go pay for some stock photos for this particular project which obviously i'm happy to do but never had to do that before so there's that um now in our right hand div what's our spacing going to be so it's 37 up there and then it is come on now give me what i'm trying to do here 40 is that what that is 40 yeah okay so we'll go 40 left and right there's 37 on the top and there's actually more down there so it's 37 and 60. em and rim are both measurements and have different pros and cons for different use cases yeah that's probably something i should research and we can discuss a bit more um i already forgot so 40 left and right 37 oh let's see i don't even have my second div yet so i need to add that here so 40 40 37 and then 60 i believe was our number um let's see that div probably needs to end up growing a bit more but we'll worry about that in just a minute so we have a heading that says our amenities then we have some text and then we have our button again so we can just duplicate that earlier button but what we're going to do is just change this to our amenities so there's that and then let's see let's take a look at the styling here so this one is 48 regular and then what was this one oh that was 52. so it's a little bit smaller i'm going to call this one our h2 so we're going to call this heading well i guess we gotta go rv heading h2 and then actually what i'm gonna do here to save some time because they're so similar well actually i guess there's not a whole lot that we changed here so i'll just set the font size and do it like that i was thinking we would do some other trickery but it's really not worth it uh so what was our padding underneath that i know i looked at that our margin there was 27 and then we had 52. slightly odd numbers so i should probably change these a bit to be a little bit more consistent but let's just go 27 and if i come back and clean this up later then great and then 52 underneath this text and then the text was actually some stuff that i ended up writing but this is like i said almost certainly going to change this font weight is lighter and then the font size is about 20. the line high looks pretty similar it's just not quite as wide i guess the box is set to a max width of 500 so let's go ahead and do that here so that kind of pushes the text in a bit takes up a bit more space and then what we're going to do is take this entire link wrapper and then essentially just duplicate it down here so that then it's right there now i did add a class earlier for the full width which we don't need in this case so i'm just going to remove it and that's exactly why i added the class because now it's not going to disrupt this button that one is still full width and this one fits super nicely on the page it's interesting how this rv photo fits so let's take a look on the front end so that's already looking nice i'm very happy with that i do want some kind of hover effect here i mentioned changing the border to just grow a little bit i'm not sure how that's going to impact the content i don't want it to shift to the right and then definitely down here because that border actually gets lost since it's white probably just a box shadow or something um oh yeah good call i should go ahead and set that in global settings you're right so for the body font we'll go to settings body text is 300 and then we've been using around 20 but i'm going to change the default one to 18 because i personally think 16 is just too small i don't know how you guys feel about that so that's starting to look pretty good now let's go ahead and add a little box shadow to this so i typically just go with like a 15 and then i go zero oops 0 4 12 0 something like that oh but i put that on the original state like a dummy let me get that out of here so hover state is where i meant to be 0 4 12 0 and then we'll go back to original effects transition 0.2 ease in out and then i put that on the rv button primary class so if we go ahead and save then now we should have a little lift effect that's actually extremely light you can really barely see that and somehow i messed up this button why would i how's that possible what did i do oh i messed it up because um i changed the font size there from 18. is that what happened here yeah so i guess does this need to be bumped down to 16 i guess it does in this particular case to fit there yeah weird okay well uh i think i actually do want to go make that box shadow effect a little bit more what's the word poignant something like that so we'll save this taylor welcome welcome yeah so that may be a little bit overbearing i'll touch base with my designer on that but that's actually usable so you can see that something happens i don't have a destination for these links just yet because it's going to go to like a third party reservation system but i did get asked where we're going to configure booking on this particular site the answer is no but we will in another stream that i'm going to do hopefully later next week for a different client entirely but they will actually have a wordpress booking system which will be really cool to configure together and i think i'm going to use amelia for that because i've tried a couple different booking plugins and i think i think in this case amelia is going to be the ticket okay so one thing i'm not exactly happy with is the way that there's all this extra space here and i think it's because i set that div's width whereas in this case it fits pretty much all the way up so let me think about how we should do this so that image is exactly 560 by 560. is this div just wider i wonder i'm trying to think here 60 well i guess there's actually more padding on that side because i did 40 over there and then there's 60 on the right but maybe that's more to do with i guess i already did that when i set the max width on that text element so it's exactly half though because if we look it's taking up 740 how's that possible so i guess what we'll do is instead of this background image we're going to remove this one and then i need to go get the actual larger image because that one was resized i guess i see what's going on here so we don't want this div to actually be 560 if we take off that width requirement then it does fit perfectly in the middle which is awesome so uh let's see i downloaded that somewhat recently i think the image is like monumentally huge though was that the same photo looks like it's the same thing but just in a flipped direction where did it go sorry i didn't think about this [Music] um i guess what i'm going to do is just upload it because i do have smush installed so it's going to shrink it down to something reasonable and we can adjust it later just for the sake of time normally what i would do is resize the images to fit perfectly in their little square for page speed of course but it will be fine in this case it's two columns with 40 pixel gap says arthur perfect okay i will adjust the gap here in just a second but i see what you did with the image positioning so let me go back to this div and our column gap is 40. so then this div uh did we go i don't think 100 oh it actually does cool so 100 works and then our background will go to cover and then we don't want all that garbage over there this isn't the same image i don't think it looks really similar no it's not um yeah okay so what if i go back to the one that we used earlier does it actually fit it does okay cool so i just needed to make some slight adjustments there so that's perfect that is what we were after cool so now if we take a look um the only question is do i need to take down some of this padding over here to make it fit because we added that 40 pixels which i actually added as margin on that left div so i guess i do because we already have the gap there so on this div oops if we go to size and spacing just essentially get rid of that and then our 40 pixels is exactly where it should be cool and then we're going to save that let's just take a quick look on the front end there we go awesome uh arthur i'd love your feedback on the hover uh box shadow that i added just so that we have some sort of indication that you know it's a button obviously it looks like a button but so there's some sort of change to it stratus i agree with you completely he said the more i uh the more i use grid the more i think how was i living without it completely agree with you it's just so good okay so now we're gonna go back to our section here oh not that one this bottom one and then we are going to get this which i think i actually have already exported to my computer but we're going to do it again anyway just to be safe so we have that background and then we're going to add that as a background on our section here here we go and then that is tall so we're gonna have to push that down so does it go is it negative uh no repeat 700 yeah there we go okay so we're just gonna have to play with the numbers a little bit and kind of push it down to achieve what we're after taylor says add a slight right translate to the arrow when hover the link wrapper button yeah that's a good idea not a bad idea now to do that we would have to do it on like in a code block correct or could you do could you add your own selector yeah i'm not sure we'll we'll come back to that so this background it basically cuts this div in half so 350 let's see you can also find a hover color in mock-up it's a bit darker than normal oh so effects let's see where can i find the the hover color is there is it assets there should be a color palette somewhere but i didn't know where it is oh there's a box shadow right there zero four four okay i'm gonna go switch that box shadow real quick because i want it to be exactly what the mock-up said so uh hover state 0 4 4 and then it was 25 so i was close but not quite button color fill i would put it in a style sheet because you'll need those buttons across your site good call elijah i appreciate that so it's in fill but where's the where's the hover one because it's that correct i guess i'm not sure where the that hover variant color is liam says if you used after on the background you could then go position absolute bottom height 50 percent to center it halfway up okay yep not a bad idea it's probably more accurate than this because we're going to have to change that at every break point since it's just pushed down with pixels so let's go ahead and do that we'll essentially get rid of this then we switch to the after state background image is this but do you put anything in the content field and then position i don't know yeah i don't know what's missing to make that appear there because don't you have to put something in this content field for the after last time we did just like the little i don't know what you call it the uh that guy and then it breaks the page see i did that last time and this is what happened where i put the little i don't even know what the word is but then it breaks this layout so i'm not sure exactly whether that's my mistake or something else that i'm missing i do like the idea that you're going down though because i'd rather it position perfectly in the middle all the time and us not have to fight with it um let's see just to be consistent you said position absolute bottom would be zero so we have something in there but then why does the content go wrong ringing elijah taylor anybody ding ding ding just wondering if there's a way for us to uh achieve this because the content because what if we type something in that's not that so there it is down there it's showing whatever showing whatever i type in well so elijah the suggestion was basically to use the after to add the background that we're adding right here so that it kind of positions it perfectly in the middle but if i'm using it in the section couldn't i do it in just the regular state maybe not oh do you need width and height also maybe is it with 100 yeah okay cool and then that image was 720. so yeah that's i was kind of i agree with you elijah that it seemed overly complicated but um yeah so i'm going to get rid of the after state so this background and then the top oops not 350. but don't you have to go like with something specific here because you can't do the 50 because it just aligns it in the middle so that's what i was working on here was like 350 since the image is like 720 something i believe so it's not quite perfectly half well let's see it cuts off that and then i need to add a background to this other div so that the background goes behind it so real quick let's go right here and then i'm assuming that it was just white so background color is white and then we also have a really subtle effect over here so this is what i'm assuming is essentially just going to be a border on the right of 8 pixels and then this color which is pretty cool so let's do that real quick i'm actually going to add a class for this because i see it's used in a couple different places so rv div border right we're gonna go to border right stick that color in there and then let's make it a global color so we'll just call this light or rv light aqua then the width is going to be eight and solid and that should give us essentially what we're after i believe yeah it does so it looks really nice when it kind of blends with that other effect down there is that kind of what it looks like here it looks a little bit more lifted up off the page so there must be that box shadow that we used from earlier let's see here so i'm about to sneeze i'm going to temporarily mute myself i believe nope of course not i mentioned it so now i'm not going to okay so that box shadow is that actually on here that's called drop shadow here where's the actual numbers zero four oh so it's the same thing that zero four four so let's go ahead and stick ourselves a class on this entire div and i'm gonna add a new one here we're gonna call this rv box shadow so advanced effects box shadow our shadow color was two five point two five and then zero four four we'll just do zero there and that is what was giving us that lift effect but it's not as blended so it says it's black 25 it's almost like the blur oh maybe i have the things wrong because it's set to blur for spread zero does that correlate exactly how i just had it let me go back to this oh yeah okay so it's right but it just seems a little bit too a little bit too bright i don't know if you guys would agree with that uh i'm gonna keep rolling here and we'll adjust things on the fly if we need to so this guy is 40 pixels of margin beneath it so we're going to make sure we have that div selected and not the class we just applied we're going to do another div but i don't want it inside of that i want it outside this one is going to be 100 width once again then we're going to add another div and kyle says i'd make that blur like 40 instead of four yeah i kind of agree it's it's not quite perfect and for some reason the mock-up like the mock-up has it super blended and then it doesn't quite translate to the page here so i agree with you i'll go ahead and go ahead and do that right quick rv box shadow effects um so that is too much but then what if i just took down the shadow color that looks more like it and then the vertical offset is four but i almost feel like there's no like vertical box shadow or is there yeah not really also oh right i know what a pointless thing to have on stream uh there's also i just noticed a super subtle border around so it's actually i just was calling out this border right here the right of eight and then this right there is the same color but just one pixel it looks like so that's actually pretty neat looking let me switch back over here and we're gonna go back to our border tab i'm gonna just make this simple and go all with one solid and then on the right we're gonna switch it back to eight to achieve basically the same thing we're all taking a commission on joint effort of development yeah you wish no i'm just kidding i appreciate all your help that's why i actually i i love this format like more than making regular videos if i'm being perfectly honest uh just trying to find an interesting way to be able to do tutorial content when that pops up uh and find that balance between like polished and not polished or you know like casual and polished but not like too much so if that makes any sense now you did your new border on the id instead of the class i actually don't have a class on this div this one's just for box shadow but what i was just about to say you beat me to it was that if these down here have that same border then we do need to switch it to a class which it looks like they do they have that exact thing let's see so i guess what i'm going to do is add a class called rvdiv borders and we're going to go to borders again we're just going to do the exact same thing we just did so all sides will have a solid 1 pixel border and then the right will have an 8 and i don't think that duplicates based on the id so we'll save and now we were beginning the steps of doing that here so it actually works out because we can just simply add that right there and it's going to achieve the same thing and then this once again has a white background and it looks like is our image roughly half so it's 260 that's basically what i'm going to do so we'll just go not on the class i want to on the id horizontal we're going to stick in an image element this one was a picture of the food and then there was a bunch of spacing here so 40 pixels i'm just going to go with some margin on the right of the image and i might end up changing this so we're going to go with the heading it's oh actually the beaches was first not the restaurants but that's okay so this one's 28 i think that's our h3 class which i used somewhere else pretty sure yep so rest au rents elijah there we go five more dollars please brother i appreciate it jake hey jake hey all right so text is once again going to be just some filler which we had right here so i'm just going to copy this paste that in there now of course i actually do need to make an adjustment here copy this or excuse me wrap this heading with the div so that then it will stack like that the button on the hero has a left white border yeah stratos because this it has a white background so it doesn't actually lift up um and then so we can kind of play with the positioning here let's let's see actually how wide is this whole container so it's 560 and then i'm assuming there's probably a 40 gap there yeah so realistically all we need to do is on this we're going to go to grid column count of 2 change our gap to 40 once again and then let's center this stuff in the middle or how is it right here well it's kind of centered in the middle but it's also because there's padding so 26 26 and 60. so we're going to take this go 26 top and bottom and then oh not 25 26 and then 60. then we're going to make this entire divs background white and then did i already add the box shadow class i did not i think all of these have that same box shadow they might not but because it's in a class it's going to be super simple to recreate that and then now we're going to take the picture of the beaches and say white sand beaches perfect so now i want to go take a look real quick on the front end i think that box shadow is too bright or too i don't know what the word is too vibrant something like that and we can adjust that in a second but let's see this lines up there and then this image lines up with the button is that how it's supposed to be perfect it's amazing when you have a good designer what uh what someone like me can achieve the box shadow is just so much lighter so i am going to actually backtrack on that i'm not happy with the way that box shadow looks so effects we're going to go back to 4 and just bump it back up to 25. we'll just keep it super subtle not really too worried about it no not inset i always click that i know kyle and i talked about that recently okay so right now it's coming along nicely what what time are we at so an hour and 14 we're actually doing pretty good i would say so then we have this our partners section now this will actually be reasonably similar but i think it's going to turn into like a recommended section because they're going to have like restaurant partnerships and that sort of thing and we'll end up putting those restaurants logos with like a brief description and a link to their website so we will essentially just replicate this layout um so what i need to do is grab these images so we will export these bad boys real quick and then actually while i'm at it i'm going to go ahead and export that image to and that should be good so we're going to export these got to unzip this close that and then we'll switch back over here so we're going to jump to an entirely new section i'm going to collapse all of this section and then add an image just so we can get our stuff uploaded taylor says are you going to use acf options for the partners no because i will be doing a care plan on this website so i'll be basically making all the changes for them so kyle i appreciate you saying that once again like i said the other day it you know totally means a lot coming from you and uh the designer arthur is in the chat here i do believe so i know it's late for him so i'm really happy that he's he's here um i'm not sure what mistake i made here and why these exported with that green background maybe it's because oh is there a fill what if i just export that one image as a standalone that's weird [Music] um not sure why it did that i guess it's because there's this fill on it so if i take that off then it goes back to the black but if i export it again i guess that's what i have to do real quick is take off this fill and then re-add it which these photos are gonna get swapped out anyway so it's really not that big of a deal um oh arthur's coming behind me to change it we can see him we can see him making those changes he says he's gonna fix it right now cool sweet okay so i'm gonna turn this stuff back on for him so he doesn't hate me um while he's doing that i'm going to add this our partner's heading so this is the 48 and that we used right here for the h2 so what i'll do then is just simply duplicate this entire heading we're going to drop down here and just change this to like recommended recommended partners or something like that recommended i got that wrong elijah so i will allow you not to donate for that one so hopefully you understand please forgive me so we're going to use margin left and right auto to center this heading here we already have our margin inherited from the class from earlier say it actually is extremely cool yeah it's really really neat to see it happening um and then we had some text underneath that i do believe right yeah just some basic text here deducting one dollar i'll send it to you on i don't know venmo i guess uh let's see inspect so we'll just copy this text i want it to be really consistent here so the font size is 20 and then let's take a look at how wide it actually is so again it's a max with a 500 so we'll go max width 500 margin left right auto and then we will take the typography and center that so it's perfect then we'll go ahead and add those images in in just a second once arthur is done and there's 40 pixels right there it's really neat to see him working so i want to switch back over there and kind of watch this take place because obviously like with me not designing this in figma i just kind of fumble through it to get what i need out of it but being able to see someone like him work is just so cool it's like what is he even doing it's so neat so it's like a layer i guess there he's positioning it perfectly look at that so cool really neat [Laughter] yeah kyle i guess i did just totally put him on the spot so i'm gonna scroll down here and we're gonna go ahead and pop in another section so once arthur's done with adjusting those images uh we will switch back over to that so this section is going to be a google map yeah honestly he deserves it he's he's fantastic um so this will be a google map and i think what we can do is kind of like in a previous oxygen video that i made a couple well i don't know when it was i was going to say a couple years ago but it wasn't that long maybe a year or two ago we did like an overlay where you could kind of get colors on top of your google map and that's essentially what i'm thinking here to have like a cool looking map pin instead of it being something boring like a little red dot so what i'm going to do is actually take this site logo which we'll use in a little bit as well and export this bad boy close out my little bar down here and then uh just thinking about how we're gonna pull this off so there's a nice border up there which is what eight and then it's got that same green so let me copy this i think we already have this color but i just want to go double check that we have the colors is that the same thing oops that's the color name it's a little bit lighter so i'll just call this rv green light oops not not ooped let me call it light like that one thing i wish i could rearrange these so like i wish i could push this color in the list even though the id doesn't change because that's not really what matters to me i just wish i could reorder these that would be nice um so do do section we're going to actually so that we don't have to bother with all of the padding and stuff let's just use a regular div div div div get it out of course it's not going to let me do that so what if i just delete this section go back to my inner content and go to div here yeah the reorder and the rename would be super awesome uh taylor yeah i do have core installed but i don't use it on every single site just in certain specific uh examples so this div here we have no padding on any of the sides that menu and this mockup is full width but excuse me the the google map is full width but i don't know that we'll actually want it to be that way we want it to be kind of contained well maybe we do want it full width so what we're going to do is just stick in a map we're going to set the address to santa rosa beach beach florida which is where this place is going to be roughly although this might oh not 100 i want height whatever it's going to be with 100 and then a height of we'll go with 300 pixels for now awesome arthur really appreciate that let me go ahead and snag those again so we'll go ahead and take all those export those layers extract this close and so now we can go back over here so um let me think about how we want to lay this out real quick so we're going to go with a div let me delete this image this div is going to be 100 then um inside of it we're going to go with a div that will be ps partner divs will be our class name because we do have some styling to attach to this so let's take a look real quick so we're going to have let's see one two three four five so we have five of our lines here so we're gonna do a border right on all of them except the last one so it's just one and it's that same one that we already have so with the one on the right so ps partner divs border right is going to be our lighter color with a width of one solid and then what is our padding here oh maybe the image is basically going to do it for us so it's 19 pixels so we'll just go uh 20 all the way around for now and if we need to change it it'll be easy because we have a class so image oh did i did i call that class p.s whoops that's not what i meant to do i mean i like arthur more than myself so i don't blame you guys it's 20 okay so there is all of our logos all right so first up is gallery then minimal then music uh gallery and then we're gonna take oh wait this div right here 19 pixels plus one for the border okay i am going to add rv partner divs and then we're going to duplicate that and we're going to get rid of the ps class so we want it to be 19 on that side to make it line up properly and then we're going to duplicate this five more times one two three four five and we got six now so then this we're going to switch to grid with a column count of 6. and then the gap is 20 i'm assuming which is what arthur said which we've essentially achieved but now i think we have like a double gap because i added the margin or excuse me the padding on this so we really don't need any of that then right because the grid is handling the gap for us that's the way it works in my mind that's what we're going with okay so i'm just going to choose some of this we'll go with cgs and then we have that then minimal and music to close it out perfect so here is another example of where we need to take a look at the grid as we start to go down in the screen sizes so 1440 we actually already start to lose some of our logos here so we'll go to grid and then we only have six so we're gonna go column count of three probably still going to look good at 992 768 we're going to need to drop it to 2. that looks pretty good and then we are going to go for 80 of one but now we don't really need the border on the right side here at this breakpoint on any of them the lines won't be centered between logos with 20 pixel grid gap lines won't be centered between it why not so we're going to go border right none at this break point because none of them need a border right 768 those don't need it those three um i wonder if it would be better just to use a class instead of doing it manually so we had border write as a class oh wait i could just do it to that class can i because we're at this break point so then but that's not the class i want crap what was it did i get rid of it um well first of all i definitely don't need it on this div because that's the very last one so this div block we're to go to borders unset right is that how it's going to work no i guess i have to do it to that class or do i go border right none there we go that worked and then 1440 we're going to go to border right i'm just going to do this manually because uh there's not that much of it why didn't it work that i do to the image and not the div like an idiot order well no not the class not the class right none there we go perfect and then 992 is still good 768 so then we need to go here to div i'm going to do it to id border right none and then same thing div switched to the id border right none there we go cool so oh dang it i need to reapply it to this one right one solid viola voila um this one i want it to be centered here because it doesn't look very good whoa we need to adjust this this looks terrible at that break point so let's go ahead and do that before we move back down to the map since we're on kind of a mobile train here so this div we are going to switch back here 1440 is still good roughly 992 starts to get really cram so we're going to drop this to one and the 20 pixel grid gap is after the border which is why it isn't centered between oh okay gotcha um so this one we definitely want to incorporate some padding here and arthur has been doing 20 and then i think it's been like 35 or something like that i'm just gonna go with 40 left and right and if we need to make some adjustments we can totally do that need to remove gaps and use padding's 20 pixels okay we can do that with um with a class pretty simply now i'm going to set this to a height of like 320 and then we probably want to change this i guess cover still works but maybe we want it to be a bit taller than 320. that'll be fine and then now we need to adjust this div here so where are we at 992 well first of all we need to adjust these to stack instead of being side by side and why didn't that work was it because i did i use grid um oh i did it on the id so i'm gonna get rid of that and go back to the div borders and set that to horizontal like that and then i need to adjust it on this div here take that away and then it's going to stay horizontal because it's now set on the class but div borders oh wait no i don't want it there i need a new class no i'm i'm not going to worry about that i don't care about having a class on this to be perfectly honest so then 1440 doesn't look good at all so we're going to set this to vertical i want my image here to be 100 width if i can i don't think that's really kind of i guess it looks okay not the brushing ever we'll do 20 pixels all the way around and basically all i'm doing at this point is getting this site functional because like i mentioned at the beginning of this stream this company's property isn't even built yet so all we really want to do is get a proof of concept up you know visible at this point so that at least makes it fit and then 992 768 starts to get very crammed right here did i use grid i did so now we just need to go 768 we're gonna change this to grid column count of one and now everything fits just fine um i wonder at this so our button still fits there why is it collapsing to two lines on this particular one i guess it's to do with maybe the padding yeah so if i set it back to horizontal it still doesn't quite fit there thank you for hanging out stratos see you next time um let's see i delete images and use them as the text background let's see why is this one collapsing i think it's just the padding on this particular div although um i guess i don't need the border on this div at this screen width because then you essentially have it not lining up so i'm going to fix that real quick so it looks fine there and then at 992 once it collapses then it starts to go wonky so let's go to border right and we're going to set that to none so now it actually lines up and then how does that impact our button when it starts to shrink so that didn't make any difference unfortunately i wonder i guess then my only option here is to drop the font size at this screen width right because i set it to 18 i'm pretty sure oh no oh that's not making any difference did i set it on this class i did so it's already at 16. so if i do that then i'm gonna have to make it like 14 which isn't 16 the minimum use 16 padding for button and with 100 to solve it okay so what i did earlier was that which i pulled from the mock-up 48 so arthur are you just saying reduce the padding at that screen width so like at 768 we would just go like 16 or something and then i had a class here for full width like that cool okay so i don't know if that's exactly what you meant but that is totally functional that worked great okay so all i did was just reduce the left and right padding and add that full width class which is super awesome now you did say 16 so just to be consistent and restrict max with also so that's what that um full width class is giving me is a hundred percent you're saying set that to max width but yeah i see what you're talking about so i'm going to get rid of full width because i don't we don't want it to be full width there and then 992 768 you're saying max width of 100 that's that's good enough for now it at least functions that's that's all i'm concerned about for the moment but we'll come back and fix that so we got these images there and the next up is this google maps thing so one thing i'm realizing is on a typical google maps element from oxygen which i will want to do because it will have the google maps business listing with all of their reviews we do want that so i'm wondering do we just end up using that overlay hmm just trying to think about this so here we have this super nice overlay on top of the map which maybe you could do if you did some api mumbo jumbo but all i really i'm going to do is just overlay this image right on top of it so i guess we could just sort of cover up that red pin so yeah let's just play with this a little bit this is 480 pixels tall and right now i have it set at 380. um okay so width i'll go fix that real quick so all devices on our rv button primary we have width is 100 and then max width of 360. oh i see what you're saying so then now that's there and then i change this padding so can i get rid of that no i guess not and then 480. um so at 480 there's a slight issue with that but couldn't i essentially just add some uh margin underneath that arrow but i see what you're saying that does actually work really nicely didn't really consider that okay uh back to this real quick what i wanted to do is set this div itself to 480 high and then we're going to set the google map i think we can just do 100 right yeah that's perfect that's what i want um and then i don't know if there's any issues with us like overlaying an image on top of the google maps they might not be like google might not be too happy with that but i'm honestly not quite sure paul says you gotta leave catch up later thank you so much for watching thanks for hanging out i appreciate it uh let's see what was i going to do here so we're going to need to set another div and this one we're going to use the layout of absolute and then it's going to be 0 0 all the way around then we're going to go back to our wrapper div here that has our google maps inside of it set that to a layout of relative so now this other one should fit right inside of it nicely i'm going to center it vertically and horizontally i'm going to stick in let's see actually i think i'm going to have to use another div because these i don't think exported as one singular unit so we're gonna do another div and then its background is going to be this arrow and then i didn't get the logo from earlier so there's that how big is this it is 200 wide by 234 high basically uh whoops what did i say 200 by 233 not listening to myself there we go uh 233 it's like slightly off-center why is that do i need to change the background positioning or am i just am i crazy or is that off maybe it's not maybe it's just the stuff underneath it that's making it look kind of weird and then inside of this it's 35 left and right 43 on the top so 35 35 43 and then there's something like 60 underneath it 76 technically i'm not sure if we need that just yet but we'll add that as 76 we're going to stick an image element inside of there and then i don't think i exported this logo or did i i did twice apparently so we're gonna take that over here and there we go perfect so that is exactly what i wanted so now if we go take a look on the front end then we have the google map and this is actually like pretty close to what uh which aware of the place physically will be i think it's actually a little bit further to the west but it's very it just looks so much better and then we can make this link to their actual google maps listing when we get to that point so that is perfect now we did have a couple more things on this div there was a border on the top of that green color which was oh not all sides whoops on the top which was eight solid like that and then that looks like it was about it so now we're ready to move into this div um although i think we would want this one to be in our template because that's essentially going to be part of the footer uh yeah yep definitely so i think we're pretty much at a point where our homepage is looking good i wanted to double check how this looks on mobile as we start to shrink a bit so 992 768 and 480 perfect stays exactly where we need it to so that's a super cool trick that if you guys want to sort of position stuff on top of something else you just simply take your parent div there change the layout to relative and then the the content that you want to be wherever you know on top of it just take that div go to layout and then just set it to absolute and put zero pixels in all four corners so that's neat and i'm gonna chop that and make a little video out of it um so really the only other thing that we need to take a look at here is our template so we're going to try to recreate this header right here or excuse me this like pop-up menu and then the other thing of course is the footer like we were just discussing so we'll go ahead and get to those bradbury good to see you i'm going to take a quick break and i will be right back so let me switch some some stuff around over here and i'll be back in just a few minutes [Music] [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] [Music] [Music] [Music] [Music] foreign [Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] so [Music] [Music] [Music] [Music] [Music] all right and we're back hopefully you guys all got up and walked around a little bit get your blood flowing get off the computer i'm uh i keep peeking out my window here and realizing it's such a nice day i wanna get my work done and get outside um and hopefully you guys have fun stuff planned for this weekend i'm gonna be offline going camping so that'll be pretty fun before we get back rolling again i just wanted to shout out elijah mills for being the one and only donation today on the stream really really appreciate that uh just blows me away the generosity of you guys donating anything at all so i appreciate that yeah elijah that's kind of what i was thinking i got up and walked around and uh scarfed down a muffin real quick and then uh you know got the blood flowing so anyway let's see so now we are pretty much ready to switch over to our main template and attack this menu which i think we'll be able to do um the not allowed out because boris won't let oh man that's just so bummer i feel for you guys i'm laughing not at you obviously just in uh whatever the word is and i i feel your pain i feel your pain for sure so the only challenge is i think with this menu i say only there's probably going to be plenty of challenge is going to be this arrow for the active which i think is going to require javascript which i've looked into before and wasn't able to immediately find a solution um and then this little path guy so that's going to be interesting um but overall i think the functionality will be pretty straightforward uh jbery's visual says do you stream designs you are building for clients or just fictional sites uh so trying to think pretty sure every stream i've done so far has been for real clients i think except one there was one that wasn't for it but yeah almost all of them are for real clients and this one is a real client job so they typically are pretty uh pretty functional in fact boris says we're allowed to look out of our windows next week sorry guys it's miserable i know all right so let me go back over here we're gonna save and just get out of oxygen on this page and now we're going to go over here to our all pages template and edit this bad boy so i'm hoping that we can just simply overlay that little menu icon and the logo although we're gonna have to make some changes to this home section i might try to think about how to do this because we we added this background image that you're looking at now to the section on the home page but we need to get the menu and the logo overlaid on top of this so maybe what we do is add some extra padding above this above that heading right there and then we just use a div with the transparent background that will contain the logo and the menu that kind of seems like the best solution something like that uh jberyo says oh very nice that's awesome i've been enjoying them and even the replays of the streams when i do web design it's like someone working next to me that's so awesome i'm really glad you like it and heinrich with the 10 euros thank you so much it's fantastic i love the visual and i i definitely recognize you you've been you know participant in the channel and on the course and all that kind of stuff for a long time so i really appreciate that the generosity is amazing um i so you know jay birios it's really interesting you mentioned uh it's like somebody working next to you in the co-working space so i used to have one of those right before covet i had it for like two years and it was fantastic i would go there every day i'd drop my son off at school at eight pick him up at three so every day from basically you know 8 30 until about 2 30 i knew i had this dedicated time and that's where i would just crush client work and uh the you know for a long time i kind of thought i didn't need an office that i could work from home and be just as productive but the the there's something like in the mindset for me i'm kind of rambling hopefully this isn't boring to you guys um kind of there's something in the mindset of like being able to just know that this is work time and this is the workspace whereas working from home kind of convolutes that a bit for me so at some point in the future i'll probably get that co-working space again so heinrich i will definitely be able to get a couple of beers for that price in fact it will probably buy some beers for the camping trip this weekend so i appreciate it very very much thank you um so now let's go ahead and attack this menu so we have our inner content and we're going to start off with the div of course change this tag to the header and then we're going to stick this above the inner content let's go ahead and just leave it as is for now because i do think we're going to need to change the spacing so i don't want to cause too much overlap issues for the moment i'm just trying to think out i think out loud here let's see um if we go back over to the mock-up we have our logo and then i'm just curious how that relates to this so i'm sure this menu button is exactly online with that and then this is 114 pixels tall how big is the image that we uploaded earlier 114 oh it's exactly the right size perfect so we're going to stick that in there and actually let's just go ahead and change this div's background color to the green so we can see it i don't think that's the right green uh we're gonna use whatever one this one is so it's the zero three eight seven eight three which i do believe is the second green color okay so we're gonna switch that real quick so background is that perfect um let's see cool yeah that's super awesome um oh also i need to do one thing so we get everything kind of aligned in our container here i'm going to add in another div inside of this one that is going to be a width of 100 and then our max width will be 1440. and then we'll stick our image inside of that we don't need this little text element and then we're going to set our kind of parent container here to center so that then it pushes this stuff to be in the same line now actually this is something that i meant to address earlier and kind of forgot but i did mention we used sections on almost all of these containers and so what that's done for us is stick 20 oh gosh there's something going on here with that box shadow we got to fix that that is not how it's supposed to look um but anyway what i'm trying to say is you can see that this is on the far left edge of our page container and we have some padding there that's coming from our sections and because we didn't change the default section padding what we could do is essentially just go to our global settings and our sections and columns i am just going to change this to zero left and right it'll be an easy fix if we need to change it but now if we save refresh that then everything is perfectly aligned on that left edge which is great now of course we do also have a lot more spacing up above this so how far is it from the top of the page it's 40 pixels so on this div let's see which one should we do i guess it doesn't really matter we'll just go with 40 top and bottom here and then now now what we're going to do is add in another div this one is going to become our menu button here so this has our zero three eight color which actually we'll need to change our div background that we already just set because otherwise we're not gonna be able to see that and then we have the hamburger icon which is just those three lines um a part of me just wants to export that and that be our little menu trigger but that's probably not the way to do it hmm try to think andre says you could use a section instead of the div for the header to have the padding match the rest of the site removing the padding completely leaves you with the content to be too wide on smaller devices that is true i didn't think about the implications of how that's going to behave on mobile we have just just enough padding there so not a bad thought or i could just add the 20 pixels to this i'm just going to do that for now to make it nice and simple i'm just going to go 20 left and right make everything line up so just like everything in oxygen there's a million ways to achieve the same end result and this is an example of that so now i'm going to take this div i'm going to set the layout to horizontal and then i'm going to set it to space between now our menu is top aligned with this logo so i don't need to set it to middle or bottom for vertical i'm just going to leave it exactly as is because it's already at the top i am going to go with an icon here then linear icon i think it's just called menu yes it is i remember this from the premise log site and every other site that i ever do and then now um how much padding do we have around this stuff let's take a look and see real quick oh maybe it won't i guess that's all one standalone element so i'm just going to assume it's 20 so we're gonna go 20 all the way around oh if i can click the little apply button there we go so that works and then let's go ahead and change this to a slightly different color because that way we can actually see the background on this if we just change it to something slightly more opaque for the time being then we're going to set this div to have a background of that and that's what it's supposed to look like and then once the menu overlays then of course that will sort of be combined with the actual menu content which should be pretty cool so now now oh wrong thing i meant to go to the mock-up let's zoom out and we're going to go back to this so what i'm picturing is when you click that little hamburger button we have a div that basically takes up this full section height and i guess it would be maybe even 100 vh almost and it's going to have just a fade in from the i guess it's right i always get those confused the fade in left and right uh then we just have some some links and the phone in the bottom so let's go ahead and create a div i am going to go trying to think this might be a little bit tricky how are we going to get it to overlay on top i guess i'm just going to go ahead and add in another div here which is going to be the actual menu container itself so let's just give this a class we'll call this rv menu um menu slide menu slide yeah we'll call it menu slide and then we're going to just give this one a class to make it consistent so we'll call this one rv menu trigger so then this is going to have our dark background color again and then we need to i guess position it absolute right zero and then is it top zero then we wanna set this to a height of one hundred percent but we need it to go outside of the bounds of this container oh wait i guess it already is we just couldn't quite see it because of z index there we go okay so 100 and then how wide is it so this guy is 440 which i'm assuming we'll probably have to adjust as our screen size shrinks and then first up we have the menu icon that changes to an x but actually we don't even really need to do any trickery there to change it to an x because the uh menu like trigger icon behind it won't actually be uh visible although this i'm essentially going to be replicating like the tool tips that we did but there's not a closed trigger do we do do we do a modal instead of trying to make this its own thing maybe that's the ticket because let me look at a modal real quick because if we go we can set the trigger which would be that hamburger and then our content styles we have all the layout controls we have a closing trigger and then i kind of feel like that's the better bet because we can change the width we can position it on the right we can set the height i think that's the way we're going to go so this modal we're going to just basically bump up right here so then this div we actually don't need i don't know how i just broke my entire layout by doing what i just did but i did um is it the modal height i guess that's breaking it it's not happy about that let's go with live preview so that's what we're going to do so our width i always get confused i always go to content styles looking for the width of the model but i need to go to model styles so was it 420 is that what i said it was 440. so 440 pixels the model won't let you add a slide animation easily i guess maybe we could do like a fade in or something instead of it being a slide transition i'm not super hung up on like what the transition is to be perfectly honest just that it has something instead of it just you know appearing out of nowhere so then this background will be that guy i do kind of like the fact that it sort of offsets the background and makes it have that um slightly darker color behind it so i think that's a little bit too dark though what do you guys think 50 i don't know i guess it's i guess it does draw your attention very clearly we won't worry about that for now so then let's go with an icon we're gonna change this to like a close font awesome one to me doesn't look very good exit it's not called close what is it is there just an x of course it's not called close exit or x what is it called some sort of close icon here it's called across oh my lord okay so we'll make that white and then we're going to position this guy absolute maybe 25 25 something like that and then that one is going to be good as it is then we're going to add another div here that's going to contain these menu links that will be sort of centered what's times i see you guys talking about that oh yeah yeah i see what you're saying like times like multiply yeah okay uh so that's good let's stick in another div here oh for font awesome it's times okay i want to look at that real quick yeah those just don't look very good to me i very much appreciate the suggestion but i think the linear icons one looks better um so this div let's actually what would be the best way to get it in the middle because we're going to have a second one underneath it that will have a slightly darker color so i'm just going to go ahead and get my text links in here and then that way we can kind of play with the positioning i'm thinking about it a little bit so rv menu links is what we'll call this guy let's take a look at our styling here so it's uppercase we do have that same 36 letter spacing which we pretty much found out is about four pixels it's size 16 uh regular and then it's prata so our font is going to be prada text color is white typography is uppercase letter spacing of 4 and then font weight was the regular which is 400 in this case and our font size was 16 but i think i'm going to leave it unless we have a problem at the default which is 18. so i'm just going to make this one home and there's not a whole lot of pages on this site just yet so i'm going to manually create these links and then the text links let's see how much spacing do we have 48 quite a bit because this menu is so tall so text links margin is 48. duplicate that a couple of times i'm just going to make some stuff up here well actually these are probably pretty accurate so amenities resort contact book mean amenities resort map let's do contact and then book now and i'm not going to worry about actually linking them to the proper places just yet so then this div we are going to write a line and then it's definitely not pushed up against the side like that so there's 72 pixels there so let's rename this just so we can be clear here that this is our link container so there's 72 pixels like that and then with our modal do we just want to go with a vertical item middle that doesn't work um what if we go margin top auto that doesn't work crap why doesn't that work oh it's because i didn't set the layout child elements whoopsie and then right like that so if i leave this as middle then do i actually need my link container to have that margin auto oh yeah i guess i do okay um and then was there any sort of opacity on these doesn't look like it so with the active we have this arrow that pops up but i don't know like i've already mentioned a couple times how to do this without javascript so if any of you guys have some insight on that i would certainly appreciate how to achieve that active because realistically what i would like is for the little arrow to just fade in when you hover over it or excuse me when you're on that active page i guess so forget the fade effect that's going to be more of the little squiggly line and earlier earlier elijah mentioned something about this path for the hover effect here on this little guy yeah that's what i thought andre you need some some js for that little hover icon but or not the hover icon i keep saying that we need js for the that arrow oh you know what you could do talking about a crude way you could totally you could totally use a condition in this particular case you could have an arrow next to every single uh next to every single like link and then the condition just checks if the current page is equal to whichever one it should be so you could totally do that but that obviously is not going to be uh an ideal solution if you have a larger menu so active cloud okay taylor i'm checking discord [Music] let's see all right so the class is is active so then am i just basically sticking this arrow uh next to all of them admin bar represent yay nice is uh kyle still in here i haven't seen him in chit chat in a little bit hopefully he is so let's see try to think i kind of like my janky way of no extra code to put some arrows next to the text links and then use the conditions for it the only problem is i don't have the pages set up for all of these just yet so it won't quite work but we could test it out with like the contact page and you know something basic like that like i mentioned all right should we go the js way or should we go the condition way i guess it's essentially it's essentially the same thing is it not well the thing with the arrow display none would be that it would still actually exist like in the code even though it's not that big of a deal but with the condition it wouldn't even be output on the page let's just go ahead and i guess i should have used link wrappers instead of text links but we'll just go with the little div action here and i'm going to do ps header links wrapper i keep doing ps good lord rv header links wrapper and then horizontal then we're going to go to space between js could be deactivated in the browser so the condition is the cleaner way yeah and it's simple enough so let's go with this icon and we're going to call this rv header links icon taylor i appreciate your your thing in discord for sure buddy change it to white icon size is going to be way smaller and then arrow oops not four r's or three whatever i did arrow linear right switch that around and then we're going to add let's say 16 pixels of margin i bet that's what arthur did he did actually 20 in this case so we'll do 20 like that and then essentially this icon is just going to get a condition in this case it needs the post title is equal to home or you could do the you know page id like the post id so then div simon says this is so cool i've never watched someone build a website in real time and think out loud i'm glad you like it the consensus is that people including yourself lots of people everybody that's here really likes this and i actually do too i think the engagement is really fun and interesting yeah so anyway i completely agree taylor says in this case condition is better but for bigger menus and this only really works on text link since it adds a class to the link itself gotcha well this is kind of cool this is just utilizing the functions that oxygen gives us to great effect for something really cool like this so let me make sure i have everything situated here because what i was going to do to make this really simple is just delete these links and then just duplicate this out i think we had six total ones so then this was um let's see amenities amenities and then resort map and then contact and book now thank you kyle i really i really appreciate that uh just shout out to the admin bar and kyle if you guys aren't a part of that community and you don't subscribe to the admin bar on youtube you definitely need to go do that kyle i watched that or watched part of the video that you shared before the live stream started today um on oh what's it called the um the friday emails that's something i really need to get into and something i've been wanting to figure out for a while my brain immediately jumps to how to automate that so maybe that's not the point though maybe it's better to be more organic i only got about 15 minutes into that video so i need to watch the rest of it but that was really cool also kyle you and matt need to pick back up the admin bar podcast because i would love to watch those so just a little little poke and a prod to get you guys back on that okay so then the only other thing we have to do is basically adjust these conditions so that the post title is equal to the correct one and then basically the contact we do actually have a contact page on the site none of the other ones existing quite yet exist quite yet and the book now is actually going to be the book now is actually going to be a completely separate site because in this case they have like a whole booking system that's on like a separate url so that might not worked um andre i got caught red-handed last time i shared the uh the youtube page but i swear i watch them on my phone usually i'm like laying on the couch and i just have my phone especially for podcasts i'll just lay it on my chest and just chill on the couch also i gave you guys just now a nice shot up into my nose hopefully it's hopefully it's all clean okay so next up i'm getting distracted here uh next up we need to go ahead and set up this guy down here so this is just going to be another div that has that slightly different color and it has our phone number which looks super good so that is essentially the menu that we've built so far although i need to give some consideration to the uh well no what we could do what we could do is our link container here if we just go ahead and let's uh let's see let me think about this let's take off this margin auto here we are going to wrap this guy with another div and then this one is going to be auto then we're going to set this height to um actually no we don't want the margin bottom auto because oh shoot that's not what i meant to do why is it scrolling with me oh it's because it's the modal the modal setting um where is it trigger content modal styles where's the option to turn off scroll oh it's cause i'm in live preview i'm a dummy sorry y'all um i was trying to think about the scrolling here what kind of load does this approach put on the server not much this is just a super basic modal um taylor it definitely is hard because i mean these are the conversations i'm having inside of my head so i'm really i'm just trying to like relay these out into person um so i i was on i was on a train of thought here before i got distracted with the modal so we have our link container inside of this div so i think inside of this one i need to add one more which is basically going to be our phone button this phone button i guess i got to stop scrolling this phone button width will be 100 not 1900 jonathan good lord um 100 percent maybe this isn't gonna work actually additive after the link container set the modal spacing the space between and give the link container margin top and bottom of auto yep perfect so i am on the right track so let's see and give the link container margin top and bottom of auto if i do bottom of auto though it's going to push it up right where are you saying that i just have to come up with basically like like 50 vh or whatever um and then this guy needs to be 100 it needs to be right aligned and then there is that right there this will be good and then our background color i don't actually think we've set yet zero one eight six two number 49 needs to be removed oh so you're saying you're just like like this basically so get rid of 49 and then phone button will go oh here's that pesky drag and drop what about if we just set this to an absolute bottom of zero and then this modal layout can it be relative or is that going to break the whole thing i think this is working i kind of took what you said and actually it is sort of working because if i take this button now i can paste in this background color that i copied just a minute ago oh wait did i use the wrong color for this one so that one's the zero zero seven whoops so what is the difference here so our background color is set to pvr green light okay so i just i had the wrong global color here so there we go so now this div i do need to make it however tall this one is which is a hundred and eighty so we're gonna go to div height 180. did you set the mode all to space between i actually don't know um no i actually just did middle and then all that i did on this particular div that wraps the links is just set wait yeah i just did middle and then this bottom one is set to uh well absolute actually isn't going to work right because the layout yeah because it looks like there's an even amount of space between this link i wish there was like a ruler it's like a ruler tool because i want to be able to just drag right here so i guess that's 348 and that one says 240. so there's more spacing down there than there is on the bottom take space between and add margin top and bottom of auto yeah isn't that i mean i essentially did that a little bit ago and it was mostly working and then this one this link i don't need the margin on the bottom of that oh but i have it in the wrong spot where is it on the text link yeah there it is so margin bottom elijah says flex grow and flex strength might make stuff easier here okay okay yeah yeah yeah so that is that may be what we're after here so if i remove that ah good call good call andre so that looks more like what we're actually after so then what we're going to do is just center vertically and horizontally this particular button we're going gonna add a link wrapper um this is going to be horizontal stick in an icon element i wish i could do keyboard over if i've searched icon like i pressed right arrow key hoping to get to the icon but i can't do that change that to white in fact actually i'm not going to do this i'm going to change the link wrappers typography to white so that i don't have to set it manually taming says just want to check on the logistics of the stream do you tell the client that you would be doing it live do you share a link does the client give you go ahead based on figma yes yes is the answer to all of your questions um i definitely touch base with them but also every client that i've asked doesn't care because i mean their business is getting exposure this one isn't even built yet so it's not anywhere close to being open uh what phone icon was it it was the it's like an outlined one there it is so it's linear icon and then arthur has been doing either 16 or 20 pixels to the right of the icons so i want to just stick with that for now and then 850 is our area code that don't know what the phone number is just yet so i'm going to stick with that and then this one is oswald light 24 with four letter spacing so that's already is oswald 24 300 letter spacing of four like that i would be a customer if they didn't you can just come park in my driveway you don't have to pay for that buddy and then how wide is this whole thing so that's 256 plus that so it's 20 so like 275. so let's go link wrapper width of 100 and then a max width of 275 and then we would typically go with like a telephone number here so i'm just going to go eight five oh five five one two three four so that looks good now the only thing i haven't done so far is set our modal close so if we look in here the closing says um elements with oxyclose mode all will act as a close button so all we need to do is add that class to this oxiclose modal cousin eddie hell yeah brother come on down i don't really have a a place for you to dump your your black waist but uh there sure is a sewer nearby okay so if we click oh i didn't set the trigger whoops so our modal trigger we need to turn this to inline so we can actually see this here so our trigger is going to be user clicks element will be this whole guy right there and this is definitely kind of a broken layout at the moment so i could realistically move my modal outside of this div here um i don't think it's actually going to make that big of an impact on the real layout based on where it is in our structure panel so if we refresh click this then there's our modal yes that actually was way easier than i thought it was going to be the only consideration i need to make right now is just this close button probably need to push it in more we positioned it absolute so we can just add some you know padding on those sides but if we click our x there then it goes away that actually looks super good super good i love that so then let's go back here icon id um can you i was wondering if there's a different way to position it other than with pixels can i do percentage yeah wait did that actually work well i think it's 60 pixels of padding on the right there so i want it to be pretty much in line oh it's 72 that's why it was slightly off so we're gonna do wait where to go it layout so 72 there so it's on the right edge with this stuff here perfect and then i think it looks good there let's go ahead and take another look on the front end just to be sure perfect so now that's actually visible i don't know if it will be all that uh visible on mobile but let's take a look yes that looks so good because we have to account for the fact that the admin bar won't be there every time i say the admin bar now i realize how fantastic a name the admin bar is for a facebook group and like a youtube channel around wordpress i wish i was that smart um so now the only thing is that our conditions oh right the conditions aren't working because i didn't set these so i am actually going to switch these real quick so we can kind of see what it will look like in a real use case so eventually there will be a page called resort map and we did it to contact and then book now actually will never show up to be honest because there won't be a book now page on this actual site but if we go refresh now then our menu icon is going to show which page you're actually on uh let's see the contact page oh the link doesn't work what did i do did i not set it uh [Music] also i just realized we have a small hiccup with the actual link elements well no no no no we don't never mind forget what i was saying that one is set to home we're going to go slash contact here save this and just double check that our modal arrows are working so right now we're on the home page then if we switch over to contact there is of course nothing right now on the contact page but we do have our arrow there let's go yo whoo this kind of stuff makes me so excited i love doing stuff like this and it's like literally nothing on this site that you see has required even one line of code absolutely amazing so cool no css no javascript nothing thank you oxygen um so let's see trying to think trying to think what else the only other thing is the squiggly line underneath our text links and to be perfectly honest i am not 100 sure how we're going to achieve that and then we need to actually position it on top of our header properly um let's see well first of all we can get rid of a lot of this padding here let's drop this to like 10 make it a bit cleaner and then squiggly line oh squiggly line in my eye why i can't remember what that line is there's like a family guy where stewie sees the squiggly line in his eye uh so if this is a path what if what if we exported this as an svg trying to think if we exported it as an svg then how do we make it show up on hover is that going to be huh this is a tricky one so i don't quite understand the uh like after and before pseudo but i'm feeling like that's going to be the ticket because essentially i'm also thinking about whether we could add a code block that when you hover over that class it makes that path appear but i'm not sure how you make it trigger underneath that background to the div on hover that could work you'd have to use like an image let's see in order to show it on hover you assign class to the container and hover class yeah i'm just talking about like where specifically we need it to show up and how we want to do this to make it like as simple as possible after is the key yeah elijah we were saying that earlier so are we going to apply like an after border link wrapper hover dot squiggle i love it that's definitely what we're calling that thing is dot squiggle okay so then the question is gosh the question is where uh [Music] export the squiggle and set it as the background image of the after sudo on the link wrapper so i don't think i want it to be there or do i hmm trying to think on the wing wrapper okay so after background i think i already had this wiggle oh no i didn't uh png because i don't have safe svg path.png there it is yeah andre i was kind of thinking the text as well but i was hoping maybe that would work because i wouldn't mind it to be there for everything see so after layout display look give it a background image yeah so it has the background image so we're good there um and then don't you have to have a width set that broke some stuff which is pretty cool let's see so the the problem we ran into earlier with what we were trying was that of course when i stuck something in the content then it broke that layout so just not quite sure width 100 and height probably as well and then height i don't know 20 there it is so then we need to position our uh element a bit more so first of all design with kraka good to see you here and then this is set as the background on that and then you can set the text link to a flex direction of column okay yeah so i think i want to take it off this div so i am going to get rid of this after and then we're going to go back to the text link go to after background i'll probably switch this to svg later but this is okay so width 100 and then the height we did like five pixels or something right five use specific height in pixels okay i got that so then we have the background we have the height and the width so what are we missing at this point to make it actually appear usually on css you do container hover.child class uh oh just rip water all over my lap and all my dadgum t-shirt i mean i'm in my dag i'm telephone uh set it to display block okay there we go andre yeah you were saying give it a specific height and then you set the text link to flex with the flex direction of column i want to try both real quick and just see flex direction of column works as well so then for our after oh wait but i need to do that flex direction not uh right right right right yep so take that back off and then original flex direction of column yeah so then the after state height let's see i think it was eight pixels high it's actually six so there is our squiggly but it looks cut off there we go so if it's eight pixels then it actually works cool so now then what do you do to make the squiggly only appear on hover and i think we probably want it to be on this whole well no probably just the text link because that's the actual that's the only part of it that's actually linked so we have our squiggly and then yay thanks everybody so what now to make it actually appear on hover so we're gonna go um rv menu links is it hover after or something like that or what are we actually gonna do that's the only question that i have at this point real quick i just want to go admire our handiwork on the front end that looks sick and it's so cool because that part of the squiggly bit is linked as well i just love it hide it first then add a hover after state to the parent so okay so then that with css we're gonna have to do with a code block right because you can't add that stacked like hover after in oxygen or can i add a selector that would be hover after so just to visibility hidden opacity zero oh you can you can add hover after you can i want to stay in the states drop down oh wow okay all right all right all right so do i need two no just like that so dot hover after so then we would get rid of it here in the after state or no no no no i see what you're saying so in after it would be opacity of zero and then uh oh do you have to go back to hover after like that that's kind of weird and then effects opacity of one to display on hover set the opacity to zero you can add a custom state so i changed it back to full opacity and it doesn't seem to want to work is effects opacity zero not the right oh there we go there we go i just i just wasn't hovering over it sweet so that is awesome and then now would i just go add a transition to the regular state is that going to apply to everything sweet all right there it is that's awesome so then where where is the transition going to apply is there a specific spot that the timing transition or do i have to do opacity no maybe i have to do it to the after state on the after put the transition on after okay so it has to go in the after state as well [Music] let's go this is so sick i love it let's go admire your handiwork that is so cool will you add this whole menu as a reusable object at the end uh no because it's in my sitewide template right now we're editing my all pages templates this is going to apply to everywhere across the site so we don't need it as a reusable part golf clap fantastic job so now if we go to contact then we get our arrow next to contact and we get our squiggly line bit super awesome that's really cool yeah thank you for pushing me to do this because quite honestly i almost skipped it but it really wasn't as hard as i thought it was going to be and so just in summary to achieve that what we did was go to after set the background to the desired image under the size and spacing we set a width of 100 percent gave it a height then in our layout we did nothing in our effects on the after state we set the opacity to zero we applied a transition to the after state then we added a new state which is hover after and then in this one we just went effects opacity and change that to one that is super super awesome very very cool i'm this is just so simple but i just absolutely love it i completely agree with you elijah the custom underline it totally does make it feel fancier so andre i appreciate you hanging out you're here like basically every time we do one of these so i appreciate that and you uh followed me on clubhouse so i appreciate that sweet so then the other thing that's super awesome about this is let me actually go back to my home page because one thing i didn't want to have happen is the modal background to scroll so that is something i want to turn off i think um which is what i was looking for earlier there is a way to turn that off i thought or am i just insane close model automatically no close on escape key yes background backdrop click yes i could have sworn there was a way to prevent the modal from scrolling but maybe not not a big deal let's have a little peek over here at um the mock-up so our menu is almost done we still need to figure out how to push it into our content so what i'm going to do in this case is actually just change this to hidden um i am going to change the background of our menu div up here to be fully transparent so wait i had a plan i had a plan and it's suddenly falling apart for how i can get this on top of our inner content simon i appreciate that really nice of you to say sometimes i feel like a straight up idiot and i'm like not getting what people are sharing but it just is so good to get uh would be it just it's just so awesome to get this stuff uh just wanted to touch real quickly on the support that you guys have given me it's absolutely awesome we've had uh two different people donate on this stream which is incredible just i just like i've said before can't appreciate your generosity enough so thank you and uh we have had a ton of people watching here this entire time i can't believe it uh last last stream was the most people that have ever watched at one time and this one is not far off so i really appreciate that and elijah says web design battle would be fun replicating dribble mock-ups or something yes i would leave that up to some other some other folks i believe jay barrios awesome super glad to see other f1 fans i'm super stoked for the season that's going to be kicking off and kyle says absolute position top zero the header and increase the z index that's actually not a bad idea kyle says give a thumbs up to the stream please please do that would be amazing thank you very much web design battles yes so what i would love to do with the web design battles um is like i would love to kind of like moderate and host and then have two other people from the community actually do it because i really think that if those two people could focus they weren't worried on chat and they didn't have to narrate and i could do it then that would be super awesome so give me your suggestions on who would be your like top picks for the actual competitors my vote would be um my vote would be kyle and elijah but the difference would be well i was gonna say you can't use any custom code something like that uh andre says jonathan's surprised about kyle having a good idea it's just always surprising when kyle's not trolling me [Laughter] um oh wow the likes just shot up thank you guys i just noticed that the light count went through the roof so kyle what what if what if um elijah had to use his left hand on the mouse only like he had to hold his right hand up the entire time so then he has to use only one hand and then he's just like severely handicapped elijah says no come on man it was your idea kyle's you have been very nice this whole stream you've been fantastic and you gave me tacos last time so i appreciate that or maybe i should say you gave me money that uh will turn into tacos eventually elijah says i'll use nothing but my track pad and my nose yes please that is perfect i love it now that's a competition kyle build an o2 and elijah has to build an elementor just to even it out that's hilarious uh while you guys are goofing around i'm gonna set this to zero um static is it fixed does um so what i was trying real quick was just to stick this div oh it's z index so it's absolute zero and then the width of 100 there we go yep good call i was just i was just confused on i'm actually gonna go way higher as the index just to be super clear i was confused on why it wasn't popping up there now let me double check what the uh what the spacing is i believe it was 40 pixels and then is this one all oh it wrong spot this one is probably also 40. yep so on this div we're gonna go 40 pixels on the top close button needs fixing on smaller screens iphone 8 se oh okay um so let's go back to live preview and uh let's refresh this bad boy so we do have some overlap issues there but we'll fix that in just a minute so what happens on like the iphone 5 and sc oh yeah so it's kind of off i see what you're talking about maybe what we'll do is for the smaller screen sizes at like less than 992 or maybe even 768 because 992 still looks fine maybe we'll switch the close icon to the left so it's not right on top of the home so we'll go uh what was it 72 to the left i think that'll be good and then the backdrop click still works so that will be fine cool so i'll test that on some other phones in a little bit and now i'm going to click that off i don't really need the model so i'm going to hide that and then we do need to figure out our footer situation so before we switch out of our sitewide template we're going to come down here real quick this guy is going to be mega easy this one right here and then this one will be some grid oh look we have another uh we have another squiggly situation on the hovers down here so now we know how to do that uh you'll need to set this overflow the modal to scroll on smaller devices yeah actually probably so kraka you're right let me go back to that model while we're still here and then like at less than 992 let's go to live um let's go to layout and then overflow will be scroll but i don't want i don't want left and right scroll bars so we'll have to double check that that actually works just fine but i'm just gonna use that as a little bit of a handicap at the moment so that we can move on and get to our footer because how much time have we been doing this this time seriously flies by when we're doing this it's kind of crazy um [Music] well let's see what are we at oh nearly three hours so crazy the it's like it's legitimately nuts how quickly this time goes by um so taylor you were saying change squiggly to its own class but realistically we did all that stuff to this class and i'm just going to duplicate this anyway yeah that's kind of what i figured krakow we won't actually see it so it's all good now let's go ahead and stick in a div this guy is going to be our footer this div he is going to be 100 uh i'm going to ignore the background color because we're going to have two different divs this first one is going to be that upper row so once again this one will be 100 width i think that's the lighter of the two background colors so we'll adjust it in a moment if need be and now we're going to go with a text link these are going to be footer menu links let's check out the styling here so those are uppercase we have our four pixel font weight prata and then size 16 which ours is technically going to be like 18. so font family is prata text color of white uh typography will be uppercase letter spacing of four and then what was our padding i didn't actually check that so 23 above and below and then it's basically just going to be centered so we don't need to worry about the top i'm going to do that on the div though so 23 23 and uh let's see well actually we want this div that's going to contain our links to have a width of 100 but we want it to be a max width of 1440 so then i'm going to take this other div the wrapper and set it to center so then i guess we do actually need a color because there's going to be some bleeding on the left and right edges there um so maybe 1440 isn't the answer let's see well first of all i also wanted to check how much spacing is between these two so it's 130. i guess we don't really need to set that manually though so we're just going to duplicate this out a couple of times i'm gonna go to horizontal space around like that jason thank you very much i appreciate that i don't know if you noticed we have a we have a very dire coffee situation also the stream is not sponsored so i'm not giving these people i'm not giving these people any extra promotion than they need but um i tried something different today i went with an iced espresso instead of my usual just iced coffee i needed to get ripped for the stream and here we are okay let's see um what do we what are we doing here it's basically the same thing as in our modal so amenities resort map contact book now amenities come on amenities i mean tease contact um resort map i think those are actually flipped but i don't really care and then book now book now actually we're going to change this to book meow for the moment hopefully i don't forget to change that kyle says this seemed like a great kind of stream for oxygen to sponsor just saying you got my back brother whenever they sponsor that i'll split that split that big big money with you um let me take a look on the front end real quick because i want to see how that footer is going to behave i guess i could do another div that's what i'm going to do i'm going to wrap this div with another div this one is going to be 100 and there we go so that should solve my problem it does almost so this one needs to have the background color there and then that boy needs to be centered and then i think refresh bam actually kyle that's a super good idea because uh i reached out to them asking to get um you know basically some some help on the review video that i did and they did it so i bet you they would probably do the sponsorship deal that's a that's a super good idea so then we're going to add another div which is going to be our second row down below here so 100 will be this guy i think this one's background color is that uh we're gonna center this boy before we leave um then this one once again this one is going to be max with the 1440 with the width of 100 and then let's see pr asks is it better to do menu and footer as reusable uh and then two for menu footer to use the menu system to update the links automatically both of those are personal preferences and really only depend on what you're doing on your site and whether you need that or not it really just depends very very rarely do i use my header and footer as reusable parts i used to do that a lot before conditions came out but now with conditions i don't really find myself using reusable parts except very infrequently okay so now um we have four columns here so this is going to be the perfect use case for grid and then i'm figuring that these are going to be our h3 class yep they are so i already have a div inside of here what was i doing with this is that going to be our first one i guess it will be so i'm going to leave that alone we'll set this guy to a grid column count of four and then here's our first div so i need to figure out how much padding we have above and below this so it's 28 so i don't need it on the actual columns themselves i'm going to do it on this so it's 28 pixels up above and then this div will end up being [Music] centered i believe so i'm not going to worry about the positioning inside of it just yet so we're heading we're going to add our h3 class then we're going to go rv heading h3 white and on this one we're going to set that to white so now the styling is done for us we're going to have office hours and contact as our first two headings office hours and then we had a text element this stuff is all just made up for the time being so i'm just going to slap it straight on the page and then i'm actually going to take this entire div and set the typography to white so i don't have to set everything manually probably should have done that at first and then it looks like we have an extra space in front of that m or is it centered oh yeah it's just centered okay so now just to make this nice and easy i'm going to duplicate this three times and let's make some further adjustments here so we definitely need to get some extra padding underneath that div and what do we have it looks like nearly 100 there's 96 oops 96 and then contact us i don't remember what the other ones were this address is actually not right but i will use it to make it nice and simple um and then the other two were just a simple description about the business which is a great idea and some social icons and then those links which we are just going to copy straight out of our header so we're gonna stick some social icons in this bad boy you have to check the largest column for the bottom padding oh okay yep um we're gonna change this background color wait let's see was it circles oh no it's the squared ones and then the background color looks to be kind of an opaque white oh no it's our global color and then it becomes oh okay so it's the global color with a 60 opacity and then on hover it becomes the full color so that's kind of neat so our background color will be that with an opacity of 60 and then on hover it has an opacity of one and then the icon color looks to be oh no not hover whoops that's not what i meant to do on our original state then the icon looks to be actually transparent isn't it yeah it is so uh i guess we just do it as the same color as the background that works sweet so that looks good and then last but not least i already forgot what our last column was it's these text links so we are just going to rob those straight out of our modal to make it super simple so i'm going to take that get it all the way down in here we're going to stick that right there heading and text bam and then we'll go to and then i think what we're going to do is reduce the margin here quite a bit so rv menu links footer will be our class that we add and there is only 24 pixels of margin on that on the bottom so then i'm going to take this class and just stick it on all of these and oops i can't select that there we go one more time save and oh actually i don't need it on this one i actually need this one to be um well i don't need this class on that one at all and then on the id i can just set this one to zero because that one doesn't need the extra space so kyle dude it's funny you say that i say it as modal but i used to say it as modal i think it's kind of a potato potato thing or like you know soda versus pop kind of deal unless i'm just like nuts possibly um terms and conditions privacy policy and rental terms i think are all really fantastic uh example pages here so privacy policy and rental terms modal yeah chris good to see you buddy welcome in i don't know if you've been here the whole time but i appreciate you chiming in uh so there is that sweet that was super easy to replicate our little squiggly guy you can use last child oh okay i just typically go with the uh the margin 0 on the id for the last element because it's typically not that big of a deal i also just noticed there isn't proper spacing between those which is 16 so i want to fix that real quick and then okay refresh this bad boy and oh so we have a bit of a mistake here um we need to wrap this div one more time and then this one is going to be 1440 background color is the dark boy right wait no i don't want the 1440 on this one i want it on the second one which i think i already did no i didn't 1440. um i still have that white space what did i do space between the social icons yes although i believe that the social icons oh well no i guess it does work 30 pixels what is the what is the proper number here so it's 16. i don't think it quite equates though right oh maybe it does i'm just wrong design with krakus says what happens if you swap the elements and another one becomes the last element using last child solves that oh okay gotcha yeah i think i would do that in a case where there's a lot more of them or yeah something where it wouldn't take me two seconds to fix it um what was i just doing i guess it was the background color making sure i hadn't fixed that issue so this has the background color of the green width is 100 percent and that should solve it oh but i need to center it there we go one more time refresh huzzah and then uh we probably need to fix our grid gap because these look pretty close together here and the earlier stuff we've been using about a 40 grid gap so i'm going to bump that up a bit uh is it this one right here is that one the one we set grid on right there okay so 40 grid gap and then we need to look at this on the mobile break points 992 let's do cram so we're going to drop to two columns and then 768 is where we're going to drop it to one column cool so there's probably more oh do you need to set the grid gap again oh row gap okay so i actually think i want to go back up to 992 and change the row gap here to 40 and then at 7 68 it's going oh it doesn't apply weird maybe that was a mistake i made but anyway i just wanted the rows to have some extra space in between them now i wanted to double check real quick and make sure that our links right above this footer uh i think we should be back i think we should be back are we back hopefully i didn't just kill the stream awesome all right we were covered yay i don't know what i don't know what uh just happened there that was super bummer so what's really weird about that is that the like the youtube interface was still it was like going but there was a little spinny guy and obs looked fine but then when i clicked something in obs on the streaming like portal then it just blew up so um yeah there we go so we should be back sorry about that so maybe there's a problem with obs when you're streaming for over three straight hours nothing has changed on the screen here so let me just switch make sure everything is good on my side yeah it looks like we're all good okay sweet thank you guys for your patience i'm sure that happens from time to time on other sites but anyway what i was doing i'm not sure exactly where we left off what i switched to was the home page so that we could try to get this stuff um you know back sorted out yeah i know elijah is gonna take another dollar for the stream failing i'm down to three this sucks [Laughter] okay so all that i did was just push some margin there but to be honest i think what i want to do is go margin top auto and then does this section have more padding on the bottom it does so that's just going to push it down but what happens if we're on smaller screens does it start to go completely haywire yeah so there's something with this section that we have to oh actually i didn't adjust the mobile responsive view on the actual logo up there so we're gonna need to play with this a little bit so 1440 i think i'm going to change this width to 50 percent then 992 actually no i don't really like that i'm going to leave it as is 992 768 and then at 480 i think we need to change the div now to 100 width and then we need to shrink this heading from what is it 52 i believe yeah 52 down to about 38 and then should we drop that to 16 no that's too small uh oh crap sorry no wasted time when i restarted obs it wasn't automatically switching i'm sorry y'all we are stuck on the figma screen no okay this is where i was sorry about that um so basically all i'm trying to do is just adjust this stuff can you guys see oxygen now and then if i switch back to figma yeah it's working on my side so it should be good to go i'm gonna definitely put that in this tutorial how not to run a stream in your last 30 minutes [Laughter] but those of you guys that donated the money stuck with me so even though the stream sucks you can't give it back just kidding appreciate it thank you um so what i was looking at is how this collapses on the smaller screens so that heading is pretty huge but everything does fit i need to check it on my actual phone and save this real quick so that's what i'm going to do i'm going to look at it on my real phone because sometimes it doesn't quite equate between my phone and uh like the what do you call this uh chrome inspect that's what i'm trying to say so it does fit but there's something else broken on the page oh it's the footer yeah so we need to go fix two things and then we'll be pretty much set here so the home page is mostly sorted in our template there's two broken things on my phone which is those links right above the bottom footer and then the header doesn't quite collapse so it's this right here oh actually that one works perfectly fine so the footer links right here is what kind of breaks so since that one is just horizontal uh maybe we changed this to grid so how many do we have five how does it line up so the book now is not all the way over there no that's not going to work we need it to be horizontal to be consistent with the design so then what we'll do is 1440. one two three four five so we still have them all then 992 we're going to just set them to stack vertically i guess and we will go with 16 pixels although we do need some breathing room on the left edges oh yeah flexwrap is a good idea so layout flex uh where is it flex wrap there's a column row where are we at 992 shouldn't it be wrapping by now flex row flex start center oh is it because i made a change over here let me go back up so flex row wrap float scrap that all right so 992 vertical left choose a smaller breakpoint to see it oh sorry i'm clicking around like a like a absolute lunatic so forgive me uh so layout flex ramp 762 then layout flex space between space around i'm not sure that i like that because we would need some margin underneath those i guess that looks okay actually i'm just being a little bit too harsh that works but i probably since it'll be a touch target um it probably needs a bit more margin don't you think so it'll look like that cool 992 no 480 cool yep looks pretty good to me all right so now if we refresh this view then it sh oh there's still something broken is it that that obviously doesn't fit so that needs some tweaking what else is for oh it's that heading recommended partners this is the only thing that is a little hasslesome sometimes is switching back and forth between your template and your homepage especially if you're a bit adhd like me and you want to fix these things on the fly as soon as you see them so you like bouncing back and forth but i'm just knocking out little bugs so uh i did say that i wanted to adjust the box shadow to be a bit softer so let's bump this back down go to like 15 and then the blur will bump that up to like eight clean that up a little bit and then this why is this one so huge and not collapsing i wonder it just ends up blasting itself off the page but it works here oh no not there so what's the font size on this h2 i think it's 48 so at 762 we could bump it down to like 42. does that fit yeah perfect white gap of doom no i should post in the facebook group and see if anybody can figure it out so then now are we set oh i don't think i saved so save and refresh the only thing is that little gap between the colors might be still the cause of this heading it is so um arthur suggested earlier a width of 100 percent and then if we oh wait actually i don't think i want that yeah it's pretty huge i i always struggle with trying to shrink the font sizes and making it look okay so 42 is there and then let's drop down to 36 on this one and i think that's going to sort it yeah okay so at least everything fits in the bounds of the page now um kyle says on the tab website in my main template i did an outermost div that everything lives inside and set it to overflow hidden so i literally can't get a horizontal scroll that's awesome chris asks have you tried using fluid fonts um not really no i are you talking about agency base that other oxygen add-on i actually own that but i haven't really played with it to be honest uh it looks like i also need some padding right here because those definitely shouldn't be bumping up against the edges like that um but yeah kyle send me that font calculator that'd be awesome so our model needs some work although i'm not convinced that that's actually how it behaves on a real mobile device so let me refresh on my phone and see it actually fits it works perfectly on my phone so the chrome inspect is not exactly appropriate although you kind of miss the fact that there's the phone called action at the bottom so i think what i probably do on the mobile is shrink the margins a bit so that you can actually see at least a portion of that mobile button like the phone number button i mean and then otherwise everything else works perfectly fine if i uh if i show you bam sweet okay well i would say i don't know about you but we got this we got this pretty far in an amazing amount of time so once again now it says we're at 11 minutes that's not true how long have we been doing this stream where does it tell me um i don't know it's been hours it's been quite a while so just wanted to give a quick shout out to elijah heinrich and jason for donating on the stream today absolutely amazing really appreciate you guys and uh this is really fun i enjoy doing this a lot like i mentioned earlier this is actually a real client site that will eventually go live probably sometime next month and then hopefully we'll be fully functional in the beginning of may when they're hoping to kind of start taking reservations um a bunch of you guys have been here since the very beginning chris you've been here the entire time i really appreciate that all of you guys have been here really early on and this is just such a fantastic way to connect with everybody so as always i really appreciate you guys hanging out would love suggestions uh on what else you'd like to see i think that that build off is such a good idea the like design challenge so some of your suggestions on who you'd like to see compete in that and i will see if i can pull off getting that organized so as always thank you everybody yeah kyle people like i guess that sort of like companionship of being able to hang out together have some stranger's voice from the internet push you guys uh and hopefully make you work a little bit harder so anyway thank you everybody have a fantastic day i won't be around much until next week so i will see you then until next time bye bye

Channel: Permaslug

Views: 8,092

Keywords: oxygen builder, wordpress website design

Id: W1IuS8sMiTc

Length: 201min 56sec (12116 seconds)

Published: Thu Mar 18 2021