 Let's get started. So I've already created a folder on my desktop called WooCommerceShop and here is where I will be adding all the files. So open your favorite code editor. For me this is Visual Studio Code and on Windows you can do left shift, right click and open PowerShell Windows here. Then type code with dots and this will open Visual Studio Code for you. Alternatively just open Visual Studio Code, file, open folder and select the folder that you want to work in. Let's start by creating some folders and some files. Obviously the first file that will be creating is all index.html. As you can see I've zoomed in quite a lot so you can see a little bit better if you're mobile or tablet. I hope that's okay and let's now create the images folder and the styles. For the styles I'm just going to name the folder CSS and as always I will be using SCSS for this project so let's create a file inside the CSS folder called style.scss. The plugin that I'm using to compile the SCSS to a normal style.css file is under here extensions. Search for live SAS compiler and once you install it make sure you run it right here at the bottom below where it says watch SCSS and also I will be using live server which will basically refresh the page for me every time I make changes on the web page. So let's toggle back the extensions, watch SCSS. If we talk about back the explorer you will see that this generated the style.css for us which is great. So let's close the explorer. These are all the files that we need. If we look at the design that we that will be doing today I need to export. I've already exported this image and those two images so we can start using them and these ones I won't bother with because these will be added from WordPress in the next video as products. So I'm not gonna bother doing this section exporting all the images and so on but that's it. So let's continue. Let me copy and paste the images. The naming is not super great. I've got male female hero image and and the size is quite big. Obviously there needs to be optimized for the web but it doesn't really matter at this stage here as we are just developing the website. So now that we have index.html and styles open let's start writing some of the HTML and include all styles. One thing that I forgot to mention is that for today's video we'll be using SCSS but also I will plug in some media queries that I've pre-made to speed up the process and make it easier. I actually done a video on advanced media queries and this is when I created those styles that I'm going to show you now. So let's go ahead and copy them. What I will do is create a new file in here and I'm going to do this underscore breakpoint.scss and inside here I'm going to paste some of the mixings that I've pre-made for this and I will explain them now. So basically these are just normal media queries but I've wrapped them within mixings and each mixing has a name. So this is basically a media query of a phone. This media query specifically has a minimum width of 320 pixels and max width 480 pixels. So to use this media query in our project will be actually very easy. All we have to do is add include. Then we need to type the media query that we want to include. So for example phone so let's say insert device name in here and then you just need to apply the styles. I will obviously show you how this works and let me quickly add a comment for this just so we know what it is. Just like this and this will be also available to download on my blog and github. So let's close this. Let's go back to the html and let's start writing our html. So first of all to start writing our html in visual studio code is very easy. We can just start typing html and select html5 the emit abbreviation will save us so much time in here and we're pretty much done with the basic structure of this site. So let's go with something like the title guard shop guard shop as this is what I named my named my shop. We have the viewport which is brilliant and now we have to add all stylesheets and some javascript if we are going to do any. So let's add all stylesheets here stylesheet and to add or stylesheet all we have to do is type link select link css this will give us the row of stylesheet href style but obviously we have a folder called css before the style.css so we're going basically in this folder here and we're selecting the style.css. Now just to let you know you don't have to add the breakpoint in here we're going to actually import the breakpoint into the styles.css in a second. As we're here let's continue by adding some of the fonts and the first font that we need to add is this one here which is going to be our body font and it's called Stozo I believe and this is actually an adobe font it's free to use and you can go to adobe font find it it will give you a link and you can just include that link in the header of our website in the head of our website sorry and for the headings we're going to be using playfair display and this is actually a google font which you can go to google font and get very easily. I've already copied the links to save us some time here so let's copy the let's first of all copy the first body font this is the tab kit which is adobe and let's now copy the google font which is the google fonts which is the yeah the one for the headings and this is perfect so technically later on we could copy this and put all javascript in here so I could do javascript now that we have all this set up let's have a look whether our styles are working and to do this we can simply change the body background color let's say to something like green and save let's now run the project from explorer and right click on index.html and open it with live server here at the top this should open or the browser for us it's taking a little bit of time and as you can see we have a background color of green which means that our styles are working and we can take this off for now and check out yeah and the changes are done automatically with the live server the next thing that we need to do before we get is to import or breakpoint that's very easily done is styles.scss we can simply put import and then type the name of the file that we want to import and in this case we have an underline breakpoint.scss save this and also don't forget to close now before we start adding any of or elements like the header the hero image let's add some dummy text and setup or page layout quickly today i will be using BEM which is a methodology css methodology which stands for block element modifier if we go to or let's actually let's add first of all let's add one heading in here saying heading one just for the test we can do alt shift and down to copy this and let's add actually h2 instead now and type heading two and let's add a paragraph in here as well just to see how our text looks like and if you use tdcode you can start typing lorem and hit enter and this should give you some dummy text and of course i need to go to view and toggle world wrap so you can see save this go back to the page and as you can see we have heading one heading two and some text let's make sure that we have the correct font the correct styling them and so on the first thing i'm going to start with is create a few variables so i'm gonna i'm gonna make a comment here just like this so we know what they are like this and in here i will be adding some variables so one mistake that i see that a lot of people make is naming their variable colors to the colors of their layout so for example because my layout is pretty much black and white i mean in terms of typography and other colors is pretty much black and white many people would normally do a variable like for example black black dash color and then they will set up rgb rgba zero zero and one many people do this but and then they will start styling their layout like let's say for example on body maybe want to change the color the font color to be to or variable black color and imagine and i see many people doing this and reusing this variable all the way on all elements just imagine that if some of these specifications for your project change and this black color needs to be changed to let's say gray or red now we'll probably end up using this variable multiple times and now this variable no longer makes sense because it's set to red it says black and it's just a mess so what i prefer to use is not to name anything instead i usually use primary color and secondary color and so on so my primary color is rgba i should have saved this 0.0.1 and i can reuse this anywhere i can change the color whenever i like to the primary color and it will just change on my whole layout which is great so the next thing which is exactly the same some people type the the variable names or their fonts which is not good for this what i usually use is maybe we can do heading headings font and body font so let's do headings font and for headings font we have the play fare font the google one and this is a serif font and for the body we have stolzl and we have sound serif now that we have set a few variables we'll probably come back to this section later on and add a few more as we need and now let's copy this and start creating similar the main styles so let's change this to main and some of the main styles will be things like html body h1 h2 paragraphs links and so on so let's start with the html and as you notice in this we're not using any reset styles you can do that if you want but i think the but because i'm using the bem methodology i'm just going to be styling everything individually as components and i really don't want to do this where people do this all the time as well which means everything asterix which means everything select every single element on your DOM and then people do something like padding zero margin zero and also people do box sizing border box i get it but this is not a good way to reset styles basically those are being added to every single element of your page and i personally don't like that and i'm fairly confident that truly this isn't good for performance either so don't do this so first thing let's start with html and the reason i'm doing this is because we'll be using rems for our font size just to make it easier what we can do here is set our font size to be 62.5 percent and if you're wondering what this does this is basically a method of setting the font size to be 62.5 and that's because the default font size of our browser is usually typically 16 pixels and 62.5 of 16 pixels is 10 pixels so why am i doing this this is because i would like to make my rem numbers to be for example if i was to do font size i want to set my rem to be simply like 1.6 rem and this will be usually now equals to 16 pixels so that number it's a lot easier to work with rather than calculating the rems and so on oh this makes sense anyway let's continue let's style our body so on our body of course we have as default we have some margin so we can reset here it's not a problem let's start by changing the body font size to 1.6 rem which is actually the default so we don't have to do that but let's do it anyway so font size 1.6 rem and then we can do and let's set the font family of body font body font body font is all variable that we created earlier so this is the font that we're setting for body then we need to set the font weight to be around 300 and we need to set the font style do we need to send the font style to know probably not we'll have a look in a second and maybe remove this it's not a big deal and last but not least let's use the primary color oval layout in here so we can do color primary color which is set to black so technically speaking if we go back to the browser everything is looking good or font is coming up but of course we need to change the heading to be to the other font that we loaded earlier so let's do that now so first of all let's add a few heading elements so one h1 h2 h3 h4 h5 and h6 i probably won't style every single one individually and i probably won't use them at the moment but it's good to style later on if you're developing a full-on project one thing that i want to do on them is to reset the margin top on all of them i believe let's have a look margin top let's set it to zero for now and the font family for the headings needs to be set to the headings font which is the variable here this is perfect the next thing the next thing i actually want to do is maybe change the line height of the body but maybe we can come back to this later if we don't like it so let's change the line height to 1.2 and we'll see how it goes so technically speaking now or h1 and h2 should be with should have the new font and as you can see the new font is loaded and everything is looking good of course i'm going to actually change the size of those fonts quickly in here so let's do that quickly i'm just going to change it for h1 and h2 so h1 let's change the font size to be 3.5 rem and font weight i want it to be 600 which is 7 votes and by the way we are developing this website mobile first so first of all we're doing the mobile styles and then we're doing the bigger ones such as tablet laptop desktop and so on so this will be all mobile and we'll work away later on so let's go back we've set our font size on mobile to be 3.5 rem font weight to be 7 votes and let's do something similar for h2 and inside here i'm going to do just font size to 2.8 rem okay so mobile wise this would be perfect i want to show you how we can use the media queries mixings that i created and let's do that now so if you wanted to do different size for h1 and h2 for desktop let's say we go to breakpoints and let's say we want to start from tablet portrait so this would be the minimal width of 768 pixels and up i want to change the font size to be slightly bigger so that's kind of like desktop i'm not going to be doing all the media queries i'm going to keep it basic but of course as are there's many media queries as you need and of course and at the bottom here i've got a custom one which you can pass a custom number as well and so on so let me show you how we can use this go back to let's close this go back to styles and i want to make the h1 and h2 bigger for desktop or slightly yeah for desktop so what i can do here is i can say include and then paste tablet mode and then in here in and then inside here i can run the h1 and change the font size font size to 6.5 rem so it's a lot bigger and let's do the same for h2 i can hold alt shift and down and i would copy so let's change this to h2 font size will be 4.5 and save so let's see what happens when we resize the browser currently we are on desktop view it's looking real nice and when we go down to mobile it should the text went small and the text resized see and this is how easy it is to do media queries with those mixins and that's why i will be using them for today's video as we already here we might as well reset some of the links i i'm gonna keep them very basic basically let's create a link in here so href just like this and we're gonna keep it empty and then link one and then let's have a look at how this link looks like and obviously it's getting the default browser styles so let's change this quickly let me zoom in as well so you can see and maybe i can put this on the right side just like this so you can see a little bit better let's change the link color super quickly styles and to do this i'm just gonna be doing them in here links like this and we can do a link let's change the color to be equals the main color which is dollar sign primary color that's now let's change the text decoration to be actually i'm gonna leave the text decoration to be underline because that's because of usability so let's leave it as it is and let's just do we could have done a hover effect as well maybe we can do hover and just change we could have done different we could have done a mixing or we could have done we could have done a hover button but let's keep a simple and just put maybe like color and then rgb to be rgba to be around 0.8 which is makes it slightly opaque when we have over i don't think you can see this but yeah that's probably too bad okay but yeah you can see this a little bit now this is just an example anyway the next thing that we need to do is visit it obviously i haven't clicked on this but if i do the color might change as you can see the color is now changed ever slightly it's kind of hard to see but what we have to do is for a visited we're gonna have to do color set to primary color and for the active as well i'm going to do exactly the same we can actually we could have done the same on one line i believe let's have a look just like this and i think that works as well so the active and visited buttons should be all the same color which is the primary color of our layout so we'll probably have to style a few more elements such as inputs and so on but we'll do that as we go along as we add the style as we add the elements to our index html page so first of all let's start by creating all navigation at the top so first of all let's start by creating all navigation at the top and just bear in mind that we are designing mobile first so we're gonna have to look at this design because we have our burger menu on the left side logo in the middle and or tools on the right side while on the desktop it's swapped the logo is on the left side the menu is in the middle and then we have the tools so just bear this in mind and we're gonna be using grid to make this very easy to swap around to swap around the elements so first of all let's create the header into our index dot html file let's remove those default styles that we were styling and start cleaning here i'm going to use the html5 element header but i will also like to give it a class name so because we're writing BEM this will give us the flexibility to change this to anything we wish later on if we if we have to and you will see what i mean as i go along so first of all let's give this a class name and usually you'd probably want to be kind of specific so let's do top or main header yeah let's do main header you would think that i already came up with the names but nope not today so then we have the main header inside here so this is our block element then we have three elements which will be or burger logo tools so let's create them let's start with the logo the actual order of the elements doesn't matter so much in this stage but i always start with the logo so let's create a div with the class name of main dash header and we're gonna do two underscores for logo okay and inside here is where i'm gonna create a link with href and just add my logo in here normally you'd have it as as sbg or png or jpeg or whatever but i'm using the same font for my logo so i'm just gonna type it out like this and as you can see it in here maybe i should zoom in a little bit so you can see better now that we have the logo the next thing that we need to do is do the navigation and for the navigation we can use the nav html5 element with the class name of main header and then we can do two underscores nav okay and inside in here inside here is where we're gonna have our burger menu and where we're gonna have the lists so we need to create this this in here recreate it and also we need to add these links as well and obviously they're gonna be hidden on mobile and this is gonna be hidden on desktop so let's do that first of all let's do the the burger menu i'm actually going to call this burger menu menu link maybe all right i'm not great with naming stuff so let's do this class name of menu dash link and inside here we can have two or three spans span like this and actually let's just go for two i quite like the minimalist burger menus where you only have two lines instead of three but i'll show you how to make it anyway we have two spans and we could potentially give them specific classes but i think that's very unnecessarily at this point let's now create our menu and because this layout we're pretty much prepping this for WordPress i know how my menu is gonna come out is gonna come out in an unordered list and we can change the class names and all that but let's keep it simple for now so let's do let's mimic it the way you will come out from WordPress as much as we can so we don't have to restore stuff later on so let's do a URL with the class name of menu and then maybe we need to be a little more specific but that's fine let's go with a list and inside the list every single list is gonna have a class name of menu item which will be very helpful later on and obviously inside each list we're gonna have a link which will lead us to a page just like this and the first one we have is products and let's copy this three more times i can do this by shift sorry all to shift down one two three and let's quickly change this to sale about support and we're done the navigation is done as well here and the last thing that we need to do is to create the tools which is this magnifying glass and the shopping cart for that let's create a new div in here div with the class name of main header underscore underscore tools and then inside here we're gonna have two links so href let's keep them like this and also let's give this href a class name of tools dash icons maybe i'm not sure if this is necessarily again but let's do anyway then we can duplicate this and inside here is where we'll be adding or icons for for this design i use the feather icons which you can find under feather feather icons dot com and instead of using the cdm i'm just going to download the sbgs that i need and just copy and paste them into my layout instead because i wasn't very happy with the javascript way of inserting the icons but let's go with it so search is one that i need let's download i think i might already downloaded these cards is the second one that i need let's download it and yes i've already downloaded these so let's open those two icons let's open those two sbgs in vjtd code like this and this is the shopping cart let's copy the sbg paste the shopping cart into the second one here and let's copy the search and paste the search into the first one just like this so let's go back to a layout let's start starting the header and then we'll come back and develop the rest of the elements of the page so first of all we we need to remember that we have a main header class name and then logo nav and so on so let's start by copying some of them so in the styles inside here i'm going to paste main header and i'm also going to copy this command in here so we are a bit more organized header okay so this is a class so we're going to have to add the dots and then inside here what i want to achieve now is display this as grid and position the elements just like it's on the design to do this we can use grid sorry we can use display grid just like this and also you have to be careful when you do this but if you are developing microsoft sorry edge and internet explorer is a little bit funny when you do this you have to actually do display dash ms grid which is really annoying we have to display the prefixes and there is an online tool for this that can help you out great prefixes so this website is called auto prefixer you basically copy your styles paste them in here and this will give you an example that should work for like edge and so on but it's really annoying that we have to do this just bear in mind that you have to do this as well and spend a lot of time building it today i'm just going to be doing the normal ones which work on all bra on pretty much all modern browsers i'm just going to be doing this today but yeah just let you know so first of all let's zoom out a little bit now so we wanted to look similar to the design that we have we have display grid but nothing is happening on firefox you can actually go underneath here when you spec the element and display line numbers display areas and so on and the reason that no area is displayed is because we need to find the grid area so header and click on the grid here this will display the grid for you which can be very handy sometimes and also you can display the numbers if you wish but i don't want them at the moment and you can display the names of the grid and so on so first of all we need to do a couple of things we need to set a grid template which will allow us to position or elements the way we want and to do this let's go with grid template and to do a template you can do it on a little line in here with a single quote and you can start by naming every single by naming those three elements so we have first of all we're gonna have a mobile we're gonna have navigation then we're gonna have the logo and then we're gonna have the tools save and as you can see grid kind of already names them by the order that they are in or html but this is wrong we need to actually give them the proper names so i'll need to give the logo a logo name and so on to do this what we can do is let's get the logo the logo class name which is main header logo and what you can do in scss instead of doing this and then doing the styles here what we can actually do is inside here we can do an ampersand and then we can do underscore underscore logo and that should act exactly the same as this so we can type all styles in here so first of all let's name our logo to be set to grid area to be called logo grid area logo let's save and as you see the logo is now turning into the logo and it's actually taking the second position which is here now let's do the same for the other ones and we have nav and we have tools so let's do exactly the same copy this nav and let's paste it one more time and let's say tools and of course we need to change the grid area to be nav and tools okay what this allows us to do is easily manipulate the position of the elements on the page so for example i could copy i could move the nav to be in the middle here save it and look at what happens the nav goes in the middle and this is what we'll be using to do the media query for desktop so from mobile to desktop let's go back because we want the mobile to be nav logo tools and of course we're going to have to hide this and so on but let's start let's finish this up first of all i want to add a little bit of gap between them and to do this grid makes it very easy you have to do gap and then you can do simple like 10 pixels as you can see he creates this gap for us then what i want to do is i want to ensure that all those three blocks are equally spaced and to do this with grid we can use the grid template dash columns and we can either set every single element to be one fraction of the screen like this 1fr 1fr or we can use as you see there now equal or we can use the short the shorthand which is repeat and the shorthand is repeat 3 1fr just like this i want to add a little bit of padding as well so let's add a bit of padding like 18 pixels that looks better last thing that i want to make sure to do is don't forget that on mobile we have white background but on desktop we don't so what i'm gonna have to do is create this with rgba let's do that in here i can do background dash color rgba and then i can do doing all these stuff so i can do no 255 255 255 is white and then set it to one which means that the background color of the main header will be white and to prove that this is working let's change the body color super quickly we'll have to remove this in a bit to i don't know this one looks good as you can see white and the menu is white and we have a baby blue something like that we'll leave this in for now but later on we'll have to remove it let's go down and let's not forget that this menu is actually going to be positioned on top of or hero image so we can have to make this absolute and to do this we can basically pretty much the position absolute and then we can set the top to be zero the left to be zero so the div starts from top zero left zero and we need right is one zero okay so you won't see a difference just yet but when we add elements they will be underneath here oh which reminds me that we'll probably have to do setting this one at some point so we might as well do it now so it's this menu is above everything else now that we are here let's start with the first element on here which is the logo so for the logo i'm just gonna make it actually i want to reset all the links on the header yeah let's do that let's reset all the links on the head actually so text decoration i want to set to none okay and now let's start the let's style the logo for the logo what i'm going to do is just bump up the size a little bit to font size 2.4 rem then let's bump up the font weight to 600 which is semi-boat that's looking much better now and i want to be able to if we make the visual studio smaller just a little bit i want to be able to justify this in the middle of the screen and in the middle horizontally and vertically so to do this i can do justify self which is going to be obviously center and i can do align self center as well okay this is working quite well the next thing that i want to do is the navigation obviously this is going to need to be we need to hide this actually and create or little burger menu first so let's have a look at what the name was so this we need to add height menu link we could be very specific and do it in here just like this menu link and i will just do display none that doesn't seem to be working let's have a look oh sorry i need to be hiding this one instead so menu display none and now we need to create the actual menu we also need to position them in a second as well but let's finish with the navigation so first of all to create those three elements or two in my i'm going to just do two because it's easier to recreate them if you remember we created two spans in here so i'm going to use them to put background color in them and display them as the lines instead of putting sbg so this will be super easy to do actually so let's copy the menu link class and let's do it in here first of all let's set the width of this container to be roughly let's set it to 2.4 ram let's set the height to be 1.4 ram then let's set the position to be relative because we're going to position the spans absolute inside and now let's target the span is our span and let's have a look if we added classes to that now we didn't add classes but that's fine let's target the span so obviously the spans now need to be positioned absolute and i need to make sure that they start from the left side zero and to the right side zero then let's display the spans as blocks let's make sure that they have a little bit of height so we can see the background color in second so zero point two ram should be good enough and let's put the background dash color to be rgb is this black yeah rgb black or you can use whatever so obviously we have two spans in our html but we see one this is because they're both positioned at the top at the moment let's position one at the top and let's position the other one at the bottom of the screen so let's select the first child first one and first child let's position it at the top zero and let's select the last child sorry last child uh let's position it and let's position this one at the bottom just like this and as you can see the menu is now looking good but this needs to be positioned as well so so to do that i'm actually gonna have to position the nav here let's do justify itself to be start which will start from the left side and let's do align self to be center so this should center or menu right here that's all good so far let's now focus on the tools here on the right side let's just move them to the right side to do this we can do justify yourself and we can do align self center the only thing i would do is probably add some padding between them maybe we can target the actual tool icons class to do that so we can do it in here just like this tool icons and maybe we can do padding of 0.66 ram this will make them slightly that didn't seem to work class name maybe we should do it singular tools icon like this and change it in here as well just like this okay this is better as you saw the icons moved but the only issue here is that they both created a little bit of padding around them so it's not going to be aligned exactly as the space in here but they're going to be easier to hit so let's leave them the way there of course we can do the but we can do the upset element not the last child and avoid this if we wanted to but let's leave it for now so far our menu is looking very good and now we need to figure out how to do this for desktop so i'm gonna have to open this for desktop like this unfortunately and just toggle between which is to decode and the browser for desktop we're gonna have to move the logo to the left we're gonna have to hide this icon display the actual menu that we hidden before in the middle let's do that first of all we can use your we can use or handy media queries just if this is the header we can do it just in here so let's do you only one well the only one for now but of course feel free to use more multiple queries if you need to for your design and so on so let's do include tablet dash portrait and inside here what we can do the first thing is to change the grid template so the logo is in the first position let's copy this paste it and let's swap the logo with the nav like this let's remove the space as well and save so technically speaking if you go back to the browser you will see that the logo is now on the left and we have the nav in the middle let's fix the rest of the stuff so we need to remove the background color now this would be easy because we used rgba so let's do background dash color rgba and then we can do 255 255 255 and then zero which is opacity zero so that should remove the background for this as you can see the white background is gone and then let's focus on the logo so let's do and and logo sorry underscore underscore logo and we need to justify self the logo to be at the start just like this and let's do the same for the navigation we need to do i'm percent underscore underscore math and then we can do justify self to be center now everything is looking good but we need to display this none so which one was the element so we need to display this as a block and this one as none so let's copy those two and inside here we can actually add them like this and we can display this one as a block and we can display this one as none like this and let's see what happens as you can see we have the links which is awesome but of course we're gonna actually have to do a little bit of work on those links to make them look good so let's do that now if we go back to the html and inspect the links we can see that we have class of menu and inside here we have menu items item sorry so let's copy this find where the menu is in here and i know it's displayed none here but we can actually add some more styles in here just to reset them like this okay so we can add URLs as default have padding so let's remove the padding to zero let's remove the bullet points so list style is set to none and then we need to add the menu item which is a class name and display those menu items as inline block i think in our block and let's just add some padding between and of course we could have done this in so many ways we could have spaced them out equally with grid and flashbox but i think this is a very easy and nice solution so let's go with it as you can see everything is looking great so far the only difference is that the font on the menu is slightly bolder in here so we could change this if you wish so maybe where we added the links we could say font weight to be i don't know if it's 400 let's have a look yeah that's much better actually 400 and we are good we could have added the underscore something to them if we wanted to but let's continue to save for some time now that we have the desktop menu let's have a look how the mobile menu is looking when we shrink down the website and at some point in here as you can see it's switching to mobile and then desktop which is brilliant okay the next section that we need to focus on is the hero section so let's start by adding some of them some of those elements into our index.html page and we'll go from there so first of all let's open index.html and just below the header let's start by creating a new section and i'm going to give this section a class name of hero and again you can be a bit more specific if you wish to an inside hero i'm actually the hero section is actually going to be a big link so the whole section will be clickable and to do this let's do an href with hashtag inside it so it's not broken and we can add a class name of hero underscore underscore wrapper this link will be a hero underscore wrapper and if you were to change the the good thing about them is that if you were to change this element to no longer be link then this the styles will still work on whatever we use even if you put div or whatever well that's the idea anyway the next thing i want to do inside here is create a div with the class name of wrapper and inside here we're gonna have probably a div with the class name of i don't know what to do it let's do it as a hero heading yeah let's do as a hero heading and then inside here i'm gonna add a span like this actually instead let's do wrapper and this will be all wrapper heading and inside here we're gonna have a span which i don't know what to name yet but then we're gonna have an h1 which will be i'm gonna copy the text in a second and then we're gonna have like a fake button which will be kind of like a div with a class name of a button and then and yeah just we'll put as a button but i can show you how to use a modifier as well if you wish to so let's copy the text super quickly so we have new collection in here then we have elegant and luxury in here and then for the button we have browse collection so let's copy and paste to this and let's go with it so so probably leave these just tie them up to this div they're already kind of specific enough i think otherwise it could get a little bit messy but so let's save this and see what we get we have all the elements it's perfect let's start styling this section now okay the first thing i want to do is add some sort of layout elements section in here so let's add one in here just like elements i don't know if this is the right naming but what i want to achieve here is on every single section of my website i want to add i want to make sure that the section is in the middle so let's do that quickly margin zero auto and this will be very handy in a second and i also want to add some padding everywhere so the text isn't exactly close to the edge and to do this i'm actually going to create a variable in here i'll move at the top in a second so maybe we can do a mobile one first mobile padding and then we can set the mobile padding to be 16 pixels excuse me it needs to be to dot 16 pixels and then maybe we can do a desktop one to be set to 36 spaces so there is more space i think we've got an error so yeah i need to add the variable mobile padding padding here like this and let me move those variables at the top with the other ones like this so let's have a look at what's happening so if i refresh we're getting the 16 pixels of padding at the moment let's go back and focus on the hero now as well again so we can copy we can copy this and paste it inside here and just do hero i think i spaced out things too much but let's go so first of all or hero section is called hero so we can use the same class name just like this and the first thing that i want to make sure is that the position of the hero is relative and the reason for this is because i want to add the background i want to add this background to be as a pseudo element so we can modify the opacity of it and so on or mobile and yeah and you will see how it goes so first of all let's make sure that this is set to position relative instead of adding the background image here we're going to do it in a pseudo element which will be and and sorry and after like this and then we're gonna have to do content make this empty and then we can add or background image i will show you why this will be very useful in a minute background image and then we can do url slash images and i need the hero image at 2x jpeg we need to set obviously because this is kind of a this is a pseudo element and the hero is set to relative need to set this to absolute so let's do position absolute and then obviously we're going to have to do top zero right zero bottom zero and left zero make sure that the z-index is set to minus one so it's behind the hero element and let's have a look what we get so as you can see the image is now in here which is ideal and we can use the hero wrapper to actually make this content a lot bigger so let's do that to do this we can do or trick which was ampersand underscore underscore wrapper and inside here we can do inside here we can do the height to be set to 32 vh which is which is the vertical height then we can display this as a grid which will help us to position or element a little bit easier and we can align the align the content to the end let's have a look at what we get okay this is looking good so far because this is a link we might need to remove the text decoration and we can also make this very specific if you wanted to but let's leave it as it is let's just add text decoration text decoration to be none let's see if it works okay this is fine now you're probably wondering well how do we position this in the middle like kind of in the middle here of the screen so the so her face it's on the right side and or elements here on the left side and to this to do this what we can do is this wrapper element i'm going to use to create a little section that is kind of always centerline and maybe we can reuse this later on as well so let's use it so let's do it in under here let elements what i'm going to do is create the wrapper i'm going to make sure that the wrapper is set to margin zero auto which will set it in the middle of the screen but of course at the moment it's probably taking the full screen let's set it to full width 100 just in case and let's set the max width to be one two eight zero pixels and this should constrain the box to be that size and throw it in the middle if we refresh you will see that we get the excuse me we get the title kind of in the middle just like the design and obviously this can be positioned more this could be positioned precisely if you keep playing with the numbers and depending of the resolution of the breakpoint okay let's shrink down the website to mobile so we can see what's going on and everything is looking good so far of course the image is not very visible at the moment and because and this is because we need to set the background image no the background size excuse me to kind of cover everything like this and also we need to make sure that this image never repeats so background repeat we can set to no repeat and last but not least we can actually position this image a little bit better so we can see her face and to do this we can do background background position zero pixels and then 16 percent okay we have to play with the position a little bit more maybe like 26 or 40 60 okay basically we have to play a little bit with the position to make it look good but that's the idea and because it's because we've done it with after this allows us to do all sorts of stuff for example if we wish to we could change the opacity now to the picture wow if we put it on the background here on the hero section we probably wouldn't be able to change the opacity of the actual image itself we'll have to do the full section so that was the idea anyway let me show you so if i was to change the opacity here 0.5 that would work absolutely fine just in case the image is taken too much of the text and so on but i think it's looking just okay at the moment so let's continue with working on the rest of the stuff for the heading we're gonna have to center align everything so if we go back we have wrapper heading so let's copy this and do it in here and we can do text align center i've put too many things this setting actually needs to go outside we can possibly put it in here maybe let's just do it it needs to be wrapper and then wrapper heading so technically speaking we need to we could either wrap it in the wrapper that we created on top or we can just use this class name for now which is a little bit when actually you know what let's let's copy this and put it in here which could be could end up being a little bit annoying but we'll see so we have the heading here now and the heading is centerlined then we need to make sure that we have max width of 600 pixels in here as well so max width 600 pixels and you will see why and now we need to style the span and the button so for the span it will be fairly easy span we can do display block then we can do letter spacing 0.2 rem and then we can do a little bit of margin so they're not so close together so margin bottom 10 pixels just like this and it's looking so much better already and obviously the next bit that we need to do is we need to kind of like a style the button that we created and i'm going to do this under the layout elements as well just just around here so so button the first thing i'm going to do is make sure that the button is set to inland block the color is set to primary color then i need to add some padding of 10 pixels 16 pixels so 10 pixels top and bottom 16 pixels left and right make sure that the text inside the button is center aligned make sure that any text decoration on the button is set to none make sure that the font size is set to 1.2 rem so as you can see this has taken a little bit of this has taken effect but i forgot to add border so let's do that we need we need to add the border with cheese two pixels solid and i'll just use the primary color again and this is looking good obviously we can add background and so on and this is where you can do modifiers for example you could do sorry you could do class name of a button with a modifier of i don't know let's say white let's say for example white now i could potentially do here a background color of 123 which is white and now i can add this modifier to my button which is here like this button white and if i say that you will see that we now have a white button i actually need a button white which i didn't realize so let's actually leave it there obviously you can do button small button big and all those things but i'm not gonna be doing that now so the only thing that i want to ensure is that when we go on desktop i want the button to be ever so slightly bigger i mean the font so what i will do is i'm gonna add media query in here with include tablet portrait and for tablet portrait font size is going to be 1.6 when and if we do this you will see that the font size has gone up on the button and everything else okay so now we need to actually modify this section to work well on desktop let's have a look at how it looks it's not so bad actually we can now make this a little bit bigger position it better and this button looks ridiculously low so we might have to change this as well and this is probably because we have so much margin on this font here and i can change it from the wrapper so i can change it in here let me just do h1 margin 0 and have a look okay this is not very nice i need to figure out a number maybe like 20 pixels and this is almost there maybe like 26 pixels all right this works for me it's fine let's continue for now and let's now do the desktop version so for the desktop i'm in the hero section here let's add another media query right here and include tablet portrait and inside here i'm going to select the hero wrapper just like this because we're gonna have to change the size and maybe we might have to make the background size no that's fine all we need to do here is do the wrapper so for the wrapper let's do a height of 80 virtual height and make sure that we have aligned content set to center let's have a look okay this is actually looking very nice we do have a little bit of space here so we could this is actually centered in dead middle so even if i was to even if i was to change this to 88 let's say this will be still dead in the middle and this doesn't seem to be exactly like the original design but let's have a look yeah the font is a little bit bolder but these are things that we can work on later on i don't want to waste your time doing bold and changing fonts and so on now i consider the hero section done obviously we can add more multiple media queries but if we scale down hopefully it should kick off kick in and work like this which is brilliant this is fine so far the next section that we need to concentrate on is this section and trust me the the rest of the stuff shouldn't take too long all right let's focus on the second section which is the promo cards and this is how they look on mobile and let's get going and create them so hopefully these will be a little bit easier to do let's go to our html first of all and let's create the promo cards underneath this section here so let's create a new section and this section will have the class of standard promo this and inside this section we're obviously going to have two promo cards so what we can do is let's create one with the class of promo card and then we can use promo then we can add a modifier like promo dash card dash dash gray and maybe the first one will be the one where the this lady is displayed so and the second one will be the this guy so let's maybe add another modifier like promo dash card dash dash woman and then inside here we're gonna have a title and some body text so what we can do is grab this in an h2 and give the h to a class name of promo card and then underscore underscore heading and inside here of course we're gonna have to copy the text so many layers copy the text and then we need to do the paragraph underneath and I will give this class of promo dash card underscore underscore body just we saw a little bit more specific and let's copy some of this text as well copy paste and let's have a look quickly just like this and we can now copy this section below and obviously change this to you'll be men maybe and we can change this to shop men and I believe the difference is literally just men's new arrivals okay let's have a look at our page and yeah everything is working so far we have everything that we need um and let me show you how this is going to work now so let's create a new section we've created them these comments take some so much space let's create a new one in here uh let's just say this is all right actually let's copy this let's say this is all promo cards so first of all we're gonna have to start with the promo standard promo class element make sure this is displayed as grid and now that we have it displayed as grid so technically speaking we should be okay the way it looks now just like this we actually need to focus on the individual box now and to do this we can do let's say promo card we can do like block like this and if you remember we gave or promo cards a promo card class name so let's copy this and use it in here so what i want to do is add a little bit of padding everywhere on those cards and if you remember we created this variable which is mobile padding so let's add that padding we can use it mobile padding let's save it and as you can see it makes a little bit more padding breeding space for design also let's make sure that we have some margin at the bottom of each card which will be like 20 pixels we'll do for now and this is our block now we need to tile all elements and actually we need to style them in here so let me show you i don't know i'm doing this now the block element thing but just just to see how it works anyway we'll remove them later so obviously we created this as a heading and we created this as body so we can use our trick which is underscore underscore heading i'm actually not going to be touching the heading so let's remove that let's remove that and create just the body and for the body all i want to do is set max width to be set to 70 percent and this is so the text doesn't go right right to the end of the screen because i want to put the images in here so they are visible nicely and remember we've done a gray modifier this is because i want those cards to have a gray background color just like this one and first of all let me remove the background color of my page which we don't need like this okay all gray modifier will be added in here so this would be like a modifiers maybe i don't know why keeps doing that okay modifiers and we can do unprecent dash dash gray for this let's do it on one line background color and the background color will be set to f2f3f5 this should be like this should be a gray color and as you can see this makes the cards very easily modifiable i can do different colors and so on now let's create the image in here and then we'll create the the one for the man as well to do this these are modifiers as well and we can add them straight in here so dash dash woman and we're gonna have to do a background image and the background image will be set to url images i don't know if i need the slash but we'll see in a second so slash images female dot png is the one that i have uh let's say this okay it's not popping up let's remove this this isn't popping up um oh and this is because i've misspelled promo card with guard so cards cards excuse me for this and now we can remove that the female image should be appearing but i think it's probably far too big and that's why it's not appearing now so what we have to do is do background size to contain maybe okay this is perfect then we can do background repeat no repeat and obviously we need to position this image to the right here the two ways of doing this we can either do background dash position to the right and that works real nice actually it fits perfectly but if you want to do it just like i've done it here on the mobile design actually this card is a lot bigger but it doesn't matter smaller ones are looking cool as well if you want it to do it just like this you will have to position this image um to the right a little bit more and this is a little bit awkward to do so what we can do and i don't know whether this is a good way of doing it where it seems to work what we can do is make sure that the background position is set to is set to 100% so let's do calc set to 100% and we can do minus 90 but for some reason i think only 90 minus 90 like this will work let's have a look okay as you can see this is now quite fluid if i was to resize it the woman is standing there her face is like right in the middle which is awesome and it's just not moving and it's brilliant basically so maybe we can just do less than obviously and so on so this is a good way of doing it i would guess and yeah or just put position right so let's leave it as it is now quite like the way it is anyway and we need to copy this code and do exactly the same for the what is it called for the men men and we need to do mail and that's perfect and of course we can now position this allows us having two different classes allows us to position the image the way we want so i'll probably position it like almost there they'll probably position it just like this and i think this is awesome it's working quite well one thing that i noticed is that we didn't convert these to actual clickable elements and this is why having specific styles become very handy because now i can go back and instead of a div i can literally change this to a link obviously i need to give it href and some link and change this to a and if we save it as you can see it's working exactly the same but obviously we just need to reset the link underline and this is awesome so let's do the same for the other one this is a good example of using the BEM stuff save it and let's just remove the text declaration we can have on hover i guess but i don't want it the way it is at the moment so we could do here text declaration none and that would be gone and if we need to add the hover effect we actually already have the hover effect but if you need to add underline we can always do ampersand hover text declaration underline just to show you and that would underline it which is awesome let's continue now we need to do this for desktop of course if we go up on desktop these are full width which don't look too bad actually but we need to make them look like this design here to do this we are gonna add a quick media query to the promo card let's have a look because we displayed those cards as a grid that's very helpful now we can literally let's say let's include another media query now let's include the large one so include a large and inside here what i want to do is because we have grid we can set the grid to be into template columns and to take one each column to take one fraction each grid template columns 1fr 1fr save and let's have a look and as you can see they are now next to each other let's go back we need if you want to set the height i think the height for this is 450 we can actually use the grid auto row so this will make all rows automatically 450 pixels so i can do grid auto rows 450 pixels and last but not least let's make a little gap between them of 40 pixels let's have a look now so we have the gap between them which is awesome they are all 450 pixels in height and maybe we just need to kind of mess with the styles in here maybe position them in the middle and so on so in the design we actually have them like center line which is a little bit annoying but let's do it so let's copy this and inside here inside the large midi curry let's do promo card and we need to display the promo card as grid first of all so display grid so we can center line the content inside it and let's have a look at what's happened as you can see the content is now aligned then we need to mess with the headings a little bit so i'm percent underscore underscore heading and i percent underscore body let's change that maybe we can do it max width 300 pixels and let's make sure that the text align is set to center just like the design as you saw there was a lot of margin on the heading so i want to reset that we can do again and heading and then we can do margin 0 and last but not least maybe let's have a look yeah last but not least we can change the line height between those fonts is too close for some reason so let's change that as well we can do another one in here and body and the body will be set to line height 3 okay let's have a look that's looking much better everything is looking so cool the other thing that we can do is to make sure that the images are fit are fitting nicely in here we cut at the moment they're set to contain we could set them to be cover let's have a look at how that works so inside here i would probably do woman sorry woman and then i will just say genie position we have the image already there so i would say cover and i would probably do position it to the right let's see what is this and as you can see we are now seeing full the full image of the woman just like on the design here let's do the same for the female so let's do that men section in yeah that's it actually oh because these are because these are actually repeating what we can do is copy these hopefully put excuse me we could potentially copy this put it come in here and leave in here and that would save us a little bit of space aren't they still working which is great there is a little bit of gap in here that we can sort out but honestly not a big deal at the moment we can just add a little bit margin from the header or whatever let's have a look so on the hero section let's just add some margin maybe where is the hero we can do it in here margin bottom and let's have a look okay that's looking perfect so if we go down obviously because we've done a large one a large media query look at when they kick in it's quite late i would say so maybe we need to do the tablet one but just to show you it's working real well so far superb let's continue the next section of the design is this i'm going to call them shop sections so first of all let's go to or index and create a new section in here so we can have section with the class name of shop section and then let's close the section and then inside here we can have an h2 which will be our heading so let's give it class name of shop does section underscore underscore heading and this heading will be woman's bestsellers then let's add this paragraph at the bottom and let's add the paragraph a class name of shop section underscore underscore body and then we're gonna have probably another div with the class name of items for now that honestly don't do this that doesn't matter and this is where we're going to be adding the items when we do the actual shop with will come us so leave this blank for now we have this section we can literally copy this section and duplicate duplicate the next one and so on so let's see how this would work just like here the next one was called new arrivals and then the text i'm going to copy from here just like this like pasting here and maybe we can do break points just like this so they look ever so slightly better and the break point on this one is add soft so let's find soft and put a break point here save it and let's see how it looks okay everything is looking great let's make sure we style them super quickly hopefully this section will be super easy to do let's go let's jump to style.scss copy this as we have already started doing that shop section okay the shop section obviously we have a class of shop section we have the ampersand underscore heading and we have the ampersand underscore body and inside here all i want to do is text align them to the center boom job done i don't know why the the space excuse me the line height is so bad maybe i just need to do it globally let's see yeah let's do it globally for now see how it goes let's change to the body just like this obviously okay now that that's i think that's much better actually obviously it's messing up with my button a little bit for some reason but that's okay we can change that later now that we have those two sections we're gonna have the items obviously coming from WordPress which is fine we don't have to deal with this anymore we are done with this section and let's focus on the next one which is our newsletter hopefully this one be easy to do as well get going so first of all let's go to the bottom and i'll copy this probably should have done like like this so they're not big headings and then i'll do newsletter here so newsletter let's go to html underneath here we're gonna have a section and this section will have a class of newsletter and inside here we can have an h1 which will have this text here let's copy it up paste it and of course let's give this a class name of newsletter heading and then we need to create a form to create a form you can go to merchant sign up for account and copy the merchant form i've already created one so i'm just going to copy and paste it i'm gonna leave most of the stuff will be the only thing that i've done is i've created the form has a class of form and the input has a class of form email and do i have anything else and then i have the submit button as well which has a class a modifier of button i guess we can color this way oh and this has two classes of buttons so let's remove one just like this okay let's go back to the page see what we get this is looking fantastic now let's start this super quickly and go to style.cs and let's get started some newsletter shouldn't be too bad i want to see you the first thing that we need to do is tab by tab in newsletter and let's display the newsletter as a grid as well it makes things a lot easier then i want to align the items to the center center just like this and i don't think i've done anything but let's put a center like this and let's put a gap as well of 20 pixels i think that worked the gap worked now let's reset the heading which will be ampersand underscore heading and inside here we can do font size to three ram oh yeah this is looking much better then we can reset the margin on the heading zero like this and now for the desktop version let's let's add a media query now here so includes tablet portrait i'm going to go for and i'm going to do grid template columns and i'm going to do two fractions this time and then one fraction so i want this to be bigger to take two fractions off the screen and this to take one fraction of the screen but of course this will only happen when we go on the tablet so when we resize this we should see it like this so as you can see this is taking more space than the error and then it goes back to normal grid the only thing i would probably do for the heading as well is probably set the font style to be italic yeah that looks much better and let's style the form super quickly the form i will style separately inside here and what i will do is for the email i'm going to do and an email and this will take 100 percent this is basically the email box in here this will take 100 percent the margin button let's do 20 pixels like this so it pitches up the button a little bit more i hope you can see and let's do bottom bottom or one pixel pixel solid primary color and as you can see the input still has some default browser styles which we'll have to reset in a second but as we are here you can see the button is already working which is awesome but we could also make the button 100 percent let's have a look maybe we can do that maybe that'll be cool underscore underscore submit and then the width will be set to 100 percent don't think that's working oh i've misspelled submit that's why and the button is now 100 percent which is great and now let's make a global styles for or input we've got to be careful with this how we do it but let's go at the top where we reset all links what i'm thinking of doing is if it doesn't work we can always modify of course so let's do input in here and what i will do is i'll put input obviously there will sort of type some inputs and we're gonna have to work on this later on but let's go with resetting some of the styles so i would say let's start with border none obviously as you can see the border is now gone background image none that resets if with some browsers then background set to transparent we can do the webkit reset as well so resets the shadow then we can do the mouse as well prefix to do box shadow to none and of course box shadow none i think box shadow might be available pretty much everywhere now i don't know if we need to do the prefixes but it's better to do that anyway then we can do padding padding of 16 pixels and this is happening because this is adding the 16 pixels to left and right and top and bottom and that's why so 100 plus the 16 pixels to left and right and that's why is breaking the layout just like this and to fix this we'll have to do the box sizing border box and basically now the 16 is taken inside is considered with the size let's have a look how this works on desktop as you can see that doesn't look very good so we're gonna have to do a bit of work on that as well we could do max width on this here so let's find it quickly we need new set of heading and we could do max width 450 pixels or something like this 60 pixels uh and that kind of works with the designer half maybe a little bit more and the text needs to be the form weight needs to be changed is what i think let's change it to 500 pixels and let's change the form weight to 300 and let's have a look that form weight did not work maybe you can change to is 200 a bit i don't know what i selected so we're gonna have to stick with this i think and maybe maybe we'll need to put a little bit more of a line height in here of the heading line height three four frames i don't know okay this is looking a little bit better everything is centerline everything is looking cool when we scale down just like this it's working perfectly so now the next section that we need to do is the footer hopefully the footer wouldn't take too long as well it's fairly simple so let's start with the footer in here the footer we're gonna use the html5 element and instead of adding classes to this i'm gonna create another div with the class of footer and you will see why in a second so let's say class footer this will make it just like this then the reason i'm doing this is because we have this section of the footer but then we have kind of another section below so what i'm gonna do is have this section here and then i'm gonna have another section in here called div with the class name of copyright just like this and now we can start populating the containers with some data so first of all for the footer let's create the container so we're gonna have a div with the class name of footer-container this footer-container will have a heading of h3 and this heading will have a class name of footer-container underscore underscore heading then let's add some of the headings so first one is how can we help just like this we need to add ul which will be displayed from WordPress but let's mimic it as much as possible now so we can style it and we don't have to mess around with it later class footer body i would say for this one and inside here we obviously gonna have to create a few lists with a few links a href is equals like this and delivery okay so let's copy this a few times just like old shift and down arrow one two three five of thing the next one is returns then we have FAQ they're just random the links to be honest contact us so let's change the next one will be my count the next one will be find a store and the next one will be sidemap okay so let's go down and see what we get the headings looking good i could definitely deal with some spacing between every single element i can definitely use some spacing between them but we can also if you remember we added in styles.scss we added this wrapper class so if we go there we're probably gonna we can probably reuse this so just underneath the wrapper let's find where the section is okay this section here and let's add two more classes and the first one is going to be a footer because i want to have the same equal space and also we're gonna probably need one later on called content area which will be for other pages so let's add another content area and one thing that we didn't do is to change the padding on desktop so let's do a media screen here quickly include tablet portrait and all we have to do is set the padding to be the desktop padding that we set earlier and if we go back you will see that we have so much more padding now and in fact we probably can do with less padding in here now that was the hero so let's remove this let's have a look all right this is brilliant now we have padding everywhere it's looking so much clear it's like the original design we have the padding here as well and we can focus on the footer let's go back to the footer so we're gonna have to shrink this down and have a look first of all let's create the other sections as well so we need to copy this container a few times four times i believe so one two three four uh let's do that so as you can see this is looking fairly pretty but what i would suggest doing on mobile is probably hiding those sections and just making them so they are available to toggle so if i go back to the browser and look for a fed icons we need to share them down get this what we can do is open this in vgstd code copy it and add the chevron in here just like this it's a little bit ugly with svg but let's go with it for now we could do it if you have fontos and that would be easier i guess as you can see we have this chevron icon now which is brilliant and what i'm thinking is that we can hide these on mobile and only display them on desktop so everything is set up in here the last thing that we need to do of our html is to do the copyright section but first of all let's style this let's copy one of them comments and we go in here and put footer for the footer we're gonna display it footer display as grid let's make sure that we set a gap of 20 pixels just between them everywhere then for desktop we can straight away include the media query tablet portrait and in here i'm gonna do grid and i can do repeat four times one fr and this for desktop this should repeat them into columns and we can check this out now if you like yep everything is working into columns which is brilliant for the footer container let's do something like this so we can add container and inside here we're going to be styling some of the headings the body and the icons so this is the first time that we're going to use flexbox but let's go for it and we can do and present underscore underscore heading and we can display this one as flex and what i'm gonna do is just justify the content to be space between and this is because i want the arrow to be on the right side of the screen here and this will be kind of like this will act as a link when people tap on it this will appear and so on i'm obviously not going to be doing in this video tutorial because the recording is already over two and a half hours which is insane but it's just an example for you how to do it anyways and then the next thing that we need to do is remove the body so the body we can set display to none and we are left with the actual links or headings which is brilliant but before we do this let's actually start the body so we can see how it looks like so list let's remove the list style set to none sorry none then we need to change we need to reset any of the margin to zero and padding to be zero as well just like this it's looking nice and then we need to make sure that all the links displayed as block so they kind of like take the full width of the layout and they're easy to click and then we just need to add some padding on them so they're easy to select as well just like this all right this is this is okay for desktop but for mobile obviously it might be a little bit too extreme let's go like eight okay this is a little bit nicer i think let's open it now in full screen and of course now these are on the right side and we don't want that we actually want them to be on the left side so let's do that super quickly we're gonna have to add another media query inside the container here around here so include tablet portrait and we can do we can do underscore underscore sorry we can do and sign underscore underscore heading and then we can just justify the content to the start save this and as you can see the they are now aligned next to the text and they're not aligned perfectly so we could spend a little bit more time to align them a little bit we could align item center on this i guess so let's have a look align item center and as you can see they are aligned nicely with the buttons uh but that's good for mobile but we actually don't want them on desktop so we're gonna have to remove them as well so first of all let's remove this uh let's make sure that this is removed for mobile for desktop we now need to add them actually so we can have to add the body in here as well and body and this will be blocked just like this save it and let's have a look so as you can see they're displayed on desktop but if we go down to mobile they are now gone the the icons the center lines and everything is working perfectly well obviously this will need to be triggered with JavaScript and so on we are not going to be having the time to do this unfortunately because the tutorial is going for far too long the last thing i would like to do in here in those is to remove them icons and to do this because they are svg i can just simply go into uh heading and i can just do svg i guess and just do display no hopefully this will work for us yep that's fine uh go back to desktop they appear and we're good the last thing that we need to do in here is to create the uh footer first of all let's go to the feather icons again let's get facebook let's get twitter let's get youtube and so on and this would do for now let's open twitter facebook yeah let's open those three they would do for the example and let's go back to index and at the bottom here where copyright is let's finish this section super quickly what i will do for the copyright is i'm going to create another div with the class name of copyright underscore social and these will be the social icons and then we're going to have to wrap those social icons in links and basically this is where we're going to be adding the icons so first of all let's add something like youtube i just don't like how big the svgs are but i am zoomed in quite a lot as well so let's copy another one in here and this will be i don't know which one i copied i copied youtube so let's have facebook now facebook and let's copy one more and add just like this and last but not least we need or copyright text here not inside this div but just outside it so we're gonna have to create another div with the class name of copyright body and then we're gonna have to add the copyright symbol which i have no idea how to do with the html element of really in second 2020 and guard shop it's simple like this copyright symbol html and it's just copy i could have guessed this let's add it in here save and all it's left to do is to style the icons in this section so let's do that super quickly let's extend them go back to styles and inside i'm gonna create another section just below the footer copy this and i'm gonna cook this copyright let's put the copyright margin let's give it a little bit of margin top so it's not so close together let's make sure that we align the text to the center and then for the social icons let's do social obviously there is a link inside so we can start the link instead and we can just do padding 10 pixels each everywhere and for the body and body we can simply do margin top pixels and this and this should work for us but of course i think there's some underlines here that's why they are appearing like this and i don't know why the copyright is so close as well maybe i missed out something i've obviously missed out something so it's probably like this let's try that and of course for the body we can actually add margin for the bottom result we can do margin top to be 40 and bottom to be 40 and left and right to be zero or something like that so we have a little bit more space that concludes everything for this tutorial as you can see this moved a little bit when i changed the light height but overall everything is looking good when we add the items this will look nice as well in more press and everything else is looking quite nice and when i extend there as you can see those media queries kick on very late but you know how to change them by adding different media queries and so on so this concludes everything for this tutorial i hope you liked it don't forget to subscribe to my channel as always my name is Roddy and you're watching my channel Roddy the Brand smash the like button comment below if you have any questions and subscribe to my channel and i'll see you in the next video