Live Oxygen Build + Q&A

all right good morning everybody i hope all you guys are doing well good to see everybody this morning i gotta silence my phone here so it doesn't buzz all the time in the background put it on the do not disturb mode so basically what i would like to do today with you guys and hopefully you're into this is i'm gonna be working on my own um kind of like air quotes agency site i hate that word i don't like the the word agency but um the idea here is that i'm gonna be working on my own site because it's kind of been something that i let sort of fall by the wayside for a long time so now it's my turn i get to work on my own site and you'll kind of see a bit about me and my company outside of premise log so hopefully you guys like that and then what we're going to do is if you guys have any questions feel free to just ask questions about me you know the business whatever and we'll just kind of walk through it's going to be super casual i wanted to explore how a saturday stream would go instead of just a just a you know weekday stream and so we'll see what happens here so good morning arch computing nice to see you um so just to show you guys what i have so far here um in my media library i've kind of cleaned cleaned up a lot of this stuff here i have these these icons that were made for me by this local marketing agency so i had them kind of help me with some of my branding and then you know kind of figuring out consistent messaging for the site which is still in progress so right now we're really only done with the home page but if i show you in well it's over here on the other screen but if i show you in adobe xd this is the mockup that we're basically going to be building so i'll probably make some tweaks to this i'm not gonna make this like pixel perfect but it should be fairly close so i'm gonna basically the idea with this site like i already mentioned to you guys is that it's more or less you know focused specifically around websites wordpress websites and then google so primarily in paid ads that's where we kind of specialize and i typically have a lot of people come to me because they are looking for a more personal approach and so that's kind of the messaging that we're trying to get across to these clients sorry if i pronounce your name wrong but good morning syngas fingers and um so what we're going to do here is basically build this right now on this current site it doesn't look anything like that so i'll just show you real quick what the home page looks like i mean it's you know roughly similar but it's nothing special so we're basically just going to delete all these templates and start from scratch and then there was something else i was going to mention to you guys um well the other thing is that i'm going to be messing around with the short pixel plugin the optimization image optimization plugin and um i'm going to have to reset my api key now that you guys have seen this what i don't really care um so short pixel is going to help compress my thumbnails um you know and all the image sizes the other cool thing it does is it can serve excuse me create webp versions and then um when you have the short pixel ai plug-in installed as well it's going to try to automatically serve the webp format if that browser supports it which is becoming a bit more ubiquitous these days because the um the webp format is now supported by like development versions of safari and then also i think firefox chrome and maybe even edge now that edges on chromium work just fine so anyway those should be that this should be a good good test for us from the performance perspective which is certainly something that i've been kind of thinking about so let's go ahead and jump into our templates here so i'm gonna go to our oxygen templates and you'll notice i have a ton of stuff in here over the years i've really like kind of explored hard with my own website so a lot of this stuff is pretty old so august 2018 these templates are two years old there's some newer stuff but most of this is just reusable parts and since i'm in a development install here i think what i'm going to do is more or less just dump all of this stuff so i don't need this reusable part i don't need this don't need that plain header footer i'm not even sure what that template is but i don't think i'm going to use it new all pages template only that proposals posts i don't even have a blog post template yet um inner no cta i'm pretty sure that one was for like a like a call us button contact us page i don't need a specific template for that a lot of this stuff was me back uh early on in my oxygen kind of usage and it didn't i didn't know what i was doing so let's just delete basically all of these yeah i'm just going to start completely fresh i'm going to delete all of these templates and we're just going to make a new kind of like main site white template so i typically just call the site-wide template like that and then under the singular we'll set this to pages and then something i don't do but maybe it's worth exploring is setting this to a catch-all template as well but i also don't normally make 404 templates and so i think what i will do is make a 404 template that also is catch-all and then i'm not sure which way is the right way to go about with that but we'll kind of look into that in the future so just just the pages template for now good morning stratos good to see you buddy so we're going to go ahead and edit this brand new template and we're going to start from scratch i think i also need to reset all of my global colors and stuff because this site has been live for a number of years and i've made a lot of changes and a lot of tweaks to it as we've joined you know as we've built this site so let's jump right over here to settings global colors atomic i don't need the the atomic color so i'm going to delete those and then our global color here actually these are kind of like my brand color so i think those will be fine so we'll kind of keep that and then let's take a look at our fonts real quick so we have quicksand and muli in xd i believe this one is quicksand and then what is this one here that one is movie okay so yeah we do have our global font set which is good so we can keep that as is for now so as you saw in this mockup here one of the main things is for me and you know in my business i pretty much never get people that are filling out contact forms on my website that actually become customers they typically call me or they book via the calendly which is at the bottom of this mockup so my goal here is to get them to either call or book you know a time with me through calendly as quickly as possible so that then you know we can have a meaningful discussion and hopefully they become a customer so seeing my photo here also reminds me which i'm curious about i have been considering putting my face not this particular face uh that's an old one in some of my videos i had a couple people tell me that it would be engaging if i had my face cam on something i'm toying with let me know if that's something you guys would like to see and i will uh i'll certainly consider it moving back into the actual point of of this particular you know live stream though is building this site so what we're going to do is basically have one div that wraps these two kind of sections right here and that way we can set that div to or excuse me actually a section sorry so that way we can set the section to have the the heading tag so let's go ahead and do that i believe this page width is set to 1440 so we do actually real quick while we're still in our global settings need to go over here to widths and change this to 1440 pixels i don't typically edit the breakpoints down lower than that when i change the actual page width so i'd be curious to know what you guys do in that particular case but for now i'm just going to leave that so let's open our structure panel here and we're going to start off with a section now this section we're going to go to advanced size and spacing and set it to full width and then we're basically just going to eliminate the padding on all sides there and then under the primary tab let's go to header like that and then we're going to need one div that's going to be kind of that top one the the darker color one that will have um the phone number off to the right side so let's go to advanced size and spacing and let's set the let's see i forget last time we were using maximum width i believe the max width was like 1440 but i also maybe i want min and max width so that it does take up all that available space so let's go ahead and take this section and we'll center this content and then this div here what color is this one looks like it might have oh i thought it was a gradient for a second but it's not it's one five one nine three zero so let's go back here background color like that actually you know what it takes up all that space in the background so i'm gonna have to change that up just a little bit i wonder if i'm gonna have to go div inside of div that would be fine i guess so if i wrap this div with another one and then i set this one to 100 and then this background color i'm gonna do that there and then now this particular div uh is fine just as it is okay perfect arch is asking what page width to choose as a new website what's best practice that's a good question i'm not sure exactly what the real best practice would be i think it kind of depends on your your use case it sort of depends on what you're designing i would guess that the more important thing would be for mobile considerations but typically whenever i'm getting these mock-ups from different designers it ranges between 1200 pixels and you know like 1400 in this case it's 1440. normally it's not much more than that it's usually right in between that 1200 to 1400 something like that so now we have this phone number with the phone icon here so inside of this div let's add a a um link wrapper or let's see link wrapper no we want a um yeah yeah a link wrapper so with that we're going to add in an icon in here i'm going to set the phone i'm going to set this icon to white make that way smaller i'm going to add about let's say 15 pixels of margin off to the right side and then we're going to do a text link this text color is going to be white yeah stratos that's a good point the laptops having a width of 1366 i think i would agree with you there that not much more than that because otherwise it's gonna get gonna get pretty wonky on the smaller screen sizes for sure alrighty so my um my office phone number you guys are going to be able to see this is all real and basically here i'm going to set this div on the link wrapper to horizontal alignment like that why didn't it do it oh because my text link didn't go oh i guess i have to put a regular text block i didn't need another text link in there so like that so the mistake here was i added a text link inside of a link wrapper which is not going to work so now i need to go to this text here and change the color to white and then now i didn't have to worry about the the link wrapper it actually inherited the horizontal alignment that i chose alrighty so let's take a look at this stuff over here so do we have any special font considerations so we have muli size 14 semi bold so we probably do need to bump up the font weight on this real quick let's go to like 500 that looks pretty accurate and then on this div here i do believe we want to right align that also how much spacing do we have here so one thing that i learned in adobe xd that you can do is hold the alt key oh yeah alt key and put your mouse over this content this spacing is a little bit off there's five pixels on the top and 11 on the bottom so i'm just going to take the median there and go like actually it says six 11 so what would let's do i guess let's just do six and six on um the top and bottom there we're gonna go six pixels like that and then that should be good for that particular one so now i think we want to add one more div and that's going to go down beneath everything else set this one to 100 and then once again we're going to add in another div inside of that i believe once again we're going to do the minimum width of 1440 and maximum width of 1440 and then set this div to center align what was the color we had here in xd oh that's just white okay that makes it nice and simple so we're going to pop in an image element over here on the left side and then we're going to toss in the logo here somewhere i have the small version of my logo like that that looks kind of compressed a little weird so perhaps i'll come back to that later on but we have the logo there then let's go ahead and for our menu links here i think i'm going to add one more div so that that lap wraps those links not lapse those ranks but then that way we can have this all right aligned and it will look nice and pretty so let's go ahead and inside of this div here we're going to add another one we're going to set this one actually we're not even going to set the width on this what we're going to do is just on this div wrapping the logo in the menu here set that to horizontal alignment and then we're going to go space between inside of this div i'm going to set this to stack horizontally and then we're going to set that to middle align now i'm going to add in some text links or should we use the menu component because last time we did this we just basically made the text links in a simple modal menu but actually since we didn't do this last time i'm going to use the pro menu so that that way on the mobile devices we have kind of like a slide in menu or something something more interesting like that so we are going to use our wordpress main menu here and then the mobile menu we're going to toggle below let's go less than 992 for our desktop menu here horizontal is what we want our typography is one of our colors here which one is this i honestly don't even know the six seven nine so what global color is that two five five i don't even have that uh we're gonna go uh link color i'm not sure exactly where that color came from two five four 254679 is this new global color okay so our color here is going to be this global link color and then the font weight i would imagine is 500 at the very least possibly even more uh it's considered black i don't know exactly what that equates to that must be like 700 actually we're going to bump up the font weight to 700. excuse me this says it's a size of 14 which i don't think we want it to be that small i think we want it to be like 16 at a minimum um so i'm going to bump this font size to 16 oh wow that's actually way smaller i'm just going to leave it as is and then letter spacing let's set to like one pixel line height um it'd be like two looks pretty good to me and then spacing a line and border so item padding uh do we want that what's the difference between item padding and item margin here i guess item padding would mean that if you hover over it that padding exists out you know to to the other sides of that particular link whereas the margin is going to just basically put sort of like empty space there so answer my own question in this case i do want item margin off to the right of all of these links but i think i do probably want some padding of maybe like five pixels all the way around it does look a little wonky with those borders but the item padding i believe is going to give you a little bit of extra space to click so you can see with just a little bit of extra space off to the sides of the link all the way around so my mouse is still clickable whereas if i don't have that then it's going to be basically only on that text that works i'm going to go ahead and do that okay so now what do we need to do so let's take this div here and we're going to middle align this i don't have any drop downs um in this actual mock-up but i do in the current menu so we'll go change that in the wordpress menu here in just a little bit this particular xd mockup does have quite a bit of space here so how much space do we have between these links so 33 pixels on top and 39 on the bottom so let's just call it 35 top and bottom so on this particular div i think we're going to probably want to do that to the menu element and not the logo there so i guess we could just do basically like 15 top and bottom around that logo so let's do that so our size and spacing here we're going to do 15 top and 15 bottom like that and i give this menu some breathing room there and that's starting to look reasonably good although i feel like our desktop menu we would want the font size to be oh gosh not that big no way i feel like we'd want it to be a bit bigger like maybe like 20 pixels uh we can kind of play with this we'll come back to that but these are also uppercase so we want to set this text transform to uppercase there we go strata says item padding will affect the background or borders mostly when hover margin will live will live in empty space for the background yeah so that's exactly what i realized after i said it was the the difference there could definitely be beneficial if you have like a hover background color for instance i think in the mock-up that looks even heavier than 700 so i don't know if this particular font has a font weight of 900 but let's look it must be that it certainly must be that so that's starting to look pretty reasonable there i'm trying to uh to mute my mic every couple seconds here because i keep having to clear my throat so i'm trying not to blow your ears out if i go silent that's why okay so arch is asking in this discussion of margin and padding here when to use one of the others so let me throw in a section here and i'm gonna basically demonstrate when you would want to do that so um let's do something like a heading and some text here so in the case of something like margin let's say i want there to be some space beneath this particular heading here so what i would do is add margin you could do the padding but what will happen is if you use padding let's say you add 15 pixels of padding all the way around that puts space basically inside sort of like the frame of this element and to demonstrate that a little bit more clearly if i were to set a background color and then yeah stratos you write a div is probably better than than a heading but if i were to put a background color in here let's say like this light blue that padding has now taken effect basically around that heading let me bump this up to something like 50 pixels so you can see that so with that then you can see that the the padding is basically the space between the edge of the element and the content inside of it so if i remove this and change it to margin then that's going to go to spacing outside of that element so you can see i still do have the same amount of space but like my background and my borders and stuff are not going to to be affected by that so let's do this so i'm going to remove this background color and i'm going to set a border on the bottom of this particular element of blue and then let's just set it to like a width of 5 pixels so that we can see it if i go in here and i use padding that's basically going to push the border down so let's set 25 pixels of padding like that so that pushes the border down beneath the element but let's say i wanted to keep the border right underneath the heading but i wanted to push this text block down there you know further down i would use margin in that case so the 25 pixels of margin adds that space but doesn't affect things like my borders there so i know that's a quick little crash course in the difference but it's it's more or less inside the element or outside the element is how i kind of think of it so margin affects you know you know the space outside of what you're working on and then the padding is going to be um you know the stuff inside of it so hopefully that's clear as mud if if you still have any questions let me know but i'm just going to leave this for the moment in case we need to come back to it so i'm not really too happy with this pro menu i think probably because that font weight is one step too high one more than i like so i'm just going to set this to 700 and then perhaps the letter spacing is also what's throwing it off i'm not sure if there's a way to see letter spacing here i guess character spacing is 156 what i don't really know what what um kind of like metric that is but that's that's fine i'll just leave it as is for now so in our mock-up here is that the extent of our heading i do believe it is so let's go down to our footer here because we definitely need to work on this footer so there's this kind of cool you can see like faded gradient which is this logo element in the background and then it's got this lighter blue on the left side and the darker blue on the right or maybe it's technically some sort of black but that definitely uh it can be you know we can recreate that pretty easily then we also have this kind of like copyright section with the lighter footer color i don't ever put the copyright stuff on websites just because it's you know websites not actually copyright but um what i typically do is put their you know full address for the sake of like the you know google being able to pick that up and and have that address on every site sometimes i'll do like the schema in that area as well but in this case we're just basically going to build this footer so we're going to do the same thing like we did to the heading excuse me the header and so what i'm going to do here is open my structure panel minimize that section or close it and then i'm going to toss in actually i'm not going to worry about the inner content at the moment scratch that so i'm going to do another section here we're going to bump this down to the bottom of the page and we're going to change this tag to footer once again i'm going to go to the size and spacing and just zero out the padding all the way around and then we're going to set this to full width inside of that we're going to go add one div here that's going to be 100 width inside of that div we're going to do another one and it's basically going to be the same thing so size and spacing the minimum width will be 1440 and max width will be 1440. on this other div i'm going to set this to center and then in our xd mockup let's see so how do i grab this image oh that's pretty cool so it's basically that logo element just turned what is that 45 degrees more or less so i just need to basically export that so that's an svg [Music] all right well i guess i could do png i don't really want to do that but using short pixel like i showed you guys earlier i think is going to be pretty cool because the short pixel should serve the best version of that image on the fly so i'm going to export that let's go over to i guess it's going to be this div here and let's set if we set a background image is that what we want here i'm honestly not entirely sure um this is going to be oh wait that's the full version of the logo that's not what i was expecting no that's just like the logo like branding piece i think i have that on this site somewhere like a standalone element but that one's got color to it i'll at least just kind of explore with this so no repeat background position we go like 50 or is it negative 50 hmm how do i do this maybe i need to add a div inside of this one and then that divs background is going to be that image and then that way i can kind of position this div more where i want it so the background i'm going to go cover no repeat this layout we're going to go to i believe we want absolute we're going to go like negative what 25 pixels negative 30 pixels from the left something like that this is kind of a tricky one i don't know exactly what the best way well this is the wrong image to be playing with anyway because this one's a rectangle and the other one's a square that doesn't really help us i wonder i wonder if i can export this so mark for export export that main dark logo copy 5 png already exists that's fine so let's switch that out real quick i've oh i can't see it but we already have that this is so weird it's it's almost like the other bits of that logo got chopped off in the design i don't really know so i guess i need to get that white version of my logo real quick so let me see if i can find that i know i have it logos or web maybe i don't have that individual element in just white but it is in this mock-up here i wonder if i can just well knows that once again this one's a square this is really odd i am going to skip that for now i don't want to waste a bunch of time trying to position this div i just more or less want to build that footer so what we're going to do here is take this gradient for this particular section so this fill the left color is the 254 679 and this other one is 151 930. so i'm going to take this particular color this first one if i can click it again and we're going to go on this div set advanced background gradient uh we're gonna i have two colors here that'll be the first one do we have that color here what are my global colors so these are a little bit off i don't really know why i'm gonna add this other one so gradient left is just what i'll call it and then let that color there is that the same color oh i already have that color i'm ridiculous sorry you guys okay so moving on the other one is the one nine two zero four eight is that what it is one five one nine thirty so it's close enough i'm just gonna use this other darker global color and so our angle i think we want at like 120 so that way the color starts on the left side and moves over to the right as you can see like that welcome welcome glad to see you guys here thank you so much for joining okay so in the footer here we have how much space on the top of these divs here so oh there we go so it's 75 and then 35 that's not quite accurate i don't feel like let's just go 75 top and bottom to keep it consistent so on this div i'm going to go 75 pixels of padding top and bottom in this div we're going to add an image element so we can toss in that white version of the logo just kind of that white standalone element which i think i do need to export as it turns out so let's see mark for export i can you like okay okay so that's that's what happened there they basically just chopped off the word in that particular logo so i guess i need to just pull that out in photoshop make my own version of it real quick let's do that all right oh boy you guys could see a brief glimpse of some videos that are coming up hopefully you guys are not the type of people that don't like spoilers because it's too late all right so let's take this one here and then that's unbelievably blurry so maybe let me go i'm just going to open this particular version oh no no no that's not what i want you can see i'm not a photoshop expert by any means so main all white so then i'm just basically gonna oops i'm basically just gonna crop this stuff here so you can take the logo element like that i can't quite see where it is i can invert it real quick but instead i'm just going to do it the hard way and do like this go so now i'm going to save this to my downloads as a png um logo element like that all right so let's get out of here come back over to wordpress and then our logo element there i'm going to pop that in this left side how big is it in the mock up here i gotta i guess i gotta go back so that element is 139 wide by a hundred high so i'm just going to set the width to like 130. then what do we have under this kind of the tagline and then some text so this font size is 22 and that one is 18. so they both quicksand they sure are now let's go pop some margin underneath this heading here probably need more than 15 but that's also what i uh what i typically do i'm not going to be doing any any uh e-commerce today no product search page design not on this particular site but maybe in the future i'm just not i'm just not ecommerce savvy um stratos is that something that you do is wordpress or excuse me like oxygen woocommerce please feel free to drop a link to your channel in the chat because if you do e-commerce people should watch your stuff certainly not certainly not my expertise so i'm going to type your business accelerated which is my tagline and then let's add i don't know maybe like 10 pixels of margin and then a simple text element here and then in xd i'm just going to copy and paste this up in this text here and the text color is going to be white i probably need to wrap this stuff with a div so that it doesn't spill out all the way over there so let's go to our structure pane i'm going to save real quick here let's open this image wrap with div heading text and then how wide do we need to make this so let's estimate how much of the screen in terms of percentage the stuff is taking up so over here we have i don't know maybe like 35 or 40 so let's just set this div here to like 35 percent we're going to set this to left align and then i'm going to duplicate this out we're going to set this div to horizontal alignment like that and then 65 width on that guy we might need to change that oh yeah we definitely need to change that because i have this these text links plus some social media icons so let's do this we're going to basically just delete this stuff in here we're going to add a text link give it a class of footer links like that i probably should have cleaned out all of my existing classes because there's a ton of junk in there that's okay though let's set this text color to just like a little bit of an off-white e-f-e-f cover color we're going to set to white strata says i do woo but not with oxygen actually i'm releasing a comparison video in a few days elementor with cadence is faster with less requests hopefully oxygen will get better in woocommerce yeah i really hope that oxygen does get better in in woocommerce because it's something that i'd like to explore but i mean i just felt like it was kind of lacking in in some really key ways so i just kind of stopped even trying to be honest but that's okay i'm actually going to change this text color to be fully white and then i don't know what hover color is going to look good i think those are all going to be too dark but that's okay i'll just leave that hover color there for for now and then let's add like 10 pixels of margin i think you may need more than that but 10 pixels of margin below voice quality is not clear um anybody else noticing pickups in the stream i'm showing doing good connection on my side i don't i haven't gotten any warnings yet hopefully it's not my fault although i will say it is raining outside and i've heard some thunder so it could be it could be my internet service provider not doing well in the storm right now so let me know if there's if there's a stream hiccup how many okay shadow says he can hear me clearly so i'm gonna keep moving on here so we have home websites google portfolio about contact so home i'm just going to duplicate this out a couple of time websites google and then portfolio about contact portfolio about and then contact all the typical web pages that you would expect to hear okay so typography is uppercase and then font weight is definitely higher let's see i wanted to make sure what font this is so that one's mooli is that one already inheriting yeah it is because it's just a standard text element so inherit i'm going to set this font weight to maybe like 500. 700 is pretty high but maybe if i bump up the letter spacing just a little bit that'll look perfectly fine so i'm going to delete this text element now and then in the mock-up we have three links on one side and three on the other so i wonder i wonder if i do three and one div and three in the other if i save this and then do i do let's see here i guess i would just add another div i need to change this one's width from 65 to maybe like 25 oh you know what the easiest thing to do is just going to be to duplicate this one and then we're just going to delete these three links out of this one oh wait i did the wrong ones undo to the rescue own websites google i need to delete these three and then on this one over here i need to delete those three and then 25 width is way too much let's go like 15 on these two that looks more like it i'm gonna middle align this content here is that how it is here oh no it's actually bottom aligned so let's go bottom like that and then on these lowest text links we're basically just going to go remove the margin from the id of those elements that way it kind of sits right on that bottom line with this other text there you guys know me i'm a fan of saving so i'm going to do that and then the far right side is just to follow us with some social media icons so let's go ahead and duplicate this one over there and then i'm going to set this to i don't know what the total is going to be 35 percent with like that sparky asks is it possible to use third-party blocks like cadence with oxygen will they display correctly and strata says not inside oxygen builder and use on a post for a website that's created with oxygen gotcha so how does cadence compare to gutenberg i know there's been a lot of hype about cadence lately but i haven't explored it at all if i'm being perfectly honest so in this case in this div i'm going to keep working while you guys are chatting i'm going to delete these text links and then let's add in a simple text element that just says follow us i'm just going to use the footer links class so that i get that white kind of bolden color which i actually now that i do that i don't even need that because it's just a light gray what color is that it's a 9 7 color so i'm going to delete the footer links class off here and just use this oops nine seven color like that oh so cadence is a theme gotcha okay i didn't i didn't even know that i thought maybe it was some kind of like some kind of competitor to gutenberg but apparently not and then let's just go let's use the social icons element which i know isn't the best thing ever but it will at least give us the circle and then what do we have here so the blue with the white icons okay so background color i don't know let's see icon color we want white is background color the border i just want the border um well we had this problem last time erwa asks hopefully i got your name right here i'm thinking about switching my clients to cloud ways and i was wondering how you deal with sending transactional emails from wordpress and how you handle domain names so funny enough i actually have a video coming uh middle of next week with a detailed walkthrough of cloudways and exactly how i um kind of set everything up so that answer will be coming in that video but i'll tell you now as far as the transactional emails and cloud ways they give you the option to turn on this service they call it elastic email and that handles all of the transactional email which works beautifully it's super cheap i think i only pay like a couple of bucks a month across all my servers for it and that handles all the transactional email and i don't have to do anything in wordpress i just basically turn it on on the server and then um and then it works perfectly fine and then as far as domain names i let my clients keep you know their domain names unless they want to buy it for me and then i just basically change the a record and the the cname and that's it i don't touch name servers i just leave them with whoever they you know whoever the provider is i don't want to mess with people's name servers and um so yeah hopefully that uh hopefully that works hopefully that helps you i'm going to delete the social icons i agree with you guys the social icon element is not not terribly ideal in this case so we're just going to use the regular icon element sorry some super loud truck just drove by hopefully that wasn't too loud for you guys so let's just call this social icons as our class color we're going to set to white the icon size let's drop down to like 25 pixels change this one to facebook i think we just want the f right yeah the f inside there let's add like 15 pixels of margin around the icon and we'll go to border our color was like our light blue here width one solid and then perfect i didn't even have to set the border radius i was thinking i would have to do a border radius of like 100 but i don't even have to do that so now what i want to do just to kind of change things up a little bit is on the hover state i want to set the color of the border to white and then i need to go back to original effects transition is going to be 0.2 seconds and then timing function is ease in out so there's a little hover effect the icon color doesn't change but the border color does so that's kind of cool i need to wrap this with one more div we're getting a bit of div section here but that's okay i'm gonna set this to 15 pixels of margin on the right side set this div to horizontal align and then let's just go bottom and then this one we're going to change to uh instagram and those those icons look a little bit big maybe i just put too much padding around those icons and i probably need to bump the icon size down just a tad so let's go 20 pixels and then i'm going to change this to 10 pixels around that looks better in my opinion they don't need to be big that'll work perfectly fine okay so let's save here and then underneath this here um this blue div will be pretty easy to make another question from hero he asks alexa or excuse me excellent looking forward to the video next week thanks for the response and do you also create pro emails uh if so which service do you use so in that case i pretty much just will uh set up google business for people every once in a while depending on the client i will help them with office 365 if they really really want that but for the most part i pretty much always set people up on g suite whatever it's called now google workspace i guess because of the fact that it's so easy to use it just never ever has problems and most people are pretty familiar with gmail so i like to keep people with whatever they're familiar with um and typically i'll just charge you know labor to set that up for them and and people are normally happy with that not not a service i off offer you know like uh outwardly but if somebody asks me about it i will definitely do it okay so let's go ahead and minimize all these divs here in this section i'm gonna add one more div that's going to be 100 width this background color is going to have our light blue here which i actually don't think is a global color i said that before and i was wrong but in this case i really don't think that's the case so let's set this as a background color and we're just going to call this aqua blue now because of the fact that this is just a single text element i don't really need to worry about the extra div and all of the like spacing and stuff uh the text i'm just going to put in the middle here and then let's check the spacing how much is how much spacing is here oh not telling me so 20 pixels top and bottom i'm going to go on this div 20 20 like that we're going to set this text element to white and then i'm just going to type in my address here three four nine and zero goes parkway sweet so now i can just basically go ahead and center that and perfect so now we have that footer and our heading completed strata says they can't pay gmail five dollars every month per account i would recommend to look at mx route that is the cheapest solution yeah that's a good option i i haven't been interested in managing the you know emails for people or having them have some sort of like i don't want to use the term on-premise solution because i don't know what mx route is actually like but i just never wanted to have any kind of responsibility for the management of their their you know emails so that's why i always recommend google you know you just pay few bucks a month for somebody else to handle it for you effectively so i asked this question earlier but i'm not sure how many of you guys were on at the time i was wondering well i had a couple people ask me to start doing face cam you know like put my my video my face video in the content that i'm posting on youtube and also the live streams which is something i'm not opposed to but i never have because i personally just didn't care to see people's faces when i'm watching wordpress tutorials so let me know your opinion on that i know stratus chimed in with a good point but i'm curious to hear what other folks think on that perspective as well so here i'm going to set this uh i just want a little bit of extra padding between these div so i think in this div on the right side i'm just going to set like 15 pixels of padding all right so that looks perfectly fine i want to go ahead and set these links so i need to set these to my home page i have a bunch of pages on this site that i need to delete i forgot about that i meant to point that out earlier so web website design i'll probably rename that page google i don't think i have a specific page called google but i'm going to create that so i'm going to leave that off for the moment and i'm going to redirect those seo pages to the google page so portfolio i don't think i have that yet either about not sure where that stands at the moment about our company i'm going to rename that to about and then contact hopefully i have a contact page on the site yeah there we go all right so now the other thing that i moved on before i actually completed was the pro menu here so let's take a look real quick on the front end of this site i don't have an inner content on this oh that page doesn't have this particular template set up so let me change that real quick uh i'm gonna go to [Music] this default site wide template and update that and let's take a look real quick i just wanted to see how all of this looks looks okay i need to add that hover transition effect i thought i did that but maybe it didn't take for whatever reason so stratos you bring up a good point on the relative urls the thing is i don't i used to worry about that as well but nowadays since everything i do is in cloud ways the um the relative urls aren't as big of an issue for me because the the way that cloudways changes the urls for you when you add a domain name is just so seamless that i really don't even have to worry about that which is super nice so we're going to go to effects transition 0.2 seconds ease in out and then now we should have that fade effect when we hover over those text links which is nice in terms of this particular pro menu i didn't like how bold that font was so i'm going to drop the well the font way was already at 700 i thought it was at 900 for some reason maybe it's because the font size is at 20. so i'm going to drop that back to 18. and then let's see what else did i notice on the front end just wanted to kind of take a look here oh interestingly the phone number in this div here or way off i want the phone number to be on the right side of the content so what did i do here did i not set this div to a max width 1440 what about this one 1440 write a line oh i guess it's because this particular this contact link is kind of not pushed to the far right side or well no that has nothing to do with that it's the phone number why why why why that's something to do with the pro menu air quotes pro that's why i don't typically like to use the pro menu it's weird because it's like that in the back end but it's not like that in the front end maybe if i go back to the pro menu i'm going to turn off desktop drop downs and then can i change the spacing here so item margin is 25 pixels i don't think it's anything to do with this though what is what did i do wrong up here that's throwing this off so the div right align i guess oh i guess that wasn't right aligned oh no no i don't want that to turn off that alignment this div is right aligned the link wrapper is set properly this is super weird where is where is the edge of the content then [Music] yeah so it's just not not going to edge of the content i just scratched my head super hard trying to figure this out it's super weird i didn't set a class or anything right um what did i do wrong maybe the problem is the way i've set min width and max width hmm very very odd i don't know why that would be anyway i'm going to move on not terribly concerned about that at the moment what i'm going to do now is basically delete this section and then i need to add an inner content element so we can start designing the inner content of these pages we're going to bump this up in the middle and set the minimum height of the inner content to like 85 vh that way if i have a page with just a little bit of content then it won't be kind of floating in the center of the page i wonder if i wonder if there's some sort of like caching issue there we go um so stratus the issue here is i for whatever reason can't get the phone number element to line up on you know the right side of the the content right there so you can see like the edges of the content are stretching out that way but for some reason i can't get the phone number to line up let me look at this and inspect real quick width is a hundred percent oh gosh i just don't know i just don't understand what i did yeah i'm not sure i am gonna step away for two seconds well not two seconds just a minute to go to the restroom so i'm gonna take a quick break and i will be right back all right i'm back um yeah good good suggestions here um stratos let me duplicate this and then i was just thinking the same thing as you with the min win min width and the max width here so perhaps i want to set it to have an actual width of 1440 pixels like that and then let's take a look again i just don't understand why it's set to write a line oh that's a good idea zero pixel margin left oh wait no no top and bottom zero and then autumn auto like that let's see if that works wow what a genius you are andrea play said your name correctly delete that what so what is it about the margin that would have any impact on that because i hadn't actually set any margin and i i wanted this to write a line in this div so is there some margin being inherited even though it says zero it's not actually zero what if i set that to zero like that does it change it anything that's so weird that is super weird interesting that would have been a really odd one for me to figure out but i got it so there we go that's fixed now that's exactly what i wanted thank you very much so at this point the other thing is you know another little quirk of like using the pro menu that i'm not a huge fan of is things like this like now i want this contact to be aligned on the right side but without basically knowing the css it would be pretty difficult because you have under the desktop menu spacing option here we have 25 pixels of margin to you know the right of all of these item these you know text links but how would you change that for the last one other than kind of looking at css figuring out what menu id it is and then you know basically turning off the margin there so i don't know probably another a problem for another day because i want to just basically get this situated but now we have that let's go ahead and start working on the home page i'm going to get out of this and then we're going to find our home page in this list we have a ton of stuff here as you can see lots of stuff i need to clean up but we're just going to edit the home page with oxygen okay so in our mock up here let me zoom out a bit get back up to the top so we have this kind of like hero section with the image and this picture of the laptop is the background i'm gonna play with this a little bit so i honestly like this image that i have here of that macbook more than i like this dark one like that so i don't know that this font and this text is gonna show up on top of it but we can go ahead and just see kind of what the what the styling would look like here so delete this stuff delete this and then we build websites that accelerate your business that width is 980. so i'm going to set a heading here the max width will be 980 pixels yeah so andrea that would definitely be the way to do it use that css to target that particular link that's one of those things that i feel like you shouldn't have to do you know like i mean i guess it makes sense that the margin carries over to that link too but it would be nice for there to be some sort of option to be able to turn that off or configure it on a on a specific link basis oh the other thing i forgot to do is configure the mobile menu i meant to do that but i'll come back and do that so this particular heading is quicksand it's size 65. we'll go 65 like that it's already quicksand on it was white but i don't think it needs to be white jamal says he does left margin 12 and write margin 12 instead of 24 on the right side so that there's only 12. yeah that's a good point i guess that would work i'm i'm particular and i want it to be like perfectly aligned i'm sure most people that come to the site probably don't even notice but that's something for me that i'm like i want that to be fixed okay so i i'm not super thrilled on this particular image but the white font is not going to stand out on the image that i have now so a few options obviously i could just use this image like it's in the mock-up i could add an overlay to the current image of the macbook laptop or find a different image which i'm not terribly thrilled about what happens if i change this text color to be one of these other global ones that we have none of those are particularly thrilling to me even though they're my brand my brand color is funny enough so what about if we add an overlay oh there already is a bit of an overlay that's funny i hadn't realized that the text color again let's just check out some of these well let's go back to the image overlay that we were discussing and we can make that a bit darker something like that and then let's take the heading turn that to white i don't think i really like this direction that we're heading if i'm honest i just like kind of the idea of a white sort of brighter site especially for my own that's sort of the the theme that i like to go for and then this button says book a call let's toss a button element in here and then i'm going to call this button new button or actually just button new like that okay so we have a rounded effect to that button and then let's see our font size there is what it is 14 i'm gonna bump that up a little bit but the button is 200 pixels wide by 25 high so let's go like maybe like 10 top and bottom and then like 25 25. then our border color excuse me our border radius what is that like 25 pixels typography is movie 18 pixels i think is already what it's set at so i don't really need to worry about that stuff that's all being kind of inherited i want weight of 500 and then letter spacing maybe 1.5 oh no definitely not i don't like that all right and then our color was what our color is that lighter kind of aqua blue so we should just be able to pull that right out of our global colors there and then our button hover not sure exactly what cover color would be best that one's pretty dark it's not much of a change so let's just go ahead and add our effects transition 0.2 timing ease in out like that there really is not much of a change and in fact i don't really like the way that those colors change so let's just go with our darker option like that that looks perfectly fine so book a call like that and that button just feels so so tiny beneath that gigantic heading so maybe i just need to add some extra padding so 35 35 12 12 something like that that looks pretty good oh yeah stratus i forgot you had a video on cloudways too i forgot i i i watched that when it came out and then didn't remember that you had that i'll have to check it out again too that letter spacing a bit more it's got to be more like 1.5 pixels yeah i'm glad you liked that video kamal all right so maybe i can even bump this overlay up a bit more 35 and then what about some text shadow black bump that down to like 15 and then like zero oops not nine zero pixels one pixel and then three a little bit of text shadow actually makes that that text lift up off the page a bit which is pretty cool and then i want to do a bit of a box shadow behind this stuff here so box shadow is going to be black 15 pixels and then i copy a design set i saw zero ten twenty zero that looks decent it kind of lifts it up off the page which i really like and then i'm not really too worried about the hoverbox shadow i'm just gonna leave it how you know with that with that what do you um it like background color cover change i know that's super technical strata says cloudway's high frequency is super fast how much faster did you find that it was i'm sure it's in the video so i can watch that but i was just curious kind of what you saw in terms of the uh the performance on like a a real life basis so that stuff is centered what does it look like if this is centered i think that would mean what about if we bump this up font weight oh yeah yeah i knew what you meant i knew you meant vulture high frequency but i wasn't sure i didn't i didn't say that i said cloud weighs high frequency that particular font at 700 i don't really know that i like hmm let me know if i'm saying your name wrong herewar um he says i've been liking the text link more and i said he sorry i'm just assuming gender is here i apologize about that um the text link more than the standard button because i find i can customize it more i would say that that's probably true there's not a whole lot that i want out of a button so the the button element typically works perfectly fine which is funny too because like the button element i don't really ever use the the um the built-in features like the size and the button style and stuff so it's kind of funny that i even use this but it just kind of like strata said earlier it just became a habit so that's kind of the way that i do it just for the sake of example i'm going to go ahead and export this image background image wait there we go i'm going to mark that for export and then i know it's a png so it's not best thing ever but i just want to see what that image would look like if we actually use it instead of that one that i've had there forever and then i'm going to set this to cover i'm going to remove this overlay and then top 50 probably okay bump up this margin a bit make that like 50 pixels so it is um oxygen team in their videos use the text link so don't feel sad yeah that's really true that's really true um so one thing i was going to mention is it's really storming outside my house right now so if uh the stream just randomly ends it's probably because my power or my internet go out uh so i apologize in advance i didn't just run away from you guys so uh if that happens i will hop in chat on my phone and let you guys know but uh anyway so this image what do you guys think do you like this image or do you like the other one the brighter version with the macbook more because i think each one kind of has their their sort of like drawback in terms of it being consistent with the rest of the design there's a bit of like a like a i don't know sort of like a retro kind of like neon vibe going on so in terms of like that feel that first image doesn't really jive i guess so maybe i'll just stick with this image be consistent here curious your thoughts though and then andrea says this image yeah i kind of am feeling it i feel like it's one of those things that it's changed it feels a bit different so i need to just like need to just probably stick with it for a little bit shadow says the previous image for me and left online the text yeah i mean i i i feel you that's exactly what exactly what i was thinking i also kind of want to change this a bit to have the the hero image and this button just be all that lives on this particular hero portion uh also i want to remove this border so i'm going to unset that border but i want to make this just kind of live right here and then in the mock-up we have this whole block i basically want to make this its own section oh wait that that font is a lot lighter than this font so what if i bump that down to 500 yeah that looks good okay so now i want to take this whole section but i don't want that border behind it i just want the content out of it so i think i have those icons so let's go ahead and pop in a section here i'm going to add let's just use like the standard columns element so we don't have to bother with um we don't have to bother with the like responsive options more modern with the left align so stratos in your opinion is is this layout right here with the text kind of centered is that a bit outdated or what do you think while you're typing there i'm gonna pop in an image element here browse this guy and then in our mock-up we have this three people a little lightning bolt and then like a green guy a little like growth so we have the people here with the white i'm going to use the colored versions of these actually and these i'm going to have to shrink because they're a thousand pixel png icons so obviously i'm going to change that but what what size are these actually so those are basically 60 width and height so i'm going to go six oops not 650. 60 pixels like that let's center this div and then we'll middle a line probably should probably should set a class here but i'm not going to do that because all i need to do is add some margin and then i'm going to set a heading here with the tag of like h3 well actually you know what i'm setting a bad example let me go back here so i'm going to set a class for like um what do i want to call this like i'm just going to use the class uh h3 headline h3 yeah something like that so we're going to go tag h3 we're going to set the font size to 22 pixels typography is going to be uppercase and then this heading is people driven people hyphen driven the next one is performance driven and then growth driven i'm just going to duplicate these divs so i don't have to do it again and then performance is this little lightning bolt oops look at that little oxygen bug that's been there forever performance driven and then the last one was growth so this little flowering tree growth oh that's so annoying i'm sure you guys have experienced that growth driven okay so good question arch computing asks um he's a bit confused every time he builds a new website when to choose column and when to choose a div so pretty much the only time that i don't use um excuse me any time that i use the column it's basically when i don't want there to be any spacing between the divs because if i tried to add extra margin to let's say like the right side of this div it's going to push the content out so i usually use divs whenever i need to have that extra space and i want the width of the divs to be less than 100 so i have that space between the divs um and then the other thing is the columns right out of the box have the kind of like responsive options so it will stack vertically you can do reverse column order which is pretty cool you can also do that with a div but you have to just like basically manually set it it's not a drop down like this so if you look at the other live that i did like two weeks ago you can see that there's um quite a few times i like manually built the divs instead of building you know using the columns okay so now we have this uh there's this like fill color here but not really too sure about that because it's not on top of the hero image i don't really think i want it on top of the hero image i just don't think it's going to look that good so maybe maybe let's set this background color to like some sort of off-white like f7 i don't know even that though maybe if we reduce the margin i mean the the column padding like that people driven performance driven crystal yeah i guess that's fine that'll be that'll be good enough i'm gonna delete all this garbage so that can go that can go and then i'm going to leave that because it has my calendly booking info so this section has what so the why choose us with a photo of me so we're going to go let's just basically do another columns element we'll go 50 50 this time in this left hand side we're going to use an image of me and then i actually have a new headshot i'm gonna go grab that real quick where is it i'm gonna need to crop it too to make it a circle probably [Music] uh where is the photo oh i think i found it oh no i didn't gotta download it again one second all right guys stratos i i was like more uncomfortable getting the headshot done than i have for pretty much anything in a long time like getting my photo taken was not something i enjoyed to be honest um but it should be it should hopefully be okay you guys are probably gonna be shocked turn down the brightness on your monitors i don't know i i definitely downloaded these photos because i just got them done last week but apparently apparently i didn't save it yeah i don't know what i don't know what i did with it so now i'm just waiting for it to download again maybe i accidentally deleted it before i put it in my google drive possibility also as i'm looking at this while i wait for the files to download what font size is that so that's 22 what did i set these to oh so that is 22. it just doesn't look quite right is it a little bit bolder no isn't it funny also how whenever you look at a word long enough it starts to just seem really odd like it doesn't look like it should be a real word like i keep looking at this word driven being like that's not spelled correctly it also looks really odd but in any case it is correct all right so it says 10 seconds left until i can download this photo and then i'm going to need to open it here in photoshop and crop it to a square and then we can use just border radius to make it a circle i think if it's a square yeah we can do that sometimes i will use one of those online tools to like crop it into a circle i'm not sure if there's any advantage one or the other there all right let's see so there's me ah so scary um so let's take a look yeah my subconscious totally did delete the picture you're absolutely right i never saved the photo that's probably what i did so i think i'm gonna need to use this one because it's got a bit more of a square vibe to it i'm probably going to change this later zoom out zoom out not so big we're going to make this a square i'm just going to crop it like that and then i need to significantly reduce the image size so we're going to go i don't know what size it's going to be like 500 maybe what is it in the mock-up here so this is an image that has it's actually 385 so why don't we just go ahead and bump it down to 385 because that will save us having to come back and do it later so i'm going to save this as downloads jj new hs for new headshot that's a jpeg i know it's not the best format but we will live so now what we're going to do is upload this guy from our downloads here and then what i'm going to do is go to borders i think this is going to work set the border radius to 100 that does work it's kind of interesting though because that photo has a white section at the top and ah that's not something i had anticipated i wonder if i wonder how a border would look if i went like a light blue oh wait i did it on the div whoops where is my ferrari gto [Laughter] that's funny i know what you're talking about i wish i had a ferrari that would be amazing [Laughter] oh man that's hilarious oh no so my dog does this thing when i stretch where she thinks it's time to go play that is not the case not even slightly dog solid that border solid yeah stratus i like your idea about a box shadow let's let's check that out facts box shadow we're gonna go super light on it we're gonna go like 10 11 whatever i can't get the slider to be perfect that's okay let's go like two five zero does that even show up oh yeah it does we just need a bit higher opacity on the box shadow itself that looks fine actually i kind of like that maybe that's not the perfect level of like shadow and stuff but it actually works perfectly fine so i'm totally fine with that moving on so we're going to go over here to this div um i don't know exactly how to oops i was dragging the wrong thing in photoshop um let's see here wait so it made your name orange why did it do that i'm just looking to see i don't know why put down the wrong thing i guess it's good just tagged me anyway i was just curious why my name popped up orange in the chat i guess it's because i got tagged anyway not sure exactly how to export that asset so i'm not going to worry about that right now um i think what i would have to do is probably make another div and set that as the background of the div so now what we're going to do is add a heading we're going to set this to actually we're going to set this to um headline h2 and then we'll add another class for headline like blue i guess so our headline h2 we're going to set to the tag of h2 the font size was 36. what was the font wait so it's bold i'm guessing bold is 700 i think that's correct then on our class of headline blue i'm going to set this color to whatever the correct blue is here i don't actually know it's the 254 679 and i'm not sure what i named that color 254679 is the link color so it's that one a little bit darker so why choose us is the question and then on this headline i'm going to add 15 pixels of margin beneath that we just have a simple text element here oops not ext we're going to go text paste that guy in there and then we have a button that says learn more i often like to save a bit of time and basically just clone the button and pop it down in here i'm going to bump up this margin for 25 pixels there and also on the heading itself change this button text to learn more oops learn more like that and then i'm basically just going to take this button and send it to the about page which is not done yet basically none of the other pages are ready to go except this one and then i guess i'm going to need to middle align that content yeah we'll go middle align and then i'm not sure exactly how the designer made these elements like that we mark that for export i don't really know how that's going to work is it two separate elements or does it do it as one let's see here in that case it's two but can't you do like a an export selected maybe it's not selected isn't there a way to do it to where it like combines them into one image is it export batch maybe it's not export batch i'm going to press this but i don't know oh no that's not what i want to do there's a way in xd to where you can like export combined assets like that and it puts it into one image file make component no no i don't know how you do that so this i used an image element but i actually probably want it to be maybe if you go like div inside of it could i put my i'm going to add a text element here so i can get the image inside of that and delete the text oh yeah let's see i chose component instead of group uh group how do i export it mark for export export did that do it yes yes it did cool okay so now we have that so let's go to div background browse upload group 1 and then we need to make our image smaller maybe the background needs to be positioned differently next there it is annual 350 by 350. um it's also wait what if i what if i remove this image then can you see that background okay so there it is so if we set it to cover and what if we add like 15 pixels inside of it yeah stratos i will never ever make an xd tutorial video that's absolutely the truth i wonder if it's got something to do with the fact that i set the border radius in here so 100 percent well there's the blue line i guess the white one doesn't show up because well what is this a different background color oh yeah so this section has a slightly different background colors so let's change this even still though you can't really see that white line but i do kind of like the the blue line around it okay so at least we accomplished that so basically the solution here was i added another div i popped in 15 pixels of padding for the div then put my image inside of there and then that's about it did i set anything different on the oh yeah yeah i set the the blue and white kind of border image as my background of that div and set it to cover that's about it so there we go you really you can't see that white one i'm wondering if maybe it's not positioned properly um i'm just going to delete this real quick and see if it's still there yeah i don't know in any case i'm happy with that that looks fine i'm going to move on here so the next up is another section that has kind of that blue to darker bluish black gradient transition so we're going to pop in another section here and then we're going to go to advanced background gradient add two colors basically the same thing that we did before so it's lighter blue on one side i don't know which blue it actually was and then it's the darker one on the other side our angle is 120 degrees so it goes left to right and then we have more or less uh a 40 60 column split is what it looks like but i'm going to manually build this div so you guys can kind of see how i typically would do this so i'm going to go add div this first one is going to be kind of the main wrapper of the whole columns element here so i'm going to set that to a width of 100 let me minimize this stuff here so you can see how i'm doing this inside this main div i'm going to go div and this one's width is going to be like 40 i think i said we're going to duplicate that one and then just change this one to 60 width and then we're going to go back to this kind of main wrapper div right here set that to horizontal and then that way the divs fit side by side then in this leftmost one we have this element on the left side and i'm not sure exactly how i'm going to get that out because when i exported it earlier it didn't it didn't quite come out how i wanted it to maybe let me try that again and then i'm going to like basically see it's like impossible for me to select all this stuff so can i mark that for export yes and then export that did it work now it like got this whole section what i just don't understand why it's so difficult to select this stuff in xd see like i don't want that i want good lord all right come on select select select and then it's like i don't want i just i i don't get it i don't get it i'm not going to worry about that right now i'll see if the designer can export those elements for me and then i'll come back to that later so we have a heading on this side and this one is white so we're basically going to use those same kind of stack classes that we used earlier so this one was headline h2 and i'm just going to add that headline h2 and then this one we're going to go headline white because of course this color is going to be white this time and not blue and then that says we've got your online back i'm going to copy this text so we have that we've got your online back and then the headline element here let's add i think i did 25 pixels of margin let's go text paste this in something i try to do every now and again is set the um the div itself to have a typography color of white if everything inside of it is going to be white it just makes it a bit easier easier so you don't have to set everything manually to whatever color you're working with um the other thing that i didn't consider was the line height of this stuff so it looks like the line height is right here which is set to 24 something so i'm guessing if i set this to a line height of like typography line height to two that does look way way better so i'm going to do the same thing up here line height to two andrea says with the darker section background you can see the white line something like f1 oh okay let's try that oh yeah there it is you can kind of see it a little bit i'll even go a little bit darker so you guys can see what i'm what i was trying to find was basically this white border right there and then there's the blue one so i think it was like let's go f1 it's a bit darker than i like but i guess maybe what i could do to kind of offset that would be remove that one so that one's white even still though it feels a bit feels a bit off me so that'll be fine even if people can only see the blue one i don't really care okay so we've got your online back that text is basically the end of that says i think you must create the border image with transparent center and make it over the image yeah that's okay it looks fine as it is so this section will be a couple more divs so we're basically going to have one you can kind of see the layout here so like that would be one div then you would have one on the left that contains the icon and one on the right that contains the text the border overlaps the image in xd oh yeah it does yeah you're right you're right that image does overlap i didn't realize that you must create the border image with yeah because it does it's not quite as close to the image there as it is in the actual live site but that's okay all right so in this side we're gonna add another div here and i'm gonna call this like um home features divs something like that this one's width is going to be 100 we're going to set this to stack horizontally and then add another div inside of this this one is going to have a width of i don't know like 25 and the next one is going to have a width of 75 to take up all the rest of the space there inside this one we're just going to add an image and this is going to be our icons here so our icons are better performing website which is like the picture of a website looking thing uh i don't see that one so i'm just gonna slap this guy in there for now yep that one's fine then revenue and support okay so how big are these images it is 50 pixels high so we're just going to set this to 50 set this to center and middle align and we're going to pop in a heading element this is 22 so let's set this to like h3 so we're going to set this heading to have a class of headline h3 and then headline white so we basically already have all that stuff done for us and then i should probably come up with a class for that margin that i'm adding to the bottom of these headings but instead i'm just going to pop some margin into the id and then we oh well actually we don't even need the margin in this case because the heading is like right on the text so let me get rid of that and then this one we called better performing website beneath that we're going to add a text element copy that and then here's an example of where it makes sense to set the typography to white and in fact you could even just do it on this main div here so typography of white is going to basically change every element that doesn't already have a color set white which is nice and then what i'm going to do from here is basically well first let me set some margin beneath that then just duplicate this two times and then we had what was the next one generate more revenue and ongoing support so we had the dollar value thing here and then ongoing support was what icon let's like the little thingy the like revo meter with the up arrow like that generate more revenue and then ongoing support all right probably need a little bit more space to breathe beneath these elements here so i'm going to go 25 pixels and then those are kind of hard to see i wonder if it's because the gradient doesn't quite take over where i want it to um you know like it's darker in the actual mock-up here than it is oops that's what i meant to do darker and the mock-up here on that side of the the screen rather than in the actual live site which is absolutely the case so let's go back to our section under advanced background and gradient and i guess for the darker part we use a percentage and set that at like 50 yeah perfect we basically can just push the gradient more to the center of the screen there so that looks pretty good and then we probably need to set this leftmost div to a bit less than 25 because uh the icon is much closer to the text than it is currently so let's go 15 maybe 15 15. then here's a case where i want some extra spacing between these two divs so if i go like let's bump this one down to 35 then see the second div here oops second div here is set to 60 so 60 plus 35 is 95 so what i can do is go back to my main wrapper div here and set these to space between there we go some reason the button didn't click at first now there's just a bit of extra space between these two divs which i actually like quite a bit so i'm happy with this feels like there's something missing right here i guess the alignment is just a bit off but i feel like there should be some call to action right there but there's not so that's okay all right so let's save this and then in the mock-up the next bit is supposed to be this thing that says transparent pricing but i messed up the uh messed up the file here so let me how do you just close one i just open this again oh no not gonna let me do that let me open up xd again and then i'm basically just going to pick this guy oh no i accidentally saved it i lost the the background color on that um i wonder if i just open the original file or if i'm going to have to redownload there it is okay so this is the next bit which is this thing for transparent pricing and this is something that i personally do in my business which is i have the pricing on my website at least like base fees so people can get an idea and a lot of times when people call me they have they've already seen my base pricing so that they at least have an idea of what to expect which is great because then they have you know um they're not calling and it turns out that they're not able to afford the services which is great okay the transparent pricing how tall is this section overall it's only 125 pixels high and our fill color is four six so let's add a new section in here background color is kind of that dark and then we're basically just going to have everything stacked horizontally hey thomas no worries that you're late man this is going to be a replay pretty much as soon as i turn off the stream it seems like the the replay is available on youtube so don't worry there so back in xd we have a heading this little thing some text and then a button so that one is 36 so let's again add our heading element we're going to go headline h3 headline of white transparent pricing and then i actually don't remember what size the h3 was i guess we need to maybe set that as h2 headline h2 and that's 36. so yeah that's the one we actually want so transparent pricing [Applause] and then next up is the little uh like dot icon but i don't have that at the moment so i'm not gonna worry about that this particular text element is 380 pixels wide so i'm going to add a text element and i'm going to just set a max width of 380 pixels max width of 380 pop this guy in there and then let's go ahead on this actual section here and set the typography to white there we go does that have a boulder font no not really the regular size and then a white button that says view plans and pricing so uh in here i'm just going to use a button element again and then let's set the section to middle align and then space between i'm going to set this text to typography of center like that and then what classes did we use on these buttons up here so we have button new so i'm just going to add that class in here so button new and then let's go button new white as our new class our button color is going to be a transparent background and then when you hover maybe it will just do the inverse the button color we can just set to you know basically white or whatever and then transparent uh our text color is white so that's fine let's go to border set that to white solid like that and then our hover effect actually is pretty much what i want it to be it's just going to change to that hover so that's pretty cool there's an advantage of stack classes we don't have to design the hover effect or add the transition or anything because that's being inherited from our button new class that we already added so then what does the button text say view plans and pricing view plans and pricing and that one capitalized no it's not what about the rest of them did i just make a mistake here and didn't actually oh yeah the button text is uppercase so in this case what i'm going to do is go to button new advanced typography and click uppercase now all those buttons are going to be oh no what did i do there we go now all those button texts are going to be uppercase looks good so i'll need to figure out how to get that um a little like you know branding icons in between the stuff but that's okay not too worried about that right now back to xd we have this section for testimonials i'm not really too sure what this background image is but oh there it is okay so mark for export and then there's some kind of blue overlay that's that kind of blue color so we'll add a new actually i'm going to go back down here so the section adds to the right spot i'm going to add a new section the background image is going to be whatever we just threw in here to that section image i'm going to set that to cover and then i usually like to just go left 50 and then top 50 like that so the image is like center center then there is a blue overlay on it so we'll go image overlay color just use this one set that to like i don't know what it would be 50 maybe it doesn't look like in xd you can see what the actual percentage is set to unless i'm wrong maybe i'm just selecting oh it's the overlay that's what it is not the actual image itself is it huh yeah i don't know i'm just gonna guess not too worried about it it looks like it's a bit darker blue let's go like 65 oh it's so hard to get the slider dead on irish computing asks what seo techniques are you using on images um i mean really the only thing is naming the photos and then making sure you have alt tags which is something i usually do after the fact i don't really worry about it in real time because you'll notice these image names are not at all descriptive but i'll go back and rename them like in the wordpress admin dashboard uh so we have this 36 size heading this this um section again let's go typography and set this to white pop in a heading here we're going to go headline h2 and then headline white as our classes here track record so center this that was size 36 right yes okay so then the text i'll just copy and paste in from here next like that i wonder if can you set the line height for your body text yeah i'm going to change the line height to 2 across the board because it just looks so much better and then that has a width of 780 pixels so i'm going to set this text element to have a max width of 780 and then typography of center and then what's next so we have this little guy a little like branding thing mark for export i just want to see if maybe that worked did this work this time no it actually did so i guess i'm just not selecting the right elements in xd which is why it's giving me so much hassle so now let's toss in that image the little dot icon that we just added in all right so 15 pixels and then on this image once again yeah stratos that's the best way to do it that's the way that i typically like to do is just rename before you actually upload and sometimes it does you know take a bit of extra effort but obviously in this case i'm not really i'm not like taking the time to actually rename the images but usually i try to be really descriptive with them and then we have this white box that's more or less going to be a slider so there's a couple ways you could go about this so you could build a slider manually using something like um like swiper.js you could use the carousel builder from oxi extras or you could just use you know tabs uh what am i going to do here i guess you could just use the standard oxygen slider too it's just not going to be dynamic that's going to be the best option here i think i'm just going to use the oxygen slider for now it's not the best thing in the world but it'll be perfectly fine so this has a width of 580 so let's just set that to 600. the max width here is going to be 600 pixels pretty small but whatever it's fine and then the background we're going to set to white for the whole slider element and let's add like 15 pixels padding then for our slider styling i think we want to go um lighter or no darker our dots don't change though oh the dot color is there whoopsie i'm gonna go blue use our brand blue here for our dot color and then for our slides how wide is the actual text here so that's 380. so let's set this max width to 380. slider configuration maybe we don't want to do that actually i'm not going to bother with that because there's already the max width set on the slider element itself so we have our slide and what we're going to do is add a text element here we're going to change this to slider actually testimonial text and then we're going to add in a heading element we're going to drop this to like h3 and we're going to add testimonial name as our class the name is let's see font size 18. we're going to bump that down i'm going to change the text color here to whatever blue is appropriate is it that light blue kind of our darker blue is the 254 actually that one there and then we're just going to name this john doe and then the text color here i mean excuse me the text itself we're just going to copy in uh testimonial text we're going to change the typography color to 1c which is basically just our standard uh body font color as you can see there we go looks reasonable enough and then i'm basically just going to duplicate these slides a couple of times and then i'm just going to delete these empty slides down here save that save and then although our um our content here doesn't actually have anything real in it that's okay and then we have a button down here that says see our work so let's design that real quick so underneath our slider element we're going to add in a button i wonder if this is going to go inside the content yes it did that's not what i want go down here slider let's add some margin like 25 pixels i think we need to bump up the margin underneath that little icon here to 25 as well let's give it a bit of breathing room and then our button classes so button new and then this one here is a little bit different so it's not quite white it's kind of i guess it's similar but it's more or less the inverse so i'm going to add another class here of button inverse like that we're going to set the button color to white and then the text color is our deep blue like that right yes except our font weight is a bit thicker not font family font weight 700 and then see our work uh our hover on the inverse is not ideal so hover typography text color will be white right that didn't make a difference not ideal background color back button color would be our dark blue and then the original state yeah so that's what i want is it basically just to flip colors like that once again we didn't have to add our um we didn't have to add that over transition you know timing effect because that's coming from the button new class you need more room under the icon as you're forgetting the quote icon ah yes indeed so that for export and then export that bad boy then let's add in another image real quick upload our little quote icon i feel like there's a actually you know what we could just use a quote icon probably from uh from like an icon set that might be a better option but you know what we could just basically use some negative margin here then on this we're going to set the layout to a z index of like i don't know 15 or something and then what's the spacing like between this stuff so it's 21 pixels beneath that icon above the quote so we're just going to set this well it's 25 right now so i'm just going to leave that and then i feel like this is a little bit too low on that negative margin so let's go negative 10 that doesn't seem quite right maybe it's negative 12. and then what's our spacing like between oops this stuff here that's 50 pixels we do need some extra spacing around the slider so thomas the reason why i wasn't using it as svg is because i was talking earlier in the stream about having a short pixel installed and short pixel claims that it's going to automatically serve the correct image type so really what i'm going to do is put short pixel to the test and see if it's actually serving up the correct correct image format automatically for me without me having to you know upload it as the correct format so we'll see okay so that track record stuff looks pretty good thanks for the reminder on the quote icon thomas and then i think we're down to the very last section after this so this is going to be the final section here this is the calendly booking plugin that i have if you don't use calendly you certainly should because it is really really awesome it's amazing how often people will book calls and i've never talked to them before pretty cool so what is this one 54 so this is going to be like an h1 basically um so we're just going to add this as i'm just going to change it like this font weight 700 talk with and expert and then book a 30 minute discovery call that's going to be our blue and then all capital and it's 18 [Music] typography uppercase and then let's take away some of this line height here so that and then do we have margin underneath this yes we do maybe maybe i'll add 10 pixels of margin give it a little bit of breathing room something like that and then we basically just have our calendly embed so that's right here but how wide is that uh oh yeah talk with an expert wouldn't wouldn't the w in width though be capitalized that seems like it would be with and then the a and an is not capitalized uh the name of the calendar plugin is called calendly oh it's right there in that little badge calendar lee is what it's called i'll show you on the front end here in just a minute uh i meant to look and see how wide is this whole thing basically 900 wide so i'm going to set this code block to a max width of 900 and then i wonder if i need to modify this script in here so min width is 320 height is 700 yeah the height i mean excuse me the width is not actually defined there and then that's about it so let's go ahead and save this and then it doesn't render on the back end but if we go take a look on the front end cool so that's starting to look pretty good i'm happy with that this stuff looks pretty good the spacing is a bit off here so i want to i want to maybe decrease the spacing between those two sections right there then this section might need a little bit of tweaking but it looks okay happy with that transparent pricing looks okay got that transition hover effect got our slider here with testimonials that i'll input later and then here it oh gosh we need to fix this the height is not high enough but this uh calendar plug-in they have a free plan which is all that i've ever used so the free plan works perfectly fine you can basically just come in here and pick a time on my calendar and then what happens is you input your name your email you pick whether it's a phone call or a zoom call and your current info and then it's going to put it on your calendar and also mine automatically which is pretty cool so we need to set this height a bit higher so this width height is 670. i feel like i define the height in here so let's go like 700 pixels and then if we save and take a look on the front end high enough now oh man why is it scrolling so high maybe it's because of the code block height if i just don't define a height i wonder if it will work properly kind of annoying i don't feel like it used to do this maybe it's because i set that that uh max width possibly and it's not liking that i wonder if i wonder what happens if i take that away does it then oh wait i set the width at 100 percent max with this 900 hmm this is a little bit of trial and error here because i'm not sure why it's giving me that scroll bar okay so i do want it to be set at 100 width and then the code actually says style min width is 320 height is 670 but i set it higher than 670 and it still has the scroll bar so i don't really know really odd i wonder if this section has a defined height no it doesn't so i guess i'll just set this height or like min height maybe let's just go 700 pixels of the min height save that refresh ah whatever i don't really know why it's doing that but i'll just leave it as is that's gonna be fine so that is basically the home page of this site done built the only thing that i haven't done is a mobile sweep so let's go check that out and then i'm gonna have to call it quits for the day so let's go back to our oxygen template for the main kind of site-wide component edit with oxygen all right so i use the pro menu this time and that's how we got these effects right here um the mobile menu let's drop down to less than 992 oh gosh everything disappeared so less than 992 this div i think we need to set to a width of 100 right where did it all go i messed it up super bad oh wait i'm setting the width on the wrong div that's why so div width 100 right think i was messing this up by using minimum width 140 and maximum width 1440. so i think i need to get rid of that change this to 100 and then i need to do the same thing over here uh this div 100 save that oh the overflow of the calendar plugin yeah yeah i could certainly do that okay so there we go so i fixed that i just had the settings wrong i needed to set the width to 100 and not actually set a minimum and maximum width of a pixel all right so now on the mobile version this is going to be pretty much stretched all the way by stratos thank you so much for joining see you next time so this div here i'm going to go uh 15 pixels left and right so there's a bit of spacing same thing with this div so it pushes the logo and the menu off the edges of the screen just a tiny little bit this mobile menu i don't like at all so let's go ahead and check out this option here the mobile menu open icon layout what do we want our icon to be maybe is there just like a stack like some lines i think there's a pretty good looking one in linear icon so we'll go menu circle i kind of like the circle one that looks pretty good so the menu text i don't actually want any menu text at all i think it's typically pretty self-explanatory what that is on a mobile device nowadays uh 30 not actually what is the default size here i guess it is 30. so the 35 pixels looks pretty good to me icon color is good icon hover color just go like our dark blue i know you're not really going to be able to see that and you certainly won't be hovering on mobile but that's okay icon transition we'll drop that to 0.2 seconds and then our mobile menu close menu styles let's see here i don't want the full screen one so menu styles off canvas is what i want i want it to slide in from the right off canvas animation is going to be fade right i believe nope fade left why is it still popping in on the left is it not doing it in the builder but it will on the front end take a look inspect iphone we got some issues here obviously okay so that does actually work so we need to define a width i believe for that content what's pushing off the page oh all this stuff basically these divs that i manually created i need to go fix okay so that works the off canvas width let's just go like 50 of the page i wonder if that'll look kind of wonky it certainly might link padding will go 15 pixels on the bottom container padding let's go 25 pixels all the way around uh text item align center i guess and then the close close icon i just want wait let's see close is an x no what would be would be kind of like a close maybe like a back gosh i hate these names for some of these icons they're just not they don't make sense sometimes you know all right i'll just find one real quick looking for like a return oh there we go so the x is called cross like what come on and then i don't want the word closed to be on there that's fine actually the center text doesn't look very good so i put that in the menu styles i believe left and then container padding i think i just want to eliminate the padding all together and then i think that's about it i think that'll be fine okay so the background maybe let's go like a slightly off-white so it kind of stands up a little bit off of the page and then that's about all i need so front end we're gonna go inspect here and we're gonna take a look at our menu that looks fine um let me check on my real phone real quick why that uh that background color doesn't stretch all the way to the bottom i want to see if on my on my actual phone it does maybe once we have the um all the mistakes with like those kind of like containers and stuff fixed if it will work properly now it looks exactly the same on my real phone as it does in chrome inspect so why don't we go ahead and go back and fix some of those layout issues that we have and then we can come back to this edit with oxygen calendly works with a height of 950 pixels okay cool i'll take a look at that here in just a second so this section i believe was getting kind of messed up here so we're going to stack this one we're going to stack this one at less than 992. this div is going to have a width of 100 and then let's go to 25 pixels of margin these divs we want to set to 100 width at this point along with that kind of main container div well that looks fine probably down until 11 68 we'll stack it and then we're going to set uh let's see let me open my structure pane real quick and then this div needs to bump out to 100 and i unfortunately didn't set a class on that div it wasn't very smart so i'm having to do this manually that's okay okay so that's fixed this one is certainly not fixed let's jump back up to 992 and stack this section i'm going to pop some margin underneath all of these sections all of these elements perhaps i should say and then this one looks okay that one looks fine our footer is not fine so we'll need to fix that in just a moment i think i made the the same mistake where i set the min and max width to 1440 pixels instead of using that 100 width so we'll fix that in just a moment and then andrea says the calendly works with the height of 950 pixels so let's set the code block to a height of 950 pixels i'm going to remove that minimum height save this and then let's go take a look see if that fixes calendly i don't know i don't get why the scroll bar just doesn't seem to go away but it's not that big of a deal i think it'll be fine uh let's look on our chrome inspect real quick what is still messed up so it's the footer and that looks like that's all so let's go fix the footer in our sitewide template real quick open anyway i'm the only one in this site so there's no issue with us accidentally overwriting our stuff all right moving on down so open my structure pane here so this div i have set to yeah i did the same thing so min width is 1440 i'm going to clear that out and set the width to 100 and then this div see is the width just at 100 yeah it is okay so now i don't think i use the columns element here so i need to step this down a little bit see what it looks like at the lower breakpoints that's a little clunky so let's just go ahead and stack it basically all the way down we're going to left align this and just add margin beneath each of these divs that stuff is good so i don't need to worry about having div i mean a margin beneath this div i'm going to go here i'm actually going to bump these up to 25 pixels instead of 15. and then let's just check all the way down here oh wait actually you know what i need to set this div's width to 100 at this break point so it kind of stretches and then i think i need to add some padding so it's not all pushed up right there along the edge so this main kind of wrapper div i'm going to add 25 oops i said 25 but i type 15. 25 pixels of padding now if we step down a bit there's some spacing some breathing room on the edges of the content there so that all works perfectly fine so let's save this again and go take a look on the front end double check that everything here is good to go on our mobile device now it looks like it's finally working looks like i need to shrink the size of that heading a little bit our mobile menu doesn't work probably because i set the width to 50 so we'll need to fix that all this stuff fits oh calendly is a little weird on mobile the way it scrolls uh i need to add some padding around that bottommost div here so let's go 1440 992 we're gonna do the same thing let's just go 15 pixels of padding all the way around save that and then if we refresh there we go now it fits much more nicely much nicer much more nicely okay andrea says use manual css okay so let's do that we're still on this page is it this section right here yeah on mobile it's super annoying you're right so uh let's just save this and go back to our home page oh wait i wanted to fix the um the mobile side of things real quick on that menu i think i just need to take off the defined width on the mobile menu here so let's go mobile menu drop down to 992 so menu styles off canvas width i'm not i'm just not going to set a width entirely so now let's refresh go back up to the top here like this still doesn't work i wonder if it's just in chrome inspect or if it's regular phones too let me see here now it's still messed up on my phone too uh do i need to add some container padding perhaps so you like the pro menu that works pro menu just has a bunch of quirks that make it really annoying to work with i mean it works it's not the prettiest thing ever but i guess it does the trick and it also doesn't close when you click off of it you have to click the x which i really don't like so this is a case where to me it just makes more sense to build the links manually because you don't have a very complex menu so i don't know we're too far into it now for me to change it maybe i'll change it another day off camera but for the time being i'm not too worried about it okay we're gonna go edit our homepage again and then do just a couple of tweaks here dog is scratching the floor she's trying to get more comfortable so if you hear weird noises it's the dog okay so i'm gonna drop this heading size a bit so it was pretty big it was like 60. you go like 42 less than 76 768 let's go 36 and then less than 480 that looks fine all right i'm happy with that save and then andrea mentioned the calendly situation here so i'm going to basically remove the height off of this and then his suggestion was some simple css so in this code block let's just toss that in there inline widget height of 950 pixels let's see if that does the trick still doesn't quite work do i need to define the the height of the code block as 950 as well give it a shot at least so uh no oh well again it's not the prettiest thing ever but maybe i'll spend a little bit more time on why it's doing that i just wish that i hate the scroll bar and like it's really annoying when you're trying to scroll past it then you get stuck on it um the other thing that i wanted to mention to you guys is look at how this stuff is lazy loading in so like the logo some of these icons some of these things just watch when i refresh the page i'm gonna do a hard reload and you can see like these images are lazy loading in which is pretty sweet and that must be the adaptive images plugin you know the short pixel stuff that i was talking about earlier excuse me that came on quick um so basically that is supposed to be a performance benefit so in the short pixel settings right here it has the option to lazy load in this stuff and also serve it from a cdn so i'd like to see how this stacks up on the performance side of things so let's go to gt metrics andrea says try important let's do that height 950 important apply that code save real quick and then hard reload and let's go take a look oh there's still just the tiniest fraction of a scroll bar it's so small we need to go like 9.75 it's so high that's a enormous uh an enormous widget there there we go okay so yeah finally we just changed the height of the calendly widget to 975 pixels and there's finally no scroll bar that's a pretty that's a pretty tall widget i will say good enough for me though yeah so 975 did the trick that works now let's go back to gt metrics real quick i wanted to see what our site looks like so right now i do not have server caching on i don't have any kind of app caching on um actually that's not true there may be server caching but there's certainly not application caching on cloudways um and then as far as plugins go i have this like kind of you know i have a couple of things on here but about it so there's no like proper caching going on here all right let's test this out real quick and see what we get i don't exactly know what i'm expecting here i'm sure there's images that are not optimized but we will take a look and see okay so leverage browser browser caching yeah we need to turn on our caching but this stuff is going to be hot jar google analytics and calendly i don't know how you would fix that kind of stuff if i'm honest and then these are calendly a bunch of different things uh so defer parsing of javascript but this is our score at the moment with no effort so i need to get that fully loaded time way down of course i'd like to decrease the page size quite a bit um and then what one thing that i guess i could do is try out the vulture high frequency servers on cloudways and see what kind of performance benefit we get there thomas says this is not the solution the height will change depending on the step you are in what you need to do is make the iframe responsive depending on the content ah yeah that is true so i guess you'd have to do like media queries and stuff um let me let me look at what that looks like on my actual phone real quick i'm curious now yeah on my phone it's still very clunky you like get stuck on the widget and if you don't know to like push your fingers to the far right side of the screen and try to like scroll past it then you would basically get stuck that's really annoying i don't like that at all yeah well that's about all i have the time for today unfortunately we're kind of similar to last time we're a bit over two hours two hours and 20 minutes so let me go back up to the top of the screen here and show you guys the end result so we still have some work to do on mobile but we were able to build out a whole new template and a whole new home page today hopefully you guys like this sort of format um i mentioned before that i want to do some sort of layout live stream where i kind of like build um you know different oxygen layouts in real time but that will be for another day i really appreciate you guys watching and hopefully you'll participate next time whenever i do this i'm aiming for maybe every other week something like that and if you guys have specific things you want to see next time don't hesitate to reach out as always thank you so much for watching and i will see you in a future live stream or video so have a good day guys enjoy your enjoy your saturday you

Channel: Permaslug

Views: 4,677

Keywords:

Id: 0GaS6md7OQs

Length: 142min 25sec (8545 seconds)

Published: Sat Oct 24 2020