How To Create a Beauty Salon Website in Oxygen Builder

hey gang it's david again back to you with yet another oxygen tutorial and in this video um i've decided to do something else rather than just doing like quick little tips i guess in oxygen i just wanted to do like a you know front page recreation in oxygen so i came up with this design in affinity designer and by the way if you want to learn how to know create kind well these designs here inside designer just let me know in the comments below so i created this and now i've decided to simply recreate it in oxygen so that's something that you're interested in just keep watching [Music] so um i've created a simple like chat here on the right and i'm gonna add these these colors to oxygen so i'm going to start with adding the my like color color swatches so first i'm just going to maybe grab one and i'm going to go to my page this is the the page that i created beauty salon i'm gonna go to settings global styles colors and i'm gonna add a color set that i'm gonna call savon it's um it's just a it's just a fantasy name for soap it's it's french i thought that it would look um it would sound a bit better than just soap i don't know i'm not an expert in in beauty salons so you know and so i'm going to add a color uh i'm going to i'm going to call it um let me just see what it was it's like this orange color or maybe i'm just going to call it skin and i'm just going to paste that in and then i'm just going to now do the same thing with with all the remaining colors okay so i got the colors so i'm gonna start building my my navigation so i'm gonna add like a header builder i know that a lot of people don't like the header builder i kind of like it you know i don't mind the header builder so what i'm going to do first is i'm going to add like a logo on the left so it's going to be my heading this guy right here and i'm going to make it crimson text crimson text this guy right here and it's supposed to be like white and i'm gonna type in savon like that and i'm gonna go to go go to typography and increase the letter spacing now i know it's pretty hard to see it against this darker background so let's maybe before we move any further let's create like our hero section and i'm just gonna add a section that i'm even i think i'm even going to call it hero like that and i'm going to add a background to it like a background image um i already have my you know like assets prepared so i got my icons and i got my images right here and i think it was this image so as usual i'm gonna go to cover and i'm gonna make sure that it's left position is set to fifty percent top to fifty percent to center and to center the image and when i go to my header builder i'm gonna choose overlay always like that so we got our you know we got our uh well header over our our hero image and i think that maybe we can make this logo a bit like lighter i guess and if i see you know yeah it's it's all it's all caps i'm gonna go to typography uppercase and let's maybe do something like i don't know let's do three m spaces or maybe two and a half this should be all right and i'm also going to grab the header builder size and spacing and i'm going to go ahead and choose full width so in the center i'm going to add the menu so i'm going to go ahead and choose pro menu this guy right here and i've also already created a menu that's called savang and it'll it only has some like no dummy links nothing these are not like real pages and it's supposed to go to the center so let's put it in the center so i'm just going to use the the poppiness font like that and i'm going to change the color to white i'm going to go ahead and choose the upper case and maybe let's do like letter spacing 1 why not and uh when we now go to to desktop desktop menu i'm gonna go to not hover on active space align in a border i wanna do like a margin on the left or on the right i wanna space them out quite significantly because you know it's not a big menu so so let's let's make it take a bit more a bit more room and on the right i'm gonna add like social media icons so i'm gonna put them here on the right and i guess these icons are okay it really doesn't matter which social media icons we add as long as we make them smaller and lighter maybe even smaller than that that's like 20. and maybe i'm gonna just grab the header builder and i'm gonna add some padding like too i don't like three top and bottom this should be okay now of course we have to take care of the responsiveness so if we go to 992 i think that at this break point we could make the the navigation you know like mobile navigation it's it just looks a bit too cramped for me so i'm going to go to pro menu and i want to make this um i want to you know toggle it to a mobile menu at less than 9.92 so now if you go to that breakpoint this is what we have but of course it doesn't look good so i'm going to go to mobile menu open icon layout first of all i don't want the text and i want to change the icon to linear icons and i'm going to search for menu this guy right here i think i want to make it white there we go and then if we just open it up you know well we got a bit of a problem here so first of all first of all i'm going to go to close icon layout and i don't want this icon text right here and i think it's going to be crosshair i want to i want to know keep it consistent so i'm not going to use the font awesome crosshair i'm going to use the linear icons crosshair and i'm going to move this icon a bit to the right so i'm going to choose icon position left 90 because you know most people are right-handed and i think it's just you know it i think it would be just better if by default it was it was moved to the right not to the left but you know it is what it is so now basically what we need to do is we need to i'm going to go to menu styles and i want to make it like off canvas and i want to make it 100 percent and i also i would like to make make the background color like a bit darker but let me see if it if it's going to work here i'm going to go to background color and let's do maybe like i don't know this blue color uh i guess this should be fine and when we while while we're here we can make the item text align we can make it to the center and i'm going to go to close icon layout and i'm going to change the icon color to just plain white and then i'm going to save it so basically this is what our website look uh looks uh right now so if we now just start making it smaller and we got this um you know it's kind of it's kind of abrupt this animation let's do let's do some like real animation so i'm going to go to menu styles of canvas animation i kind of like this like flip up you know animation it just looks nice if i just now refresh the page i just know i just kind of think it looks nice and well it definitely serves its purpose so it looks alright so we got our like header created let me just go to all devices so now we gotta do our hero hero section so i'm gonna just borrow this piece of text there we go and i'm gonna go to my hero section and i'm just gonna add a heading and i'm gonna make it heading h2 i'm going to paste my text in and i'm going to change the text to crimson text and the color to just plain white and now we can check maybe if there's like a lighter version of it i think this will look a bit better and i'm definitely going to change the text size to let's select 2m spaces maybe 3m spaces um i guess it's going to be okay and while we're here maybe i'm just going to you know what it's a i think that this text is maybe just a bit too short i don't know um i guess it would look better if it was put into lines so i'm just gonna go grab some lorem ipsum uh and i'm just gonna like grab this bit right here it's not even real lorem ipsum but it that it will do so i'm just going to make it just a bit bigger and uh yeah i'm just going to get rid of this guy and i'm going to go to typography and make sure that this guy is set to the set to the center so if we now take a look at our design we got two buttons right here so i'm gonna start creating my buttons of course i'm gonna first create one and i think it was book appointment yeah and view our services so i'm just going to type that in book appointment and again we're going to have to change the color so it's going to be this guy right here and on hover let's maybe do this one like that and of course we need to change the text so what i'm going to do is i'm going to go to typography and change the font family to our display font uppercase and maybe i'm going to make like one letter spacing one well one pixel and i'm gonna maybe make the font something like 14 pixels and then for the size and spacing let's do like quite a lot of padding on top and on the bottom and maybe a bit less like on the size let's just add like let's do like i don't know 15 and 15. this should look fine so now all we have to do is to just duplicate this guy and i think it was um view our services of course these buttons don't lead anywhere because now it's not like a real website it's just a front page and i'm gonna hit done and let me just take a look at so this guy is light and it's got a black font so i'm just gonna make it white like this and i'm gonna make its font our dark color but when we hover over this i wanna i want this font to change so i'm gonna go to hover and on hover i want the text to be light so now if we just hover over this guy you can see that it's nicely changing to this orangey color i guess now i'm going to go to my like hero main section and i want to of course align everything to the center but these buttons also have to be nicely aligned you know when i'm looking at them i think they need more space well that's like 13 30 and 20 20. i think that's going to look a bit more these buttons are going to be like real call to actions not like you know whispers to actions so let's do 2020 and i'm just gonna of course have to wrap this guy with a div because i want these buttons to be put side by side and if we now just make sure that our div is selected i'm gonna do like horizontal alignment and i guess i'm gonna grab this first button and i'm gonna add like i don't know like 12 pixels maybe or maybe even more like 20. this should be enough let's just add something like i don't know 50 pixels of margin somewhere here and i'm going to grab this first section and i want to make it i want to make i want to be sure that this guy is stretching across like the whole height he's using the whole height of our viewport so for the height i'm gonna choose 100 viewport height units and of course if we go to our um like well to our hero section you can see that right now it's set to center and now vertically center it's been aligned vertically to the center but of course we also want to put all these elements to the center but you can see that since we got this selected it's it's not we don't have like all the uh all the options right here unfortunately we will have them when we go to horizontal and now we can set the horizontal item alignment to the center but then if we just go to vertical it's it's all going to work so it's all going to stay stay in place okay so far so good we got our first section created let me just see what it looks like on smaller devices so when we go to 992 it looks fine 768 but it still looks all right 480 i guess we could maybe make these guys these buttons to be we can put them like back vertically and this first button cannot have any margin to the right but it will have some margin to the bottom so i guess this should be this should be fine so let's go back to all devices and now let's see our design so now we've got our services and actually this is going to be a fun one so i'm going to add a section a section like this and i'm going to add a heading i'm going to make it h2 because i just want to have my logo set as h1 and you know what maybe i'm just going to borrow this guy i'm just going to duplicate it and all we really need to need to do is to just of course change the text to our services and we need to change its color but other than that you know it's basically the same now we got our section selected i'm going to make sure that horizontal item alignment is set to center and now what we have to do is we have to add our icons and text i'm gonna add an image so it's gonna be this guy and i'm gonna browse for it i think the first one is this like like perfume bottle i'm gonna select it maybe i'm gonna make it just a bit smaller something like 76 and if you take a look at our design we got this like subtitle here and some underline down here so let's let's do that next so i'm going to simply do another heading but this guy is going to be h3 it definitely is not going to be that thick maybe like 500 and it's going to be it's gonna be beauty it's gonna be beautiful and let's go of course to our typography let's increase the line uh the the letter spacing let's make it uppercase and you know what let's go for a actually and let's do the font size like 20 maybe or 24 or 22. this should be this should be enough okay so if we take a look at our design it's going to be right here so we got this underline down here and there's actually a number of ways you could do that you could just add a div beneath that you know but we could also just add a pseudo selector to our heading and that sudo selector is going to be after and we don't want to put anything here inside the content we're just going to be playing around with these advanced values so let's say that we want this underline to be like i don't know 25 or 26 pixels wide so i'm gonna do 25 and i'm gonna do height like maybe one and then i'm gonna go to layout and for the display i'm gonna do block and right now we could for instance just you know grab the background color and let's see if it's gonna work but which color was it i think it's the lighter one so i'm gonna do the lighter color and as you can see we already can well it's it's it's a bit difficult to see but it is there so i'm gonna grab my heading again and again i'm gonna go to after and let's actually make it a bit bigger let's do like maybe three pixels this should be a bit a bit better so of course we want this guy to be like put in the center so all we really need to do is to set the the margin left and right to auto and as you can see it's been nicely put in the center now i guess we can just go to our original state and add like a i don't know 25 pixel margin to top and bottom um well to the top because we still i think need to add some margin here at the bottom if i take a look at the design there's quite a lot of it and so i'm going to do like 25 to the top um maybe not 20 let's just see the design yeah i think it's a bit less than 25 and i think that this line is a bit more and even thicker so let's go to i'm going to make sure that i'm on the after and let's go to size and spacing margin like i don't know 20 height let's like five or four okay okay this should be enough let let's not split hairs here so we got our heading so this is our services we got our image and and our heading so just with just these two elements we created this nicely looking like icon elements so all we have to do now is just to wrap this guy with a div and let me just try to put it somewhere here and i'm gonna make sure that everything is nicely aligned to the center and now we can just you know duplicate this guy and just change this image and it's going to be nails so let's find the nail is here and that's what i'm that's what i'm going to type in [Music] nails then i'm gonna do i'm gonna duplicate it and eat some hair gotta have hair so i'm gonna just type in like that and this guy is gonna be uh this uh hair dryer and the last one the last one was just beauty um but maybe let's just change it to something else because we already have beauty so let's do like make makeup okay i guess i guess this i guess this will do so we got all these elements right here maybe we could you know like put them inside like a column container that would also work because um right now now what we want is we want to like make these guys go uh go across so you know what let's actually do that so i'm just going to add columns but i'm not going to be clicking on any of these elements i am just going to try to put this well each and every one of these divs into my column container and just know let it do its thing let it calculate um all these um values that are that are required but as you can see it's sometimes not that easy but once we do it i guess we can say that we succeeded so of course what we still need to do is to just add some kind of a margin in between these elements so like 50 maybe even 100 this should be this should be fine so let's just not check back with our design still we got some some text down here so i'm just going to copy this and i'm gonna just add some text there we go i'm just gonna paste that in maybe with a sm with a with a paragraph like that and let's change the font to poppins and let's make sure that it's nicely displayed being displayed to the to the center and maybe since we got some margin right here let's add margin right here like 50 because it's i think it's the same so it's the 100 why not and lastly i think we got some kind of a button view services so i'm just going to borrow this book appointment button so i'm going to duplicate it put it down here and i'm going to try to make it fit somewhere here so it's going to be view services like that and this guy is also gonna have some margin but like maybe 50 uh 50 should be enough and of course if some if some spaces are maybe like a bit too big for you maybe they're they are a big a bit big for me uh right here so i'm just going to make them a bit smaller notes and it's always like that with these with these designs one once you just you know put a once you look at it with your like fresh eye or like like after two or three days you know it all just starts to look a bit different you like some things and you start to dislike other things so now let's actually try to try to do this part this this is going to be like a slider on the left and like some text on the right section so i'm going to do that but first i'm going to rename this guy it's going to be our or just services there we go so the next section is gonna be i think beauty tips so let's just we're just gonna call it tips i think it's appropriate for a beauty salon so tips and this guy is gonna have a proper background color that's going to be i think this one so again i'm going to add columns because i want to have i'm going to start with 50 50. we'll see now we'll see how it goes on the left i'm going to have a slider let me just select this guy so this is going to be a slider and now my usual routine with the slider is that i simply remove all of the slides except for one and then i just duplicate that slide i'm just going to add a background image to it and let's just grab this one so again i'm gonna do cover no repeat you know i guess it would be a good idea to do a utility class for this for this kind of operation then i'm going to grab my slider i'm going to go to styling horizontal or fade it doesn't really matter what we have here but i'm going to change the dot color to maybe this darker color and i'm going to remove the padding and i don't want the dots to overlay the slider i'm going to go to configuration i don't wanna see the arrows i do wanna show the dots for now i'm not gonna be doing the autoplay because it's just gonna hurt my hurt my eyes when it's gonna be like playing in auto i'm gonna do infinite why not so now what i'm gonna do is i'm simply going to just um duplicate the slide maybe twice and i'm just going to change that the background so i'm just gonna grab this one and then i'm gonna grab this one and i'm gonna change that image to maybe this one okay i'm gonna save it and right now i'm not too worried about the size of this guy we're gonna get back to it in just a second for now i'm just gonna grab these elements so i'm just gonna grab this heading and i'm gonna go to my right div and it's gonna be a heading 2 and i'm just going to type that in it's again going to be crimson text where it really would be great if if in oxygen we could you know simply see like a last used font it would be just a bit quicker to work and i'm just going to make it white and also i'm going to make the font weight like 400 and that was 3m spaces i guess i could could have just borrowed that that bit right there so okay beauty tips and then i'm going to just grab this this text and i'm going to add a text like that and i think it's in i think it's in pop-ins and i'm gonna make it white and i'm gonna make it um maybe even 300. i guess this should be fine let's go to typography and let's maybe do like a bigger line height and if i remember right we have some margin on the left we got like something like an indentation so let's do like 20 pixels or maybe like five percent that's going to be a bit more responsive i guess and i'm gonna do like 50 pixels top and bottom and this should be this should be fine and we also have like a like a button like learn more uh right here so i guess we can grab this button and just you know change some colors so i'm just going to try to put it down here and of course it's not going to have this color let's do let's make it transparent button hover color maybe let's let's make it black and i think we need to add like um like a border so with um and i think it has to be white it would be a bit like logical and it's supposed to be like learn more something like that and maybe i'm just going to do another paragraph here something like that okay so now i guess what we have to do is we have to just make sure that our like slider is uh you know is a is a bit taller simply so in order to know like make sure that these slides look nicely we could try to know play around with the with all these like width values so with height with like vapor height viewport width but we could also just since it's a this basically is a div with a background image so what i'm going to do is i'm just going to add 100 of top padding right here and it will make it you know it's just itself and it will look nicely so i'm going to do the same with the rest 100 percent and with this guy size and spacing 100 like that and the last thing to do here would be to just make sure that these guys are nicely aligned to the center and if we just now save this guy and refresh the page this is what we're gonna have but of course we could also maybe make it a bit more prominent now it's just a matter of experimentation so let's go to um yeah this is my section but i want to go to size and spacing and i want to see what like full width is going to look like that's going to make it like much much more prominent no something like this now if it's something that you want to go for i have a huge monitor here so it it looks really huge make it a bit smaller so now it would it will look something like this i guess it kind of looks all right it's it's it really pops so you know it's just um you know it's up to you whether you want to do it like that of course it would be also up to your your client so i'm going to leave it like that i guess it looks all right and now all what we have to do to you know kind of like do our gift card section is uh well we basically can just duplicate this guy and i'm gonna rename it and i'm gonna call it like gift cards not cards that would be cool gift cards i'm gonna save it and of course we have to change the background and let me just see what it looks like so i'm gonna just reverse these columns so they look like that this guy has to be darker same goes for this guy and what about our button so it's basically like a dark version so the text is darker like that and the borders are dark too so let's do that and when we hover over it i guess all we really need is is to change the the text uh colors so when we hover over this guy change the text color to white so this is basically what it's gonna what it's gonna look like and we also have to change the text so gift cards and i think i'm just going to leave this or maybe yeah so okay so let's let's grab this lorem ipsum and let's and let's add it here but i'm going to do another paragraph like that and uh you know what okay let's let's just you know change the first uh first slides background so it just you know it looks looks a bit different uh it's gonna be this image like that and i'm just gonna save it but you know the problem that we're gonna have is when we go to like this smaller uh viewport you can see that we got these just you know well basically we got text over text so that's easily fixable all we have to do is to just grab our columns and we want to reverse the column order at 992 so now we have like slider or image text image text but when we go to all devices you know it looks it looks like you know we still have like text here and then text here so okay so far so good so let's see the next section and this is our it's our blog so again what i'm going to do is i'm going to add a section and this guy's background color is going to be our lighter color and i'm going to grab this heading and i'm going to duplicate it and i'm going to put it down here and i'm going to try to fit it inside my section that's supposed to um my section that's supposed to have these guys aligned to the center and i'm gonna type in like our blog so next all we have to do is to just add no i'm gonna add a repeater but um you know if i'm i mean it's not going to be linked into like a proper single single post template but you know for the sake of you know learning how to do repeaters i'm just going to i'm going to do it like it like they were supposed to be linking to to proper posts so i'm gonna add a repeater and for the query i'm gonna go to custom and i created like some you know like savong posts just you know just with some dummy content i'm gonna apply that so uh maybe i'm just gonna grab this repeater and add like very very quickly some margin space here so inside my repeater we got our div but we could like add some stuff to this div like directly like a background image or something but we cannot make it link to our actual post and i usually like to link the whole like post container to a post because you know it's just easier for people to tap on mobile devices so i'm just going to add another div it looks kind of redundant but you know it is what it is so i'm going to add a div and this div would be like a link so i would just um you know i would link it uh let's go to data i would you know do like a permalink right here so it basically would turn that div into a link wrapper and this link wrapper is gonna be 101 [Music] 100 percent uh wide and it's um and its background is gonna be our background feature well post featured image like that and again i'm gonna do the usual so no repeat cover 50 percent fifty percent and uh beneath that i'm gonna add a text and it's supposed to be beneath not inside so i'm just gonna try to bring it somewhere here and this guy is gonna be i'm gonna go to advanced typography uh it's gonna be poppins so like that it's gonna be a bit smaller something like 12 or maybe 13. and i'm gonna do a letter spacing of one or maybe 0.5 and of course this is going to be our metadata so i'm going to insert the data and i'm going to choose date like that and then i'm just going to duplicate this guy but um instead of like date it's going to be our category but before i do that i'm just going to type in like in and then we can simply change this oxygen date i'm going to just go go ahead and do insert data category i'm gonna insert that and i think i just have some bracket right here it's gonna look a bit better now as you can see we got a bit of a problem right here because since this category is basically a link that would take us to our like category archive we cannot really change the color of it like from this um well from this spot because if we if we even if we try to you can see that it's that it's not changing i think it's a bit of a i don't know a bug you know some something like that i mean i wish it was possible to just change it like that and of course i think we have to go to typography do uppercase see that changes because this link color has been um well it's been controlled by well like oxygen like global styles if we go to settings and then links you can see that we got this link color and then you can see that it's going to change but it's going to affect all all our all our links so in order to like you know fix that what we would have to do unfortunately is you would have to just code it a little bit so i'm just gonna grab this uh span i'm gonna try to copy it's it's name sometimes it's not that easy and then what i'm gonna have to do is i'm gonna just have to grab i mean you could add like a style sheet for these custom codes but since i'm going to be using just on this one page i'm just going to add a code block this guy right here and i don't want this php html code i just want to i just want to go to my primary css and i'm just going to type in a hashtag to you know indicate that this is an id and the theme is that well it's not working because there's still a link inside this pen so now if we just add like a so anchor and then we do something like i don't know color uh just black you can see that now it's now it's working but it's not really black it's our color i think it's going to be quicker if i just grab it from here so i'm just going to do this and just paste that value in i'm going to apply the code collapse the editor and i wouldn't worry about this no code found thing here because it's not going to be visible in the front end but if it's bugging you i guess we can just move it somewhere here and again i think i'm going to have to make this guy uppercase as well so now both of these elements so this date and this category well they kind of need to go like side by side so i'm going to wrap them with a div and put them try to put them inside one div there we go so now i can just you know put them like this horizontally and maybe add a bit of a margin space like 10. i guess this should be this should be all right and now beneath that so beneath this uh beneath this div i'm going to add a heading like that and of course it's just going to be our post post title so i'm gonna do title like that and it definitely has to be well no not that prominent so i'm gonna do like 400 500 maybe 500 and like i don't know 18. um this should be this should be all right and while i'm here i'm gonna grab this div and i'm gonna center everything and maybe i'm gonna grab this um this dip with our metadata and i'm gonna do like 26 pixels maybe of margin top and bottom bottom maybe like 12. let's do something like that and of course now i'm going to grab the repeater i'm going to play around with the layout so i'm going to grab the layout and do something like horizontal i'm going to grab the heading and for the typography i'm just going to set everything to the center and as you can see it's a bit it's a bit small it's definitely a bit too small so first i'm gonna grab this div and i'm gonna do some margin space like on the left and on the right just to have some you know some space here and then let's try crapping our uh like link cropper i think we added the background to this guy so let's see if our if our trick is gonna work so let's do 100 percent like that now it's gonna show the whole uh whole image and since they have different uh aspect ratios that not might actually work you know what guys when i was editing this video i just noticed one thing that um you know i think it's kind of important to um to explain a bit better so first of all um when we have this link wrapper that is linked into our like well posts basically um i you know i think that this div like with this um like this metadata and the heading they both should be within that link wrapper i just kind of missed it but uh if we just grab this div and we put it inside the link wrapper you're gonna see that it's basically going to be like within this link wrapper right and this is not basically what we want what we could do is we could add another div and that div would need to go on top of these elements and this would basically be our well basically our featured image so it would have to be 100 in width and i would also uh give it like a you know like a featured image background like that and i would remove that from our link wrapper so i'm gonna go to advanced background and background image i'm gonna get rid of that and of course my div all this guy also needs to have like our you know standard cover no repeat uh values like that and also now since we put it in in a div now sometimes we might have to change some like text colors so i'm just going to quickly do that so for this guy and for this guy and now we can actually start playing around with like you know 100 percent uh values so first of all i'm going to grab this div and i'm going to set it to 100 percent then i'm going to grab my link wrapper and i'm going to see if i have some like no paddings or all those things set to them so i want to remove that and now i want to add that padding 100 percent to this to this div 100 percent to the top so now our elements look you know as they supposed to and now if we just grab our blog in a blog section and i'm gonna go to size and spacing and i'm gonna do full width everything is gonna be working working properly so this is just a thing that i noticed and i thought that you know it's it's better to just edit and tell you about this so let's see our design let's see what we have next we still get this like view all stories button so i guess we can borrow this guy it looks kind of similar and i'm going to duplicate it and i'm going to put it somewhere down here so now i can just see where it's where it went so it went somewhere here and i wanted to go here and we got i think we have some margin on the repeater yes i'm gonna do like 75 and 75. this looks fine so now if we just go to like 992 it looks quite horrible so at this break point i want this guy not the query i want to go to layout i want this layout to be put to vertical and the i guess the last thing to do here or maybe i'm just going to grab this div and at this break point i want to do like i don't know 50 pixels of margin let's see 768 looks quite all right uh i guess it's okay so i'm gonna go back to all devices i'm gonna save everything and we can move on to our this kind of a like a i don't know like um like a social proof i guess you know we got this uh like stories about our brand here inside these brands well i guess these are the names of the magazine so i'm gonna just add another section and i'm gonna just rename this guy it's gonna be blog and this guy is gonna be [Music] uh let's call it something like featured and this should be fine and it's it's basically a matter of just adding some uh some text here so i'm just going to type that in or paste that in so as featured in and of course i'm going to make sure that everything is aligned to the center so this guy is going to be again my poppins it's going to be 600 maybe 600 and again i'm gonna go to typography make sure that it's set to uppercase and maybe make it a bit bigger now let's do 18 pixels and i'm gonna borrow this text there we go and i'm gonna add it right here and it's definitely well it definitely has to be bigger so again i'm going to do letter spacing 1 font size let's select 64. it's going to be enough let's align it to the center let's line height 1.2 and i'm going to add some spacing so let's like 50 and maybe 50. and we still have like read the whole story so i'm going to borrow this guy and again i'm going to duplicate it i'm a big fan of duplicating to make my work easier so it's gonna be read oh let's just do read story like that and i'm gonna make it lighter and maybe just a bit smaller um typography let's do like 16 and i'm gonna underline it and lastly i think we just have those like you know um those brands so i'm just gonna duplicate this guy put it down here and the first one was called fashion it's fashion brand and catwalk so it's gonna be fashion so let's go to typography let's do uppercase let's do something like i don't know 26 or maybe 32. and maybe let's play around with the fonts let's do something like i think we have like pt serif here uh it doesn't look really all that different list laura um it looks a bit different okay let's see let's leave it like that i'm just going to collapse these guys now let's do i think it was it's called brand okay so this magazine is called brand and maybe i'm gonna do like libra baskerville this guy right here and it's gonna be much bigger yeah this should be fine or maybe less like 36 it's gonna be in the center so 42 and the last one let's just duplicate this guy put it somewhere here and let's do i think it was cat walk now what maybe let's do something like a let's see like paris yen i think it was oh no that's not going to look good you know what let's go let's go with play for display it's going to be it's going to be quicker play for display this guy right here and of course it would be a good idea to put these guys side by side so i'm gonna put them inside a div if i can and of course they need to go like horizontally like that and i'm going to make this div 100 and then we can just play around with this horizontal item alignment we can check with like space around space between uh let's space around yeah and it would be it would be our our section so i'm just going to save this guy and of course let's do responsiveness looks quite okay 768. now these guys need to go vertically and to the center like that and it's gonna it should look okay maybe at this break point let's make the font size a bit smaller um something like 38 and what about 768 it still looks alright it it's it's okay so let's go to our next section it's going to be this join us search our website section so what i'm gonna do is i'm gonna just grab a section that i'm gonna call maybe something like a join us there we go and this section's background color is gonna be i think this one i think i think it was that one okay and i'm gonna add the columns 50 50. and on the left i think it was join us so this guy and i'm gonna add a heading i think i'm gonna make it heading three and type that in and it definitely has to be bigger so let's do like 36 this should be fine but i don't think it can be that that thick so let's do well let's letter spacing that's the font weight 5 500 and let's see what else we have here so i'm just going to grab this piece of text it's also pop ins and so it was in within this div so text and it's gonna be poppins it's gonna be like being on 13 13 pixels uh i guess i guess it's okay line height 1.2 and maybe i'm just gonna add some margin like 25 25 and i guess if we grab this guy it would be a good idea to put it to the center because i think it's yeah it's to the center so this guy is going to be also set to the center and we also have these social media icons there so let me just duplicate these guys and i'm gonna grab them all the way down here and these guys are going to be darker and i guess this looks this looks all right and here we go search our website so i'm just going to borrow this fella and i'm gonna put it somewhere somewhere here so it's gonna be so it's gonna be just copy and paste so i'm just going to copy that and paste that and maybe i guess we could add a like a border here on the on the right so i'm gonna go to borders right border is all right i'm gonna go ahead and do something like this this should be all right and maybe maybe let's just add some padding uh let's do like 15 and then 50 or maybe even 100 100 this is going to make this divider a bit bigger and in here let's do let's do some text i'm just going to borrow this text so duplicate put it somewhere here if it's possible like that and let's go to typography to the left let's see what it looks like it's um it's much much shorter so i'm just gonna do like just one line of text and i guess i'm just going to quickly add a search form i'm not even going to stylize it too much i'm just going to i'm going to do maybe like background color white text color black something like this and this guy was 100 and 100 so let's do the same thing here so 100 100 there we go so i guess it looks okay maybe the only problem here would be with this this like search button so you know in order to change that we would have to just go to like style output and let's click on the search uh search button and you can see that we got borders right here if we go to top we got solid and we don't want that if we click on and set all all borders it's not gonna work so we're gonna have to go go through all of these um and the right one so it kind of looks better i think it kind of looks better so another problem with this is that when we go hover over this guy you can see that the color of the text is not changing so let me go to our style output again i'm going to try to choose like our search submit like input so first i'm going to just go to our typography and i'm going to make sure that the color is set to our darker color and then i'm going to go to hover and i'm going to change it to just white color so now if we just now hover over this guy you can see that it's properly properly changing we could also maybe just go to our background color and maybe change it from that blue color to just something like darker color so now if we just hover over it you can see that it's it's actually changing so it's um maybe not a lot of work but you know you just have to click a bit to make it really work and as you as you want it to work so the last thing to do here would be to just put everything nicely to the center and it kind of looks all right i guess now it looks now it looks a bit better so i'm going to save everything and our next section is going to be the gallery section so this is what i'm going to call it so rename and then i'm going to just call it gallery like that and inside i'm gonna actually add the gallery module but um if you are using you know something else if you're using something like a um you know like a different um different plugin or something like visual portfolio you you could definitely just you know use it right here and i think i i forgot to just add a heading so i'm just going to duplicate this guy and i'm going to try to i'm going to try to put it somewhere here and of course everything needs to be aligned to the center and this guy needs to be light like white and it's gonna be called um like from our gallery and i'm gonna grab this gallery and i'm gonna just look for some images i'm gonna grab these guys um maybe maybe like that and i'm just going to insert the gallery and i'm going to add like a margin down here something like 75 75 this would be better so if we grab our gallery we got some layout options right here and they're gonna work differently with um well with different images i mean if you wanted to recreate like this layout right here it might be a bit difficult you know to retain the gallery properties and to make it like look exactly like that when when our images are of different different sizes i mean if we just go to grid and let's say we're going to increase the the column count you can see already that it's so it's not going to work but you know we can try so i'm going to do like column span 2 and rowspan 2 and you can see that yes they are like you know popping in uh where they need to but since some images are vertical some are horizontal it's you know well it looks differently so i guess like we could also try uh the masonry like maybe two two images per row not 42 but two um it would i don't know look like this you know it all you know depends on on the images that you're using so i'm gonna do like um flex with two images per row and maybe i'm gonna do items men with like 400 because when we now go start going to like like 992 we want these images to be you know like in one column because if we don't have it this this number of images per row is going to be retained so we can see that it's actually well it doesn't look that great it shouldn't look like that so i'm just gonna again do like four hundred and save the guy so next section uh if i just go to my to my design is this like a contact section i'm just gonna grab this guy and maybe i'll just borrow this section because this is already like aligned to the center we got some you know some elements here so i'm just going to just duplicate it and i'm going to try to move it down here and i'm going to call it like um like contact there we go and i don't need these elements i just need the section itself i'm going to duplicate i'm going to duplicate actually this this div so this i guess this is this guy right here um or maybe we could even duplicate the whole columns i guess so let's do that so duplicate so maybe let's collapse some of these elements and i'm just gonna grab these columns and put them somewhere here now let's see if that worked um i guess it kinda did and i don't need this margin right here so if i go to my to my design you can see that we got this small small like subtitle right here and we got some text and i'm going to simply quickly borrow this text and of course we have to change this icon and so i'm gonna i think it was the telephone and this text was um i guess we can call it like contact and we don't need this after state here and this font is going to be a bit smaller so let's like 18 and a bit thicker like 500 i'm going to go to my typography i don't need it to be an upper case but i think it's going to be like 600. and maybe i'm going to like 0.5 uh i guess it's i guess it's a bit better and maybe i'm going to make this icon a bit smaller like 64. and i'm also going to add the text and it's going to go down here and i'm just going to paste that guy in and i'm also going to paste this guy i'm just going to try to move my cursor somewhere here and it's going to look more or less like this but of course it still needs some adjustments so to the center let's change the font to poppins and let's make it smaller maybe like 13 and i'm going to make that line height something like 1.5 maybe even and i'm going to grab this contact subheading and i'm going to do like maybe 15. and uh yeah i guess i guess it looks uh i guess it looks alright so i guess all we need right now is to just um i'm just gonna maybe you know what i'm gonna get rid of these elements so now i can just clone this guy and duplicated and i think it was appointments so i'm just going to borrow and be this text and i'm going to change this font um to this guy i'm gonna type in appointments and that this date and i'm gonna grab this text too and type it in like that and now all we need is just this just to duplicate this last guy and this one's gonna be our address so it's this guy right here and we're gonna have to just like type in address and i'm just going to copy this lorem ipsum like that and yeah let's let's add a paragraph here and of course all these elements have to be of same uh of same width so like three or three okay so i managed to just type in the widths for all these elements so now they are just like 33.33 percent so um yeah so i guess that's it for this section so last section is our footer so that's what i'm gonna do is i'm gonna add a section that i'm going to call a footer of course you know if it was if you were using like a you know like a proper template the footer would already be in here but we're just building out this page so i'm just going to add columns and we're gonna need four columns one two three four so that's what i'm gonna add and in the left column i'm just going to add a logo so i'm gonna grab this heading and i'm simply gonna duplicate it and i'm gonna move it all the way down here if i can if i can manage to do it somewhere here and of course we need to change the color of our footer so i'm just gonna grab this color like that and i think that yeah we need to change we need to change the color and maybe um you know what now let's okay let's do it like that so let's do let's do darker color like that and i'm going to add a code block because right now i want to add something like a you know copyright information so i'm gonna start with uh like um and uh copy and space and i'm gonna append to it a date and i'm just going to add the year inside so i'm going to apply the code as you can see it's it's changing and also we could just simply append um like i don't know like savon incorporated or something like that so um and also maybe i'm gonna add a space here and i'm gonna collapse the editor and of course i wanna change this font to i think it's yeah i think it's going to be um it has to be the display font so pop-ins like that so 12 i guess 12 should be all right and um you know what i i don't really want to you know build out all these all these links um i think it just would be better to just you know grab some lorem ipsum really um or maybe you know what i'm just gonna type in something like link one link to link three it's just gonna be a bit a bit quicker so i'm just gonna do like text and i'm gonna type in like link one and that link one has to be written i think using the display yeah it's gonna be it's gonna be my pop-ins font like that and it's gonna be uh like a bit bolder should be alright and now i'm just going to like copy this guy and just you know just start building out uh you know my my navigation with just you know like simple links it doesn't have to be anything like fancy it's just a you know it's just more to learn how to how to add all all these elements i mean if it was like um if it was like something you know if it was a proper proper navigation you would definitely want to you know add um these uh these like menu items uh down here but since i didn't really do them i didn't really do them i'm just going to add links just you know just just so it looks like a proper you know like a placeholder for our for our navigation so once it's done i'm just i think i'm just going to you know like duplicate it and put it here in the other div something like that and on the right i'm just going to borrow this these elements so i'm just going to grab this this heading and i'm going to put it somewhere down here and let me just take a look at this um it's like join our newsletter um i guess we can do that so we can just type in like um join our newsletter but of course we're gonna have like a like a subscription well like a search form so it's not going to be like a letter a newsletter subscription but you know if you want to if you want to do that you would have to like grab just some kind of a some kind of a plugin that short code and you know and that's basically it so i'm just going to for the for this mockup purposes really i'm just going to add this this text and also this search form so i'm just going to duplicate it and put it down here and this should be this should be all right i guess it looks okay it actually looks so it looks quite all right so i'm going to save this and of course we still need to see what it's going to look like on some smaller devices like um in here we we have this like a you know like a border on the right and that's not really what we want so i'm going to go to borders and i think it was the right border so i want to do none and it should be gone let me just make sure that this is the right div but i think it is the right div so borders and borders are right that's like zero and it's gone so now i just want to do border bottom so i'm gonna like i guess just one pixel of width and it should look a bit better our gallery looks all right these guys look all right too the navigation now maybe at this break point it's like you know too much too much space right here so maybe it would be a better idea to instead of four columns have like three columns and then just put these guys side by side so let me just grab the columns and i'm just going to move one of these elements to somewhere here and then i'm just going to get rid of this div and this guy is going to be like that and now we're gonna have to just you know play around with these elements it would be really so much easier if it you know adjust it the way we want it to adjust but sometimes it just does not and as far as these guys go um i'm gonna just now put them like horizontally side by side and maybe let's try to space between or space around something like that so you know sometimes with these elements it's you know it's it's better to just you know try different solutions like in this case i mean i don't like uh that there is no symmetry here so maybe we could simply do something like i don't know 15 and then maybe try to space these guys around and you know it looks it looks a bit better so then when you go to 992 these links look something something like this guess it's a bit better when we go to 768 kind of looks alright then when we go to 480 it still kind of looks uh still kind of looks alright so no it's just sometimes it's just a matter of of trial and error but you know it's how you go and get good at this so i'm just going to refresh my page and let's see what it looks like maybe let's go from top to bottom so we got our we got our navigation we got our logo and our hero image then we got well our services with a with a button down here then we got our slider and let's see if it works it should work then we got another slider that also should work then we got our blog then we got our like featured in section join us section the gallery and the gallery should also work and it does and then we also have like this contact and our footer so yeah all in all we created we recreated that design and i i hope you had fun and if you stayed this long i really thank you and congratulate you um you know if you if you don't want to miss any future videos just subscribe to the channel give it uh well give this video a thumbs up it always helps grow the channel thanks for watching and as always have a nice design

Channel: Dawid Tuminski

Views: 819

Keywords: How To Create a Beauty Salon Website in Oxygen Builder, oxygen builder, css, web design, affinity designer, web development, design a website

Id: BWSJfyZjKmQ

Length: 72min 58sec (4378 seconds)

Published: Sat Jun 19 2021