Building a Real Coffee Shop Website in Oxygen Builder - Fernweh Coffee

good morning everybody or good afternoon depending on where you are in the world i feel like i said that every time but it's good to be back hopefully you all are doing well hi alan glad to see you guys in chat if you're here watching drop something in chat let me know you're here say hello it's good to be back i know i haven't posted a video in quite a long time things have been quiet in the facebook group and uh got a few things going on in real life which is why i haven't been posting all that much but hopefully you all are doing well and that you can hear me as well so basically i uh have had a bunch of client work of course and have had a couple things going on i went on a big trip with my son we spent over a week in colorado camping which was amazing really really beautiful back home into real life now and working on trying to buy my house which has been an absolute gosh buying a house is just so difficult so much paperwork so much stuff um it's been really draining to be honest but i am excited i'm supposed to close at the end of this month and we'll see how that goes um so yeah as you can tell lots of stuff going on but happy to be back been i've been missing streaming and you know making videos and stuff so we'll definitely be back on that train sandra says hello hello there and hello from ukraine can't stay but we'll watch the vod awesome happy to hear that what i'll probably end up doing with this particular stream and streams from now on to be honest especially when we're building sites is we're going to build the site you know live on stream i'll be talking we'll kind of have some downtime here and there in the actual stream but then what i'm going to do is chop it up and i will post the actual just you know straight working in the course in my oxygen course so that way if you're someone who wants to just you know basically get right to the point and just watch the actual build then you can do that and i'll provide that for course members so definitely check that out if you haven't already so stratos good to see you happy happy to see you i haven't seen you in a long time hope all is well in your world see just getting a couple things prepared over here uh pavley hopefully i'm saying your name right says long time no see we miss you yeah thanks dude happy to be back appreciate you so as you can see uh what we're going to be working on today is a coffee shop website for a company called farenv which is a german word um and basically this is my best friend's coffee shop they are almost done building it it should be open in a matter of weeks at the most hopefully sooner than that and we are going to be building this site for them so eventually this site is going to have woocommerce capabilities where you can buy their coffee online and i will build that here on the stream which will be very exploratory because of course i haven't done a whole lot of woocommerce content on the stream before but that's been highly highly requested so i will definitely be doing that so this is what you can see roughly in our figma mockup we have both the home and the contact page for now eventually we're going to have an order online function not exactly sure how we're going to do that but it will be connected to some kind of pos either square or it's going to more than likely be clover at this point so hopefully we can tie woodcommerce together with clover and then that way people can purchase things like their drinks and food you know ahead of time like you would with any uh major coffee shop but we're not sure how we're going to do that yet and also we want to get the shop open or they i should say want to get the shop open and really kind of find the kinks before they go offering online ordering just you know to the world so with that this is what we're going to be working on today so this site has a very unique style i really love their logo and the colors my designer killed it on this one using a different designer than some of the other ones we've built on stream and this particular designer is also fantastic so we are really stoked we basically did everything so we built almost everything except the logo um and then of course we built the site kind of around the logo from there so interested to hear what you guys think of this but we're going to go ahead and just jump right into this so normally the way that i would do this is i would have my figma mock-up and my oxygen site on two separate screens and i would just be bouncing back and forth but so that you can see it what we're going to do is just switch between the two tabs so there's going to be a lot of tab switching we've done that in previous streams but just so you guys know strata says orderable is a plug-in woo add-on for delivery and pickup okay i'll definitely check that out now as you can see with this home page and the contact there is this colored background on the right side of the homepage but the colored background is on the left on the contact page which i think gives this a really unique kind of look but it presents a little challenge so first thing is of course the the menu links they change and please begin with the wordpress stage not any design steps got it thanks um the menu links change their color so i think i'll probably have to do maybe some sort of condition so that there's actually kind of technically two menus so that you can have a class maybe or maybe the class is like is not is home or something like that not exactly sure how we're gonna do that and then with the colored background blocks there i think what we're gonna have to do is make the whole header and menu section one div that's just positioned absolute at the top and then that way we can have some sections on the home page and the contact page that are essentially one big div again not exactly sure how we're going to do that so this does present an interesting challenge but it should be kind of interesting even though it's simple on the surface once you really dig in it's not always that simple so i already have a wordpress install set up here with a lot of our images that we're going to be using and so what we're going to do with this is of course we're just going to start off with our oxygen template and my default oxygen install is basically just cloned in cloud ways it has a basic template set up a few pages a contact form just simple stuff like that so let me just verify real quick that this is set to singular post type of pages and it sure is so that's really all we need to do so we can go ahead and just jump right into oxygen i hope everybody watching is doing well glad to see we got some people in chat and watching the stream so thank you guys for joining as always we'll go ahead and swap this over to our home page and i'm going to open the structure panel so you guys can see it i do have oxygen 3.8 i believe on this site or is it 381 i'll just double check real quick um of course it's not going to be super quick so oxygen381 yeah so that's what we're using here on this particular setup so we are going to start off with a div and i'm going to immediately change this divs tag to header because this is of course going to be the header of the website and then i think what i'll do is add an image i'm going to be a little bit rusty i haven't built anything with oxygen in quite a while i have a developer on my team now and she's just absolutely amazing and she does a lot of the site builds lately for client work so i haven't spent a whole lot of time in oxygen except just basic tutorials and stuff so we're going to just pick out our logo here so i should have one that is the correct size there it is so 200 by 175. good morning taylor good afternoon in your part of the world happy to have you here good to see you buddy and actually i forgot to check and see how wide this design is so um it is oh it's 1440 again so we need to basically do what i've done many a time before which is add in a second div here this div we're going to set to a width of 100 and then we're going to set this div to a maximum width of 1440 and then on our parent container we can just set it to center and then of course we need to take this image and get it inside of the second div which actually is much easier now in oxygen three eight uh stratos ask is that happy files yes this right here is happy files um it's really nice i started using it on all client sites just because it's really great to keep things organized and for a few sites where clients get in having the photos organized in these folders is really handy so i really i really like it a lot taylor says are you using core negative i'm not using core um again just in tutorials i prefer not to to do that okay so now we have our image i think the only other thing here is our text links and some social icons so let's see what is our font oh gosh missing fonts hopefully i didn't even think about that i didn't install these font files i don't think i actually have them which is a huge bummer um maybe i can message my designer and see if she can get that to me i'm gonna do that real quick fabio says hi from italy hello fabio glad to have you please share the files thank you um all right good to go so we're gonna do the best we can without the font files i didn't even think about that like i said i am a dad rusty on this stuff but uh we'll do our very best here so just our font up here is what it's sign interesting i guess we'll just use like oswald or something for now and hopefully she can get those files to me and then we can actually use uh matthias altman's script that i've made a video on before so we're just going to go with another div here i think there's a tag for menu isn't there nav there it is yeah so we will create a text link and let's do some classes here so we'll go with fc for fair and v coffee and then we will go with main menu and let's call this one probably dark because this is going to be the dark version of actually we're going to do fc main menu and then we'll do another one which is fc main menu dark so we'll set this text color to i think it's basically just black um well nope it's white it shows how much i know and we're going to have that green on the on the background there how are we going to do this exactly i don't exactly know but what we are going to do is set our spacing on the right side of that text link to whatever this is which is 48 and we're just going to duplicate this a couple of times i want our nav container here to be horizontal and then we just need to name our links here so home uh i think the second one is actually gonna be menu i think right now it's order and then about us and then we're gonna have a contact page and then this text link we are going to just set to a margin of zero well actually no we're gonna undo that because we're gonna have our social icons over there are you using svgs for the graphics no but i could just pretty easily export these as svgs instead of png that's actually a good idea i should probably re-export these because they all are pngs at the moment but i don't think this site is going to be very big in terms of page size so it should be okay so horizontal middle middle and let's go space between like that i do want to go ahead and let's see here while i'm here i'm going to go ahead and set the correct links we don't have a menu page so i need to go make that you can see there's a couple of pages like i mentioned that are already created will it be a transparent header stratos says i don't think so header will be an overlay and two divs with bg colors that's actually a way better idea for the two divs with the background colors hmm i just got my font files so we can get those installed here in just a little bit so now i'm rethinking exactly how we would do this because if there is two divs in our main template that's going to make it a heck of a heck of a lot easier to make adjustments later on i'm kind of thinking that's the way to do this let's just go ahead and try it so if i have and well maybe we need the div to be outside of our main header container and then we would want the background color to be this green oh it's a linear gradient interesting okay all right so let's just go ahead and make this div have that gradient background so we're gonna add two colors first one is that and then the second one is this lighter color and then what is the direction it's like uh i don't even know not 90. 120. no it's two it's not tall enough yet let me go with uh min height we'll go with 100 vh and then i think the colors are actually reversed i think the lighter one is down in the lower left but we can probably just change that with our angle 75 why is this so confusing there we go that's about it so 240 puts the lower green down there and then up there okay so then this div doesn't actually need to be this full width we need it to be up there behind this so then probably need to add one more div inside to wrap that and then one's going to be half and one's going to be half and then i don't actually know because we don't have any of the other page designs finalized yet whether they're going to have this same colored section so we might set it up to be relatively simple right now but i was thinking maybe down the line if we have some sort of dynamic color option that would be pretty cool i actually saw a thread in the facebook group a day or two ago where taylor was talking about having an acf color picker that you can use to kind of dynamically pick colors via an attribute which would be pretty sweet so we could definitely play with that so actually i want to take this div i am going to wrap it we're going to set its width to 100 percent then this div it's going to be 50 percent i'm going to duplicate this one we want this to be a horizontal alignment so now we have our two colored divs and again i'm not 100 sure that this is going to work but we will play with this this is exactly how i would do it in a real life scenario and then what do we have here so this one is again a linear gradient but the colors aren't that much different so on this left one i'm gonna go to that and then this guy are they the exact same oh yeah they are so it doesn't even need to be a gradient actually we could just take this we could delete our gradient and then just go with background color and let's call this something what does hoverify call this color oh i thought it gave it a name maybe that's that old color picker tool that i used to use it would like kind of give you a name we'll just call this like sand or something like that okay so now we have the two colors and then what if we go with a layout with an absolute of zero top and a z index can you do negative yeah all right and then this left div we'll call this we're gonna actually rename them to make this pretty clear so sand color and then we'll just call this one green color and then we can set these to be conditional which will be kind of cool maybe i have to duplicate it again if i'm going to use conditions because we don't need this sand color one on the left for the home page we just need it to be white and then on every other page that's not the homepage we'll probably use this tan color sand is what i called it that would actually be kind of interesting so if i duplicate this ice cream yeah i like that ice cream is better so i'm going to duplicate this div i'm going to set this one to white then we're going to take the sand color one and we're going to set this to a condition of post title does not equal home or perhaps it should be post title is equal to contact because i don't know exactly what the other designs are going to be and then i could set this to show and hide based on condition so now our white div here oops white color is the one on the left side and then the right side is going to be the green which is the correct one and now over here we have the white uh for our text and our social so let's go ahead and do that so our fc main menu class we're going to set this text color to white and then we're going to make some social links i think what i'll do is probably just build those manually with the link rapper possibly let me toss in the social icons real quick and just see we'll see if that's the route we want to go stratos says why aren't you using the header builder element i really don't like the header builder it just feels so restrictive you have this three predefined blocks and so i pretty much never use that or the pro menu i pretty much almost always build the menus manually and then those icons are not circles they're just the plain icons kind of like this so we're gonna just shrink these way down to like 20 pixels and then they definitely don't have twitter they're going to just have facebook and instagram and then the space between the icon will bump that up to probably 20 as well maybe even a tad less it's really frustrating though the way that the social icons have like this extra padding on the bottom and it sort of overruns the whole block the whole div there but whatever we'll deal with that at some point now there is some spacing here how far off if i get out of this how far off that so 50 left and right probably if i had to guess yeah so we're going to take our div that wraps our logo and our text here and we're going to go with 50 i guess we'll do margin 50 pixels of padding on the left and right side to get our logo and our menu off of the edges of the the container and then what do we have for spacing on the top i bet it's oh it's 31 okay so we'll just do a nice round 30 on the top to push that down so cool making some progress alrighty and then i do want to go ahead and get the fonts installed so i believe this is let's actually go back to our admin panel real quick i need to get code snippets which uh for some reason i don't already have installed so we're gonna toss in code snippets and then i need to go pull up the link for that font script so altman.de so this is the um this is the the font script we're going to use i've made a video on this so if you haven't seen this definitely go check it out and really all you need is code snippets and then we're basically just going to take his script which you can download i forget where it is it's somewhere in here code snippet download download and then what we can do is come back over here to code snippets we'll go to import we are going to upload this font snippet and then i think it turns itself on oh no it doesn't you got to come switch it on and then what's going to happen is there's a folder that you upload your fonts to which i won't be able to show you because it'll be on a different screen and ftp and stuff well actually we can just do it with one of the file manager plugins so you can see it let's go with wp file manager i don't know which one is better i'm just going to pick this one so i would typically do this with ftp i just prefer that way for security sake i know some of these file manager plugins have had compromises in the past which is not particularly thrilling and then i forget where the actual directory is let me go check it is wp content uploads slash fonts so wp content uploads and fonts already exists so now we just need to basically drag our fonts into that file so i'll just drop those two in there so there is the two fonts that we're gonna use so there's sign which is the menu font and then i think the shriek hand is the big font here um [Music] i don't know where it went yes there it is right there perfect vj asks what tool to build the mock-up is figma yep figma is fantastic so now if we go back into oxygen go back to our templates and i'm going to edit that main template that we were just looking at and we should be able to get in the um the actual fonts from our mock-up now so they should be correct so that is the contact page i actually want the home page so our preview is correct and then our text links here we can change our font family to the sign text which is perfect so then those are uppercase we need to bold these i believe 700 and then it says font size of 16 but it seems a tad small to me so what about if we went like 18 that looks reasonable i'm fine with that see again this is why i mentioned earlier building the social icons manually because this just look really bad so i'm going to delete those and we're going to go with would it just be an icon i guess we'd have to do a link wrapper because if you use an icon it's going to end up just converting it to a link wrapper anyway so fc let's just go with social icon will be our class name i'm going to do like five pixels of padding then inside of this we're going to add in an icon we're going to make this icon size 25 and i probably should have made that a class but we're going to change this typography to white so it changes our icon itself and then this icon we will change to facebook and then i believe it's just the f itself not the square yeah perfect and then we'll duplicate this link wrapper and this one will be instagram instagram perfect so i don't actually have links for those right now but i'm gonna just go ahead and leave that and let's set this to middle align and perfect okay that looks solid so with this being so shrunk let's go take a look on the home page it's much further away from the left and right edge so i guess what i need to do hmm that particular div is all the way over to the right so it's kind of centered in this well actually not quite centered but this text is centered i think that's what you're talking about stratos is another div to wrap the two icons you said for the mobile but i think i'm going to need that anyway because it doesn't line up properly and it's partly to do with my page container i believe but i don't like how you can see it's way off the edge it definitely is to do with the page container hmm it's funny how these challenges present themselves as you're kind of going through things you don't even notice off the bat and then it it presents itself trying to think about how we would do this i guess maybe this div would be can i do a left margin no why is it off the edge right there oh i guess it's because of the margin of the container maybe if i used if i use padding it's going to push it the wrong way i believe is it so that's closer that is definitely closer and then it doesn't account for the fact that some screens are going to be wider because of course in the design it kind of cuts off but that is definitely better there is no section here i mean i guess i could remove the full width but that's not going to look good well i guess i guess you're right i guess that would actually make sense because this everything else that image that image and that text there are 1440 so if i remove that max width and then i went 50 50 remove the margin vj says i like these live streams i thought i'm the only one suffering such things while designing see that's yeah totally i completely agree with you that's exactly why i um really enjoy these and i think people do people do too because you see that everybody struggles with this stuff okay so stratos was right um i just basically needed to remove the max width on that particular section and it pushes it out to basically the exact left and right edges which is what we wanted one small thing is making the logo image linked back to the home page so i'm going to go ahead and do that and so there we go so that is the beginning of our header so we need to do one small tweak which is going to be essentially duplicating our nav div and then let's make some tweaks here so we now have two of them um let's make this second one let's rename these real quick so we're going to call this one home nav and this second one is going to be inner nav our home nav we're going to leave exactly as is and then the internav we're going to change the class here because we already created one called menu dark so we're going to change this text color to what is it um 5 4 uh and then let's see we need to remove the dark class on these because it doesn't need that dark class and then our social links are also that same color over here in this secondary nav so i'll go back to this we're going to go with fc so oops social icon dark and then we're going to set this to i believe i did typography color there we go and then i'm going to copy this class name stick it on this particular link wrapper and there we go so then once again we're going to take advantage of oxygen conditions so this home nav we are going to set to condition of post title equals home and i will set that to show and hide based on condition and then this inner nav will be very similar except we're going to do post title does not equal home and then once again we'll do show and hide based on conditions so our editor isn't super clunked up now of course because my structure panel is open it messes up the alignment but this is actually how it's supposed to look so i am satisfied with that now if we go over to let's just go to slash contact there's nothing on it but oh that's funny we need to make some adjustments here so we should actually have our tan color and our white and not the green so on our green div we want to set this to condition of post title is equal to home there we go and pavli is pointing that out exactly as we're coming across it so thank you very much but there it is so perfect that is exactly what we were after i probably need to add some sort of animation some sort of underline effect to the uh hover here what would i what would i do i don't exactly know maybe some sort of underline i'm gonna leave that for a different time because those are the sorts of things that i get hung up on and it takes a million years for us to do now let's go ahead and create a dive um we got two separate things going on here so i think we're going to have one div that will contain this this text and this button along with this image and then we're going to have a background maybe on the white div that will contain this line effect so in the white div couldn't we just essentially take this and then it is which one that guy here is that exactly what we were after was it that easy wow yes yes yes yes sweet because that white one is not going to pop up on the contact page so then if we switch to contact then i actually want this to be show and hide based on condition the white color why is it popping up there because the white should only be home page did i not apply a condition to that one so this one should be post title is equal to home and then on the sand one it is the other effect which kind of swoops down okay so let's go to our sand div background and then the swoop down do i not have that one it is basically the inverse so i guess i need to grab this one real quick is that this one yeah so export group four i'm going to rename this real quick so this one will be fair and v swoop line okay and then i'm gonna upload this guy underline can be achieved with borders and taylor is linking an underline animation let me take a peek at those i don't want this to repeat and then i want it to be top would it be 100 and then it's slightly off here oh but it goes over the whole thing so i can't actually add it to this one [Music] stratus says why don't you build the hero section on the page you're in the template now good point good point um it's a very good point hey kyle glad glad to see you in the stream i haven't been around for a while you're totally right i'm happy to be back though vj says add to background and make z index yeah this is not going to work there because it goes across the whole thing and it can't be this div because that one's just essentially a wrapper so add to background into this thing maybe that one is going to have to go on the page content but stratos is right because we are still working on the template so i was getting a tad carried away here but the thing is these kind of do need to be in the template and he says and you can add a section with the lines as a background and then add overlay the div yeah you're right yep yep yep so then if i go back to the home page i probably need to get rid of that one although it works so beautifully i might just leave it i think i will just leave it to be honest so we're going to rename this div will just be our colors and then this one is our header perfect toby says hello oh this isn't is german uh the name of the business is yes totally so then we're gonna go with our inner content element in our content uh we'll do a minimum height of like 80 vh and we're going to add in another div down here which is going to be our footer and let's take a peek at our footer so this is another version of the logo that i don't have so let me export this once again i need to rename it i wish the figma stuff was named properly um fahrenheit footer footer logo.png okay okay so then what colors are we working with so this one is interesting is it really that that kind of looks brown to me but it actually looks black-ish no that's a that's definitely a brown that's for sure just looking at it though the hex color kind of seemed black for whatever reason and then underneath that we have another div which is orange so i will add in another one and actually i think i need to remove this background color we're going to add in a second div these will be stacked they're both going to be 100 width and then i think i have the orange on my clipboard we're going to save this as a global color so farren v orange and then this one i didn't save the color because i'm not that smart so we're going to do this i think i might have saved this as a global color already did i i guess not um we'll call this one aaron v brown i don't think it's actually brown it's some sort of color like that cool and then my tag here is footer so we already got that done and then this looks like it's restricted to the width of the page so we might need to add another div so that they're restricted to the page width of 1440. so let's go ahead and do that one div inside of here we're going to go with the width of 100 percent and then set this to max width of 1440. i'm going to go ahead and duplicate that and bring it into this div if i can of course not drag and drop is still broken in my opinion and we are going to on these parent containers set these to center and now we can start actually building something inside of these so what do we have here four columns so we could easily use grid we could just go grid column count of four uh wait let's go with no that's not what i meant to do i meant to rename this i'm confusing myself with all these divs here so top row and then [Music] second row this div we would basically just want to add in a div duplicate that four times perfect told you guys i'm rusty and then once again we're gonna go grid column count of four and then div one two three sweet we do need to add some padding and stuff but we'll come back to that in just a second so inside of this one we had our new logo which i didn't upload the footer version of our logo which is just kind of a more simplified version and i do want to go ahead and add some padding so it's essentially 61 top and bottom so we'll just call that 60 keep it nice and round 60 top and bottom and of course they're not actually full width like this just because of the way the structure panel is open it's shrinking our page width but that's fine and then is this one that one's certainly not 60 it's 40 top and bottom is what we'll call that so our second row we're going to go padding 40 top and bottom like so and our bottom actually may not need to be a column count of 4 i just got carried away doing the same thing a couple of times but we will adjust that accordingly in a bit so what do we have next we have address phone number and our social icons so we'll need to add in a heading that has a class so we can easily duplicate that for those three headings and then it looks like this is our sign font thanks stratos for hanging out have a good day all right let's keep going so this is the shriek hand font size of 25 letter spacing of two and that looks about it so what i'm going to do is add in a heading i'm going to change this tag to maybe like an h3 which we can always adjust later we'll call this one fc footer headings will be our class the font weight was 500 is that what it was yeah it's just regular our font family is the shriek hand i actually don't know what the color is so i need to take this it might be the same as our sand color from earlier yeah it is okay cool so we already had a global color for that uh again i already forgot what these are so it's address phone and follow us address and we do need to add some letter spacing then we're going to take these and drag it right in so phone and oh i already duplicated it oh well follow us all right and here's an example of why using a class before you copy them is sweet because i don't actually know what the spacing is below since it's only two but that's partly to do with the line height so the line height according to this is 10 but that's not exactly what we're after so maybe we need to make this line height is it two ah yeah i guess so because well no not quite i'm trying to see how that lines up so maybe what i'll do is remove the line height and i'll add some margin under this of like one rim or something i think it's going to be a little bit too much spacing but that's okay as always we can adjust this stuff so what i'm going to do instead of setting a bunch of colors on individual elements here is on this wrapper div i'm going to set that one to a typography of white and then that way if the color is not set it just makes it white which is sweet and then in fact we could even take that a step further by going to typography and setting the font family to the sign font and then as you can see it just switched it so we don't even have to worry about that it just essentially does it for us and then that font looks pretty big what size is it says it's 25. so then could you even go 25 sweet you can and we're just going to copy this it's yelling at me because i don't have the fonts but i actually do so how do you there it is right there there's a copy function in uh in figma so i'm going to set these to left align all of them we don't actually have a phone number yet but that will be coming soon so we're just gonna make one up this is going to be a text link and the area code is 855 850 something so we'll just make it that text color is white and then our hover color will be the sand that looks pretty good it's very very discreet but you can totally see that and of course with your phone number you would typically go with a clickable link like that and then our follow once again will just be our social so let's go with the link wrapper we made a class earlier that we can essentially just rename stick in an icon it's going to be facebook and that is way too big so we're going to set our icon size to like 25 and oh we're not in the second row it's like where did my stuff go duplicate this link wrapper and in fact we need to wrap our link wrapper with the div for structure sake come on come on there we go and then our second one we are going to change to instagram i don't have their social links handy but we will uh as always worry about that later not terribly concerned with that and then what does our second row footer look like it's just our menu again and then a button that says order online so to make this super easy i am going to just steal the menu oh actually we don't need all these divs and we also need to change our grid count to maybe two i'm going to steal the menu out of which one is it our home nav so i'm going to copy this bring it all the way down here to our second div we're going to remove the condition because this one's going to show on every page and then let's go ahead and stick it inside well actually that is already a div so let's just delete this second one and then we just have a button right yep so order online we don't actually have this button created so this will be good because we can create our classes and stuff why is it not zooming in there we go alrighty so our background here is one of our global colors i have taken to using link wrappers lately for buttons instead of the actual button element so that way if you want to add in an icon or you want you know a little bit more flexibility i like to go that route so i've been using link wrappers for buttons instead so we'll call this one fc button main or something like that background color will be this one our pharyn v brown we have some rounded edges i'm assuming the border radius is going to be something like 25 and then what's our padding look like it doesn't tell me of course there we go so it's 14 top and bottom 22 left and right 14 14 22 22 our typography is going to be white and then now we can add in the text so this one should just say i think we're going to change it to view menu for now because like i said earlier we don't have the online ordering function completely ready to go yet and they are not prepared to do that just yet so that's okay so our font weight is 700 and then is it letter spacing 2 again it's not but the font size is 18 so we'll bump that up and in fact i didn't use a class on this so let me go with fc button main text i'm going to copy the styles from the id to the class and then i'm going to delete the styles from the id just so we can easily recreate this later on we got 28 people here in the stream watching if you haven't already please drop a like on the stream it does help me tremendously i really appreciate that and we are quickly approaching 5 000 subscribers on the channel which was my goal for the year so if you haven't already please consider subscribing that would be greatly greatly appreciated kunal says hello i have a question if we use too much sections in the page it will definitively slow down the page speed so how can we lazy load the section i don't know using divs and sections is not going to slow down your page significantly it's more about the content on it so like you can see i'm layering divs inside of each other that's not a huge deal it's you know it's it's more about the content on the page itself so this one we are going to write a line and this div we are going to set to where is middle there it is and for some reason this button seems a heck of a lot more narrow more scrunched than it does and oh it's because it says order online versus view menu that's why um so we're getting there let's go ahead and save this and take a look at what our footer looks like on the actual site itself so we oh stream froze for a second on my screen everything's still good can you guys still hear still see hopefully so all right back to it looks like we're good i got a little like drop frame notification so hopefully all is well um the view menu is a lot further off to the right than the follow us so how is that aligned in the mock-up it is on the right edge of that particular container so did i set a max width on this top row but not the second row i thought i did both of them i guess not i guess i did neither of them so max with the 1440 and then i guess it's just something to do with the alignment so maybe i actually do need this second div to be a column count of four and then do i just add some empty divs i think it's going to make our menu shrink which we don't oops oh gosh oh gosh we got oxygen doing it's doing its thing here so then i want this one to be down at the bottom of course it goes out which is not at all what i wanted it to do i'm really showcasing oxygen's beautiful side here so then i always found it's easier to drag up for some reason there we go all right and then that div let's take off the right align i think this might still look a bit scrunched on the front end yeah cool it looks completely broken that's great that's exactly what i wanted why so dumb mikhail says i haven't used wp in a while so i'm glad i caught the live sweet glad to have you here um maybe i'm just not going to use grid i'm just going to take this off we're going to go with horizontal space between and then hmm i oh my gosh what did i do here oh so it wasn't actually that grid stuff that was breaking the page that was my my fault um did i set the wrong section to 1440 i did that's not what i mean meant to do i already did it i already set it to 1440. i'm just being a dummy so now we should be good to go i was setting the backgrounds to 1440 which is not what i wanted and for some reason it still didn't fix over here what did i do second row there we go and that menu just needs to be aligned with the right edge of that container uh so it's got to be this div is 1440. if i remove my structure panel we can see it a bit better [Music] hmm i guess if we went a grid count of what would be one two three if we went grid count of three then this first one would be a column span of two and then well no it's got to be four and then this one uh one more div i believe and then this div needs to come up one i'm just going to leave it like that i know it's not exactly like the mock-up but that's close enough because that's roughly in line and i'm good with that i don't want to keep fiddling with it mikhail says what is the footer bold font this one is called shriek hand is the font name if that's what you're talking about so there we go sweet so now we have our footer situated we also have our header situated on each of the pages if i switch back to the home i can show you how the colors change okay so now we can actually get into building the home page content so let's do that we're going to come over here and i did already have this color effect on the home page in the template which i may [Music] want to change i think what i'm going to do is take it out of the template so it doesn't confuse us because it might be easier to situate it with the content in the actual page content itself so we're going to leave our template now and go over to our home page we're going to edit this and we're going to keep cruising i hope you all are doing well thanks everybody for hanging out in the stream i know this one was super short notice and very impromptu but i'm happy to be back and we're going to be doing some more of these this actual website that we're watching right now we're going to have some e-commerce solution later on probably going to be woocommerce not 100 sure but it will definitely have ecommerce capability to buy this actual company's coffee and it's extremely good i know i'm not i'm not drinking their stuff right now but there's a reason why so uh anyway we're gonna keep cruising so let's see we're going to take one div that will have our header the button and then this image and in that section we might put the background as that image although then it's going to show up in the green so i might have made a mistake by taking that color out i don't want this little line effect to be in the green obviously but if i create a section and stick it in there as the background it will show up which is not what we want so let's go ahead and add a section our section width we're going to change in our global styles here to 1440. so there is our page container adjustment and then in this let's add in two divs because it's going to be roughly 50 50-ish ish like i said so inside of this one it's going to be a heading i'm just going to use the inspect tool to copy this text right out of it and then that is which font uh mikhail i mean uh not mchale shriekhand and then what's our styling look like on this so it's 60 no letter spacing regular font weight so instead of 700 is it 500 so 60. it's pretty big and then it's welcome to on one line and then fahrenheit coffee on the next line oh there we go the text is right aligned so we're going to do that and our our line height looks much bigger there so i guess we'll shrink that down and then is there a space there there is we need to remove that and then one looks too small so maybe it's 1.5 line height unless i'm reading this wrong i don't believe figma gives you a line height like we need for oxygen so that's paragraph spacing that's not what it is it's basically line height as 65 but isn't that just like one point something 1.2 or something like that 1.1 maybe that looks pretty good all right and then margin is 22 there 29 there this is our sign font so actually most of our body text looks like the sign font so let's go ahead and change that in our global styles so our headings well let's see fonts will be shriekhand and sign so now when we add in some text mikhail says what does fair envy mean it's basically like wanting to go to a place you've never been it's like a like a wanderlust sort of like travel thing so kind of a cool name it's not my company of course but it is like my best friend's company all right and then how is this broken up so freshly roasted coffee mariester we're going to set this whole div to write a line and then i think it was 22 pixels of margin on the bottom which is basically 1.5 rim trying to get into the habit of using those sorts of units instead of pixels for like accessibility's sake and then that looks super tiny this is a size of 24 and a font weight of 400 which i think is already that so perfect that looks good and then the spacing was a bit bigger here like two rim and like i mentioned earlier we're going to create our button using a link wrapper i'm going to use our class that we already set up and then add a text element and then our button text is that and then i know it doesn't say view a menu but we're going to make it say view menu oh this one actually is the green button so we need to add a separate class for that that's an easy tweak though um what is this color i don't oops i don't think we have this color saved yet so we're going to add a new class to our link wrapper here so fc button main green is what we'll call this our background color will be that and we're going to save this as aaron v green so perfect that was a very easy adjustment to make the button is not that wide though that text is much longer here order online is obviously much longer than view menu so maybe i'll leave it be for now and we'll revisit that but i'm not exactly sure this is the call to action we want like i mentioned earlier there's not going to be the online ordering just won't be ready yet all right and then now what we're going to do is add in an image which is their coffee bag mock-up this guy right here and then we need to adjust the sizing spacing and that sort of thing so how big is this image so it's 690 which i think is the full height here we do have quite a bit of spacing so it's 91 pixels in this div let's go with 90 pixels of padding on the top and then with our divs here we didn't actually set any sort of width so i'm going to go with like 45 here and then this div we're going to go with 45 we'll set our section to space between that doesn't quite work how i wanted it to because then it pushes it over into the green but let's refresh on the homepage look real quick and see how this looks there's a bit of overlap here that image is more to the left so perhaps i need to set it to like 40 on this one and then we're going to set this one oops this div to a 60 or maybe 58 oops 58. so then it lines up a bit overlaps with the green as it does in the mock-up and this text is messed up because the way i did the line break so actually i did this the wrong way i shouldn't be manually adding spaces i should be taking this text and setting it as a maximum width of 4 30 so max width of 4 30 and then we'll kind of put the line breaks in there for you which is pretty sweet all right so our menu page doesn't actually exist so we need to go fix that here in a bit and then we also need to get the background color over here it's not going to be in this div i need to go back to the template and put it in there to get it like situated properly not a big deal super easy to fix and then that will fill up the space down here because it looks a little bit dead at the moment i'm kind of like hmm what's missing but it's that background so i know we got to switch back to our template and back to the homepage again but that's okay we'll just go ahead and do it hope everybody is doing well i see 29 people up here in the stream so i'm glad to see everybody now if you missed it earlier we created a couple different color divs here and added some conditions so things show and hide properly in this white one we're just going to go back to our little swoopy boy which was this guy i believe yes there it is and then let's actually save this and look on the home page and make sure the alignment isn't wrong it's a little bit off sandra says your cloudways link is public yeah it is and this is this is the same uh this site will eventually go live i said earlier on in the stream probably later this week next week something like that really really soon so we want that image to be positioned more down and then also seems like there's more of it oh well no i was going to say it seems like there's more of it visible in the mock-up but that's not really true so we're going to take this we're going to go with the top of like 100 ooh no i guess we got to do some negative push it down some and i think this is going to require quite a bit of tweaking on the mobile versions so it might be worth it to go ahead and check that but let's see and that doesn't work because it gets cut off so negative 30 is too much so maybe negative 20. i just want it to not overlap with the menu and stuff i mean honestly it doesn't look that bad even though it's not correct technically it needs to be more contained though maybe i can change the background to no repeat would it be cover [Music] hmm so top zero it's not left trs says i'm a web designer and learning wordpress so that i can make a full cycle of the site with oxygen awesome really glad to hear that if you guys didn't know i also have a wordpress or excuse me an oxygen course and you can totally take advantage of that it'll teach you oxygen from the ground up so definitely have a look at that if you haven't already vz code says try pixels instead of percent seems like that's working if i go back to the cover 350 do left but try with percentage instead of pixels i want it to be that way i don't want all of that to be showing is the thing i just want that swoopy boy that image is what is it how wide is it 1769 so if i uncheck cover and then top we're getting there this always takes me a bit of a bit of um playing just trying to figure out the exact background positioning and again this is going to take a lot of tweaking on the mobile variants i guess it's because these divs get wider so more of it shows maybe i need to restrict this div's width because it's taking up like half of the page which i think is part of the problem because right here it doesn't look that bad and i did set it to 50 percent maybe hmm huh i want to look at this i mean it looks cool as it is it just goes over that text which is not what i want i wonder if because this white one is set to 50 if i then add another div inside of it whose width is 50 percent and then the height can i set it to auto 100 what if i do min height 100 i don't know if that works actually we're going to take this white color take that background off we're going to set this divs background to our swoopy boy uh no so that that minimum height doesn't work is it even there oh yeah it is okay so it is there but i want to i want it to take up all the available space can it not stretch what if i set this white there we go okay so then the white one we're going to set to write a line then the background of this guy will be cover ah but that's not gonna work because it's gonna look like it's coming out of nowhere hmm that's a bummer oh man i guess i'm just gonna have to go back the other way and deal with the alignment not quite working how we want it to and actually just to verify am i using the right one yeah i think so that i mean like i said before that looks pretty good but i just don't want it to cover up the text which maybe is just going to take adjustment at every single at every single uh device width i mean over the menu button it doesn't look that bad let's take a look at how it behaves i think our menu is going to be super jacked up but this is all right yeah yeah probably definitely difficult but it'll be worth it i guess i need to shrink these images that's actually in the the page itself and not the not the template so i can't do that at the moment let me look at this in chrome inspect and see how it behaves as the window shrinks all i'm concerned about right now is the background not anything else on the page because of course we've adjusted none of that i mean realistically it's fine more of it shows although i do want it to be no repeat that's a 2600 pixel wide monitor though most people are not going to be looking at it on that but i am anyway just for the sake of clarity going to set this go back to full device on our white div set the background to no repeat so that's pretty much good i mean it's not quite the same as the mock-up but then again it almost never is exactly the same there's just things that deviate between the designs and uh the actual mock-up or you know the real oxygen site and the mock-up typically deviates somewhat but i am really happy with that so we got this situated so now we're going to move into this section here which is going to be very easy i say that hopefully it is but we need to switch back to our home page i don't know about you guys but i find myself switching back and forth between all this kind of stuff in oxygen so regularly like template home about home contact so we're going to create a new section and then this one has actually maybe i'll use a div and then a section i said it's easy i totally jinxed myself this is not gonna be super hard but it's just so funny i say it's gonna be easy and then it's just like hey look at me i'm gonna export this arrow and i'll do it as an svg so uh let's first of all copy this text because we're going to need that pretty much right away so this is sine 25 semi-bold nearly a two pixel letter spacing so let's go ahead and do that so this text i'm gonna paste that right in there we already are inheriting our correct thing so letter spacing i'm just gonna go with two font size was 25 color was our sand yep sand color pavley says section with two times dis columns um yeah i mean i could make the section full width and then have two divs stacked so the full width would be that and then we would have div number one and div number two and then the first one is going to be the brown and then that one's going to be the sand so let's just try this real quick i'm going to have to remove the spacing on the section so let's go with zero padding there's a million ways to do this so if you're screaming at your monitor right now like no don't do this don't worry about it it's fine uh so this div would be 100 and then in fact we'd probably want to even add another one which is 100 but restricted to 1440 which i find myself doing quite frequently actually it's just a nice little little hack whoops i deleted the wrong text thank goodness for undo makes it nice and easy so we'll center that and then what kind of spacing do we have so it's like 60 we'll go with 60 all the way around on both of these divs which might take some extra tweaking in a little bit and then this one we're going to go with 100 another div that once again will be 100 percent except this is the one that will be 1440. set this one to center did i already do that one here that's what i meant to do with center that guy perfect and then below this text we have two images slightly offset from one another which is kind of cool those images are of course just stock but we're going to get some real photos very soon so we have the little arrow icon and then the images so let's toss that image in because i have happy files i should be able to upload this svg with no problems there we go perfect and the spacing is not correct here so what is that it's a 22 gap and then 22 i'm gonna go 22 again alex how's it going welcome to the stream i already said this uh hope everyone is having a great day and if you're watching please consider dropping a like on the stream it really helps youtube pick it up and recommend it to other people and there's been a few streams that have done extremely well as a result of that so thank you alex says hey jonathan glad you're back missed your videos thanks so much i'm glad to be back took a trip got some stuff going on with my house and client work and all that kind of stuff but it is very good to be back indeed all right so i'm going to use grid on this one we're gonna go with the grid count of two we're gonna just add in an image duplicate that the first image is this stock photo of a shop and then the second one is a photo of this coffee roaster and they actually are the same size but looks like we can just add some margin up above roughly like 80 pixels of margin to the top of this and then we need to create a negative effect for this second row with the sand color so i think what we're going to do is on this div we're going to remove the 60 pixels of padding that we put on the bottom then we're going to take this div and we're just going to use negative margin to like negative 250 might be too much and then what's our height of this guy's 375. so 375 pixels we're going to set this div here to have a higher z index so i'll just go like five so there we go vadly says hi all just follow this live stream a couple minutes ago welcome in super glad to have you we've made a lot of progress today and of course as soon as this video is done there will be a replay that goes live tobias says add a box shadow to this box shadow to what all right saving i want to take a quick peek on the front end we have an alignment issue right there i'm not sure why not sure why that spacing is there oh it's because these divs are set to um 100 vh so i guess i just need to change them to be something else anyway this looks good our sand color is overlapping properly but we do need to change the spacing between these two images because they're much much closer together so it's only 25 pixels and here they're 25 pixels um i wonder if we need to just set this div to be a max width of what would it be like 542 so 1084 maybe and then there we go so it looks like we have a bunch of extra spacing in our uh in our sand question sand question well it's reading chat too um 90 pixels down there where is this coming from so that's 370. there's a measurement tool in inspect isn't there in hoverify no maybe not i guess not i think what i need to do is just make this section a little bit shorter because it doesn't look quite right to my eye i think like 300 but then again that sand color section looks to be exactly 391 and 374. they're very close in terms of height so maybe i need to set this section to the same height let's go 390 and then would it be this one is 375 no definitely not it's just something about the heights don't always translate and oh well actually maybe this needs to be negative a bit more to make them feel more equal that looks roughly good all right [Music] that looks good to me let's keep going what's under this so this is a pretty simple section coffee bean background what we offer so we're going to go with a whole new section here this section's background is going to be some coffee beans in a roaster so that is perfect let's go with a grid this one is going to be probably a column count of let's go with three we're going to add in a div duplicate that we need to uh take this section and make its width 100 and then we're going to set this child span to a column count of 2. we're going to leave this left div empty add in a heading and i believe it said what we offer our spacing was roughly like 24 pixels or something like that so we'll go with two rem omerta says hey jonathan glad to see you again thank you so much really appreciate everybody hopping in and welcoming me back i'm glad to be back so that one's a 52 shriek hand and it's our sand color so let's go back to text 52 typography letter spacing i think is two and then our font weight was 500 it's a tad hard to read there must be an overlay on this there is so this is kind of a gray overlay which we'll do right on top of this section so image overlay color and then we need to bring this down i don't exactly know what it is because it just says mask in figma is it this it's not that much different so yeah i'm fine with it i can always have my designer review this and she can she can tweak it and then we have this text right here copy so what do we got 24 pixels white and that's about it so we'll go with 24 white uh and then also i wanted to change this tag off of h1 to h2 and then we're gonna go with two ram spacing beneath this once again and we're gonna add a link wrapper for our button this one is orange in fact so we're gonna go add our other classes so fc button main and then we're gonna add in our text on this one we're gonna go with our button main text class and then on the actual link wrapper itself i'm gonna go add in another class so button main what is this one orange yeah orange background color is orange and there we go we're gonna go with view menu once again and that text is pretty difficult to read so i think i might make this mask a darker color and perhaps make it even a tad darker still still a tad hard to read but it's okay it's not too too bad let's look at this on the front page so there we go and then i would like to add a hover effect to all of these buttons so let's go ahead and do that based on our main class so we're going to go to effect transition will be 0.2 oh it's set to multiply ah i'll have to check that out so the background mask multiply interesting so then do you have to go to effect and then not transition whoops background blend mode is multiply does that have any impact on the image overlay color though i don't feel like that changes anything no it doesn't change anything unless there's a different effect that i have to add there brad ray says hello late to the party on this one eating food welcome to the party glad to have you uh i'm happy with this as it is i'm just gonna leave it as is and we're gonna keep rolling what is underneath this so this is the about us section and then got a little bit more here on the home page so we're just chugging right along this is great let's go ahead and pop in another section we're going to add in our background which has this tall kind of peaky looking line like that and then we have an image on the left so we'll just go ahead and grab that which is this espresso machine i'm looking forward to a real photo of their actual espresso machine because it's like this sweet orange color kind of like here in these lines which is going to be it's just going to look so good and then copy this guy so we have about us we'll just stick in a div here and we'll set it to horizontal a heading we'll go with h2 will be about us i'm assuming it's roughly the same font size and the same letter spacing as before which i should have been using a class for but oh well size 40 pixels actually instead of 52 rin what up yo stoke to see you all right so this div uh how wide is this guy so this text is basically 500 so we're going to set this div to a max width of 500 i might change this in just a minute the spacing is 15 so we're just going to do one rim which is technically 16 pixels but it's close enough and then i already copied that text hopefully it's still on my clipboard there it is and there's the lceps from figma which sometimes pop up freshest that's a typo i'll fix that and what do we got so that's black 400 size of 24 i think it's already 400 yep and it's already black i believe yep don't even need to bother with that and we are going to push this over so let me see we need to push the background over actually so on our section background uh let's see negative actually negative 500 no repeat maybe we'll do pixels i mean percentage instead of pixels 100 and we want this to be further over so actually i'm going to wrap this image with the div i'm going to set this guy to 40 percent i'm going to set this guy to [Music] maybe 50 and then we're going to go space around roughly almost i think our image needs to be attac a touch smaller hmm actually let me look at it on the full screen size negative what about long time andre what's up long time no see indeed glad to see so many familiar faces and lots of new faces as well thanks so much everybody for hanging out in chat as always if you haven't already dropped a like on the stream please do really appreciate that elisha i'm gonna watch this stream but thank you for the pre-roll of switching to wix you know it's funny because i actually got a wix pre-roll too at something i was watching earlier i can't remember what it was and it was like would you build a multi-million dollar website on wix i skipped it obviously super funny though let's see what time is it 12 13. i think i have a call at one yep let me just make sure that the call is actually still on sometimes people like to cancel last minute let's double check and see real quick yeah no uh nothing else okay cool elijah glad to have you buddy hope you're doing well hope you got something sweet cooking up for oxygen 3.9 like the view rewrite just kidding i'm just kidding i don't know anything about that it's a total joke all right so because of the screen size variance here not sure if can i go even further if i go further it cuts off the image i believe yeah it does so what if i do repeat no that doesn't work uh i'm gonna make this image smaller because i think it's like 500 what if i go like 400. maybe this section needs to be taller actually sounds 747 pixels tall surely this section is already taller than that 800 yeah i knew i was going to spark something in chat which is exactly why i said it but oh it's going great i got a view for tommy's book for the library [Laughter] oh man yes i'm gonna make so many people happy i'm gonna screenshot that and put it in my facebook group everyone's going to love it maybe i need to change the background to a manual does it cut off like that not in the mock-up it goes all the way down so the section perhaps needs to be taller with this manual thing so let's go with a minimum height of like 900. we're making progress this is what we're after except there needs to be some extra spacing up there so then our background our height did we push it down oh no oh here we go i was in the wrong i was in the wrong field that's why so 100 is too much 50 is just about perfect and then the image maybe we need oh no my browser width is um i think it's 2560 in this particular layout so i wonder if we go to inspect and change it to 1920 what happens it's still kind of cut off on the left side but other than that it's looking kind of okay the image here is more to the right of the little swoopy bit though so we need to adjust that which would be pretty easy because we can just basically take this and center a line uh why is it cut off on the left hand side though i only pushed it to 100 percent left maybe the um what if i turn off no repeat why is it cut off on the left i don't understand because the image is wider than that set to manual oh yeah well the background the background actually doesn't change anything uh as as compared to the section width like page width or full width doesn't matter when the background is on there because it's going to stretch outside of the bounds of the section container so something i just was thinking about trying to think what can i do what do you do when i come roll rumor remember so i don't want any repeat um what did i just oh is this manual so just just for the sake of curiosity i want to refresh this and look all right so something to do with the manual so then the left maybe 75 top is going to be zero and then no not not section padding top let's go 25 how high is it off of that it's pretty pretty far off did i set a section container height here minimum height is 900 what if we go 1200 i would also adjust the background well minimum height of 900 does work so then what if i add i'm really just mashing buttons now to see if i can make what i want happen happen i kind of need it to like be sort of like scrunched the image to be more like contained so the left 70 do we need to go negative 70 this way so percentage doesn't actually make any difference so what if we go negative 250 and then the top is going to be like 125. but it doesn't stretch why is this so difficult yeah dude property says mashing buttons is 100 how i do my work there's a lot of that that's what's so great about this object fit cover what about manual and a width of 100 percent is it because that image is not big enough rin is saying do you want me to edit the graphic you totally can if that's going to be easier i think it probably would be easier if you can do something quickly or you know if it's not a if it's not a difficult fix so the image is 1873 by 8 30 which is really interesting because it should be well within the bounds of our container here which is only 1440. oh um oh that's closer that's that's almost it yeah and then we just need some extra spacing down there which we can do with another section because when we add in another section that's it sweet andre thank you yeah i was i was too busy mashing stuff to figure out what i actually needed so then this div um i want some more spacing up on the top there because i think that's more inline well no that's pretty much it we just need to get that image adjusted i did change the image size so what if i just take off this width now that covers up more of it than i think is originally intended in the mock-up but it might be a right alignment thing i wonder if this needs to be a bit smaller because this size is 545 which is exactly the image size of course it doesn't make any change but when it was like 400 it looked pretty good i will consult with you wren later on to see if uh we need to make any adjustments to this i want to keep moving here just to make sure that we're not wasting time so looking pretty good and now we're going to jump down here to this particular heading so it's the sh shriek that's what i keep saying yeah street can 60 and oops uh text where's your firing v so heading we're gonna go margin left and right auto and it is 60 i'm assuming it is the font weight of 500 and letter spacing of 2 again nope no letter spacing so let me drop that back off then we have this icon which i had the other color let me change the name of this so arrow arrow dark so we're going to add in an image which is an svg and we have the lighter color one in there but we're going to do arrow dark this time i'm just going to set this whole section to center and if we need to adjust that we totally can and then we have 28 pixels underneath that so nearly two rim so i'm going to go like 1.8 rim 1.8 rem perfect then we have a div whose background color is our green it looks like it's about a hundred percent of the container width yes looks like it's stretching to the bounds and copy text in there our text is white and what does our styling look like so it's 625 pixels letter of 1.8 so typography letter spacing 1.8 uh what was it 24 i already forgot and then what's our padding look like here so it's 22 top and bottom and then 90 left and right so on our div 22 top and bottom and then 90 left and right andre says did you ever use icon moon for your custom icons jonathan started using it and will never go back great feature i actually haven't looked into that i'll totally i'll totally check that out though seems pretty sweet so i'm going to center that text and then was it broken up maybe this box oh the box is actually only 1100 pixels wide so let's go max width of 1100 and there we go and then it breaks it up like it's kind of supposed to be cool all right and then next up is this map so the map um the map i think i will just put on the home page for now because we're going to have one on the contact 2 i believe where the contact page go there it is yeah so i'm just going to stick this on the home page and then we can do kind of like a sweet negative margin thing to make it all kind of line up so what we'll do is change this section to full width we'll knock out the left and right container padding i'm going to add in another div that's 100 width not a thousand percent width 100 inside of this we're going to add in a map google map there we go invalid queue parameter that's handy um and just to make this easy i'm going to copy the address out of here so i don't have to type it and with 100 it's yelling at me about the api key but i thought that wasn't a thing anymore um that's weird i thought it just like started working again and you didn't even need an api key i thought google like went back on what they said am i using 381 yeah so do i do i actually need an api key apparently so i wonder if i like format the address a little bit more cleanly what if i just remove this no okay elijah says they fixed it but we had already implemented the new api that requires a key so actually okay all right and then i'm going to go get that embed i'm not dealing with an api key page bacon road suite one mariester share embed copy so then we're not going to use a google map we are going to use a code block php the width will be 100 and then we need to change the actual code blocks width itself to 100 percent and then um we need to change the zoom which i can do with the actual map itself i'm going to zoom in a bit more share embed copy so i got to do this again i don't know exactly what parameter in there changes the zoom but it's easy enough to adjust that all right so then how exactly does this overlap in the mock-up so the green just ever so slightly i wonder if it will measure what is that like 40 pixels maybe so we'll take our code block if i can select that no or maybe just this whole div we're going to take this whole div and we're going to go negative 40 and we're gonna set this div here to a z index uh let's go like five looks like maybe the overlap isn't quite enough because it goes halfway up that box so it's going to be maybe more like negative 80 nope 50 nope 60. cool perfect good enough for me all right so saving and what else do we have in here that should be the end of the home page sweet we got some spacing right here we got to get rid of but that is perfect alrighty so where is that spacing come from uh the section itself so we'll take this out of there and there's still a tiny little bit more why i wonder um it's not the code block where is it i wonder if it's the map yeah the map height is oops what is it 450 i believe where is it height is 450 and then what if i change it to 400 does it make the white go away it doesn't look like it what if i go negative margin yes go away white white space i don't want you there we go much better yes except i still have an issue with that hmm well nonetheless we have made a massive amount of progress so we have our header done i'm gonna do the contact page before we close out i'm gonna try to rush and uh get that done because i have another i have a phone call i have to take in like 25 minutes but we should be able to crush this contact page pretty reasonably quickly we'll see about that so this should be good but yeah the homepage is looking quite nice probably some things i need to tweak like spacing and mobile i need to adjust like the viewport height thing here which is why we have a white gap there [Music] and i also probably need to adjust the width of this because that doesn't look quite right what is that over here coffee experience is where it breaks oh i need to set it to like uppercase restrict the width a bit yadda yadda nothing crazy we can fix all that so we're going to go ahead and jump over to the contact page and this is the kind of thing that i do on a real site is what i'll end up doing like basically building the site and then i'll come back like the next day or something with a fresh set of eyes and make all the tweaks so i try to get the bulk of the main stuff done first and then come back and make the tweaks after the fact okay so where to find us with an address and phone number then we have an image with the map and then we have an hours so in our section here let's go with let's go with grid i'm going to add let's go with like three divs we're gonna go with a column count of three then we're gonna change this heading to where where to find us and that was the brownish color i believe yep and then what else we have 400 and that's about it so our font weight of 400. we're gonna go with that color uh we've been doing roughly two ram of spacing underneath the headings that might be a bit too much but we're going to need two different divs and this one is going to be horizontal with an icon this icon is orange it's much smaller and it's a map pin so we're gonna go map change this to maybe one rim on the right with some text and then this text is the actual address it's got this kind of off gray color 400 and its size of 16 so not a whole lot we need to do there this text color i don't think we have as a global color so i got that copied and we will add this as airway light body or something like that that'll be our global global color name here all right sweet uh wren just messaged me and said that there's a updated version of that image for the background so we can get that tweaked we'll set this div to middle align and then this one will be pretty easy to adjust we're basically just going to take this and change it to phone and then there is no phone number right now but we'll be fixing that soon and then let's take these two we're going to wrap it with the div stick that one inside of there if it'll let me we're going to horizontal 100 and then we're going to go with middle space between i guess that'll be fine ish what if i don't set alignment and then i take this guy and i go margin left and right auto kind of push it into the middle there we go that works okay and then underneath that we have a double situation here one image and the google map again so let's go let's go to rim we're going to set this div to 100 percent we're going to add in an image its width is going to be 50 and it was what photo i don't guess i don't have it so let me download this real quick export i'm going to change these which is why i don't care that it is a png for the moment so don't don't cut me on that one and then in this div we're going to go with another code block this code blocks width will be 50 i'm going to take this exact google map embed code that i have pulled up from earlier uh its width let's set to 100 because it's going to be 100 of its container and we will set to horizontal let's see how tall is this image i guess we'll just have to play with this for a second we'll take our little code block situation here uh it's probably like 350 ish not quite 325 maybe nope a little bit more so 330. close-ish enough-ish for now maybe i can make them stretch yeah whatever i'm happy with that uh it does overlap though so i guess i need to make this maybe i need to take this whole div out or just get rid of the middle one let me think on that and we're going to add the hours over here in the white section so the white actually the conditions are wrong so i need to adjust that because it's showing the green one right now display block but i don't wanna i don't wanna display block no i don't wanna that's okay oh are you talking about the the embed code is display block that could be that could definitely be all right got one eye on the time over here because i'm coming up on my next situation for the day on the iframe in the code block i see i see yeah okay um maybe what i'll do is instead of having this kind of dead div here in the middle what if i did this and made this column count of two i could restrict this one's width to be like a max width of what would it be maybe like 320 or something no 500 and then this one could be wider this one i could set to a pixel width of something wider than that we'll come back to that in a second so this other one is just hours i'm going to duplicate this heading to make it nice and easy so hours and then um i wonder if this is going to be easier for me to just do like a text oops wrong div oh i see what's happening the grid is the grid is um not quite correct here i was like wait what is going on why did it go all haywire on me so inside of that so i can actually drag something in it go with a heading and a text i don't need that div um i wish i could just like copy this i guess you sort of can but it's sunday to saturday seven to three that's pretty much right we're just gonna go with seven days a week seven a.m to three p.m which i actually don't know for sure is correct but it probably will be 24 24 that design looks way better though having all the hours listed out so maybe maybe i'll do that and then i really want it to have that correct kind of overlap so i wonder if i can set this div width to just stretch a bit and also how does this look on the real front end oh it looks correct it's just wrong in the back end the green is wrong in the back end but not on the front end okay and that map doesn't stretch to the right height hmm i guess i need to quit being lazy and type this out because it looks so much better like this and then we also have to figure out this background image which i think i have so maybe i can just use the section background again is it this one no it's the inverse one the down one and then i could set the background to contain we're gonna go with top is it 100 percent and then no repeat that should be roughly right this one should be easier yeah sweet it's a little bit higher like it pushes up here closer to our things but i think that's just partly to do with our browser width and also that this div here its height is more like 500 so i wonder if i go with this div and say that it's a height of 500 there we go that's it code block um we need to set our our height here to five 500. perfect it's coming along awesome the hours is obviously too close to the center section there and it's not quite overlapping yet the way that we want it to so let's see we're way over that way we're like in the middle there so we're going to go with the center there but then we're going to take this pop it all inside a div drag and drop is still super annoying i got it though and then this one we're just going to make sure it's a left align uh and then what do i want to do for this div can you set more than a hundred you can wow i've never done that before sweet no never intentionally done that i should say i mean that's like pretty much it andre says you could specify a height of 100 for the iframe so you do not always have to manually match it to the parent oh i didn't think that would work sweet okay it does work i didn't know that i didn't think it was gonna work but obviously it does so thanks for that that's really cool well that's perfect so i need to spruce up the hours i think i'll go ahead and type everything out i'm not going to put the menu button or the order online button right now just because we won't have order online for the moment but we are going to make some more tweaks to the home page background and a few other things that i might do off stream i'm not 100 sure yet but what's coming next is the ability to um you know order something online probably packaged products for the moment so we're gonna do like their actual coffee beans that you can buy and they will be able to ship them so you can actually buy them for real which will be pretty sweet and then eventually we're gonna do the uh the real you know like order online where you could like order your coffee and food and stuff ahead of time like you know any any like big coffee chain so i'm pretty psyched about that uh i appreciate every single one of you watching good to see so many familiar faces before you leave please drop a like on the stream and i always appreciate you i'll let you know ahead of time i won't do it on such short notice next time for the continuation of this website and i will have another stream coming up for a charity that's going to be a charity stream which would be pretty sweet so got a couple more streams coming soon got some video ideas working on another course so stay tuned for that and uh good to see everybody so as always thank every single one of you for watching again please drop a like on the stream and uh we'll see you next time bye bye for now everybody

Channel: Permaslug

Views: 2,219

Keywords:

Id: ZnLA5mUGjy8

Length: 127min 32sec (7652 seconds)

Published: Tue Jul 13 2021