How To Make a Fully Responsive Gym Landing Page Using HTML, CSS (SCSS), and JavaScript

what is going on everybody my name is radi and you're watching my channel already the brand if you're new here welcome to the channel i do website design and development videos today we're going to develop this website using html css and a little bit of javascript is going to be a very slow but detailed process of building the website so enjoy the process and take regular breaks if you find this video useful smash the like button if you like the channel consider subscribing for more videos just like this and now let's jump on the computer and get started today we're going to be building this layout here using html css and javascript we're gonna start from mobile and work our way up to tablet and desktop i've already exported all of the assets that we need for this project such as the logo the images and a few icons regarding the content i'm just going to be copying and pasting everything from here and let's get going with creating our project create a new folder i've already made one called zoo 365 tutorial and in here is where we're going to be creating all of our files and i'm going to open this with visual studio code by doing left shift right click and open powershare window here then if i type code dot this is just going to open the project folder in visual tv code but feel free to use whatever code editor you wish and if you want to open your project folder you just go to file and open folder that's pretty much it now let's create our project structure and then we'll go from there first of all let's create a styles folder so css this is where all of our styles are gonna go we need images folder for short img and we need a javascript folder for short js and last but not least inside here we need our index dot html file which is basically going to be our home page now inside the css we need to create another file called main dot scss as we'll be using scss today and this is going to be compared to a normal css file which i'll show you in a second but create a main.scss file in here then for the images i'm actually going to reveal this in the file explorer and i'm going to copy and paste some of the images that i've exported from adobe xd as you can see i've got the logo the menu a few images and an icon pretty cool now that we have the images let's go to the js folder and let's create a new file called script script.js and let's leave it as it is now because we're using scss we need to compile this and there are a couple of ways of doing it you can in visual studio code you can do it with an extension called lifestyles compiler so if you go here to extensions just search for lifesize compiler and click install but if you're using another code editor that doesn't have extensions like this you can actually go to the sas website and install their tooling and then you can do it through the command line the only bad thing about the command line is that you just can have an extra command line on your tabs but it's not a big deal but obviously it's nice not to have so many windows open i guess so that's why i like using this and the other tool that i'm going to use is the live server it's created by the same person with weekday this is basically going to reload the page for us every time we make a change it's a hot reload server a local development server which is pretty good i strongly recommend you that you install this it's a pretty nice tool there is an alternative for this if you're not using visual studio code i think it's called live reload or something like that it's free you can download it and it does the same job now that we got this out of the way the first thing that we need to do let's open the explorer and let me show you how we can first of all watch for any scss changes in visual studio code here at the bottom we have this watch scss if i click this watch what happens in here in the css folder this main.scss file is compiled into this.main.css file and we're going to be including this file inso or index.html as our browser doesn't really understand what scss is so that's why we need to compile it to a normal css file now let me show you how we can start the local development server if you right click on the index.html here you will see this open with live server and this should open the browser from here here it is it opened it on my second screen and as you can see my website is currently blank i'm going to toggle this to the right side of my screen like so and let me just make it a little bit smaller because we're starting with mobile this might be a good way to have a visual representation of what is going on and for the output here of the scss we can definitely close this and it will pop up every time we make we make a mistake which is a good thing so let me close this it will run in the background which is good and now we should be able to start building all html and css okay let's close scripts.js as we won't need it just yet and let's just focus on the index.html and main.scss i'm going to close the explorer now so we have a little bit more space and i've zoomed in quite a bit i believe just so you can see a little bit better but it's also not too much now to quickly create an html page we can use the emit abbreviation tool and all you have to do is start typing html and as you can see a few options are popping up and what i'm going to do is just choose html5 and we're done this is a very basic html5 and we can start working with it the first thing that i'm gonna do inside the head i'm gonna change the title to zoo 365 save this and if the page didn't reload the first time sometimes you have to reload it manually so let's refresh and as you can see the title has changed hopefully now every time i save this page and the scss file this will reload automatically so if i say this you can probably see that it's reloading automatically which is pretty cool there are a couple of things that we need to do now first of all we need to link or stylesheet and also we need to link our script let's do that so to link a stylesheet we can start typing link and then just choose link css and we need to do so we have link rel stylesheet href equals style.css but we need to remove this dot css as or file is called main.css so what i'm gonna do is go to default.css slash main dot css and this is the file that we want to bring we're gonna have to do something very similar for the script i'm gonna do script and then source we need to go to js and then script.js and we can also defer this script by doing differ which means that this script is going to load after or html has finished loading and you might sometimes see that script is also put here at the bottom and it's more or less the same thing i guess but i'm gonna do it here at the top the next thing that we might as well do is bring the font that we're going to be using and that is poppins so i'm going to go and open the browser go to google fonts and search for the font pop-ins or whatever you prefer and the the weight i'm going to be using today will be regular so i'm going to select this and i will be using the bolt which is 700 i definitely wouldn't select every single one just select the ones that you're gonna use and that might just make it a little bit faster i guess in terms of downloading so there are two ways of including the font the first one is with link in our html and the second one is by importing it into the style sheet both work quite well but i believe that this one this method is a little bit better so i'm going to copy this and paste it inside here like so let me just tidy this up a little bit and also i'm going to copy this font family pop-ins sans-serif and paste there inside the main.css but i'm just commenting for now just because i'm gonna need it a little bit later on so i'm actually going to close this now as we're done with the font now that we have set up a very basic html let's just quickly type something so let's do h1 hello and save now what i'm gonna do now is start writing some of the reset styles and as we go along i'll probably be adding more and i'll be adding different components that we can reuse and so on so first of all we need to make sure that all css is working and to do this you can simply just type something like body and then just change the background color to whatever you like so let's go with this blurry wood color as you can see this changed the background color for me which means that the css is working and if i go to the explorer and click on main.css you should see that this has been compiled obviously there is not much different at the moment but it has been compiled into the normal.main.css file which is pretty cool now before we start writing any reset styles i want to start with organizing my file and i quickly want to show you how you could do that potentially if you're working on a bigger project what you can do is put a comment here at the top and just maybe do css table of contents like so and then what you can do is let me close this by the way like this and what you can do is number your content so for example 1.0 could be variables and maybe 2.0 could be your reset and then what i would do is i would actually make a comment so inside here will be adding shortly we'll be adding all variables so what i would do is make a comment and just put 1.0 and then variables like so and close and now azo scss document gets a little bit bigger we can actually see we have this table of contents here we actually have this table of contents in here and i can just grab something and just find this straight away i mean it makes it just a little bit easy not a big deal i probably won't use it today just to save time but here it is if you want to use it and i'm definitely going to be commenting some of my sections of course just to make things a little bit easier to understand but now let's start writing some of our variables that that we're going to be reusing throughout the layout now i'm going to be using the normal css variables instead of using the scss variables and the reason for this is because we can actually manipulate them so let me show you what i mean if i start creating a few variables let's start with root this is how you create a few variables by the way let's call our first color primary color and let's give it a color of black and let's create a secondary color and let's give it a color of white so three f's also we can bring our fonts so let's do font family and then we can do actually this is what i wanted to do copy this and we're done and i don't need this anymore so we have those three variables in here but the way you would create a variable inside scss would be for example if you want to create a primary care variable you do your dollar sign primary color and then you do equals and then the color like so so let me show you the difference oops it's uh two dots let me save and let me show you the difference if i open this and inspect it you will see that inside here the inside the styles you will see the root colors so we can always manipulate them with javascript if you wish to maybe you want to make a light mode and dark mode so that would be very easy to manipulate but you can't really see the scss variable because that has been processed and we can't really change anymore so this is the difference pretty much i used to use the scss variables because they are quite helpful as well so let me put this on the side and close this and let's see how we can actually use those variables so now we can potentially start writing some of our reset styles and to do this i'm going to grab this command paste in here changes it to and i'm going to put reset excel and save now you can actually download reset styles pre-made recess styles online and just start using them but i'm just gonna make my own ones we're not gonna cover absolutely everything but i'm just gonna cover a few basic ones and what reset styles are supposed to do is basically give us this consistency throughout all browsers because different browsers used to render things differently and it was kind of annoying so that's why we use reset styles saying this most of the good browsers nowadays use chromium and they will behave fairly similar which is a really good thing but saying this we still need to reset a couple of things for example if we open the page super quickly and inspect it you will see that the body tag has a random margin of 8 which we definitely don't want and maybe if we inspect the the h1 you will see that the h1 has random margins to the top and the bottom as default so we'll potentially reset them as well because i don't want them to look this way so let me close this put it to the side and let's start so what i'm going to start doing now is changing a few things on the html and i'll explain as i go along so font size i'm gonna set to 62.5 percent and the reason i'm doing this is because i want to be using ms and rams now we used to use pixels and again when i use in adobe xd i'm working with pixels what this does for me is i can easily convert pixels into m's or ramps so let me let me explain this if i had to reset the body quantize for some reason i would normally go for font size and as a default usually you have it set to 16 i believe but what i would have to do is put 18 pixels and leave it as it is now what i can do with rams because of them this 62.5 what i can do i know that 1.8 ram is actually equals 1.8 pixels so that's why we're pretty much doing this it's very easy to convert from pixels to rams but you can read this in a little bit more detail online if you wish to it's a pretty good trick the next thing that i want to reset on the html is the line height and this is more of a preference i believe so i'm going to put this as one and another thing that i want to reset is the scroll behavior scroll behavior will allow us to if you click on an anchor link to scroll down the website or you will scroll smoothly now it can be a little bit annoying but i will have an anchor on this website so it's gonna just make it look a little bit better when we click on it and now we can actually focus on the body here and reset some of the body styles as i showed you earlier we definitely need to reset the margin so i'm gonna do is margin set to zero i'm gonna set the background color to all primary color here which we set and to do this we can use the var keyword and then dash dash primary color like so and if we save you'll see that it changes so the next thing that i want to do is set the color of the text to be white as default so what i'm going to do is bring the other variable and put it to the second color just like this we have white and i definitely want to reset the font family so let's do that quickly from family and this will be equals the family as we set it up up here that should now change if we zoom in a little bit and if i save you'll see that these changes to pop-ins which is pretty cool and the next thing that i want to change is the phone weight just in case to be honest so i'm gonna do let's do 400 as only have 400 and 700 i believe 400 and 700 and i want to make sure that the font size is set to 1.6 ram usually it is 1.6 pixels as the foot but just in case i guess i can do that as well and let me zoom out and now what i'm thinking is let's start by building a few things and i'm definitely going to be adding some more reset styles as we build some of the elements and we'll just work our way up so if we go back to the html i'm going to start by adding a skip to content link and this is basically good for accessibility just because i mean when i start making it you will see what i mean but just because if you start tabbing on the website you would probably have to go through the logo this item this item this item this item and this item and it will take a lot of tabs to go to the main content and this is why i'm gonna be adding this skip to main content and this is why i'll be adding this skip to main content and it's pretty easy to do so what i'm gonna have to do is create a link with the class name of whatever we give it so let's do skip to content and let's give it an href of maybe main and i will have to remember to put this down to our main content later on and of course we need to close the link and inside the link i'm just going to put skip to content like so and obviously i don't want this to be visible on the page so what i'm going to do is a little bit of css trickery so this only appears when people start when they enter the website and they tap on the keyboard so let's have a look at how we can do that i will be jumping in and out of the html and css for now that's the way it is things will never be the same but uh yeah let's go so pass skip to content and for this we need to position it as absolute i'm gonna do top as 20 pixels let's do padding or six just to make it look a little bit better background color can be black so i'm going to use the variable color of primary color then border i'm going to set to one pixel solid and just some gray color let's also change the color so color of white and i'm going to bring the variable secondary color and then let's do box sizing maybe for the box this means that the padding will be added to the width instead of being it's let's say 100 pixels plus six on left right top and bottom so this is what box sizing does and just in case i'm gonna give it a set index of two or three maybe ten i mean it has to be a big set english just in case i guess but here it is or skip to content button obviously we zoomed in quite a lot but here is how it looks like we also want to move this button on somewhere outside or window on top of it just because if it's on the left side and if you open it on a really big screen you might end up seeing it so that's why it's safe to start from the top so what i'm gonna do is transform and then we're gonna do translate x and then just put minus hundred percent percent simple like that and then let's do transition to animate this our transition will be 0.3 seconds and this should do the job so as you can see it's now gone and we need to bring it back when we focus on it when we hit tap so to do this because we're using scss we can actually do it inside here we can actually do ampersand and then focus and then we can start writing all styles here and the focus will be basically transform and then we need to do transform translate x and then we just need to bring it back which could be 14 and hopefully if we go back to the website and press enter and then press tab you will see it coming up and it's actually y is not x is the y axis sorry so that should now work minus y and then hopefully that should be zero okay maybe that needs to be a little bit more okay that should do the job so if i do tab now as you can see it appears and then if i hit enter you will see that it's actually hitting this main anchor which is a good thing so let me i've been demonstrating one more time so i'm going to remove this anchor let me open the window a little bit bigger so i've gone to the website i press enter i do tap on the keyboard it appears and if you hit enter it will go to this anchor which we'll create later on and by the way it would be nice if this was kind of like in the middle so the trick to do that could be that we do it the old school way where we just go left 50 and then do we need to we probably need to like calculate how big the button is so it's kind of in the middle i'm gonna guess it so margin left minus 50 pixels this is a pure guess but uh that's how you do it if you want to center i guess so minus half of the size i mean i do have a ruler here so i could just grab it oh just do and see where it is 134 divided by 2 is 66 i believe so we can definitely remove this and go back so i can do 66 i wasn't too off i wasn't too far off and yeah here we go it's in the middle we can press enter and this will scroll to the bottom okay we are pretty much done with this but there is one more thing that we need to but there is one more thing that i need to mention and this is the print so we definitely don't want this to appear on print so what you can do is outside here we can do at media print and then we can do skip the content and then display none like so and hopefully this will not display on print not too bad let's have a look at the next step so the next step would be to actually recreate this hero section here which has the logo the navigation uh we have a heading a little bit of a paragraph in here a button and so on and one thing that i need to mention is that there is a difference between the desktop version here that we have the menu showing like this and on the mobile and tablet we have it as a hamburger menu so we need to take this into a into consideration and do it properly so let me show you how we can do that first of all let's focus on creating the element so i'm gonna be writing html5 of course and everybody should be and i'm gonna try to make everything as usable and i guess as accessible as possible in very short amount of time so let's start by writing a header and what i'm going to do is i'm going to be using the bem methodology which means that we pretty much give every single container a class name so this one is going to be called header and the reason for this is that if we decide to actually change this for some reason we probably won't change this one particularly but if we decide to change this for some reason and change it to a diff later on for whatever reason then we still have a class and the styles apply to this class and this is why it's kind of like a good idea to do this so let's go back and put this header because we want to have html5 of course and what i'm going to do is i'm going to create a container which means that at some point uh when we extend the browser at some point we're gonna have kind of like a max width because i don't want it to be like full full screen for everybody because some people have like 4k screens and it would just look ridiculous so that's why i'm gonna do a container with the content but the images actually the images will be full width i guess so that's something to test i guess but anyways let's create a div with the class of container and to do this there is a shortcut you can just put dot for class and just do container and press enter and this will create a different so now that we have this container div we need to create our logo and i'm gonna wrap the logo into an h1 tag just like so give it a class name of um if you use bem we should be giving it a class name of header logo so we might as well do that header underscore underscore logo and then inside here we're going to bring a little bit of text which i'll show you in a second why but we could do span and let's do zoom 365 or something like this [Music] we could do z365 for now then we can create a link a href and this link we know that is going to be going to the homepage so i can just do slash and then close this link and inside here we can do an image and then do source image logo dot svg and we can do alt zoom 365 and then we could potentially also add the loading lazy but i don't think that this is super necessarily here and i think in that we might get like a little jump of the logo because the loading lazy so i'm gonna remove this and maybe introduce this a little bit later on for the link we can potentially we can potentially give it an area area label of a zoo 365 logo or something like this and let me save this and as you can see now we have an h1 which has z365 as text and here is a logo in slightly different font now the issue is that i don't really want to see this on my page but at the same time i don't really want to leave my header without the title just because the html outliner won't like it as you can see we have z365 but if i was to remove the text from here save it and reload there is nothing there is nothing so that's why i was adding this text here um just to say this won't result in errors but for screen readers i assume that it could be quite helpful so that's pretty much the reason let me go back and to solve this problem there is a really cool trick that i took from bootstrap so let's give this span a class name name of screen reader sr only so what we can do with this class name and go back to the main that says and inside here we can do screen only and as i said i've taken this for bootstrap it's a i think it's a pretty cool way of doing it but if you if you know a better way of doing it let me know and we just need to basically hide this so what i'm going to do it well the issue is that if you display this with if we put display none it's an easy job but we kind of do want this text to be displayed on screen readers and so on so that's why we're going to be doing this trick so the first thing that we want to do is to position this absolute and we want to put the width as one pixel height as one pixel then we want the padding to be zero you can probably tell what's going on now the margin needs to be -1 pixel we need overflow to be hidden what else clip we need to be wrecked just like my bank account like so and then and then white space needs to be no wrap and border needs to be to be zero like so and as you can see now the text is gone which is a good thing um what we're noticing here though is the behavior of the h1 that has a lot of margin to the top and the bottom and we're gonna solve this issue in a second i just need to zoom out this is how it was gonna look by the way on mobile it's not that big okay now that we've sold this problem we also need to add a couple of more things so we have the h1 and now we need to wrap all menus what i'm going to do is wrap all of our menus my mobile menu and the desktop menu in a single div and let's call this one dot header underscore underscore menu and then inside here is where we're gonna be adding the mobile menu so we can maybe do a quick comment mobile our navigation start we can duplicate this by doing alt shift down and this could be end and then inside here we can add a button now the reason we add in a button instead of a div is you probably can guess it that divs are not really clickable and they're bad for usability you can use this as a containers and whatnot and i know that you can do all sorts of stuff with javascript but they're not so accessibility friendly and that's why i would either use a link or a button whenever you can and now for this button let's give it a class name button which we'll have to style later on for short you could call it btn if you wish but i'm gonna keep a button just so it's easy to understand for now and also i'm gonna give this button an id of of mobile menu bpm maybe and or you can call it toggle whatever and we also want to make this as accessible as possible i keep talking about accessibility today but we do need to make sure that we do as much as we can so what we're going to do is introduce a few more area labels attributes so let me bring them up the first one will be area label and this will be toggle menu or you can put it as menu i guess and then we need to tell the screen readers whether this whether all menu is expanded or not so what i'm going to do is put area expand it and put this as force because one wheel mobile the menu will be collapsed as default and that's why it's false and then we need to put area dash controls and then we need to put the id of or menu which doesn't exist yet but i'm gonna call it what i'm gonna call it mobile menu keep it simple this is it and for the button inside i'm just gonna go with an image uh i know that i can do this with i can potentially start with with css i've done it i usually do it that way but just to save time let's just add a very simple image and this will be source equals image menu dot svg don't forget to give them all tags so or maybe this would be menu and could potentially give it a loading of lazy but i don't want it to blink i mean it's not to see too bad but i don't want it to blink in here it's only a small svg so i'm going to leave it and one thing that i just noticed is that i didn't give a width when i said blink one thing that i didn't know i noticed is that i didn't put a width and a height for the logo unfortunately if i go to uh logo svg oh 43 by 22. okay so 43 but so i was going to say unfortunately we can't really tell how big they are unless they're new when you click on an image you can kind of tell the size of the image and the megabyte this is ridiculously big by the way but uh yeah that that definitely needs to be optimized it's too big let me close this and the other one will be image menu so image menu svg this is 16 by 11 so let's do width of 16 and height by 11 and to be completely honest this just helps sometimes with kind of like uh telling the browser of how big the image is so we don't get this annoying jump sometimes i mean it's one of them things that you might not notice or some it does it doesn't even happen sometimes uh but uh if you do see that problem then you just give your images a width and a height and honestly this is not gonna affect any of the responsive styling at all i know that it looks weird and it sounds weird but it won't affect any of your styling at all as long as you give your image a width of whatever and a height of auto in your css you should be absolutely fine and now let me first of all finish the the desktop menu and i'm gonna talk about the this thing here and in fact we might as well style it to make it work so okay let's add the desktop menu super quickly so i'm going to copy this just to back so you know and this would be desktop navigation start oops desktop navigation and and then inside here is where we're going to be adding the navigation and i'm going to use html5 so what we can do is nav glass or desktop menu maybe something like this and then inside here we're gonna do we can do the same thing as above actually potentially so we can give this at every section would have to have kind of like a would have to have a heading otherwise in the outliner will appear as empty as i said previously so untitled nav i mean it's not a big deal and if it's annoying but let's do anyway let's do so let's do h1 and with the class of screen reader dash only and then we can do main main navigation and inside here is where we're going to be adding all navigation with an ordered list so to do this we're going to do ul and then we're going to have to stack a few lists the reason we are doing it with an ordered list is because again this is great for accessibility and you can tap through each element if you're using like a screen reader so what i'm gonna do is inside the list actually we can put this on one line inside the list we're gonna have a link href so i'm gonna keep this empty with hashtag just so it's not a broken link in fact we can definitely give all links a class name so it's a little bit long but maybe we can do a class name or desktop menu and then we can do underscore underscore link this is one of the problems with bam the classes became so long it's a little bit annoying but at the same time it's really nice as well because of the specificity that it's creating so inside here we can do home and now we can definitely duplicate this a couple of times by holding alt shift and down one two three four i think so home about we need shop we need gallery and we need contact like so then another thing that you might want to do is maybe add a class of active but i'm not going to be fully making this so for example if you are on the about page you might want to like kind of like highlight this so what i would do is create an active class so the moment we're on the homepage so what i'm gonna do is add a class of active and then we'll style it later on so at the moment we don't i mean let me tidy this up at the moment we don't actually need the desktop navigation just yet so what i'm going to do is on the nav i'm just going to put hidden and then come back to it a little bit later now let's actually concentrate on the mobile navigation as this is what we're going to be building first and annoyingly i might have to just put it outside the header yeah let's put it outside the header because i wanted to kind of like fly out a little bit i haven't designed it but i'm just gonna design it on the fly and just make it super simple in fact we're gonna do something very similar to this so what i could do is copy all of this let's copy the whole bit paste in here and let's do mobile navigation start mobile navigation end and we can do mobile instead and just replace every single thing oops by doing i totally forgot the shortcut now oh here it is it's alt shift ctrl and then you use url and then you do mobile i'm not gonna do the active or mobile just remove it main navigation i mean it kind of is main navigation as well so i'm gonna leave that on what else do we need we need one more thing in here and we probably need a close button somewhere because our menu is going to fly out and we need to be able to close it i'm not sure whether to do this with a link or a button let's try it with a button i know it's going to be weird but i think i'm going to do a little bit so button and this needs to be tested for usability at some point as well so what i'm going to do button with the class name of mobile nav something like this something that is very explanatory i don't want to make any shortcuts on this it's just nice to read and you understand what it is straight away so that's all good if i save this we still have the heading here so i'm going to remove that and as you can see we get the button here which is tiny tiny and we get the links which are pretty cool so one thing that i said earlier is this area control that needs to be equals the id of this mobile menu here so i'm going to copy this and give it an id of mobile menu and the reason for this is that we need to be able to know that when we click but this button we need to change this from area expanded to true and we need to tell the browser which area we're expanding and this is how we're kind of linking it with the id here so that's why we have it and we're gonna have to manipulate this with javascript which will be a fairly straightforward process to do so don't worry too much but um we've come a long way in the header so i think that we should start styling it one by one so let's go back to styles let's create some comments i'm just going to copy and paste header section with a lot of equal signs and now we can start styling our header if you remember we used the header class so i can do this and if you're familiar and with flexbox we can style this super quickly we can literally split this div into two because we technically have two divs inside which is the h1 and this header menu so we can split this section sorry the container section into two and push this one to the left and this one to the right so let me show you how we might be able to do that because everything is wrapped in a container which is a little bit annoying we're gonna have to do dock container and then we're gonna have to do display flex and then we can do justify content and space between and as you can see now all logo is here and or menu is here on the right side if i actually inspect this super quickly uh you will see that it's a little bit broken yeah you will see that i mean it is a little bit broken at the moment but uh we will see that uh the button is on the right side and the this is on the left side and we're gonna fix whatever is broken in a second anyway so what i'm gonna do let's go back open this first of all i want to position the header to be absolute at the top so i want the header to be always at the top of everything so we're gonna do position as absolute and then this could be top of zero right or zero [Music] index of one padding top of something like 20 pixels just to give it a little push and then because we have our logo as an h1 each ones usually have margins as the full so what i can do is the header actually because we don't know with underscores because we can even do it this way and let's go on the score low and then we can do margin 0 because we don't have much more here i'm going to put it on to a one line so if you go back to the browser you will see that we have no space and i think i think that this white thing is actually the button i could have hidden it for a sec uh so where was it the menu hidden so it doesn't get in the way but as you can see we have z365 here and we have the toggle menu on the right side here which is a good thing but i also want to create this container that i was talking about where it keeps everything kind of like in the middle so this is going to be a global class that i can maybe do in fact let's just do it around here let's see it's a problem and that would be dot container and then we can do max width of one six to one pixels and then i'm gonna do margin of zero auto i'm gonna do a padding of zero but the pixels so what that happens is every time we have a container the max weight of a is one one six two one pixels the margin is set to zero on the left and right which kind of pushes it in the middle sorry the the margin is set zero on top and bottom and then on the left and the right side is set to auto which kind of like pushes the whole container in the middle of the page and then we just have a little bit of padding of 20 pixels to the left and the right which kind of like fixes stuff for mobile let me show you we have the container in the middle and if we were to resize this for mobile like so we have this nice little gap between because we don't want our content to be right next to the edge just looks unprofessional now the next thing that i'm noticing is that we need to kind of like align everything in the middle and flex makes this super easy so we can go back to the container and we can do align items of center and this should fix the issue as you can see it's all nicely aligned now one thing that i want to do in here is give this button a little bit of padding just so it's easy to press so i'm gonna have to find what i called it unfortunately so i called it just give it a class but okay i'm just going to use this id of mobile menu btn i'm going to do a hashtag mobile button bbn and then inside here let's just give it a padding of 10 pixels all around so it's just a little bit easier to press and hopefully yeah that made it much bigger and of course at some point we're going to be resetting this button and making it look a little more professional just before we finish with this we might as well just hide it on desktop so what i'm going to do is when we go towards tablet and desktop obviously i want this to be hidden um to do this we can just put a media career here so i'm gonna do at media and then screen and a screen and and then we're gonna do min with of 600 pixels and then inside here we're basically saying when the width goes above 600 pixels i want you to hide the mobile menu which is this one here so i'm going to copy the id and just say display now just like so and we need to do the reverse thing for the for the desktop menu so we could potentially do this now and style it a little bit better so for the audi desktop menu here it is it's hidden in mind let's remove this and let me see if it's showing up first of all yep it's showing up let's style this super quickly i'm not gonna do anything super fancy i'm just gonna try to copy the design as much as i can so we have it as desktop dash menu not a problem and then we have desktop dash menu link for every single link easy peasy so let's do desktop menu i definitely need to comment this just like so maybe like this i don't know and then we can start by doing display no because excuse me display none because because originally we are starting from mobile and we don't want the desktop menu to be displayed but when we hit this threshold of minimum width 600 pixels we want to switch to that so what i'm going to actually do is i'm going to copy this media query here and just swap things around so in fact we don't need any of this and we just need to change display none to display uh block potentially we'll see but because we are on the desktop menu we don't have to specify the name again so hopefully this should work we go back and let's go down and as you can see we get the mobile menu let's go up and as you can see we get the desktop menu so let me quickly style this it shouldn't take too long what i'm going to do is i'm just going to be a little bit lazy on this and usually you probably want to give your maybe your class or something i mean it would be nice but let's be super lazy and do it of ul and then let's reset the url the forwards of pattern zero margin oops margin zero then we can do list style type of none to remove the bullet points we can display this as flex because we want every single item to be in one line just like those equal signs i guess and then gap is the cap property which kind of gives a gap within every single link on the inside it doesn't do on the outside which is great as well and now we just need to style some of the links and to do this we can do ampersand and let's go underscore link and then let's just give it give them a little bit of padding of 6 top and bottom 10 left and right just so they're easier to press and then we can do text decoration of no i don't want them to be underlined that's all we might as well just make all out a little bit better and do a hover effect so what i'm going to do i mean interactions might as well make the interaction better and do a hover effect so text decoration underline like so let's start this up save save let's go back let me remove this as you can see we have the items in here they're all looking good when we go down he switches and so on pretty cool of course we're gonna have to change the links uh to white and so on but i'm gonna do this as a global global thing so we can definitely do that now if wish so let's go maybe around here we can do all links color of and then secondary killer does that look good yeah and there is a lot of um there is a lot more properties that we can do for the link like uh focus hovers um what else there is there is quite a few but i'm just going to keep it to the minimum here and just change the color for now and as you can see this is looking fairly nice already and when we go down and so on i definitely need to reset the button here it does look a little bit bad um but i've already got in mind how to do this so okay let me style the button a little bit and to be completely honest i already know how i want my default styles for the button to be so once i do this this is going to help me with the other buttons and in fact we might as well just complete the whole button now so what i'm going to do is somewhere around here i'm going to copy this and it's something like component and you can have many reasonable components of course but i'm going to keep it super simple we gave or button a class name or button so what i'm going to do is put button and then start stomach so i want it to be i want every single button to be positioned relative and the reason for this is that sometimes sometimes i add icons and they can be positioned absolutely inside them but it's not required so definitely i want to have it display as in life flex because oops in my flex because it makes things easy when i'm aligning stuff and then i can just do align items to be positioned as center i can reset the font size to be 1.4 rams which is equals 1.4 pixels in this case font weight i want to reset to be for 400 line height i want to reset to 1.5 i want to have text decoration of none obviously the buttons you could create a modifier where you have a button that looks like a link i guess with an underline but um that's what i want at the moment so letter spacing i'm going to put one pixel and the reason this is just i believe that it makes it look a little bit cooler text align is gonna be center and then background we need to reset to transparent because i don't want any colors to my button to my default button because usually they have some sort of like a weird color to them like a gray color so i want that removed and i want everything to be vertically aligned to the middle and the user select needs to be set to none and the border of the button needs to be one pixel solid transparent which basically resets the border to a transparent one and then i'm just going to give it a little bit of padding 1 6 ram and i've already calculated this and messed around with it but of course i usually just spend some time looking at the design and measuring step so if i go to my this mobile button we have the class of button there which is a good thing and as you can see the background is now gone and we have the mobile toggle menu here which is pretty cool it does look a little bit small but we can always resize it if we need to it's looking cool i'll give it a height of 16 or 11 that's so good the next bit would be to actually pop out the mobile menu and make it look nice super quickly as i said earlier i haven't actually designed one but i'm gonna do it on the fly now just do something super basic i guess and this is called mobile menu so let's grab that i remove the hidden bit so it pops out so mobile mobile menu and what are we gonna do it maybe around here and then we can grab the desktop menu comment paste in here and do our menu so mobile menu i can potentially bring this to the right side of the screen when we start form it's okay when we start from about that it's not so good when we stand for desktop so that's why i keep having to switch before moba we can now focus on this here and first of all we do need to hide it at some point so i'm gonna come back to this first of all i wanna make sure that this looks good so what i'm gonna do is i'm gonna position this as fixed and then i'm gonna do top zero right zero bottom zero and left zero just like so so it takes the full the full height and the weight of the available space in here which is good that index we might have to bring this to you okay maybe not 100 but something big we don't want anything over this menu and now we can actually focus on the ul inside which is the unknown list and for this i could have give it a class name again but i didn't pure laziness and let's go for padding of zero to reset the margin of zero list style type is gonna be zero then i want the background the background color to be the primary color so with our primary color like so then i want to change the position to be absolute and here what i want to do is position it from the top 0 right 0 bottom bottom 0 but i want the left to be around 20 20 i want to say percent of the view weight so it's going to be 20 from the side of here from the so 20 kind of like 20 from the view width and the reason for this is because i'm gonna do it like modern menus where the menu pops up from here and then the left side is kind of like oh close button it's a shame that everything else is black underneath but what i'm gonna do is let me quickly change the body color to something else just so we can see a little better anything anything to give it a little bit of contrast and i'll come back to this to change it obviously that's how this is going to work so we've reset the list list style type needs to be set to none not zero and we're good then we definitely need to style the link so what i'm going to do is ampersand and it's going to scroll link and then for the link we're going to display them as block uh so they're clickable all the way up all the way from the left side to the right side that's what's gonna do display block and then we can give it a little bit of padding so they're easier to press of 16 pixels and then 14 pixels like so and definitely could have used ramps in here so that could have been 1.6 ram and then that could have been would it be 4.0 room yeah i think so so that's all looking good already text decoration i want to set to none so we remove the underlines and the text transform i want to set to uppercase just so it looks a little bit more modern i guess and that's not too bad now we have one more thing in here and this is the actual button that we have in here i wonder whether i can give this button here a class of button let's have a look okay it disappears which is a good thing and now what i'm going to do is style this button to be underneath here and this will be kind of like our close button and we'll make it work with javascript so what do they call this mobile nut flows okay sounds good to me so i'm gonna do here mobile now close and i'm gonna do position as absolute top needs to be set to zero right needs to be set to zero uh bottom needs to be set to zero left direct zero and then one cool thing that i want to do is make everything uh underneath the button kind of blurry so when we have a image later on with the hero image it's gonna look like blurry and it's gonna look super nice um we can definitely do this with css by doing a back drop and then filter and then we can do blur and then we can set the how much we want to blur so as you can see the logo is now blurred and i know that it doesn't look as good just yet but trust me on this is gonna look super cool as when we do and one more thing that i want to do is i want to set the background color to red just to test this out and this is looking cool i wonder what this is here this line let me open this for it and just check out this line here we have the button this is something to do with uh [Music] okay um i think i need to give this button a width of hundred percent let's have a look what are these fix oh yeah it might be that yeah okay now button is good there is no problems in here and now we can close this and just like that remove the background of course and hopefully yeah that works out the only reason i went for a button is that i was thinking that for usability purposes it might be a little bit better but it might be even worth just having the x button in here and one more thing that i notice is that all buttons are far too close to the top so let's fix this super quickly and i mean let's just give it a putting top of four ram whatever okay that would do the job he's looking good they can definitely do with a little bit a little bit of a hover so on each link you can do and hover and then background color or i don't want it to be obviously don't want it to be the same color just choose something quickly okay that works for me super cool now we need to hide it because the default position is hidden so what i'm gonna do is i'm gonna do a couple of things first of all i'm gonna put the visibility of hidden and i mean we could display none as well but the animation probably won't work okay let's do visibility hidden and let's do transform and then let's just do translate x which should be left and right this time so let's do 620 pixels something like this so it's completely gone now even if i get this yeah it's completely gone now which is a good thing and now let's do a transition and the transition will be transformed of 0.25 seconds okay this is all good and now what i want to achieve is when we're pressing this the menu to pop out and to do this i am going to create an extra class called is active so mobile menu we can definitely just add it here i guess we can do and dot is active and then we can do visibility visible yeah we need transform that's fine in fact let's just copy this transform and that needs to be set to zero now so just like reset there we don't have to specify pixels anymore i don't think and also do we need transform again adapt okay let's test it out so if i add this class to the mobile menu here plus is active we get this and i'm not sure whether the animation works one way to test it out would be to do this and then where is it so it's active if i remove it now hopefully we'll see it slide out yep it's lit yeah that worked and then if i it slides in so that's pretty cool let me reset the background color festival and then we'll concentrate on the rest the background color was to the body so i don't forget where is it not so bad the original state of this is obviously hidden so here it is we have all menu when we go up everything is working as well and so on so we're gonna have to write a little bit of javascript to make this work but to be completely honest it should be fairly straightforward so let's jump back to the code editor and i'm gonna open the explorer and i'm going to open js and by double clicking let's minimize everything else that we don't need and let's start writing our script there are a few things that we need to know now so in you know index in our index.html we need to know the class name of this or the id so i could potentially use this mobile menu class or you can use the id as well i can show you actually i can show you a bit of both so this is mobile menu that needs to show and hide then we need the button itself which is the mobile menu button and that's very that's self-explanatory it's an id of mobile menu button and we also need the close button which was oh it's here so that has a class let's just use the class of mobile nav close all right that's fairly self-explanatory as well so we have classes and okay so this is just going to be commented by the way just for me to know what i'm doing first of all we need to be able to select this button so we can bind a an event listening to it every time we click on it we want something to happen to do this we can do a cons we can give it a name of mobile menu btn just to say consistent and this will be equals to the element on the page to get the element on the page we need to do document dot get sorry query selector and then we inside here we can actually pass an id or a class name but in this case we have an id so i'm gonna do an id of mobile menu btn close this we need to copy this line and do the same thing for this here so this would be a mobile menu maybe and then we can use the class name of mobile menu i could have kept it consistent but it doesn't matter and by the way this is a class name don't get this wrong it is a class name and then the last thing that we need to do is the close button which we can duplicate another line and let's just do mobile menu close ospn yeah that'll do and then we need to copy the class name paste it inside here and we should be good to go all right now let's bind an event listener to our mobile button and see whether this works to do this we simply grab the name and then we do add event listener and then inside here we can do a click event listener so every time we click we want something to happen so we do a function and then open close and then inside this function we can do actually this could be an arrow function as well i don't think that it's going to make any difference to be completely honest we can just do this and there's an arrow function and now inside here first of all we need to make sure that we set the the is active class here to this to this mobile menu so it pops up and to do this mobile menu so we can do we can grab the mobile menu selector and then we can do class list dot add which means we add in a class here and then the class that we want to add is active just like so and if we save this and go to the browser and we press on the button here you'll see that the menu is flying i know it's black and black at the moment but the menu is flying and it's working you can also test stuff with console log and put some and put some emojis of course and every time we go in the browser and press the button we'll get that emoji as well which is pretty cool and now that we have this another thing that we need to do is every time the button goes to active we also want to change this area expanded to be true i'm gonna actually grab this name and what i'm gonna do is on the mobile menu button i'm gonna do dot set attribute and the attribute that i want to set is area expanded and we just want to change it to true i believe so that's all good and if we open the browser super quickly go to mobile view go to elements and look for the button here first of all and look at the area expanded which is right here oops error expanded is currently equals to force so now if we click it should hopefully go to true as you can see i expanded true which is a good thing and now we need to just do reverse but we need to do the reverse thing when we click this invisible button here it will be visible when we add content so the invisible button was called mobile close menu so i'm going to do exactly the same thing as here but just literally reverse it so every time we press the mobile menu close button here we added we add an event listener to him and then on the mobile menu class list we this time we remove the class of is active and we also set the attribute of error expanded to be false just like so hopefully if we go back we should have a fully working menu and everything is looking good okay pretty happy with this i think that we're pretty much done with the menu now and we can focus on the hero image okay we don't need the javascript anymore so we can close this and we can scroll down to the bottom and continue with all mission now everything else that i'm going to be building from now on is going to be inside or a main tag just to be a little bit more just html semantics i guess but it doesn't have to be in there so anyways let's uh let's start by building our first section so i'm gonna do section and then give this section a class name of hero just in case we some we want to change this to something else like i did and now there are a couple of ways that we can do this let me just quickly look at the design now the couple of ways that we can do this we can either add this image as a background image and that would be probably the easiest solution but i'm not sure if it's the best one i think the best one would be to add a as potentially as an image and you can do you can have it as lazy loaded and so on especially i mean especially the other ones they they can definitely be images instead of background images and have them as loaded lazy just so if they don't show on the screen they don't load which means that your website will be faster and also we can definitely put different uh versions of this image smaller ones bigger ones but what i'm gonna do is i'm gonna keep it simple i'm just gonna add one image instead of a background image and do it this way and also and let's do this section as a background image instead so we're gonna do this one with an image and the other one with the background so we have a bit of both and as you can see we have a title description button overlay and an image let's build this super super quickly every section so first of all we need a wrapper for the image so i'm going to do hero underscore underscore image like so and inside here i'm going to just add an image and this could be of source image hero jpeg ooh we can just give it something like lifting heavy i don't know obviously be a bit more descriptive for what's on the image and then if you wish to loading lazy we can do but i'm afraid that it could potentially make a big jump we will have a look if he jumps too much with the loading lazy i probably won't add it and one thing that we need to check out is the size of this image but this is the hero image and the hero image is 920 by 1074 weight 920 by height 10 74 excuse me uh that should be good we obviously make this responsive don't worry it's all good what else do we need i hope that i'm not missing anything but that should be it i guess and then and then what we can do is create a container for everything else so i'm going to do dot container and then this will be our hero container so i'm going to give it a specific class of hero container just so it's easy to stuff for us and inside this hero container i'm gonna have a hero wrapper which will kind of push everything in the middle of the screen so let's do that so this will be hero wrapper and then inside the wrapper we're going to have a couple of things we're going to have or h1 heading so this will be class hero your wrapper heading maybe like so and then i can put like this here your here make this a yoyo and then we can do a paragraph and the paragraph will have a class of hero wrapper and then what is it maybe body text something like this and then i'm going to copy and paste some of the text like so and then last but not least we need a button now this button is gonna be a link href i'm gonna leave it blank with the class of button and then button button primary because this is something that i want to do i want to create different types of buttons that we can reuse throughout the layout and maybe we can give it an area a label find out more and then we can close it and fill this with find out more like this that should be it i think another thing that we do have on the layout is this scroll button which we're gonna have to do as well and to do this i'm gonna do it outside the hero wrapper div because that's probably gonna be positioned absolute so let's do a href and this will be equals scroll down go down will do and then we need to give this a class name of something like hero in the spawn score scroll btn mode and then inside here we can do scroll and then we need to add the image image source and then image then arrow down and then give it a nodes scroll down okay so if the image doesn't work we can just do scroll down and my keyboard is not working anymore i think it's just too old now um i need to smash it harder okay so so we got scroll down and i need to get the size of this svg arrow down so 24 by 15. like so could have this as loading lazy yeah i think they'll do um let me think let me see if we're missing anything so we have the section and i think that's pretty much it i can do right click format and that's looking good now i just need to remember the classes hero image container uh we can definitely style this so let me have a look at how oh this is this is kind of working okay it obviously doesn't work very well uh but yeah the text is underneath the image is here so what we can do is potentially i might be able to push this to the side nice okay we can do this and we can work on it let's create a new section and let's call it hero section resection like so and then let's start kero is or main class that wraps everything and what i want to achieve here is i want this hero section to be always 100 of view height so let's do height 100 d height and then that's the position of relative display flex then we can do align items of center justify content of center i just want to center pretty much everything flex direction needs to be column so everything is kind of like these are stuck in underneath each other and then they're already i guess and then text align center okay this is already looking kind of nice to be completely honest with you but uh we can do a lot more one thing that i want to achieve straight away is that this image needs to be kind of like below the text obviously and to do this i am thinking that we can just do ampersand underscore underscore image and then we can just position this as absolute okay position absolute and then we can do top zero right zero bottom zero and left set to zero not too bad i like it then we can definitely position this image as object inside the image container here where is it image container and the reason for this is so we can kind of like tell it to contain kind of like sorry cover the cover a little bit more so it kind of squishes the image and we can see a lot more of it instead of just seeing the left side of the image it's very easy to manipulate with background images but uh it won't be too bad actually so what we can do is i can just select the inside image and just say object fit and then cover and then i can do width of 100 and height 100 i think that's very important to do and save and as you can see this is already looking pretty cool now the actual container on top which is this one here that contains all of the text i guess the content needs to go up and i know it's hard to see but it does need to go up so we can do ampersand container and then we can do that index 1 display flex justify content center okay that's not too bad at all the scroll definitely needs fixing so what we can do with the scroll is the ampersand and the sql underscore scroll btn is this what a i wonder if this is what i called it it'll be here that's what i call them so scroll btn position i want to position this absolute to the whole section and just have it here at the bottom and let's do that index one and then display needs to be a flex just because i want these two to be stuck in underneath i know they are at the moment but uh just in case flex and flex direction column like so then we need to align items to the center font size i want to change to 1.4 ram which is 1.4 pixels then next decoration i want to change to none i don't want this ugly link is this even working hero container i don't think it's working hero it's probably the end okay i'll miss about it scroll bdn okay now it's working absolute zedding is flexed okay not bad that needs to just go to bottom of this could be dangerous using percentages but that works and because we have an image inside a i'm just going to go image or svg we might as well select both just in case we put an svg later on i mean it's already an svg anyway but uh better say than sorry i guess with 74 pixels and then this could be margin top or one ram it does not look good to me what is wrong with it so we have the link oh did i justify it to you oh no way okay i've put i've put margin left on the image and i was wondering why isn't it's margin top okay okay i was wondering why this was working we just margin left anyways that's actually looking pretty cool it's linked we do need to link it to the next section but that's absolutely fine we can do this and as you can see we have a little bit of a problem here the text is far too light and what i have in the design is this extra layer it's kind of like a gradient so the two ways of doing this we can simply just do this with css or if you're really lazy i guess or if you do more complicated stuff you could try to do an svg let's do it with a sender element after and then we can add a as a linear gradient so what i'm gonna do is here we can do ampersand dot dot after i think the correct way of doing after is with two dots but uh one dot sorry one semicolon is still is still um accurate as well i mean still the browser will still render it it's not a problem but uh anyways a nice thing to know i guess or not okay content is something that we need to add in order to make this as an actual kind of like uh i call them kind of like ghost dips that they don't exist in the dom but we can kind of create them by doing this after and then content and we just leave it empty and then we need to set this as an absolute so it goes from top left uh right and bottom so let's do that position position absolute top zero right zero bottom zero left zero what else do we need and the background color actually do we need background or black festival just kind of like uh that's white uh one two three just kind of like um as a as a bucket maybe let's let's have a look probably not i would say and then we'll do background linear gradient and the gradient that i want will be rgb rgb alpha and then we have black is going to be 0.0.0 and then we just put the opacity of 0.23 something like this then we do need to start with zero percent and then the next one will be rgb a and then we go for another black color like so hope it's commerce instead and then the alpha for this one will be 0.85 and then we have this one up to 72 percent and then the rest can be black like so 200 100 percent uh that does look okay hey i've got an error so we have rgb a one two three oh [Music] uh yeah that won't work then so i'm gonna have to remove the background okay i'm making a mistake somewhere which is a little bit hard to see at the moment so we have rgba one two three four percentage rgb a uh direct rgb rgb a uh here we go made a spelling mistake and as you can see we have the really nice effect here which is pretty cool and we are almost almost done with the hero section now first of all let's have a look at the title and what i'm going to do for the title is instead of making a very specific title for this to start with i'm gonna do a global one for all of the h1 tags and then i'm gonna kind of like overwrite just the hero one to make it a little bit more to like to make it stand out from the rest let's go that way so so let me show you how we can do that above everything here maybe i don't know maybe around here let's add or h1 and of course you're gonna have to do this for h1 it's h2 h3 h1 h5 and h6 if you wish but i'm gonna keep it simple for now and there are a couple of ways of doing responsive fonts we can definitely do it with a media query in fact let me just copy one of them and then i'm gonna show you so one way of doing it is we could potentially just do i don't know i'm just gonna give you a very bad example here we could do a font size of 4.2 ram is or h1 and when we hit this threshold of 600 pixels maybe we want to change it to i don't know something ridiculous seven seven one day and look at what happens now we go up it goes the font is quite big and if you go down it goes massive so this is how you could potentially do responsive web fonts and you can do multiple media queries but i'm gonna kind of cheat today and do something different so what i'm gonna do is i'm gonna use the clamp uh property so i'm gonna do is font size and i'm going to clamp everything and i'm going to explain what this means so the first value is the minimum of what we want our font the middle value is what we ideally want the font to be and then the last value is kind of like the max value so these are the values that i want if i was to save this look at what happens when i when i toggle the responsive mode and let me just make some space so let me just yeah can you see what happens so this is the minimum it won't go any anything lower than this but when i go up look at this now it kind of starts to extend and then it goes to the maximum threshold which i've put on so it's kind of like a really nice responsive font i guess so that's how i'm going to do it today and let me have a look at what else we have to do so we definitely need to make this effect here with the outlines yeah and then the second text can be kind of like a failed so to do this let's use some more trickery and i'm going to use the webkit text fill color for this to make it work so let's do dash web kit and by the way if this doesn't work on a very old browser for some reason i guess the worst that can happen is that is the font is just gonna go to white after tester but anyways webkit text fill then color and then we set the color that we want i'm gonna go with rgb a and then two five five two five five two five five and then zero all right which is basically white but then with the alpha of zero so it's transparent and then i can do web kit text stroke and that could be one pixel and then we can just pull in or via the variable over second color it and then color we need to remove actually this is what i'm worried now but cares about old browsers i guess um none i guess we can do if it's supported and then this will work all right this will work so killing them margin top needs to be zero and then margin bottom needs to be for rem and then line height is what i want to change to 1.3 so we've reset the margins which is pretty cool the height is reset and last thing that i want to do is make the white text so so basically the highlighted text in the design let's do that the way i'm going to do that is i'm going to wrap the text with the span so i'm just going to do spam and then inside here i'm going to do dash dash sorry web webkit dash text dash fill dash color rgba what else two five five two five five two five five one i like it let's see how this would look like so if i find the h1 which is this one here and if we wrap maybe make this here here here so if you find your ear and this bun and wrap it like this and actually i need dots okay let's save this and have a look as you can see this is working just the way i wanted it yes the text could do uh with the alignment that we have on the original design but we'll get this this is kind of like think of this as my global h1 tag and yeah it's pretty cool i'm going to do the same thing with the paragraph you know yeah let's do that okay so if we go back and i'm going to do another like here paragraph and then for the paragraph let's do exactly the same thing here font clamp and i'm going to do 1.6 ram to [Music] 1.6 view it to 2 ram and then inside here let's do let's reset the margin so margin top of zero margin bottom of zero and the line height needs to be set to 1.5 i think i'm done with this as we did it let's just check quickly check out whether this is working and um i can't tell yeah yeah it's working it's pretty good um we definitely need to style our primary uh button so that could be the next thing that we do so let's find all components somewhere button and what i'm gonna do is this is kind of like a modifier to the button so we have our main styling of the button and now we're just creating a modifier for it and in fact we can just create it in here so we can do dash dash primary and then inside here inside here we can do background background color and then we can do our gba two five five two five five two five five or zero point then we can do a border or one pixel solid and then we can just bring all variable color of white then we can add a color for the button to be the secondary color as well and last but not least box shadow to give it a little bit of shadow zero pixels three pixels pixels and then rg g be a zero zero zero zero point sixteen let's have a look whether this works okay all button is actually working we could definitely do with i was ago with a hover style as well but let's just save a little bit of time and you know how to do hover basically you can just go in here do ampersand and then hover and then you can just change the background color to whatever you know it won't work with the touch thing so let me just so you can do this and just make it look better than this i guess now that we have those global elements they can be reused for all of our sections later which means that the process will be sped up hopefully from now on but we still need to finish this section as is not as as on the design so let's do that super quickly and let's go back to the hero hero okay so we have pretty much everything here maybe we just do another one for the hero wrapper inside a hero hero wrapper which is very wrapper and we can just style this differently so heading body that's i think yeah okay that's it so let's do that so i'm going to wrap everything in the hero wrapper just like that and then let's do ampersand and let's go underscore heading and then we can do max width set to 800 pixels for the heading because i want it to be always kind of like in the middle and we can do margin set to zero auto and then for ram alter like so and then we can do font size and we can change the font size just like within it but i want to make it a little bit bigger than this but we can do clamp five rem then wv and then 10 ram again so that's going to make it a little bit bigger and then i want to reset the line height to 1. so let me quickly finish the body as well which is the paragraph text and i want to do something similar i want to give it a max weight of 500 pixels and i want to give it a margin of auto which is top and bottom sorry of zero which is stop auto is to the right pre-ram is to the bottom to push the button and auto is the left yeah save this and let's have a look whether this works okay this is pretty sharp i like it and if we scale it down it works really nice the mobile menu okay now if i show you the mobile menu and one thing that i haven't done is probably changing this to a pointer as well but uh button i definitely could do it up but uh if i change this look at this uh background is now blurring everything he has a lot of contrast and it's working quite well so that's all working and to be completely honest i considered the hero section as done for now and we forget we definitely forgot to do the active class for this and that was going to be just like maybe underlined so desktop menu this desktop menu then we have link and then we just had text decoration underline is this going to work yeah okay just because obviously this is something better than this but uh this just symbolizes that we are on the home page and that's it now we can definitely focus on the next section which shouldn't be too hard to do and this is this section here i'm not gonna i'm just gonna do it like this actually i'm gonna do with small squares and then it's gonna become big squares and so on just to speed up the process i guess okay let's do the second section here expert coaching nutrition and sports so we're gonna have three cards they're all gonna be links and all of the cards have a little overlay on top and that's pretty much it i think and also one thing that we might want to think about is that those cards here at the bottom are very similar so we might as well kind of like make them customizable so we can reuse the code from here to here as well uh that would save us a lot of time i think so let's do that i don't know what to call these let's call them categories for now so let's go to index.html and create a new section and i'm just going to call this section well give this section a class name of categories also i want to have a little bit of space between each section so what i'm going to do is i'm going to create myself a few little helpers of paddings and margins so i'm going to do is padding one padding top one and this is something that bootstrap does and i really like so i'm gonna do this and also we can link or scroll here where is it the scroll down so i'm gonna link it to this section here and when we add a couple of things we'll test them to see whether the button works and we can also link or where is it or scroll down button which is main main and we can link this somewhere around where is over here i wouldn't want it to link around yeah main we need to test this but uh you know you know we can do i mean it didn't do anything because we can't scroll but i think that could work anyways let's uh focus on the section so we have categories let me create this pt one which is adding top one helpers and i'm gonna create them somewhere at the top maybe like around here so what i'm gonna do is i'm gonna well i could create a few of them but i'm just gonna keep it simple for now i'm gonna do padding top of one and this could be padding top of i mean it doesn't make any sense now but it could be 8.2 rem um but yeah this one i'm gonna use i think and then let's create one more and i'm gonna do margin top of one as well and this will be margin top of one 8.2 ram so hopefully this will give us a little bit of space now here yeah you can see it and yeah and we can reuse this as well so this is all good let me go inside here just so you can see a little better like so okay inside this section first of all we can name it by giving it a h1 so this could be something like let's give it the last name of sr screen reader only and we can do i'm not sure what to call this one but let's just do a gym no training category training categories i think that would do and then this is not going to be visible to the user and then we need to create a container and then we can maybe give this container a class name or training just so we know we what we are styling and inside here is where we'll be adding all three cards or links so what i'm gonna do is create a link with ahref and obviously we have nowhere to we have them nowhere to go at the moment so i'm just gonna put this sign here and then let's do a class of training and let's go on the scorecard and then we might have to come back to this to give it a and these are going to be they're going to have a slightly different these are gonna be square and these are gonna be kind of like uh slightly longer so so we can definitely give this one a specific class name so let's do training and let's go underscore card and this will be like a modifier so we can do square like that or i'm not so sure what to call it but square is good enough for now so each link is gonna have an age rate and then this h3 is gonna have a class of training and this con scorecard and then title so all title for the first one is expert coaching and then we have another div which is going to be the overlay that i was talking about kind of like the way we've done the overlay for the hero image so i'm going to call this one just image overlay keep it simple open the diff close the div of course and then last but not least we have the image so i'm going to wrap the image in a div so let's do dot training and then let's go underscore image oops i'm writing css here and then inside here is where we add the image so let's do image source and then we can do image expert coaching is this one or we can explain what's on the image i'm just going to put expert coaching for now expert coaching but definitely explain what's in the image this is what all tags are or we can definitely add loading lazy to those images like so and we also i we might as well add the width and the height which i don't know so i'm gonna go for what is expert coaching gonna be huge isn't it five three six five five nine five three six five five nine none of the images have been optimized which is bad but it's obviously just a tutorial here make sure that you optimize your images as much as you can as much as you can scale them down compress them whatever you can do change the format to what p if you like or well serve them as yp if you like you know you know the job and now that we have this done pretty much we can potentially just copy this hopefully everything is okay and we can paste it a few more times like so and now we can start styling it definitely need to tidy this up a little bit now let's have a look at how we can do this categories training training card okay let me scroll to the bottom copy a comment and this would be this would be category training to be completely honest we don't really need this but it kind of like explains what this section is about so that's why i'm gonna leave it but it doesn't do pretty much anything i don't think so what i'm gonna do instead is i'm gonna focus on this container here with the class of training and then the cards so let's do that instead trading and we can display this as a grid read makes things styling super easy to do this but i will show you how to do that now and between every single grid we want or container the way or link we want a little bit of a gap and i can just do gap of 20 pixels now if we scroll down you will see that all of them are aligned and they should have a little bit of a gap um i can definitely put the put on the right side okay and now we can start styling the cards so the cards were called under art and let's go underscore card and then i'm thinking of using flex so we can position everything in the middle and work our way up from there so let's do display flex this could be the flex direction needs to be column on this one we need to justify everything over justify content to the center align items to the center then we definitely need to make the card to be positioned relative because we're gonna have that black overlay on top of it which will be absolute so that's how it's going to work and then text decoration because they're links i don't actually want the underline so text decoration none let's save as you can see everything is kind of like moved to the middle execution is gone um pointer sorry it's not a pointer it's cursor cursor needs to be set to pointer so when we hover over uh it looks like a link that you can click on and one thing that i want to do is set a minimum height for them to be 550 pixels this is going to be helpful because i want to change the aspect ratio for them to be always one to one but if i just put aspiration one to one and if i didn't have any height there is a small potential that i could break as aspect ratio is not fully supported on my browsers but it's getting there and i want to use it and if i can use it and it doesn't break the layout i will use it that's the deal let's style the title or shall we move the image first let's let's fix the image first of all and then we can finish off the title thing all right let's do that so i'm just gonna underscore image and then let's do position or i keep doing this position absolute and then we can do top of zero right of zero bottom of zero left of zero and let's have a look okay now they are fitting inside the containers but i wonder what i'm gonna need overflow hidden potentially we'll see and then i need for the image i need this to be object fit cover and then the weight needs to be hundred percent height needs to be hundred percent and that's looking good um one sec overflow it didn't do much maybe i'm mistaken that's all good now what we have to do is bring up the title and the body which is yeah bring up the title and then on the second one we're gonna have body as well so what we have to do now is bring up the title which is this one here and we'll modify yeah let's let's do that now so inside card we're gonna have ant dash title and this will be font size of prerem the setting leaks is what's important here we need to change this to two and let's just align text align center okay this is pretty cool if you remember i did a modifier called cut square so what i'm going to do yeah inside the card we can do that i can do ampersand underscores called card dash dash square and that would be my modifier for the for these cards because the other ones are going to be slightly different so what i'm going to do is use aspect ratio and then i'm going to put one two one okay uh one thing that i don't understand is why don't we have a gap between every single element here okay this is a level where that isn't working and i think yeah the grid isn't showing the drain and this is because we have great grid okay okay see the mistake easily done um what i'm gonna do is go back and fix it so we have display instead and it's great and now we should get that gap between each element and everything is looking good the last thing that i can think of in here is probably the overlay and we just call this image overlapping so what i'm going to do is just do a class of image overlay and style this as position absolute this needs to be top 0 right zero left bottom and left zero and then we need the z index to just come up slightly and then we need the background color to be set to rgba and just make it super opaque black one two three four point five okay that makes them a little bit darker and if you want like a hover effect in these when when we go to desktop we can do our ampersand hover and let me just change the background to something else maybe like just slightly less whatever you know that's working quite nice and now all we need to do to be honest is just change the uh the the cards are now fairly responsive and we need to change is the media query and just change the grid so let me show you how we can do this okay let's add a media query first of all what i'm going to do is come in here at media screen and and min width and then i'm going to put 600 pixels and then inside here i'm going to do great then play columns and i'm gonna do repeat three times one fr like so and hopefully if we go to back to the browser you will see that we have three cards here and if you go down they kind of scale i mean it doesn't look good i generally think that this is because of the height and what we can do is also for the modifier which is card square uh what i can do is inside here i can do ampersand underscore card square and just put aspect ratio one two one and i think at this here this minimum height is going to be a problem so maybe i can do min height height of auto i'm not so sure i need to try it out okay so hopefully if we resize this they're all keeping their aspect ratio to a square and when we go down they just become like big squares and that's kind of like what i wanted i mean at this point we could have potentially resize the font as well or make them yeah resize the phones maybe or do something else with them or have two cards or something like that but as you can see this is how you could do the responsive web design which is pretty cool so hopefully when we do the next cards uh we're pretty much set here and we won't have to do too much work we might have to just add another class element and that's it i think let me just have a look and i think that we're done with this section and now we have the next section here which is get started why wait okay we just finished this section here which means that the one below here should be very easy to do so we might as well just jump over this one and we'll come back to it later so this should be super quickly to do so we might as well start it this is going to be we can just call this one training options so let's go back and let's copy a comment from here and let's paste it here so this would be training options and this is pretty much going to be using most of the css from the training card so that's why i wanted to do it and now let's just build some of the html and to do this we might as well copy most of let's copy most of the elements from here and we'll just change a couple of things so i've copied pretty much everything from categories and now i'm just going to change this from categories to training options we're gonna leave the padding top to be one which we set early in this tutorial and i'm going to remove the scroll down because we don't need that then h1 and then this is going to be slightly different now we're going to remove this h1 and in the design we actually have a heading and a paragraph here your training options and a little bit of text which i'm going to copy and paste in a second so we might as well do that also another thing that i want to do is wrap everything in a container instead of having two containers i'm gonna grab this so let's remove it and let's just wrap everything in a container like so and this is going to wrap all of the cards okay we can move this to left just tighten things up okay now we have a container here and inside the container is where i'm gonna add my h1 and my paragraph so to do this let's do an h1 and this one will have a class name of training options options and then this will be underscore underscore heading and let's close this and this heading will be your training and then options so your training options and options will be highlighted so we can just do the span that we created earlier well we styled earlier so let's do that and then we need a paragraph so i'm going to do b and this one will have a class name of training options body like so and i'm just going to copy and paste some of the text that we need copy paste and view or wrap okay this is looking good and then what i want to do for the cards i'm going to push them a little bit so i'm going to give him a little bit of padding so putting top one it might not be perfect but you can always mess around with with the margins and patterns of course and also each card here is going to have a paragraph so we definitely might need to have a modifier so what i'm going to do is we have training which we're reusing from above and then what i'm going to do is add a modifier called training options dash options like so and then we have each card here and each card has this training underscore underscore card first name and this training card square now these ones are not going to be square so i'm going to remove the square class of all of them and each of these cards will have a paragraph so i might as well add that so it's going to be i'm going to copy and paste some of the text like so and this card is going to have a class of training uh training card body and let's go and score card body um one thing that i just noticed is that on some elements of use training options heading and then i've used training card title i was just thinking of making them similar but no it doesn't really matter i mean that could be the heading of the section and that's actually titled the card i guess it works out okay you know this so this one is going to be small group pt like so we have the text the image i'm just going to change the image to something else let's put nutrition like so the old text needs to be changed of course i'm gonna just copy whatever i have here the cut width and height should be the same if i extracted them well then i have low delays on each card and let me do the same for the rest so this one is going to be classes i'm going to copy and paste some text let's do that as well and then maybe x i'm just gonna leave the same image as it doesn't matter too much and then the last one here actually we need the paragraph so let me copy and paste a paragraph so this one is going to have the same training card body for the paragraph and then we should be and this one needs to have a paragraph as well so what i could do is i'm going to copy this paragraph from the top paste there and just swap the text with something else it doesn't really matter too much let me go ahead and paste it and i can use this paragraph here as well for the last one and the last one will be so this will be one to one like so and i'm going to copy this change the picture here and then this could be the support picture so let's do port.jpg and i'll go one two one and maybe just need to change the paragraph so they don't all look the same like so um we should be good to go now if we save this this will probably break so let's go down and have a look as you can see the title is nowhere to be seen this needs to be center lined this needs to be center lined so there are a couple of things that we need to do so first of all let's start with the top so we're going to start with the top which is training options and then we're going to target the heading and the body let's do that let's do dot training options and inside here we can do ampersand and the square underscore heading and then put a heading we can do text align center and one thing that you might want to do actually is have dot text center a class that you can reuse everywhere so potentially i could copy this paste it here and i could use this class name on the heading here like so and that might save me or write in a very specific css for this setting here so technically speaking if i go back we should see that your training options is now center line which is pretty good and now we can focus on the body which is ampersand underscore underscore body and for the body there a couple of things i want to do i want to make sure that the body is in the middle so i'm going to do max weight of 8 10 pixels and then i just want to make sure that this body paragraph is in the center so i'm going to do the margin 0 top and bottom and also on left and right so it moves to the middle and we probably need to copy the oh this is thick that needs to be text by the way and i'll probably and i'll probably copy this one here the text center last name and paste in here as well and let me just fix it here so text center and that should now have both of the title and the body text in the center looking good and now we can focus on the cards and just add this modifier which was let me have a look it was the training options okay now all we have to do is fix the text here which isn't showing i think it's just below and we could potentially use this modifier but now thinking about it it's probably not required um what we're gonna have to do is just go back to the training sorry about that and then what we're gonna have to do is just maybe add ampersand ampersand then body and just do the z index as 2 as well and maybe we'll have to do text align center like so let's have a look at what we get um that's not too bad we do have an issue where we don't have enough padding on the side and ideally i was probably done this on the actual card itself so let's have a look quickly um we could go to the card here and if we give each card a padding of 10 pixels like so maybe that would fix it yeah i think that'll do and now the text won't touch the edges which will look a lot more professional and i'm going to do and obviously that's gonna change for both cars which is a good thing and now we should have top cards working and these cards working as well you could do additional media queries if you think that they're too squished here definitely could do that but it doesn't look too bad on mobile in my opinion and then the only bad position is probably around here so yeah maybe one more media query on this and then the desktop is looking pretty nice actually so i'm gonna leave it as it is and i think this should do the job for now okay the last thing that i just spotted is that the text here is actually in the middle and on the design we have it at the bottom here so potentially what we have to do on the cart is justify the content at the end and maybe that's why i was thinking of adding the the training options modifier so potentially what we can do is get the training options to wrap all of the cards we can either do we can either do a unique class for every single card here or potentially we might be able to use this and modify all the cards actually let me let me do this training card and maybe training i'm just going to score card dash dash and i think that might work i mean let's have a look so i'm gonna put this on every single card and modify so if we do have a training card here and we just need to grab this and do a modifier of n and now justify content and let's have a look where this is going to work uh what did it do i think i put and did it go to start or something justify content and okay sorry it has to be flex and instead okay so let's go back and just do flex and like so and that should look similar to the design now the text is at the bottom potentially you might want to have a little bit more space from the bottom and the top and to do this we can just modify the whole card we can just do maybe like 20 pixels from top and bottom and 10 from left and right and that would fix the issue and they're all looking good now as well and now we can focus on the next one which should be this one here now we're going to do exactly the same here as well i'm gonna start with this card here sorry this section here and then we're gonna do this one as well because they're exactly the same and they can share the same last names uh some sort of uh component i guess so let's go back and the first section is actually going to be between those two just like the one we have on the design and this one is going to be a tiny one so we might as well get started so this one is going to be a section and i'm going to give it a class name of get started and then what i'm thinking is because we have two sections which will be in almost identical they're just gonna have different backgrounds and different overlays uh this one here has a red overlay and this one just has a dark overlay so i wanna show you how we can use some sort of modifiers for them to share the same css but yet be slightly different so what we can do for this one i'm just gonna keep it basic and let's say get get started and this could be something like image one or whatever you wish and then let's give it a padding sorry margin top of one just so we have a little bit of space between the sections like so and that's it now inside this section we're going to have an overlay so let's do a diff of class overlay and let's close the div we can move this one at the top and then we're gonna wrap everything in a container like so and inside here we're gonna have a title so h1 this is going to be get started today and then on another line why wait i'm gonna use br for this one here to move the text under the line and then we're just going to do a span of y weight to make the white weight white and then the next section that we have is going to be sorry the next bit that we have is going to be a button so we're going to do href here and then this is going to be a class name of button and then i'm going to use the primary button so button primary and this is going to be sign up like so uh let me see if i'm missing anything this could definitely use the class center that i created earlier so let's do text center like so and i think that we should be good to go with this section let's save it let's have a look at what we have here it is so we have get started today why wait all looking good the button is here on the left side so we definitely need to align this and of course at the image and the fear overlays now for this section here we're gonna have three overlays this one here which is a gradient from black to this dark red and then a little bit of opacity then we're gonna have this overlay here which is just a gradient and we're gonna have another one at the bottom so let's have a look at how we can do that and i'm gonna do this one slightly different by the way i'm gonna use this image here as a background image instead just so i can show you uh how you can do it in a different way because we've done this one here as an actual image and that's why we're gonna do this one with css so you have to two different examples that's all okay let's go back and let's copy a comment from somewhere so this one here will do and i need to move this to the top by the way the text center because it's kind of like a global style that i'm going to be reusing everywhere so this one is going to be get started start it and we can start styling it so get started and then inside here i'm going to start with doing some global stuff and then we're going to use the modifier to add the image so let me show you but first of all i'm going to set the background attachment to be fixed which means that every time we scroll we're going to have like a kind of a parallax effect a little bit and the image is just going to be fixed which looks pretty cool and then we're going to have the background dash position and this is going to be centered like so then then we're gonna have a background repeat and this is going to be set to no repeat because i don't want the background to be repeating and then we need background size to be cover so i want the image to always cover the section no matter how big it is just kind of look cool and then i want to set a minimum height for this section to be 700 pixels pixels like so and then of course we're gonna align the antennas to the center with the button and everything and then and then what i'm gonna do here is sorry this needs to be displayed fixed obviously if i'm gonna align items so let's do display sorry flex if you want to use the alarm items you need to have it as display flex or grid i guess and then the last thing that i need to do here is position this as relative because all of the overlays will be positioned absolute to this relative div or section i miss make some space here and let's start with getting the first image and then we're gonna put all of the overlays on top after so for the first image i'm going to use this here get started i'm g1 and i'm i'm actually going to do this after get started so like here so mission now is to grab an image and what we can do is background match image like so url and then in double quotes we can do dot and images and then i need the get started image like so and then we can do all of the overlays let me show you what we have so far so we have the image as you can see we have this nice kind of like a parallax effect i guess this definitely needs to be aligned to the center but other than that it's looking pretty good so let's continue now and do some of the overlays and actually let me just quickly do that let me quickly send everything so what i can do is use the container inside and i'm just going to do text align center hopefully that will do it and just put that index as one because we're gonna have a lot of overlays and as you can see that went to the center i could have potentially give it the center class name and that would have probably worked as well and now let's do the overlays so for the overlays i'm going to use the before and after elements so i'm going to do ampersand two semicolons and then let's use b4 to start with inside here we need to give it a content of empty just so we create that empty difference on the page and then we can position this as absolute to this relative section and now we can do top zero right zero bottom okay no no we don't need bottom on this one sorry and left zero so this this one is going to be the top the top one here this one here so i want it to be positioned at the top of the page sorry at the top of this section here from the left to the right and we'll probably give it a little bit of a height so this is what i want to achieve that's why i didn't put bottom so let's go back and that's left zero and then what we can do is give it a height of 140 pixels maybe and then let's give it a default background of black that would be hashtag with the three zeros and then let's do a background and this is going to be a linear gradient and i'm like flip this one around 180 degrees and then i'm going to do rgb a rgba and this is going to be 0 zero zero one and then we're gonna have ten percent rgb a and then zero zero zero and then zero and now we're gonna have hundred percent all right hopefully this will work and the last thing that i want to do just in case i'm going to put the width to be 100 hopefully you go back you should see that we're getting this nice gradient here which is pretty awesome now i just need to rotate the gradient which should be fairly easy to do and just add another one here at the bottom so what i'm going to do is i'm going to copy this before element here paste there and i'm just going to do an after one after like so we have everything should stay the same except the degrees here i'm gonna put around so this is zero degrees and yeah i think that should be it and oh one more thing now we need to change the top to be bottom and that's it so if we save this let's go back and have a look yep that's all looking good and the last thing that i want to do is add another overlay which was that black to red overlay so it helps us out with the contrast of the text you go back we can do an overlay here and i'm actually going to make this one as a global ovulating let me show you overlay we can put here as positioned absolute and then what i'm going to do is stop zero right zero bottom zero left zero and then opacity i'm gonna set to 0.6 but because we have a specific overlay on both sections the one here and the one here we're gonna have different colors so what i'm gonna do is i'm gonna use this modifier here to add a special overlay so this one is going to be dot overlay like so and i'm just gonna do background background and then this is going to be linear gradient and i'm gonna do uh let's go with hashtag three zeros for black starting from zero percent and then i'm going to put a very like bloody dark red color i guess four b one two three four and then that would be 100 like so save this and let's go back to the page and see what we get as you can see we are getting the nice overlay and if i scale down the website now hopefully everything is working well as you can see it's all working well on mobile you might want to make this section maybe smaller but that's just personal preference i guess and i quite like the way the way this is working out is pretty nice so the beautiful thing about the next section here this one here is that we can literally copy everything everything we've done from above just change the modifier and obviously the content so let's do that that would be super easy to do and we're gonna paste it after the training option so let me have a look let's go back i'm gonna copy this section started this thing up i mean format everything and now underneath section we're gonna create a new one and what i'm gonna do is get started image two and let's just change some of the text so in the h1 here let's just remove all of this and let me do it like this so in fact i'm just going to copy and paste some of the text we have we will help you in then vr the shape of your line will help you to get in the shape of your life then br and then let's get started and this is going to be wrapped in a span so span like so just to make this text white copy paste and like that the sign up button is going to be exactly the same so we just need to recreate this here we copy it and after the get started image one we're gonna have the get started image too and i can literally copy all of this here base there and i'm just going to change the image super quickly so this is going to be we will will rocky help like so and the background now needs to be changed as well so this one is going to be rgba and oops definitely don't want that and this would be zero zero zero zero point five which is a very opaque color save it and hopefully if we go back to the website you should see that we just done this section super quickly and and as we scroll we're getting exactly the same effect as this one here and we're done we're done with this section so let's have a look at what's next okay so we have the footer here which is the last section and i'm going to speed up the process on this one and do it super quickly but again i want to show you how you can do it so let's get started and let's have a look at how we can do the footer so for the footer we're gonna go outside the main uh the main section here and i'm gonna do it with the footer tag so let's do butter like so and of course i'm gonna give this footer a class name of footer so what i'm going to do is inside here let's do class footer and let's give it a putting top of one and then inside the footer everything is going to be wrapped in a container like so and on this container we we might as well give it another glass of footer container like so which is going to make things a lot easier if we convert this into a grid so we're gonna have a couple of things so i want a couple of columns essentially so let's do put a dash call like so and each column is going to have a heading so heading three maybe on this one and this one is going to have a class name of twitter dashco i'm basically reusing the name from here and doing underscore underscore heading or title whatever you wish to color and this one is going to be find us then this is going to be a list so we can do an order list or with the class name of footer call and then underscore underscore list like so and this list is going to have a couple of items so maybe we can add an address address won't be linked here but we're going to link it now so href and i'm going to link potentially you have a link to google maps or something like that and then we can have 43 [Music] moscow by london which i kind of made up and this is all looking good now i can duplicate this one by doing all shifting down and then we can change this one to something like contact uh this could be a towel link so tell and we just put something like some random numbers and then this could be our phone number here like so that's all looking good and now we can essentially copy this and just reuse it for a couple of more columns so let me copy this column paste in here and i'm gonna change some of the information so let's do get assistance and then we can just put a bunch of links so i'm gonna remove this one and i'm going to remove this as well uh this is going to be let's just do a link of i mean yeah might as well just put a link it doesn't matter too much and now let's just duplicate this a couple of times like so and let's create two more columns so i'm gonna copy this one here paste it and then this one is going to be company like so i'm gonna leave everything inside exactly the same and then let's just do one more of keep in touch in search like so and at the bottom i'm going to create another container so dot container and this is going to be text aligned center and then let's just do it as a puzzle and just go underscore copyright as you can guess this is where all of the copyright information is going to go so i'm going to do a paragraph with the class name of pte1 just to like push everything a little bit so we have a little more space and i'm going to do copy and then let me just copy some text so we're going to actually let me just write some text 21 0 3 6 5 and then we have created by in the link a href i can do i can add my website maybe so https and inside here actually this could be a target of blank so it opens in another tab and this is going to be ready like so if we save this let's have a look at what we get we have three columns they will need to be reset of course we have the copy right here at the bottom and we can just start styling this so let's start obviously we're gonna start from mobile so i can move this to the left side let's go at the top here and see what we get so for the container what a call okay let's copy a comment like always and paste it here at the bottom so this is going to be footer like so um we can start studying so with the cast name twitter i'm gonna do the copyright festival let's do copyright and then this is going to be margin bottom 20. something like this this should give us a little bit of space at the bottom and now we can use the footer container here for all of the columns let's do that in fact i can even put it outside here so they're not nested if you don't want to but you can definitely nest them i don't think it's a problem so let's do that and we can display this as a grid grit is going to help us so much with uh being able to put stuff into columns and rows and then i can do gap of 10 between each grid as you can see that moved a little bit now now what i'm gonna do straight away from here i can do the responsiveness for each grid so inside the footer container we might as well add two media crease so media screen and then and and this is going to be minimum width of 600 pixels and inside here we can literally do grid template columns and i can do three columns uh sorry repeat three columns one fraction each that should deal with the first media query and i'm going to copy this one more time paste it and this is going to be roughly around 800 pixels and i want to change this to four so if i was to open this and scroll down you will see that all columns are now stacking up nicely and as we go down they kind of go to free and then they will stack up so that's not too bad we're pretty much done with the responsiveness and now i can just focus on the actual footer column and what i can do is under here maybe we can just do footer dash co and let's have a look at what we need so for the headings heading sorry i'm going to put the size to font size to 1.8 ram like so so they go they went a little bit smaller than original and then let's do the list now so we can do underscore underscore list and the couple of things that we need to do we need to reset the padding and margin to zero and as you can see everything went to the left here so we don't have any money in patching and we need to remove any bullet points just in case so list start type to none and they will be removed now uh you probably didn't see them here on the left but they're removed now and then inside each list we have a list sorry in inside the anode list we have a list so what i'm gonna do is just push everything to the bottom a little bit by using margin at the bottom and that could be like i don't know six pixels i'm not gonna measure it now but that should give us a little bit of space between every single item and then for every single link i'm going to do padding and then 8 pixels and then 0. so now actually one more thing put the links if you want the links to be clickable from the left to the right we will make it easier to click the links all you have to do is convert the links to display block now if i hover over my mouse you will see that there are links of course we can do sort of like what they called uh hovers and so on but i think that this will work quite well and that's it pretty much obviously if you put real information it's going to look so much better but that's how you do everything and stack everything as you can see everything is working i don't know what i want everything to be underlined like this but of course you can just remove the underline from the link and so on and that's pretty much everything from this tutorial i hope you enjoyed it if i do if i go on the website and press tab and press enter as you can see it goes to make this year yo here so we're kind of like skipping the whole navigation which is a good thing and if i click on the scroll it goes to this well technically if i'm at the top here and click on the scroll you see that it goes to this section here i could have changed the images but yeah this matter too much but if we go down you will see the text here and yeah everything is pretty nice so far not so bad well i hope that you enjoyed this tutorial i hope that you've learned something if you enjoyed this tutorial please leave a comment below like this video and consider subscribing for more tutorials like this and i will see you in the next one thank you very much for watching as always my name is ready and you're watching my channel rally the brand

Channel: RaddyTheBrand

Views: 2,126

Keywords: landing page html css javascript, website design tutorial, website development, step by step web development, html css website, responsive web design, hot to build a website, landing page tutorial, css landing page, gym website, interactive website using javascript, js, javascript, html, html5, css, scss, grid, flex, usability, aria, screen reader, mobile website, accessibility, raddy, raddy the brand, raddythebrand, gorilla videos, gorilla gang, gym landing page

Id: uJZb0o2OEHk

Length: 153min 22sec (9202 seconds)

Published: Thu Jun 24 2021