Creating an SVG Path for Social Icons and Adding Transitions

It seems that we're going to be using SVG paths as elements, specifically the social icon A elements. We want to add a cover to these icons, but there's no clear direction on how to do it. One possible approach is to nest the path element under the A element, but another option could be to place it under an A element with an SVG hover effect.

For the social icons, we'll set the fill color to lime green and add a transition effect for a smoother hover experience. We want to achieve this in 150 milliseconds using ease-in-out timing functions. This will give us a nice looking animation on our social icons.

Moving on to the text links in the footer, we'll apply similar effects. We want to change the fill color to lime green and add transitions as well. The transition duration is still set to 150 milliseconds using ease-in-out timing functions. These animations should work seamlessly for our text links.

Next, we're going to tackle the button hover state. Unfortunately, when we first coded this button, it was on a white background. To fix this issue and make the button appear as if there's a white overlay, we'll use a pseudo-element with a semi-transparent white color. This will help maintain opacity while making the button look like it has a white gradient behind it.

To create this pseudo-element, we'll position it absolutely on top of the rest of the button. To achieve this, we need to set its position to absolute and ensure that the parent element is positioned relatively. We'll also make sure that the child remains inside the parent by setting its positioning to relative. The background color will be a linear gradient, but since we're using pseudo-elements, it won't transition nicely.

To fix this issue, we can use an rgba value with 0.25 transparency to create a semi-transparent white overlay. This should give us a smooth transition effect for the button hover state when combined with the opacity animation.

Finally, let's check our hover states by adding and removing the opacity property to see how it looks on different devices. It seems that using pseudo-elements is a viable solution to this problem, resulting in a nice and smooth hover effect.

Testing the Hover State on Devices

To confirm that our hover states are working as expected, we'll test them on various devices, including mobile and tablet emulators. We want to ensure that these animations look good on different screen sizes and orientations.

Using an emulator makes it easier to see how our design will render on different devices. The results show that our social icons and text links animations work smoothly on both tablets and mobile devices. However, we could also consider adapting the design for tablets by using two columns.

If you made it through this video tutorial, congratulations! We've successfully created a landing page template with smooth hover effects using SVG paths and pseudo-elements.

"WEBVTTKind: captionsLanguage: enhey everyone jessica from codercoder here thanks so much to free codecamp for having me on their channel in this video we're going to build a landing page template from frontendmentor.io if you get stuck at any time during this tutorial you can check out the completed source code on my github link down below and if you like this video and want more i'm actually creating a course called responsive design for beginners you can sign up to get updates on my progress creating the course as well as be the first to find out when it launches and without further ado let's get into it all right so the website we're going to be building today is from front end mentor dot io they have tons of different challenges of website templates you can build yourself and the one we're building today is called easy bank landing page now what i'm going to do is download these starter free files and with that you just get jpegs of the design which you can definitely work off of but if you want the full sketch file you have to pay 8.99 so either way works we're going to be working with the free files right now so let's set up our project on the left i have my empty project folder and then on the right we have the files that we downloaded from front end mentor in this folder i have an index.html file which we do want to carry over here to our project there's also an images folder and these contain the svgs and pngs and jpegs that we need to use for this website so we're going to copy the images folder over as well and there's also a style guide file which i think would be pretty handy and then lastly the design folder contains the jpegs of the different designs now what i'm going to do is i'm going to show you i've made an adobe xd file and in that i've basically copied and pasted all the jpegs so that i have all the designs in one place just makes things a little bit easier so now that we have our files in our project let's open up vs code okay so here in vs code i have the project folder open you can see that we have the index.html file from frontimentor and we also have the style guide file which is helpful to tell you you know what what's the designs at as well as some colors and font information so we'll definitely be using those and we have the images folder here with all the images okay so when i'm working with website projects usually i'm going to be using sas scss syntax and we're going to have to also have some javascript so let's create those files now so in the project root i'm going to create a folder called app in that folder i'm going to create two sub folders one for js for the javascript file and one for scss for our sas files so in the sas file folder in the sas folder rather let's create our main sas file style.scss and this is going to be the main sas file that we're going to import all of our partial sas files into and we're going to create one called globals scss yeah that's right i also usually create one called variables because i like using sas variables a lot so let's import those into our main sas file import variables because we want our variables to come first so the other sas files can use them then import globals okay so let's start adding some boilerplate styles here so the global the first one i usually do is in the html selector i'm going to say font size is 100 this is more accessible lets the user control the zoom level in their browser we're also going to do box sizing border box and what this property does is it makes the size of elements sort of include padding in the final width so it's just a bit easier when you're working with elements like that then we also want to inherit that box sizing border box to all elements so using the wild card selector here as well as the before pseudo element and the after pseudo element selector and they're going to inherit the box sizing board box in the html element now for the body element let's add some sort of resets here so we'll say margin zero padding zero i also like to do a line height of 1.3 just to add some spacing between lines and we're going to add our fonts in as well we look at the style guide it said that the font that we're using is public sans i'm going to go to our browser here copy this in i think it wanted to use 300 light and then 400 regular so we'll select both of those and we're going to embed it we'll just copy this link tag here and put it in our index.html over here above the title now since we're in the index.html file let's also add a link tag for our css file i'm going to create a dist folder and i want to put all my final css files in there so i'm going to say disk style.css and then we also i think want to add a script to load our javascript file that one's just going to be in the app folder so app.js script.js let's go into our folder here and create that script.js then we'll just add some test code so we can test it hello world why not now that we have some sas files you know just basic styles added let's also test out our sas workflow to compile my sas to css i like to use this extension called live sas compiler so if you don't have this installed yet you can just type in live sas compiler in the extensions marketplace and click this button to install it you might need to restart vs code if you're installing it for the first time now but once you have that set up when you open a project file you should see some buttons in the bottom one says watch sas and the other one says go live so if we click that watch sas button going to watch our sas files and then if you want to go live we click the go live button and it should load the local website in our browser we can see that that is indeed the case obviously this doesn't look too fancy since you know we just added the text from the design here but we can also check down in the console window here and our hello world message is loading so it looks like everything's working correctly see we need to add that font to our code so in our globals we're going to say font family and let's do that before line height font family i believe it was called public sans so we're just going to copy this over there we go okay so let's check our browser again and we don't need this anymore so it looks like we have the font public sans successfully imported so now going back to our vs code we want to do is we want to basically start creating the markup for our website so let's go into our index.html file and we're going to start writing markup over here i'm just going to actually comment out all the copy from the design just so we don't have this extra stuff you know visible on the website we're going to start writing our markup so let's go back to our design and what i'm going to do is try to do the mobile first approach and we're going to make our default styles without media queries the mobile styles and we're going to build the mobile website first and what i usually do is i'll go from the top down so let's start with the header but taking a look at the header it has a logo on the left and it has a hamburger button on the right which then when you open it opens this mobile menu then if we compare that to what we have for the desktop design it also has a logo on the left that has some links looks like in the middle and then there's a cta button on the right side so let's create the markup and styles for this header in our body tag i'm going to create a header and then in that header we want to add our logo image and we're also going to assume that this is going to link to the home page so we'll just make that open that and then in this anchor tag we want to add our image for the logo so image source images and then we want to look for this logo svg then alt oops i'll we'll call that easy bank since that's the name of the plate we're making let's see if that loaded on our site okay so that was easy right i think actually what i want to do in addition to that is create a nav and i'm going to put everything in that navigation in this nav tag what we got is the logo and then we have our hamburger menu on the right so that's probably also going to be an anchor link it's just going to go to the same page and we want to create a hamburger menu and the hammer we're going to use those three lines so let's create three spans so we're gonna use an emmett shortcut span times three so three empty spans and we also probably need a class for this and we're just gonna call this hamburger for the hamburger menu and in the same way maybe we can create a class up here for the logo so we'll say class equals logo if we look back at the design we can see that everything is in one line so that tells me that this nav element should probably be a flexbox parent to put everything on the same line now one other thing i like to do is i like to use a lot of helper classes so instead of having to write display flex on every single element in this webpage that is a flexbox parent we're going to create a helper class called flex and i'm going to add that in our globals got it there so flexbox styles we'll say flex class and we're going to say display flex and let's add a few other flex related classes so flex um one property we use a lot is justify content so let's say jc dash space between and that will be justify content space between because that is used quite often you can also maybe create one for center and i'm just going to basically be creating these as you know as we need them so let's also create some align content properties so align content and usually it's aligned content center so we'll write that align content or i'm sorry align items rather center so it's a i enter okay so this is fine for now we're probably going to use more later but now what we've done is in my sas i've created a flex class for display flex and then these other ones for the flex properties so i can do now is uh let's see split this up so you can see our html on the left and our styles on the right what i'm going to do is in the nav in addition to the flex class we also want a flex justify content space between so let's just check out how it looks in the browser okay so you can see our logo here let's see what's going on so we can see the nav here so we have a logo and then we have the hamburger class but it looks like that has a zero width and box model yeah it looks like it has a no width but there is a height so what we probably need to do is make those spans spans by nature are our display inline so that means they're not going to take up any space so there's like no content in them so what we want to do is we want to add some styles now for our header so we go back to our sas folder create a new sas file i'm going to call this header.scss and then we want to make sure that we are importing that into our main sas file so just trying to keep things organized here header so now in our header what we want to do is i think i'm going to add another class for the header let's say class header and this is so i can use bam block element modifier for writing my sas classes so first we have this main element header and then in here we're going to say maybe header underscore underscore logo and then header underscore underscore menu maybe hamburger menu okay so now in our sas files we can start using the ampersand for header then there's a logo and then another one for the menu this is the mobile menu so we'll just add a little comment here saying that mobile menu and we also have an image tag here so i'm not sure if we're going to need this but we'll just add it here anyway so in the menu we have some span elements i'm just going to use the direct child selector here to make sure we keep things as specific as possible and we're going to say display block for these spans now if we go back to the design the hammer menu is looks like a bunch of dark black or very dark gray lines so we're going to start with some general styles here first thing was first actually we probably want to get our colors added in from the style guide so you can see here these are all the different colors they're using hsl instead of hex but that's totally fine so let's start adding variables for our colors so we can reuse them so dark blue and now we're probably going to use this dark blue color for the hamburger menu and we'll just kind of see how that looks so let's close our script file here we don't really need that right now it's going back to our header sas file we want those lines to be that dark blue color so what i'm going to do is i'm going to say width and the width of those hamburger lines are now since this is a jpeg this is kind of the only way that we can really see how big things are i'm creating a little rectangle here that's semi-transparent so you can still see through it but you can still move it around and you can kind of use it to see how big things are pretty small looks like it's about a 26 and then about 12 or 13 height okay so what i want to do is here i'm going to set this to i think was 26 pixels and then the height of each this is just for each line so let's say two pixels oh yeah and then the background color background color and we'll use the dark blue variable all right let's see how that looks on our website now okay so it's a little small up here but we do have our hamburger lines here but we need to add some spaces between the lines so what i'm going to do is i want to add a margin bottom to all the spans except the last one so what we can do is we can use the not selector so not last child and then if it's not the last child we'll say margin bottom and let's just kind of guess here maybe three pixels now going back to our website we can see now that we do have the three lines and our logo now of course everything's up right on the edge here so we need to add some padding here so let's see how much padding there is let's get the top and bottom padding first i'm going to kind of assume that the top and bottom padding are the same if we have a little rectangle here about 22 inches or pixels rather and if we move it down it might be a little bit more so maybe 24. so 24 pixels of padding on top and bottom and then for left and right about the same let's just say 24 all around so going back into our code what we can do is we want to add padding to the nav itself so in the header we're going to add another selector here for the nav just no class at least for now so we'll say padding uh 24 pixels all around okay so let's see how that looks all right oh why is that so tall let's see what's going on here so we have a nav here that's one of our pixels all around it looks like we need to center things vertically so what i didn't do is i need to add another flex property here so flex just to show you what i got here flex a i see that's going to align items to center all right so that looks a bit more centered there we go okay so we got our now we got our spacing one thing we do want to do is see what the differences are between the mobile and then the desktop nav mobile obviously has the hamburger menu does not have these links or the cta so these are desktop only but i should be able to use the same markup for both mobile and desktop so let's add some elements in for the links as well as the cta okay so let's scoot this over here a bit so logo's first for both and then for the mobile the menu is over here now since the the hamburger is not going to be visible on desktop i'm just going to add these other elements down here so the first one you want to do is since i'm using flexbox to separate them out let's create a new element we'll just say div and we'll say header underscore underscore links then in here we'll say anchor um link so i think there were how many links five link times five there we go and i think the text is down here so you can just kind of move those up into here into the links so header links and you know this is just a landing page we're doing so we're just going to make all the links the pound sign or the hashtag so going back to our header sas file we're probably going to have to add some styles for that so under the menu will say header underscore underscore links and in that is going to be some anchor links let's go back to our website and now we can see that we have our links okay first things we want to get rid of that underline and i want that to be true for all links on the page so we're going to add some styles here for just default styles so links a visited a hover um text decoration none okay good now let's style those links let's see what we got here check our notes in the style guide okay it says font size is 18 pixels i guess we could add that font size to the body tag so 18 pixels and it's actually better to use relative units like rems instead of pixels so to get from pixels to rams you can divide 18 by 16. so if we check this inspect element see yep font size is 1.125 rams and if you click on the computer tab it'll tell you it's 18 pixels which is what we want okay color seems to be this actually seems smaller so this might be like maybe 16 or even 14. let's find out it's about 14. so we're going to adjust the font size in the um better font size i think we said 14 so 14 pixels divided by 16 is 0.875 um another thing you can actually do and let's do that now is we're going to create some variables for these font sizes just in case we need to reuse them so we'll say body or maybe font medium the 18 pixels or font size 1.125 rims and then we'll replace this with the variable name the other one was font small this is going to be 14 pixels there we go take that over here and we'll replace that with the font small variable kind of helps just to add some comments so you can remember what this is 18 pixels we'll add more variables as we need but for now let's also check out the colors probably that lighter gray for the text here so i think i can actually i might just add it to the body selector since it seems like most of the body text is that gray color so let's add that in the global one as well this just makes it so that you don't have to add you know font size and color for every different element you can just add it globally first to the body for whatever you know the most often used one is and then you can make them different for the elements that need that let's check out this website where's the color coming from looks almost purple not gray there should be another color hopefully uh it's probably this light grayish blue so we'll just replace that there we go i wonder if this is from the link color change to red yeah it's not taking for some reason i think it's probably taking the default color from the browser so what i want to do is let's add that color property there okay that's a little bit too that's a little bit too light so we're just going to go back to the grayish blue and same for here there we go okay that looks more like it so now we have the links added we want to add that cta button that's just for desktop so let's move this over here because we're going to need that pretty soon this is going to be probably a button element so we'll say button type equals button and then what does it say request invite okay so now it's a button now of course we need to style these button styles so we're going to add the button styles again in our globals so first thing i want to do is we want to kind of reset the colors and different styles so this one is a gradient background and it has rounded corners what we probably want to do is figure out what the size of the button is so we can do that by i'm just going to add padding to the sides so it's about 16 padding on top about the same on the bottom and then oops for the left and right it's about let's just say 30. so we'll say 16 padding on top and bottom and then 30 on left and right so we're going to use the button element as well as the button class just in case because sometimes we might want to have an anchor link that has the button class as well padding 16 on top so that's one rim and then 30 which would be 30 divided by 16 1.875 around this okay and then also around a corner so border radius um i'm not sure we'll just say 50 pixels for now okay let's see how that looks okay getting there we also probably want to make it use the cursor when you hover over it there we go so now it looks like it's a link looking back at the design this is a gradient looks like it's a linear gradient just going from left to right so going from this green color to this kind of teal blue green color let's see which colors we're going to be using it's probably lime green going to bright cyan so let's add it i like adding the background here background linear gradient and it's going to go lime green to bright cyan okay so it's horizontally i don't want to make it go kind of vertical so i think it is too right i'm not positive that's the correct syntax and it looks like it's not css linear gradient this is what i do quite a bit when i'm building websites so we can go to let's check out mdn okay two left comma so i need to add a comma there and let's go back to our website oh still didn't work what's going on here i am not using the right property background linear gradient to left let's kind of inspect this in the thing itself linear gradient that's right to dash right no there's no dash that's why just test this to make sure i think i need to edit in the code itself there we go oh yeah i think we need to get rid of that border so in buttons we're going to say border zero okay so now that's gone which is good then we want the color to be white nice and let's see how that matches looks like it might be bold actually font weight we'll say 700 for bold although it said it was let's check our notes again weights 300 and 400. go back to the design here so i'm guessing the default weight is the 300 for light and the normal is sort of the headline stuff so let's kind of go back into our body font weight we want default weight to be 300 and then for the link we'll say the weight is 400 since it is a little bit heavier is that taking um font weight 300 which is good check this out want weight is 400 it doesn't look any different weird okay i think this might be because it is a button element um if we do font weight 300 font weight 400. seem to change at all changes to an anchor link yeah it is changing a bit so this might just be a bug for the button element maybe we'll just change that button to an actual anchor link because it could be an acrylic in real life it really just depends on what you want to do add a class and we'll say class of button now we know that this should inherit all these styles here so let's check this again okay looks like the weight is correct pretty big i think in the design it looks like it was the same size so let's go back to header this is maybe header underscore underscore cta so font size we'll just make this also font small and color will make this white uh why is this gray oh my gosh nothing's working what color red important oh my it's because it's the anchor link oh okay probably because oh yeah i did this color grayish blue i might actually just get rid of this thing here and instead add it to the anchor links because it's a bit more specific because i don't want every single link to necessarily be that grayish blue color there we go that looks pretty good all the links are there so the next thing we want to do is we want to either hide or show the different navigation elements depending on if they're needed on the mobile design and then the desktop design so how we're going to control that is another set of helper classes this is going to be a bit more complicated because first i need to create the classes we'll just call this visibility so hide for mobile i'm including tablet with this mobile class so in this what we want to do is hide for tablet and mobile devices and we'll create another one hide for desktop hide for desktop widths viewport widths so the way we're going to target this is we need to create a media query but what i'm going to do is create a mixin so we can make things a bit more reusable let's create a new sas file called mixins and this one's going to be related to breakpoints the final code that we want to have is something like media and then the target will be min width 1024 pixels for desktop 1024 divided by 16 64. and for media queries you want to use ems they've just been shown to be the most consistent among browsers and then we have our styles go here this is what we want to output but we want to save these break points so we don't have to keep typing them every time right so what we're going to do is we're going to create a sas map we're going to call this breakpoints up and then we're going to basically create a bunch of different values for breakpoints up meaning at this point and bigger use these styles so to do that we're going to first create one for medium because we're assuming the small size is the default one 640 pixels divided by 16 is 40 ems 40 ems i'll create another one for a large and let's say that one's going to be 10 24 pixels divide by 16 is 64. and we'll create another one for extra large since we have a lot of large screens these days 1400 divided by 16. so 87.5 ems so now this is our sas map for breakpoints up but i'm also going to create one for break points down the first one breakpoints up is if you want to target this viewport and up and that's what i use for most of my styles but there are some cases where you want to target a style from a certain viewport and on down so for that we're going to not use the x large because x large on down is basically everything but we are going to add a small here for mobile devices for mobile we're going to take this value here because medium would be 40 ems and on and on up for small we're going to say 40 ends and down and we'll move this up here from medium on down so this is anything smaller than 10 24 and then 87.5 ems oops i need to leave that there we don't want to overlap these so i'm just going to make these one pixels smaller the breakpoints we're using are 640 pixels 10 24 pixels and i think i said 1400 pixels that's for the break points up so for these we want it to be 640 and up so 639 and down this is so we don't have any overlapping styles i try to not mix breakpoints up and break points down in the same style rule it's either one or the other usually going to be break points up we need to recalculate these numbers here this is going to be 639 divided by 16. 39.9375 9 and then 1023 divided by 16. 63.9375 and the last one is going to be 13.99 87.4375 there we go now we have our two maps what we can do now is create our mixin so we're going to say mix in break point up it's going to take a parameter we'll just call it size i'm going to write what we want the the mixing 2 output so we want to output a media query so media and then min width and this is where we're going to put in this size variable i'm sorry this is not right so the min width is going to be the the the value for that size that we've determined so to get that we need to use map dash get so you can see this code has some helper text here turns value in a map associated with the given key so map get and the map we're using is going to be for the first one break points up we also want to grab that size parameter so the size is going to be either small medium large x large and will return this ems number when we're using this mix-in we want to write this media query and then in the media query we're going to just output whatever content is in the style and i'll show you how that works in a second we got our mixing written or breakpoint up and let's create another one for break point down and everything's going to be pretty much the same except reasonably down and then also instead of min width is going to be max width and then the content so going into our global styles again the hide for mobile class we want to hide for medium and down so we're going to call the mixin by using include and we want to do break point down and the size we're going to call is going to be the medium because for medium and down we want to say display none and then in a similar way for the desktop we want to call a mixin but the one mixing we're going to use is going to be breakpoint up because we want to hide the element using this class for desktop and up so that would be large and extra large display none okay now let's see if this works by adding these classes to the different elements in the header so for mobile we want to hide those links as well as that cta so let's add the class here and then for desktop we want to hide the hamburger menu since we don't need that for desktop and we're going to keep the logo because that's going to be used for both okay so now moment of truth let's see how this works looks like something's not really working but let's see yeah this is when we debug our code so hide from mobile and for desktop interesting looks like there's no errors so what we want to do is maybe check out the final css file there we go let's see if we can find that class oh looks like we didn't even didn't even get pulled in for some reason that's weird oh wait there's a error here no mixing named breakpoint down okay let's go back and start from the beginning oh we didn't add the mixins sass file so let's let's do that that seems pretty important now we go okay now there's a success message go back to our site oh my gosh what's going on here okay so it does look like things are hiding and showing so let's see when when does this switch potentially four and up it's showing the links and the button and then yeah so hide for desktop display none or the the hamburger menu then here there's no styles here but as soon as we get shorter use the hide from mobile so at 10 24 is when everything either gets hidden or shown so this looks like it is working let's look at the design again and just make sure we have all the styles correctly we need some more space between these links here so let's see how much space we need to add it's about maybe 32 pixels so going into our header sas file header links a what we're going to do is we're going to add a margin to the right of the link but we don't add a right margin to the last link because there's nothing after that so we're going to use a not selector and then not last child so as long as it's not the last child margin right is going to be what do we say 32 pixels all right so now let's make sure there's no margin added to that last link contact blog why is there white space here and then queers does not have it so the white space is probably added because of the enter key um there we go okay now there's no white space that's weird let's go back here check one more time let's check this button styles again 152 by 50 seems a little bit big to me i feel like some of the padding might not be quite accurate here is our div 163 by 44 and let's kind of guess what this font size is it's probably 14 which i think it should be correct let's double check the font first and then we'll adjust the padding to match so if we go to computed and see that the font size is 14 so that's right so we're just going to adjust the padding here the pattern right now is 16 on the top and bottom it's 50 pixels tall right now and it should be 46 we need to subtract 4 pixels so 2 pixels from the top and bottom so let's go back to our button styles and here's the padding so one round which is 16 pixels but we want to subtract that and make it 14. um 14 divided by 16. 0.875 rem there you go so now it's 46 which is pretty good and then it should be 163 and it's only 152 so it's about 10 so we'll add five more to each the left and the right right now it is 30. we want to be 35 on each so 35 divided by 16 is 2.1875 2.1875 okay so that looks a bit more like the design 162 by 46 which looks much closer yeah that looks pretty good and let's actually double check this logo size as well for both mobile and desktop it looks like they're the same size for both let's just make sure it's about 141x22 if it's the same for mobile yeah it's the same let's see what the actual logo is here 139 by 20 and it should be 141 by 22. so let's see where this gets set i think it's in the header oh we didn't even set the size okay so it needs to be 141 by 22. so 141 divided by 16 8.8125 and then height should be 22 1.375 okay let's see if that helps at all alrighty the 141 by 22 141 by 22. all right this is pretty good so we got our mobile styles here for the hamburger menu as we get bigger we got the desktop styles so let's check out the active states for desktop we go over here looks like the text gets darker and oh we have this border here and then for the button it looks like it gets sort of like whited out a little bit yeah it looks like that so first let's tackle the that bottom border and the color for the text so the header links i'm going to do is for the hover pseudo selector we want the color to be the darker gray so it was grayish blue here so it's probably this dark blue color here let's double check on that nice and to make it a little bit nicer we can add a transition so transition for the color and the timing for that let's just say maybe 200 milliseconds and then i like to do ease in out for most transitions there we go so you can see it's a little you know just a little bit nicer let's figure out how to do that bottom gradient so the problem is here right now these elements are just the width or the height of the text itself so what i will need to do is i need to add some either margin or padding for the top and our bottom to make it the height of the probably the entire thing because we're centering everything remember so where's my little rectangle where'd it go i left it over here oh there's another one down there like this one we'll take this one in case we need it later make it bigger so we can see it let's take that over here and see how tall this thing needs to be looks like the header itself is about probably 80 pixels tall is what we would guess and then the little border thing is about 5 pixels tall let's go back to our site add some border so we can see what we're doing here i can see that this has a border this is actually a little bit tall as well and it really should be 80 pixels tall it's probably the padding the header has no padding the nav has padding here 24 pixels of padding so let's try and we should probably convert that to rams as well so if the total height is going to be 80 we can take this down so 17 pixels and 24 pixels or header nav padding and then if we want to convert that to rems 1.0625 and then 24 1.5 okay so now it is 80 pixels tall which is pretty much about what we wanted let's see if we can do it with a pseudo element not sure if this is going to work let's just say for this one um header links a new set of styles here airlinks a b4 so content needs to be an empty string so let's try position absolute width of 100 display block and we'll make it a height of 5 pixels and then background of let's just say you know the lime green color so the suit elements going all the way across which we don't want it to do i thought this position relative would work let's try adding it here okay there we go maybe we'll try to align it to the zero left of zero right of zero so instead of width we're just saying left and right so now each link has a little line which is what we want but it doesn't seem like it's in the right place and i think it's because we want to adjust it so that it's right up to the header so now we want this green line to be down where the blue line is so let's see if we can do that we might actually just need to add a static let me think about this what we could do is say bottom zero negative statically set it to 30. that might actually be the easiest one so let's do that okay so before we forget let's copy these styles so header links a i'm going to say position relative and then the header links a let's add this here so before let me content empty and then let's just kind of copy those other styles that we'd added here okay so now this actually worked oops what did i do what did i do looks like set position relative hmm what did i do oh i didn't add position absolute there we go there we go i think it was happening before was position relative and you just made them stack for some reason makes every element a display block which takes up 100 width and then it's in the flow of the document interesting okay anyway so here we got our lines now what we want to do is make the colors correct first of all and we're going to only show the line when you're hovering if we look over here it looks like let's see it has the same green actually as the button it goes from lime green to blue so let's go back to our button styles so here's the linear gradient i wonder if we're using this gradient again in this website so it's using the buttons which is already taken care of this i'm assuming are just icons this is just green i think we'll be okay just leaving the styles like this and then we can just copy it if if it was used multiple times i might create like a helper class for that but let's just leave it like this for now and then we also only want that to appear on hover so when you hover on the element itself the pseudo element will get this background that's cool now we need to figure out a way to make this more transitioned because it's a little bit you know kind of jarring just like suddenly pops up as opposed to the color of the text like itself what we can do is unfortunately you cannot make the background itself you can't make the background itself transition it just doesn't work that way so what we're gonna do is we're going to put the background back in the pseudo-element by default but we're going to make opacity zero and then when it's hovered we'll change the opacity to one and then we can add the transition here opacity 300 milliseconds ease and it'll be the same oh wait 200 milliseconds so now let's get rid of that border too don't need that let's see what this looks like now you can see it is fading in and out pretty nicely might make it a little bit slower let's make them 300 for both okay so now it's a pretty nice little transition here okay so i think these text links are good let's move on to the hover state for that button let's look at the design one more time it looks like it just kind of fades to white so i wonder if we can just make this adjust the opacity let's see what this looks like opacity let's try 0.75 see what that switches look that's pretty good okay so button header cta in the header let's find the cta and then we're going to add a transition for the opacity again and we'll do the same thing 300 milliseconds oops ease in out now on hover um we'll say opacity is zero okay so let's see how that looks now whoa oh it doesn't want to be 0.75 i think i said that wouldn't be very good user experience that's pretty good for making this hamburger menu the first thing is we need to turn this hamburger into an x when you click on it so some kind of cool animation second thing that happens is this overlay will in some way shape or form appear over the rest of the website and then on top of the overlay will be the actual mobile menu then clicking on the x will animate it back into the hamburger the overlay will disappear and the mobile menu itself will also disappear in some way so the first thing i'm going to do is starting with the hamburger menu animate it from hamburger to x so to do that let's do a little bit of research online so i'm going to go to codepen dot io and i will type in hamburger menu and just kind of see what happens see what we can find here i do want to mention before we get into this is that even though you can legally copy any code you find on codepen i try to do research see what other people have done terms of solutions see what they've built but then try to build it myself so this is really just the steps that i take to build something just to do some research that's kind of cool let me try hamburger animation that's really the specific thing we're looking for here i don't want anything too flashy or too fancy um yeah that's a little too much for me and i just wanted to include this part in the video because i do feel like researching is a very important part of coding you always have to invent everything from scratch okay i actually kind of like this animation the middle bar disappears it fades out and the two the top and bottom bars form the x so let's just see what they did here they've added some transitions onto this and transform origin line two goes to opacity zero so it fades out so it looks like line one i'm assuming is the top one rotates 45 degrees so it's angled the bottom line is going to rotate negative 45 degrees and i do like how this looks so i think i'm going to just try to build this animation one thing that i think i'm going to do which is a bit different from a design is i'm going to make this hamburger menu a little bit taller and more square because we can see the x is actually square and it looks taller than the hamburger menu we'll make that change then we'll start adding in the animation so what i did here was basically added three pixels of margin bottom to the first two spans it's 26 by 14 height right now i know 26 by 26 is really what i want we'll just try to eyeball it honestly let's do five pixels this is the header underscore underscore menu this is one benefit of using the bem styling because i know everything has to be in the header sass file there we go five and we'll go back here okay that looks pretty good i think i'm going to add a class on this header menu so that when it's open that will sort of turn on the animation okay so header menu go back here so header menu then i'll add a helper class and we'll just say open so in the header let's kind of refer back to our markup as well so this here is the mobile menu so those spans in the header underscore underscore menu if header underscore in a square menu has a class of open as well then we're going to transform those spans span first child and we'll add another one or last child and then i think i need to add one for the middle child there's no middle child selector but i think we can do nth child i think it should be two because i think the number for those starts with one so when it has class of open we're going to do transform rotate 45 degrees then for the last child we'll do negative 45 degrees and then the middle child will say opacity zero and the reason i'm doing opacity instead of like display none is because you can't transition display block to display none you have to do opacity which can use a transition now let us test this in the browser it's going to reload and of course i didn't add any javascript or anything yet so we're just going to add manually the open class to the menu that doesn't look too good i think it has to do with the transform origin because right now what is happening is they're kind of just rotating themselves wherever their middle is let's add a transition then we can kind of see that a bit more clearly transition will say all 300 milliseconds ease in out all right let's try this again we can add a class of open take a look at the hamburger menu yes you can see each line is kind of rotating on wherever the center is the middle one's fine because it's just disappearing so i actually kind of need to look back at that because you can see that you want the transform origin to be on the sort of left side let's kind of see what they did here okay transform origin 20 ammonium i haven't used transform origin really before so let's google that transform origin i try to look at mozilla developer network when i can okay transform origin sets the origin for an element's transformations it's rotating the origin is the center and i'm assuming that's default so let's try top left instead of just rotating from the center it's the corner is kind of where the rotation starts so that might be what we want for the first line let's just try transform origin top maybe center left since they're just lines let's just add it for all of them transform origin center left or let's do left center i don't know which one needs to be first i'm not sure if it matters let's add this open thing again getting closer i think i'm actually going to add the javascript here so i don't have to keep manually adding it in i don't really need the hello world anymore for clicking on this i'm actually going to add an id because i like to use ids for the javascript functionality so button hamburger and then take this id then the script.js will say document query selector and selector is going to be the hash button hamburger and then let's add event listener and it's going to be a click then when you add it it'll run this function i always use a little console logs to test first open hamburger const hamburger equals the button hamburger over here actually let's just call it button hamburger then we can reuse this constant that we created when you click the hamburger i'm going to run this console.log message and then i also want to add a class and we can do this with classlist dot add and then the class name we want to add click hamburger so i'm gonna use a little if statement here so if button hamburger class list contains if it has open the open class i want to remove it otherwise i want to add the open class that should take care of the functionality we need for now let's click on this look at that add the open class and click on it again and it removes it okay so this looks good obviously this is x looks a bit weird we just need to kind of adjust the transform origin i think let's try zero pixels zero pixels just to see what happens oh look at this boy this looks weird oh that looks much better three pixels in one pixel in the header or was that oh transform origin there we go let's try again clicking on the hamburger menu nice looks like a nice little x hey look at that okay so this is the first functionality of the hamburger menu next thing we want to do is we want to load the overlay because we don't have any regular content in the website i'm just going to maybe add some stuff just so you can see the overlay opening over the regular content we'll just uncomment all of the html here okay so the next thing i'm going to do is we want to load an overlay so going back to the design the overlay it appears under the white navigation bar and then just over everything else so the headers here and the nav is included in that so i could do a couple things i could create an overlay on the same level as a header and then just make sure the header has a higher z index so it's on top of the overlay so let's try that actually so here's the header i'm just going to add a div class overlay okay so to make the overlay let's look at the design again so it starts with this gray color i'm assuming it's this sort of blue gray color which we can use and then it's a linear gradient which fades as you go down to transparent first let's get the color that we need it's probably this dark blue here the overlay let's just add a background color as a fallback then linear gradient oh wait background image linear gradient and i always forget what the but let's just try transparent we'll see i am a professional web developer but i do look up a lot of stuff okay so looks like that's the correct linear gradient thing so we do need to make this um cover everything and i want to do position absolute and then we'll just set top to zero for now right zero bottom zero left zero actually i think i might need to do a fixed because it's sort of going like this so you need to basically set the height of it to 100 vh so the viewport height i think this should accomplish the same thing we'll see oh look at that overlay oh yeah so i don't really want that i can use the shorthand those two 2d 314d hmm that's not what i want um css gradient fallback color um let's try linear gradient here we go there's a way to use these gradients and fallback colors that's what i did background color yada yada background image oh fallback image i don't know if that's actually because i did that but then it just add the background color like this um what if i did this nope well i guess that okay yes yes yes weird i don't know why this is not working well in any case maybe we'll just get rid of that background color weird i will just delete it this is kind of what we want i want to make sure the text goes sort of taller than what we can do so we'll just do this let's just do there we go okay so you can scroll down overlays fix which is pretty good obviously now it's covering up the header so we don't want that so for here we need to i think declare the position set the position rather or i think what we need to do is make the top the height of the nav bar so this is about 60. we'll just say top is 60 pixels there we go now we have our overlay we got top to 60. actually we should use rems so we'll do our little dividing game here 60 divided by 16 is 3.75 rams now um we also want to control this with a css class so before we if we add the open class to the hamburger it'll open what i could do is try to just use one css class to control all the animations so i think i'm going to add the open class to the header instead of the button hamburger itself open so what i'm going to do is i'm going to take this and then i'm going to add another section here hamburger open styles and the overlay into the header and then we'll add our open styles here and we'll put it in the header itself of course i'll set it at the top so if if the header has class open then i'm going to say um header menu we need to add these styles here so what i'm doing is i'm basically moving that all the open styles into if the header element has the open class not the header menu let's now test these adjusted styles and update our javascript so that we are adding the open class in the header element itself so create a new constant we'll just call this header and we'll use the same document query selector and we will select the class of header element so now instead of checking if the button hamburger has the open class we're going to change it to checking if the header has the open class we'll update these to remove the open class from the header and then here we'll add the open class to the header so what this is doing now is when you click the button you're going to check if the header has the open class and if it doesn't have it added and if it does have it remove it let's test this out in our site what we hope will happen is when we click this it'll add the open class oh yeah oh yeah it works it's always a good feeling when the code does what you wanted to do the first time without having to tweak it okay let's go back into our scss and i'm also going to start animating the overlay because right now on the side it's just kind of like there let's take a look at here in the header we have the overlay and it's positioned fixed so i'm going to create a css animation a keyframe animation and i'm going to attach it to a helper class actually i'm probably going to attach it to the if the header has the open class then using that css keyframe animation it's going to fade in or fade out the overlay we might have to tweak a little bit as we go but that's kind of general idea i think what i'm going to do is by default i want to make the overlay display none and then we will fade it in probably using the opacity and transition and then fade it out when we close the menu so i'm going to create a new sas file actually so in our app scss folder let's create a new file i'm going to call this animation so any keyframe animations we're going to load in this animation sas file and then of course we want to actually load it import it in the main sas file so animations there we go actually let's just put it up under the mixins just to keep things kind of organized so these are like the functional sas styles and then starting here is where we have elements in the different component styles keyframe animations you start by typing at key frames and then you write a name for what the animation is so what i want to do is i'm going to create maybe two animations for the overlay i'm just going to call them fade in and fade out so the first one's going to be fade in and with keyframes you start with a from and then you end with a 2 and then you put the initial styles in the from bracket and then the end of styles in the two bracket and you can also add percentage of progress in here so if i wanted to i could say let's say 50 do something let's indent this a little bit or any percent you want and then it'll use that to time when certain animations take place this is more if you have like complex animations what we're doing in is a pretty simple fade and so i think i might be able to get away with just using from into okay so in the header sas file the overlay has a default display of none and then in the animations i'm just going to add display none just because it's where we're starting and then i want to end up having a display block and opacity of one and we're also going to start with an opacity of zero now the tricky thing about this is you can transition opacity from zero to one it'll have a nice smooth animation from zero to one but you can't transition display none to display block that's just not how css works first it's gonna be display none then i'm going to say maybe one percent so right after it starts it's going to be display block but it's going to be opacity still of zero and then from one percent to basically 100 the end it will stay at display block but then it's going to transition from zero to one we can try this out by adding this animation in our styles and i'll just add the overlay styles up here so if the header is open then the overlay is going to have animation and it actually gives you a little help here so name duration timing function um direction things like that the name is the name that we added here so fade dash in duration let's just say 300 milliseconds that's kind of my default timing function ease in out is what i usually use and delay i don't think i need a delay iteration count you know how many times you want this to happen we just want it to happen once so i think you don't need to add anything there and then direction we want forwards and then fill mode i don't think i need that i don't think i need that so forwards this is actually important because saying forwards will ensure that once the animation is complete it will stay at whatever styles that you've put on the two otherwise it'll kind of animate and then reset back to whatever you had styled before adding any animation so we want to keep this display block opacity one after it's finished all right these are the styles we need for the overlay and let's i guess test it out okay so you can see the header and then we can see the overlay now is display none let's click on this and see what happens okay looks like camera is still working but the overlay is not animating in so we know the animation is being added to the overlay but for some reason the loading isn't actually working and we're not sure why what happens if i uncheck the display none oh so it did actually fade in look at that for some reason it's not sticking the end state is not staying on the thing display none but it does have the animation okay time to google again or i guess stuck that go css animation final state maybe okay maintaining the final say the end of css3 thing and then i like using looking at css tricks as well as mdn so stack overflow css tricks and mdn are kind of my my main three sources that i go to okay looks like this person's also opacity changing from opacity zero to one elements go back to opacity zero animation fill mode is forwards well i did use that i believe yeah forwards maybe does the order matter in terms of what properties i put in here i'm not really sure i mean it seems like it's working if i uncheck the display none so i'm not sure what is happening it just says forwards should make sure it'll hold the last keyframe state don't forget to specify 100 huh i wonder if that does anything i don't know if that's gonna work but let's check on mdn i don't know if you need the both 100 and the two this is just from two yeah from 75 percent to i don't think i need to actually say 100 i mean i guess i can't hurt let's just try i'm not even sure this is like good syntax okay let's try again nope not working so i don't think it's this i'm going to delete the 100 stuff i know this is bad but i'm going to add an important to this see if that does anything nope jeez this is kind of annoying fade in 300 milliseconds easing out forwards hmm it seems like i'm doing everything right but obviously it's not working let's just get rid of this important because that didn't help i'm going to try commenting out the display none just for now and i'm going to try just setting it to opacity 0 and see if that makes it do anything different okay so it did fade it in so somehow adding a display block is not getting added because unfortunately i do need the overlay to like be display none otherwise i'm not going to be able to click things that are under the overlay so let's put that back in oh what if i okay by default overlay display none but but what if i add display block when it's open oh my gosh this work whoa that's so weird what if cs animations don't actually affect the display property at all that could definitely be the case let's look at this css does css animation display block because it might just maybe not affect the display property at all and make them just leave block display none that's sort of what i'm looking for um as you know oh one of the properties that cannot be animated is the display property okay so that's why i mean i guess it makes sense although intuitively you would think that you could add an animation from display none to display block and it would sort of understand that you want to fade it in so i think i don't need to add any display properties in the animation since obviously nothing's happening and because i'm not doing that i think i don't even need the one percent thing because i had just done that to make it display block and opacity zero so let's try this again okay here's the overlay header doesn't have open class let's click on it oh yeah okay so that's a fade in animation um and then let's make another one that's going to do the opposite fade out fade out from opacity one two opacity zero okay i added the fade in animation when the open class is added i don't know if it'll work if i add the fade out animation or like the default let's just try it we might need to add a helper class to the actual overlay to fade it in and fade it out but let's just reload because i want to make sure nothing weird happens with this okay i just want to make sure that because i added a fade out animation by default to the overlay i didn't want it to like fade out when you load the page because that would obviously look very strange okay clicking on the hamburger menu fade it in very good and it just sort of disappears so it doesn't have the transition which means the animation is not being added so let's make this a little bit more reusable so what i'm going to do is i'll just add a little helper class fade in and then we'll take this and instead of applying it specifically to the overlay i'm going to add it to this helper class here so we can do the same thing with the fade out we'll add a little helper class i think this might be a better practice anyway because then i can fade in or fade out any element using these helper classes so just fade out i do need to leave the display block here just to flip it from display none to display block but what i think i need to do is in javascript add that fade in and fade out class to the overlay so if header if it contains open remove opens this is when you close the hamburger menu just so i don't get things mixed up close hamburger menu else add open class meaning open hamburger menu so when you open the hamburger menu we want to add the fade in class to the overlay so let's add a new constant here let's call this overlay document query selector and it's just a class of overlay so when you open the hamburger menu overlay class list add fade in let's just test the fade in functionality now go back to our site okay so you can see the fade in class was added and it's adding this animation and then we'll do the sort of the opposite we'll say overlay classless add fade out when you close it and might need to also it just to kind of reset everything okay let's try it again reload for good measure all right it's fading in now what we want to happen is we want the classes to basically swap when we close the menu it's fading in but it's not oh you know what's happening it's because this when you remove the open class from the header it immediately just like goes back to display none shoot it's kind of annoying but i think i need to remove the overlay getting the display block and instead adding it to the overlay element itself so it doesn't get affected if the header has the open class or not so overlay if it has class fade in this is just going to do the same thing of just making it disappear oh boy this is tough okay fades in still doesn't fade out okay let's think about this what's happening step by step so okay going back to zero this is the default state you click on this it will add display block and then also fade it in the animation works because going from display none to display block it's still opacity zero so it's not going to like show up um without the nice transition the animated transition but then if you remove if you remove that then it's going to just display none right away so what we want to do is make it go from display block to display none after it fades out from opacity one two opacity zero so let's just research some other possible solutions um css animation display well it's kind of what i was searching for before display none display block none see what stack overflow has for us okay yep changing display none okay cs or jquery ie javascript can't animate between display none and display block i see 0 visibility hidden interesting i just want to make sure that the stuff is still clickable when we have like a visibility hidden but it still exists get rid of this display none see rid of opacity zero so now it is default display block visibility hidden it's interesting oh it seems like it's actually still clickable oh shoot this might be the silver bullet i'm looking for yeah so it's still clickable which is awesome to see what happens is it's just opacity zero it's not clickable like i can't select text as easily yeah i can't select the text but if it's visibility hidden it does select the text and i think visibility should be able to be animated so let's go back here so fade in we're going to go from visibility hidden to this might be where we need to just switch it quickly to visibility visibility visible with opacity zero so we're kind of combining so it's sort of like display block but i guess it could be animated for whatever reason then we'll do the same thing here so from opacity 1 visibility visible we'll go to opacity 0 and then we want it to be visibility hidden but in order to make it still visibility visible but opacity zero we're going to add 99 so when the animation is almost done it's going to be at visibility visible but opacity zero and then let's see if i need to adjust any of these styles here i guess i don't need this anymore opacity or display none i think this should work famous last words let's reload for good measure okay see what happens fades in all right oh my gosh it fades out yes uh i always feel so good when you're like struggling with something and you're researching it and then finally get it to work that's an interesting little lesson i guess like display none is different from visibility hidden versus opacity zero and they all sort of do different things okay yay let's go back to the mobile view here oh i'm so happy oh this is great okay so now that we have our nice fade-in animation of the overlay next step is to actually code the menu now to start off building this off canvas menu looking at the design we can see that it's fairly simple it's just a white block and each link is in its own row so what we're going to do is first write the html markup and then i'm going to style it in our scss and then the last step will be to handle the animation and make it slide on screen or fade in or something when you open the hamburger menu so let's go into our code editor and let's figure out where we want to put the markup for the menu so obviously we want to be in the header tag since it is part of the header the menu is so i'm going to i think put the menu in a div after the nav so let's call this header underscore underscore menu maybe wait am i using this already oh yeah i'm using the menu for the hamburger i think this is more of the menu so i'm going to rename what the hamburger is so instead of underscore ownership menu let's make it underscore underscore toggle and then i'll just rename this in these styles so here we go header menus now header toggle let's just do quick find and replace here i'll just add a little toggle here to clarify what that's doing let's double check the javascript as well it doesn't look like there's a menu so we're good on that side let's just go back to our site real quick make sure everything's still working okay overlay and the hamburger icon are still working which is good so now let's move forward and create our header menu the header menu is going to be you know that white block and then in that we're going to make some links so let's look back at the design one two three four five links so we'll say a link times five again using that emit shortcut press enter and we got five links this is just a landing page so i don't need to have these actually be links so it's gonna be home about contact blog careers boom about a boot contact blog it's like a test of my short-term memory and careers let's just double check that all about contact blog careers yay i think this should be all the markup that we need let's go back into the header and then add the styles for the menu so the menu so the background is going to be background will be white did i create a variable for the white color the variables white i did it'll be background white and then in that will be links and i don't think i need an additional class for the anchor links themselves it's just enough that they're anchor links so that's going to be color and looks like it's probably the same gray as the header here so let's go back into our variables and i'm guessing it's the dark blue thing now we also need to add a bit of spacing get my handy dandy little rectangle here and then we will see first how much spacing there is on the top and bottom of the whole thing this looks like about 36. it's the same on the bottom and then each link oh i need some space too what i might do is do something like this where each link is going to be a certain height maybe 36 and then let me duplicate this square here then i'll add another padding on top and bottom of 26 so then each link is going to be you know 36 something like this we can always tweak it later on so it's gonna be padding of top and bottom is 26 and then 36 height for each link so padding i guess i need to use a calculator again 36 no no 26 for the padding divided by 16 is 1.625 rems 1.625 rams on top and bottom and then 0 on left and right i guess we just do it all around so we got the padding and then i think i also want to now there's a couple ways you could do this i could i could add top and bottom padding to the link itself i could also add the height of 36 and then make it a flexbox parent and align items center i think i'm just going to add the top and bottom padding let's say 10 pixels on top and bottom that way i don't have to write as many styles as i would if i had to turn this into a flexbox thing so padding oops padding and 10 going back to calculator 0.625 and what the heck we'll just make it all the way around now let's see what we got on our site and we got our links it has a white space but i think that's okay so i want them to not be side by side and it's happening because anchor links by default are display i think inline or inline block one of those if we change them to display block then they will take up the whole width that they want that they can there we go so display block maybe text align center oops on the caps lock again text line center looks like that works so let's add those styles into our code display block and for whatever reason i like to order my styles in this way where text line center where i start with the bigger properties like display and position flexbox things and then i move on to margin and padding and then i do text colors and then at the end i'll do like transitions or whatever it's just a way that i like to keep things a little bit organized because when you start getting more rules you don't want to be searching so i just try to group these similar styles together let's slow the site that looks pretty good now the other thing we need to look at is this white block for the menu doesn't take up the entire width but it looks like so you can see on the mobile site there's like a container width so you have some space on left and right and it looks like it's kind of sort of the same um all the way down let me refresh my memory and see if i actually added some padding to stuff okay i did added some padding and that's from header nav so it's just kind of a global padding thing okay so before i do more stuff with the menu itself i think i need to add some add this padding that i have here on the header and put it sort of for anything on the mobile page because we want we don't want things to go all the way to the edge and it looks like things are right now because yeah like later on we're gonna need that padding the padding that i was looking at was on the nav okay i think the best way to do this is to take this padding not have it nav specific but make it a helper class of course so let's add some spacing so we'll say the generic container class and then this will have the padding so that means we want to go into the nav element and then add the container padding there okay looks like it's working so it doesn't have the padding in the nav but it's in the container class so now that means we can add this container class to other other elements but actually for the container class i only want the left and right padding i don't want the top and bottom so i think what i'm going to do is take this top and bottom make it zero for the container upper class but go back to the header and put the nav selector back and say padding 1.0625 rams zero because oh boy what did i do oh i know why it's because this reset the padding so the nav has the padding just on top and bottom and it's cancelling out the left and right padding here and that's because i'm using this padding shorthand so the best way to do this is to specify padding top and padding bottom i use a little control d to duplicate the line so it's a really helpful shortcut here and then here it's going to be padding left and right of 1.5 rims there we go shorthand properties are great but sometimes you do want to split them out just because you might want different values for different elements so now the nav has padding all the way across which is good and we can start adding the container class padding to other elements when we have the menu open we want it to be on top of the overlay and then have that spacing so i think if i just add the container class to the header menu itself should automatically do that we can't see it right now but there we go so we can see there is padding there although wait a minute i don't want padding i want margin for that so i'm going to keep the padding because i do need it for like the other content down on the page but we need to change this padding to margin for just the header menu so let's get rid of this and let's take that padding left and right it's 1.5 rems we do want it to match the padding that the rest of the container elements are going to have but we're going to make it a margin instead so margin and i think we can use the shorthand so 0 and then 1.5 rims so now you can see that it does have that margin you just can't see it on the page itself because everything's white so i think we should be good to go now let's just take one more look at the design okay so there are some rounded corners let's add a border radius to the menu as well border radius let's try three pixels i think we have enough now that we can start doing the overlay thing right now the header menu is under the overlay because the overlay as i'm assuming it has a z index maybe it doesn't have z index because i didn't do it yet let's see what we got here overlay and then nav is there menu's under that i guess because this doesn't have a z index set and that is probably because there's no position property so if you don't have a position property it's going to default to position static which means that anything that has its position set or has a z-index value is going to be on top of it so let's see what happens if we add position absolute okay so now it's on top of stuff and let's try with 100 you can see it's like going off the screen so what we want to do is this margin thing isn't actually doing anything so it's positioned absolute what you could do is instead of with 100 you could say with like 90 and then margin actually i don't know if it's going to work because it's position absolute yeah it's not so since it's positioned absolute unfortunately you can't use the margin auto on left and right to center it because it's like not in relation to anything else it's absolute now i do want to make that spacing right so since we had that margin before of 1.5 rams which is not being used obviously i don't know if it's the best way but i can do a calc and say i want this to be all the way across 100 minus 1.5 rams on either side so 1.5 times 2 is 3 so 3 rims then when we center it it'll be it'll sort of be flushed to either side for the container for position absolute element you can center it by using left 50 and then trans form translate x negative 50 and what this is doing is left 50 is making it go 50 or halfway across you know its container so that's why it's right in the middle what transform does is it's going to let me turn off that left if you don't have it by default it's going to be left aligned right so if you turn on transform translate x you're moving it 50 of the object itself so not the container but the object itself so that's why combining the left so this is the middle line right here and we want to move it back to be centered we only want to move it back this much half of the width of the element itself so that's why these combined will give you a centered position absolute item so let's do this we're going to copy these things over to our code there we go so position absolute width is the calc hundred percent my three rims to have the padding and doing the left 50 transform translate x negative 50. i think i need to get rid of this margin yeah there we go don't need that anymore opening the overlay now we can see it's nicely centered and we probably need a little bit of space on the top there using our little handy dandy rectangle here let's see how much space that is about 24 so we are going to do margin top where's the calculator 24 divided by 16. 1.5 there we go okay so now looks pretty good i think i might need a little bit more rounded corners let's try increasing that border radius a little bit maybe five i compared the design it's actually not super round i think five is good okay so there we have our mobile menu the next thing we need to do is we want to animate the menu on screen when the menu's closed is going to be off canvas meaning off you know your viewport you're not going to be able to see it and then it'll somehow animate in we could either fade it in we could slide it down from the top or slide it in from the right let's do some research so go back to codepen search for off canvas menu maybe maybe mobile menu maybe animated mobile menu get a little more specific okay responsive menu with icon this seems pretty popular so i'm just kind of getting ideas for you know how they're handling this thing um where's the menu what no well not sure what happened to that bootstrap 4 animated menu you click this thing so this is interesting it sort of fades in covers everything so that's that's one way we could do it sort of similar to the how the overlay sort of fades into fades out you could fade in the menu along with the overlay so that would actually be sort of cool i think i'm going to do that i was thinking i was going to slide in from the left or right but fading in actually seems quite nice and we can hopefully utilize some of the same styles and animations that we did for the overlay into the menu so looking again the overlay was set at opacity zero position fixed is that right wait a minute it's opacity zero it's still you can't click through it so it is here oh yeah it's not clickable what did i do i think i forgot to maybe add visibility hidden then we can still select stuff underneath it yeah i just needed to add that visibility hidden and actually i since i'm reusing this for the overlay and also the menu let's make it a helper class like everything else so let's see here visibility maybe i should put it in animations so we're using visibility so what i'm gonna do is before the keyframes i'm going to add another helper class i'll say has fade and i'll say visibility hidden and that's gonna be the default state of any of these elements that we're fading in and fading fading out let's see go to header okay it doesn't have visibility here because i had forgotten it last time but now i can add the has fade class to the overlay and if this works we'll also add it to our menu itself let's reload for a good measure okay so overlay has fade visibility is hidden i can see that i can select through like the overlay is not preventing me from clicking here because it's the text cursor okay so this is working so i'm going to add that has fade class also to the menu itself so header menu has fade so now it's not visible because it is visibility hidden let's find the element there it is so has fade so now i can just kind of do the same thing that i did for the overlay in our javascript scoot this over a little bit so we can see our javascripts we are when we open the hamburger menu we are adding the fade in fade out to the overlay we also want to do that to the menu but since they both have that has faith class what i could do is instead of having to duplicate both these lines of code for both elements i could say const i'll just say fade elements elements so document query selector and then if it has that class of has fade i can hopefully target it with this actually i might need query selector oh yeah because query selector i think will just yeah it just gets the first one so i need to do query selector all that's why i'm naming the constant name with a plural instead of a singular just little little hints like that will sort of help you not make mistakes so let's handle the open stuff first fade elements and i think you can do four each for each all right i can't remember the syntax uh javascript for each i know this is very basic i admit i'm not super well versed in javascript here we go oh yeah for each function yada yada so for each function we want to do this so then in the function it's going to be element hopefully this will work okay so what we want to happen is on both the overlay and the header menu when we click this we want it to add the fade in class ooh it worked um what happened here weird it's disappearing for some strange reason what happened maybe let me try removing the has fade class from the menu just to see what happens when it's only on the overlay weird why is it disappearing like that that's very strange let me try to do it manually fade in oh even if i do it manually weird something about the has fade is like canceling this for some reason because i have the visibility hidden okay let's start from the beginning adding the class via javascript does seem to be working so that's not the problem the problem seems to be because of this has fade class where i set the visibility to hidden oh it's because i think i didn't add the end state for this visibility visible there we go i think that should work now yeah because the way i'm running the animation it's going forward so it's keeping the end state here so because this was not here it kind of defaulted back to the visibility hidden from that has fade class so now things should work let's see okay stays like that okay so let's add the has fade class back to the header menu all right oh i didn't add the other stuff we just added code for the fade in which seems to be working looks pretty nice might speed that animation up a little bit so let's do the reverse so do the same thing fade elements for each function element so the element parameter because it's looping through every element that has the has fade class you can use the element parameter to target and run functions and stuff like that so element element okay so now both the open and close functionality should work so let's give it a run hey look at that nice okay i'm gonna speed that up a bit it's just a little bit a little bit slow so let's do 200 for both fade in and fade out but i'm pretty pleased how this looks i think that's pretty good now i did want to fix that overlay because when you scroll like this like the overlay is not going all the way to the top overlay i said top 3.75 how about zero oh it's because i don't want it to be on top of the header or i don't want it to be on top of the nav i want the header to be on top of it but i think that adding it should still go all the way to the top so i think it's because this doesn't have a position set i think this is position relative i'm trying to put the nav on top of the overlay oh it doesn't have a background color it was just using it from the um the body but it needs its own background color there we go so now still scrolls and stuff let's do that so to the nav we'll add position relative and the background color relative background color white all right there we go now oh i forgot to rest remove the overlay thing top of zero to reload here we go now you know this looks pretty good another thing people do sometimes is when you open the menu you sort of lock scrolling on the body so you basically say overflow hidden so then you can't scroll so i think i might do that with yet another helper class so body what another class of this we'll just say no scroll so overflow hidden we are going to have to add this class to the body when you open the menu so when you open the menu we're going to oh i need to add it as a constant let's add it to the top here constant body equals document query selector body there we go when you open it you're going to lock the scroll by adding this class list add no scroll and then we'll do the reverse remove and we'll just put this one first since that's the way we had it in the other one let's see if this works so opening the menu all right so we can't scroll i'm trying to scroll and it's not happening because it wants to keep you on the menu when i close the menu removes no scroll class and we can again scroll down okay hey this is turning out to be pretty good so we're done with the mobile menu and the next step is going to be going back and adding the rest of the content of the site all right now before we start any coding of course we want to look back at the design and just have an idea of where we're going with this and how we want things to look on mobile and desktop so looking at the design the hero section on mobile is stacked to one column with the image on top and then the copy and button below that then on desktop we have two columns instead of one column with the text on the left and then the image on the right you might also notice that the images on the hero are slightly different between mobile and desktop so let's look at our files and see how that is going to be set up i have open here my project folder with all the website files and i already had saved all the images from front mentor in this images subfolder so my guess is the background intro desktop is going to be this one yep and then we got one from mobile this is just that designed background we need to look for the images of the phones probably this image mockups here what this is is a png with a transparent background and we can overlay that same image of the phones over the mobile background from mobile and then the desktop background going back to the design one more time we can probably use the same markup for both mobile and desktop and then we'll use styles to differentiate the styles between mobile and desktop as well so let's get started going into our code editor vs code and we're going to add markup for our hero section so i'm going to create a section tag and i'm going to call it class of hero underscore underscore just hero actually then in the hero section tag we'll add a div of class i'll start with the image so hero underscore underscore image and under that we'll do div class hero underscore underscore we'll just say text up in the hero image is going to be the image with the phones and the background and then the hero text is going to be under that and i'm doing it this way because on mobile we have the image first and then the copy so then we can just change the style so that the image is going to be on the right for desktop so now let's go into our files from front of mentor and we want to copy over the text that they gave us so we don't have to like type it out manually when you download the files from front of mentor they give you an index.html file with all the text already there so i'm just going to copy and paste that over so hero title is next generation digital banking now let me figure out what html tag we want to use so usually on a website the h1 tag is going to be the name of the page but i've also seen it where for a home page you use an h1 tag for the hero title and then why choose easy bank would be h2 latest articles would be h2 and so on and then we would do h3 tags for these little subtitles here for each section so yeah i think i'm going to do next generation digital banking is going to be the h1 tag we'll do that h1 and it doesn't need a class since there's just gonna be one of these then we'll copy over this text sorry this goes in the text hero section there we go and then i'm also going to add the button and let's kind of look back and see what i had done before or like this request invite button up in the header you just look for request invite there we go so i did an anchor tag with this button class and then a header cta class so let's do the same thing here we'll just use an anchor tag and let's say it's an anchor link we'll just do a round and we'll give it a class of hero cta but we also need a class of buttons so it takes all those button styles that we had built in the previous videos request invite is the text in that button so let's do that and i think i'm forgetting the yeah there's some subtitle stuff here this is an h1 i think because this is longer it's not really a subtitle i'm just going to put it in a paragraph tag and i don't think i need to put a class on that because we can just use the hero text paragraph tag selector so let's just do that copy this text over here we go oh wait i had already copied this so i actually don't need this file open anymore okay so i'll just delete this since we don't need it anymore okay so now if we look at our site you can see that we have the button styles have already gotten ported over which is great and then the next thing we want to do is we want to figure out how we want to code the hero image what i think i want to do is i'm going to create a div and we also need to keep in mind that on desktop you can see this phone image on the right kind of overhangs the section because next section has this really light gray background my guess is that this phone image is going to need to be absolutely positioned you can sort of guess something needs to be absolutely positioned if it's like on top of something else so because the phone image is on top of the next section over sort of overhanging it a little bit we can guess that this needs to be absolutely positioned there's a couple ways you could do this you could create a separate div just for the images which you know obviously i have the hero image div you could also use maybe pseudo elements and then have that absolutely positioned so what i think i'm going to do is in the hero image itself is where i'm going to put the background image that svg sort of designed background and then maybe i'll store the phone images in a pseudo class or pseudo-element like before pseudoelement so let's try that so in that case we actually don't need to add any more markup to the hero image because everything's going to be added in the styles let's move on to adding our styles so in our app folder i just need to make sure that i'm writing the styles in the correct place and since this hero section is a new section and it kind of is by itself let's create a new sas file so create new file we'll call this hero.scss and of course we need to add the file importing importing it into our main sas file so we can just close that for now and then in the hero section just move it over to the right side so we can sort of see our markup and our styles at the same time we'll add a selector of hero then i'm just going to add the ampersand underscore underscore image ampersand underscore underscore text so let's start with the mobile styles first so in the hero image selector i want to say background image url and we're going to load that so in the images folder you want to load the background intro mobile now we also want to add some other background style rules so background size we're going to say cover i do that so that you kind of keep the correct aspect ratio of the image and it doesn't you know stretch it or whatever but also it'll fill the space then background repeat no repeat because we don't want it to repeat and then just for good measure i usually do background position we'll just do center center so it is centered in the div now let's see what that looks like in our browser okay it doesn't look like anything and the reason for that is probably because there is no actual content in the hero image tag so you can see that there are the styles there the background image is showing up but because there's no height it is not going to show up at all so we need to do is figure out how tall we want this div to be and we'll sort of add that in the styles as well i'm going to grab my little handy dandy rectangle here maybe we'll zoom in a little bit on the mobile design i'm just gonna figure out how tall of roughly do i want this div to be so it's about 282 so maybe we'll say 280 pixels so let's say for mobile min height is 280 pixels and then i'm going to convert that to rems by dividing 280 pixels by 16. 16 is the base font size so you get 17.5 rams now let's take another look at our website oh there we go so it did now show up now this is a little bit wider than mobile of course so maybe i'll just turn on the mobile emulator in my browser so this looks closer to what we want in the design zoom out a little bit so you can see here we got the background going so now we just need to add in the image of those phones and i decided to do that in a before pseudo element with a background image it doesn't work we can try something else like using an actual image tag you know there's almost always more than one way of building anything so you don't need to worry too much about finding the one perfect way as long as it is as simple as possible and it is understandable for yourself in the future or another dev to look at the code and understand how it works then i think that you can choose any approach that makes the most sense to you the image is image mockups we'll kind of do the same thing where we're going to do the background size cover and these other background properties the other thing we want to do is we want to do position absolute since we're going to do that later on and because this is position absolute we have to make sure that the parent of the before pseudo element which is the hero image selector is position relative otherwise this image is going to basically basically fly up out of where you want it to be so just make sure that when you position absolute you make the parent a position relative to keep it sort of within the balance of the parent so let's just see what this looks like now look like anything this is probably again because oh i forgot so when you have a before or an after pseudo element you need to give it a content property otherwise it will just not even exist on the page this is just a characteristic of using these pseudo elements okay so now we can see in our inspector before is there so i think what i want to do is maybe add the height and i'm going to set height to 100 so that it will match the height of the parent so let's save that and what's going on oh there's no width here so when something's not showing up or doing what you want to do it's really good idea to always check in your code inspector i'm just trying to figure out and troubleshoot what is causing the issue so right now the issue we're looking at is why is the phone image not showing up look at this before element i can see that it has zero width but it does have 280 height because i set the height property so we're also going to set the width to 100 percent and we'll see how that looks okay so now we got our phones they are not quite the right size i think looking at this we want the bottom of that phone to perfectly align with the bottom of the background and that is not what's happening here this is the bottom of the background and just for good measure and debugging i often like to do this so i'll do a temporary border one pixel solid let's do magenta adding a border will sort of tweak the size of the div but for most cases i think it's still okay now we see we have a border of the hero image and we have the background going down there but we want the phones to end on the bottom we don't want it to be centered like it is right now so what we want to do is adjust the background position so it aligns from the bottom for center center this is the center horizontally is the first center second center is the vertical center instead of center for vertical we're going to say we want to position itself at the bottom so now we can see that the image kind of ends right at the bottom of that hero image div now looking back at the design i think the phone images are a little bit yeah it looks like they're a little bit smaller than what we have in our website there's just a little bit more space on left and right so let's go and sort of adjust that a little bit so the phone images are in the pseudo element the before element so how do we make this narrower what we could do there's a couple ways right now the width is 100 so if you decrease that um it would sort of decrease but then you have a case where it's not centered so then you'd have to add like a margin auto weight display block maybe oh because it's absolutely oh that would be too annoying you have to do left 50 transform translate x negative 50 to center it that's a little bit too much so i'm just going to delete those the better way i think is to keep the width at 100 so it's still 100 of the width of the parent but in background size instead of cover cover will basically ensure that the image is going to cover the entire div so even if it means cutting off from the sides it'll make sure that it covers everything that's usually what we want for things like this but because i want to make it a little bit smaller so we can also use percentages in background size so if you say 100 it's going to looks like pretty close to cover yes just basically 100 of the div so if we reduce that then maybe down to 94 it's reducing the background size but it is still centered because the width is at 100 and then we set background position to center for the horizontal so we'll just adjust that background size so maybe 93 for that before element so background size 93 reload for good measure that looks wait now the bottom isn't matching oh i forgot to save the center bottom let's do that there we go now it is pretty much close to the bottom not perfectly but i think that's okay we'll just sort of live with the imperfection and then it is kind of in from the sides a little bit so that looks pretty good now the next thing we're going to look at is the copy for the hero section so let's look at the design and obviously it looks a little bit different than what we got here on our website so it looks like we need to make sure the font is the right font family also the color needs to be a bit different let's just start with this title next generation digital banking i believe the font family itself should be the same as some of the title fonts that we have let's check out our style guide just to make sure what we're doing okay so font family we just are using public sands for everything weight 300 and 400 300 is light 400 is regular the font still looks still slightly off let's just check this out this pull extends so maybe we just need to make the font size bigger get this let's get a rectangle here and it's going to try to guesstimate what size the font is 30 pixels tall looks like font size 30 pixels the font weight seems a lot different in the design you know what i mean like it looks a lot more thin seems like that's the font that we're using and 30 pixels looks different as well okay so maybe 30 pixels is right but maybe the font weight is not correct that's 300 what does 400 look like doesn't look any different for some reason the h1 oh i bet it's because the h1 tag it's not going to show this here but usually the browser default will set all font weights to bold so font weight here we go 300 now that looks a bit closer to the weight in the design going back to our hero bass file so in the hero text section we'll add another selector for h1 and we'll say font weight is 300 and font family has already been chosen in the global fast file everything is public stands i'm just going to close this animation this thing too all you do here is the want weight of 300 and then the color is this sort of dark blue so in our variables last file it's this dark blue variable and we'll say color dark blue and usually what i do for headline tags is i'm going to add a line of about one i'll just put it in the h1 tag line height one usually for headline tags title tags you want the line height to be around one maybe slightly bigger and then when you have body copy like paragraphs where you have like longer longer amounts of text then you want the line to be a bit greater than that like 1.3 or 1.5 depending on the design font size i think i said was 30. let's get the calculator out 30 divided by 16 is 1.875 1.875 grams much closer to what we want here i think maybe 30 might not be big enough actually that's 37 size 37 pixels going back here okay that looks much closer in size i think i need to increase the line height a little bit maybe 1.1 maybe 1.2 a little bit less let's do 1.15 just kind of meet in the middle there all right so let's copy these styles over so i think i said font size was 37 pixels i need to convert that 37 divided by 16 is 2.31 just round a little bit here and then line height was i think 1.15 all right and we need to center the text here it seems like most of the content on mobile is centered so i think maybe for now i'll just set text align center for the entire hero section hero text we can do there text align center and then we'll change it to left align for the desktop media query there we go so going back to the hero let's add the selector for the paragraph in the text hero text area and we'll say line height and i'm not sure if this is right yet but maybe 1.5 to start off and it's going to be inheriting the font size of 14 pixels facing looks okay and we also need to figure out some of the spacing under the headline to the paragraph so this is something like 24 and then under the paragraph above the button so maybe something like 37 or 36 so 24 space under the headline 36 space under the paragraph itself so h1 by default will inherit the styles in the browser which we don't necessarily want i want to basically take out this top margin that just gets added to the headline tags i usually try to add space between elements by adding margin to the bottom of things not to the top here headline tags so we'll say h1 h2 h3 margin top of zero there we go now i'm gonna go back here now it's all the way up to the top a lot of spacing in the hero text area itself but for the margin bottom right now it's about 30 and i think it was 24 so under the hero margin bottom 24 divided by 16 1.5 rams and then in the paragraph we're adding a margin bottom of i think was 36 pixels divided by 16 2.25 rims now looks a bit closer to our design eh so there's space between the paragraph and the button now which is pretty good i need to figure out the space above the headline and to the end of the thing so it actually looks pretty similar to 36 so 36 on the top on the bottom it's all the way up to 87. so i think what i want to do is ideally at least in my mind you would probably want the same amount of space at the top and bottom of each section so this space here should be the same amount of space as up to here 85 seems like a little bit but i think we'll do maybe 60 pixels as kind of like the wrapper that way i can put it in a helper class which means i can then just add the wrapper class to each section that i want to add that space and so we kind of make our styles a little bit more consistent and a little bit simpler all right so i said container padding left and padding right as you can see here container has has padding of 24 on the left and the right so i had padding top and bottom just for the nav and then i had added padding left and right for the container and that is equal to 24. let's do that first the left and the right spacing by adding that container class and then we'll move on to adding the top and bottom spacing so hero text i think maybe let's just see if we can do that there container and then go back to our website and now you can see here the hero text has this space and i didn't want to do it on the hero image because that one kind of goes to the full left and right let's see if i add a container then it kind of messes up the alignment that i had going okay so now i've got the hero text it has a padding on left and right which is good kind of matches what we have here with the image of the phone so now i'm going to think of a way of creating that top and bottom spacing with a helper class you know do i want to add it to the container or do i want to add it somewhere else because not everything wants to have that top and bottom padding i'd only use the container thing in the nav so i wonder if in the container i could add padding top and bottom of i think i said 60. let's think about this if i add it to the container that would be good for this because then it has a space on top and bottom and left and right but then it would also take effect in a nav and i don't want that let's just add it to the container and see where you know kind of breaks the design so 2.25 rims i'll do the same thing for bottom you might do the same thing as me but when i'm going around for adding padding or margin i always start from the top actually right should be next top right bottom and left is last let's just check on that now and see how this looks so going to our rules you can see header nav it has a padding top and bottom which i had set previously which is good if we scroll down to the container you can see that did have the padding top and padding bottom of 2.25 rem but that got overridden by the more specific rule of header nav this is because using the class of header within the child nav is more specific than the just the general class of container just curious what if i do header container okay so in that case that would be more specific probably because the first rule is using the class of header and then the element of nav whereas the class of header and class container class is more specific than the element itself that's why this would override the class header nav selector so it's almost like rock paper scissors class beats element selector but then id selector will be class selector it's just something that is good to know when you're working with css a lot looks like we have our container stuff all set go back to our mobile view and just kind of double check on that things look a little better right we're getting more spacing added we spacing on top and bottom and we have this see the buttons kind of going into the bottom padding i believe that's because i probably need to set display inline block because i think by default if i don't say anything it's just going to be an anchor tag is going to be display inline so making it display block will make it have to follow the the rules that i've set for padding and stuff so now you can see having set display in line block the button is now inside the content and not going into the padding wait and that's in the header i might need to move the button rolls out of the header sas file just because there's places outside of the header that are using the buttons let's do display inline block at the top so now this actually looks pretty good we got our hero section from mobile looks like everything is good in terms of spacing got our button going click the hover state's not working on that you see i have that hover state on the top let's see where those rules are coming from make sure that they get applied to all buttons so in the inspector i'm going to select that top header button click on the hover and if you check this hover box it'll sort of force the hover state so you can see which style rules are getting applied so it looks like yeah the hover is part of the header cta rules and i want that to be applied to any button so let's go into our header sas file that was under the cta so font size font small so i wonder if i need to make the font size and color in the button itself so i think what i'm going to do is i'm going to let me move this globals over here what i want to do is i'm going to take the font size from the cta the header ct button and put it in the global button rules let's just do it down here font size and then the color is white it's already set there so i don't really need that this can also also just be copied over so i'm just going to delete this header cta now all the styles that we need are going to apply to all buttons since we're saving it in the global sas file let's try this again now we can see the hero button has that nice little hover state you don't always have to write your styles perfectly the first time because a lot of things you just kind of figure out as you build the website there's always going to be going back and sort of correcting things and tweaking things depending on issues that come up as you're building out this website there's nothing at all wrong with going back and changing your work a little bit now that we have our mobile styles for the hero let's add the desktop styles going back to our design you can see that the hero was one column on mobile with the image first then the text on desktop it is two columns with the text on the left and the image on the right so we're going to do is add some flexbox to this what i want to do is in the hero selector add display flex to turn on flexbox but i only want this rule to take effect for desktop widths and up what i've done before was i created a mixins sas file and we have our breakpoint up mixin that i can then use to add the media query so we'll say include breakpoint dash up and in the parameters the size we want to hit we're going to focus on the large and up then i can move this rule into the breakpoint media query so just by adding this one rule let's look at our website and see how that looks for desktop okay so you can probably guess what's happening here the hero image doesn't have any height but we can see that flexbox is turned on there we go flex 1 and we'll add flex 1 to the hero text as well this is just to start off to kind of make both of them the same amount of space but you can see that let's add that flex of one in the desktop width to both the image and the text selectors so we'll say flex of one and we'll change this later on but we just kind of want to get things started now we can see that there is height because adding the flux of one that makes the child flex element be the same height across both of the flex child elements you notice in the design the image is on the right for the desktop but because in the market we added hero image first that's why it's on the left so that's another thing you can do in flexbox is you can adjust the order so we want the image to be second on desktop i think it's flex order it's just order and we want to be two so we want to be second and we want text to be first so order of one there we go second thing we need to do is look at the heights because this looks like it's not quite tall enough compared to the design so on desktop the hero image is about and we're not going to take into consideration this overhang here because the section itself ends just about down here the pixels tall there's a couple ways we can do that we can of course adjust the hero section itself to be 655 pixels tall or we can make the image 655 pixels tall and then we know that the text will sort of take the same height so hero image what happens if we say height of 655 pixels so now we can see that it is taking up more space which is what we want so let's just say minimum height for desktop and that's 655 divided by 16 to get 40 let's just say 41 rems it doesn't need to be perfectly exact but going back here so now it's taller we do want to center the text we want to center the content in the flexbox in the flexbox parent in the hero flexbox parent you can say align items enter this will automatically vertically align everything so now of course what we need to do is we need to make this hero image the height of the parent hero do that by in the desktop breakpoint say height is 100 so we'll take the height of the parent hmm let's see let's see let's see i bet it's because in flexbox it's kind of intelligent so it'll size things based on the content and because the image has no content it's really looking to the hero text element for the height so i think actually i do need to move the height from the hero parent selector to the hero image let's try this just say height okay so there we go this is a little more like what we're hoping it'll look like i'm gonna get rid of that magenta outline i don't really need that anymore now we're getting there right texas centered on the left we've got our image on the right the height is pretty much what we want now we need to make sure the image is correct because you remember we had two different ones here we go right now it's just loading the mobile one and get another media query and then for the image i'll say background intro probably desktop so now it's loading the desktop so let's check on the design again looks like the phone sort of starts here kind of toward the end of that blue little wavy section so we need to move that background over a little bit so we can see the end we'll adjust the background position because right now it's just centered i'm just testing it in the browser it's a little bit quicker that way horizontally i really want it to start from the left side of that background image so we'll say left center we'll center it vertically so this is actually a little bit the phone's a bit down from the top of that gray blue section so what happens if we do bottom of it left top oh actually i think we can leave it left center but what we want to do is adjust the mock-up so that they're down so we can do something like top 10 or something then at least it's going to be a little bit closer to being under there and we also looks like we want to move it over a little bit but let's just focus on this background stuff right now and copy over the style so that i don't forget what i did the background position left center for desktop for hero image image desktop new background image and now it's also going to have a new background position that looks pretty good we'll adjust how the phones are positioned over the background image after we make it the right width because right now this is 50 and then the image is 50 but in reality there's more s width given to the images so now we're going to do is going to go back into our hero section sas file and we're going to adjust the flex child properties the first one was image and the image one was a wider one so we'll set that flex of three then for the text it's going to be two so what these numbers mean is the available space in the parent gets allotted to each child it's kind of like a ratio image is going to get three parts and then the text is going to get two parts okay so it looks a little bit closer to the design right so there's more more space given for the image and then a little bit less space for the for the text now i think i also need to make sure that we're using that container to have a max width set because right now everything is just going across so this is 1240. oh yeah it's going all the way across so what i think i need to do is for the container helper class which i already added which is good i'm going to have to add a max width let me just show you what that will look like max width and i think it was 11 13 pixels and then we're going to have a margin of auto it'll center it so then anything with the container helper class is going to have a max width set and then it'll be centered if the width is larger than that going back to our code editor and i believe it's in our globals so max width is going to be i said 11 13 just according to the design maybe we'll round it down 11 10 and turn into around 69.375 grams and then margin of zero on top and bottom and then auto left and right and that will center the container now we go back to here so we can see the header now is centered nicely it's limited to that 11 110 and then we're going to add that container class to the hero as well this is going to be tricky because i use the container class in the hero text to add that padding for the mobile styles but i think if i just add the container class to the hero itself hopefully the padding on the left and right should stay from mobile let's just go back to mobile styles and make sure that we have the spacing that we wanted here there's two things we want to do we want to control the max width to have that container but then we also want to add padding around the sections what we could do is i could split it out into two different helper classes like a container class and then wrapper or some other generic word like that or i could add some modifiers to the container class where i could add padding and then add the that special modifier clasp sounds pretty good let's try that if you just have a container the most important thing i want to do is to have that max width in the auto margin keeping in mind that there are cases that i want to only add padding to one side or maybe i wanted to add to all sides except for the top what if i did something like adding modifier where it's container padding top and then if you have that it gets the padding top and i can do the same thing there we go so now we have the padding but there might be cases where i want the padding all the way around might be cases where i just want it maybe top and bottom or just left and right so i think i'll create maybe two more helper class modifiers where it's padding just top and bottom let's just say padding y that's kind of the vertical axis and then for that we'll add adding top and padding bottom and then if i want padding only on the left and right we'll save padding x for horizontal then we'll add padding adding right and adding left it looks like i'm taking up a lot of space by creating these extra classes but it'll save me time when i'm creating the markup later on because now let me show you what i can do for the the header i want padding all the way around so i can say maybe i should add one more helper class where it's p all and then this one is going to have everything all the options so now i know it says pal we can now add container p-a-l-l to the nav and then for the hero we can say container p x let's see the hero container actually didn't want any padding on this at all now it's like this change that okay hero container now this is good there's no padding here i need to add padding to the hero text so what i could do there is a container maybe padding all because it's in the text element here we go now we got container padding all this is good too because i'm not adding the max width rule to this element it won't hurt anything it won't break the side but it's just not really needed i'm pretty happy with this but then let's check out on desktop we got hero container which is fine and then the header if you look in the nav it has a container max width set and then it has the padding all the way around which is perfect all right i had to adjust the lighting there because as i was recording the last video someone was kind of going down so things were just getting darker and darker but now we should be all set so back in our hero section um i think the next thing we want to do is let's fix the hero text styles because i think in the design it is left aligned as opposed to being centered like it is here let's go into our hero styles and here we go so text text line center is what we set as a default mobile style styles that's kind of an example of mobile first styles where your mobile styles are the default styles without any media queries and then you add on your desktop and so on styles using a media query you how that looks and there we go but i wonder if the text styles are bigger on desktop perhaps oh yeah definitely bigger i think before it was maybe 37 is that right 37 yeah let's estimate what the desktop h1 font size is going to be 40 52 let's try 52 font medium well i guess we'll just add font maybe x large just in case we need something between 18 and 52. so 52 divided by 16 is 3.25 so now for the the hero text section h1 we want to add include breakpoint up large and font size is going to be that font x large so there we go and that looks more close to the design where the line breaks at next generation and then digital banking's on the next line let's just while we're at it double check our body copy here so it looks like it's a little bigger on desktop as well let's see how big this is going to be for desktop i think it's about maybe 20 maybe 19. let's just say 20. yes font oh boy medium maybe large for 20 pixels 20 divided by 16 is 1.25 that was for the body that's in the global sas file here we go so font size font small add or include break point up orange font size font large looks pretty good looks smaller on the design let's take that down to maybe you know let's just try 18 since i already have that variable saved that looks pretty close to the design i'm happy with that now i need to tackle the more tricky part which is this hero image section the problem with this is that we want the hero content to have that container right so the max width is set but for the hero image we actually want this to go outside of the container oh also the image goes all the way up to the top of the um header and actually oh my gosh it looks like because the headers white but then this hero background i thought it was white but it actually looks like a very very very light gray that's pretty subtle okay so they did have that already set which is great so i think i can just add it to the hero selector i'm assuming we want that for mobile as well background color very light gray okay so now it's very light gray but now you can see here we have this problem where the container is limiting the width so the gray's not going all the way out i think i still will have to add the container class to a child of the hero container or just of the hero rather so it will be something like this class equals container and that container will move the hero image and the hero text divs kind of like this now going back into our browser oops i need to add the flexbox stuff like flex oh this is a problem so the flex styles you want to put that in um hero container okay so now it looks better let's just double check that looks okay on mobile that looks okay okay so we'll go back to desktop now we got our very light gray background color and we need to figure out how to make this image going all the way to the right side so i wonder if it would make sense to make this position absolute on desktop because if it's positioned absolutely i can kind of position it and make it like right zero or whatever oh gosh got rid of the height right 100 will that fix it no oh yeah width is not working that's not right also i think i need to add the container to have shin relative there we go this is kind of a mess let me think about this again okay so this looks okay it's just the image that's not really working for us oh what if i do something like i know i'm already storing the mock-ups in the before element but what if for desktop i put the background background image svg into the after pseudo element so then i can absolutely position that but then the flex styles don't get messed up let's try that what have i got to lose right so we have this before class here add the after it's actually going to look quite similar to the before so i might just copy this and then just change the actual image so i think since i'm going to move the background image here i'm just going to comment it out here you know to kind of cover my cover my butt in case i need to go back to this so let's try this again okay um we got two background images as now slowing the mobile so what i actually need to do is background image none okay so now we just have the desktop thing now the znx stuff is a little messed up the reason the background image svg is on top of the mockups is because the background image is in the after pseudo element which is coming after the before pseudo element and how css works is if you don't sort of designate explicitly what the znx is it's going to put elements later on on top of elements before i guess i could fix this relatively easily by just switching the before and after so this will become four before it will come after and then the order doesn't really matter but just for the sake of being more clear i try to put the before pseudo element before the after suitable element now let's see that okay so now the phones are on top which is good so let's think about this the background is not big enough you can see it's much bigger in the design where it's like kind of off the page i guess part of the problem is the width has to be bigger than the width of the parent but what if we make the width bigger oh hey this is looking better because it looks like the phones are about the right size let's try one let's just go for 150 width of 150 not too bad just seems a lot taller the green parts going straight off the screen we can try to fix that a little bit later okay so we got this to be 150 width now the problem with this is that looks like it's actually starting under the careers fit between blog and career that's where the left edge of this image is and it's also going off so what if i do left of 20 and this is going off the screen which seems to be part of the design so just keep moving it off screen the phones are a little bit down so let's say top five percent that's not what i want so i think i need to do transform translate why oh shoot also background size is 93 let's try contain so that looks better because all the phones are visible was it what 93 percent first let's try to maybe match the size of the design so it's going up all the way it's getting cut off just above that 74 000 thing so 97 perhaps so it's actually looking pretty okay let's move it a little bit to the left that looks pretty good it looks like this needs to be down a little bit more so let's translate it down i'm not actually sure if translate is gonna be the way to go for this because it's getting cut off so the problem is i want where this gets cut off to like stick to the top i think i'm going to uncheck the transform because this looks pretty close to the design right you can see this is going right up to that top nav bar so i think i will maybe increase the size a little bit and then i think i just need to make the after pseudo element a little bit smaller let's just worry about the background image first i kind of just want to start over so let's reload to refresh all the styles okay so let's start with just the intro desktop svg the problem with this was it's not big enough right so what i did was i increased the width to 150 which looks good so let's put that in the code before we'll add a little break point here include breakpoint large width of 150 percent one style saved now the problem is is that it's not going down all the way to like the blue in the design is going all the way down the bottom and this is not weird let me actually add some outlines to both of these just so you can see a little bit what i'm doing okay so now i can see a little bit better hopefully okay why did that not thick or an error oh there's an error there is an error oh no mix and name breakpoint okay i was typing some wrong stuff in there breakpoint up now this magenta border should show up there we go you know what i'm just going to hide this right now i can just focus on the background thing okay so this needs to move down all the way down to the bottom of that hero let's just do 15. um okay if on big screens it's gonna see more i don't want it to like get cut off something like this or at least you can see that bottom edge okay see this is hard guys don't let anyone tell you it's easy let's just add a little more space the green is actually getting cut off whereas in the website it's you know not going all the way up i think i'm just not making it large enough now i need to move it a little bit okay so zero percent 83 that actually looks pretty good it's still a little bit taller so it actually is getting quite close which is great that's this looks pretty close i'm going to copy this and we'll add it to these styles no repeat is fine and then background position and background size change see this is looking closer and closer now i need to just kind of position the phones a lot of times when we're coding and building stuff we try to just do everything at once like i was trying to do like the background svg and also the phone mock-up at the same time but it's quicker in the long run for me to just focus on one thing at a time so what i did was i focused just on that background svg got that and then now i can work on positioning the phones i think you'll be more successful doing it that way because you aren't splitting your attention between two different things or three different things trying to figure them all out at once much easier when you just separate things out and just attack one problem at a time so now these phones actually look pretty close now of course it's not going all the way down under here into the next section so we do need to figure that out let's just get this to a hundred percent all right let's do contain oh let me think about this the reason that this keeps getting cut off i was doing background size 100 and then i was trying to do like top five percent or something to move it down but i don't want this get cut off right i think it's because the height is always going to be the same so what if i make the height taller than the parent which is the case right because you're looking at the design the phone starts at the top and it extends beyond so it's like 100 plus a little more so let's try height of 110 maybe maybe a little bit more than that so you can see now things are moving down which is good i'm really just overhanging a little bit it's down a little bit too much bring that top thing back maybe negative two but it's not going up here so i wonder if i need to increase the background size yeah so background size let's just kind of guess here 120 maybe so the width also needs to be greater than the hero image div because remember the hero image div is limited by the flexbox properties that's why it's only 637 whereas this one needs to be wider and taller than the parent so let's increase this as well because we're increasing the width the size of the background image is increasing too so we can take that down by decreasing the background size just a little bit of like kind of finagle things around so let's start trying to align this leftmost phone near that puzzle piece thing so we'll add a left property start with zero percent and we'll kind of increase it and then we can see it going up maybe there yeah maybe a little bit less it's the 22 perhaps i think we need to move it up a little bit because it looks like the corner of this phone is just getting into that green area so we'll move it up maybe that much it's pretty close i think and then let's see how if this is kind of the right look that we got here so yeah overhang just a little bit now of course we don't want this to go all up into the header i think actually we don't want the we want the top to always be zero i think this looks pretty good we do want to move this up a little bit right but i think we can maybe control that not with the element itself but with the background position because i said center bottom if i do center is zero percent and then i use that so then what this is doing is it's adjusting the background image within that div so if it if the background image goes over it's not going to show that overlap because it's just the background image it's not the div itself it can be kind of tricky the more time you spend doing this kind of stuff the more you'll sort of understand how things work and how different properties fit together and like what they do this looks pretty close background size should be a little bit more let's try 95 and then we'll kind of move it down as we need to i think i can actually erase this top property because it's just zero let's take this these properties oh yeah and the width and height properties too make sure we copied that over and then put them into our sas file oh wait this is for just desktop i don't want to delete the mobile styles there we go okay so we don't need this image mockups because it's the same as the mobile styles everything else is changing um we don't even know repeat let's um remove this border stuff because we don't don't want to be distracted by that now this is looking pretty close to the design i think if we increase the width you can see you know it is going to nicely stay flush that right edge we have the mobile design that looks i think that looks pretty close to what we had then for tablet it's looking a little weird right so i think one fix for that could be just to increase the size of the hero for for tablet hero image so min height is 17.5 which is 280 pixels if you want to know how many pixels something is if it's using another unit like rams or ems you can check in the computed that'll give you the sort of resulting pixel size so this one was min height of 280. obviously that's not quite tall enough for tablet so let's say min min height of maybe 400 pixels you don't want it to be too tall because you do want the whole hero to i think fit in the viewport when you're loading it in a tablet but maybe just a little bit shorter your image i have the background here and then the mock-ups ooh this was not an immediate query loading the desktop image that's not good the motherboard looks slightly strange here okay let's fix that first so in the before sudo element i need to move this into a media query looks like i just put it in the default styles let's think about this again but i changed things where i load the mockups in the after pseudo element and then the background images in the before suitable element for desktop but the background image for mobile is in the hero image element itself so i could actually move all these properties into desktop i think so i don't need the width i do need the height maybe i'll just comment things out just in case i need to bring it back okay so this still looks good on desktop and then on mobile it's only loading the mobile background because before we're loading like both let's go back to this section and we wanted to change that min height right let's try 400 pixels and then i wanted to try background position maybe center top for the mock-ups it's in the after so background position center up i feel like center bottom was better we'll leave it center bottom and then we're going to make the min height 400 pixels and we will convert that to rems for medium break point up medium 400 pixels divided by 16 is 25 rems for large is just height of 41. so here's the thing on mobile here it is on tablet and here it is on desktop and it takes a second to load that thing like that i don't know if i'm happy with this it's too big i think so maybe for medium we can do something like background size is something like this i see two percent so hero image after background size is 52 for medium medium background size 52 so we can remove this commented out thing oh what did i do um i might have put it in the wrong property oh the before suit element after suit element is what i need for the mock-ups move that down there this should work now okay that looks closer to what we had that is okay let's just tweak this tablet background image again so i think i want to make it background position bottom so let's try center bottom or center then at least it's sort of like closer to like what the mobile thing was center 60. so background position center 64. hero image on medium there we go okay i think this looks a little better right it is hard because i'd say 99 of the time if you're in any kind of design you know work situation or whatever the designer is usually only going to give you a mobile design and then desktop design which you can see it was the case here with front-end mentor so for tablet a lot of times it's kind of on you to figure out okay what combination of like mobile styles and desktop styles am i gonna do for mobile um for tablet i mean this is tablet and this is phone and then this is all right now before we start any actual coding we're of course going to look at the design and figure out how we're going to build this so we're going to be building the feature section which is this why choose easy bank section under the hero on desktop you can see that they're in four columns and then they stack on mobile to a single column for tablet i'm guessing i might do a two column layout now for this section i think what i'm going to do is build this using flexbox now there's a lot of cases in layouts where you can use either flexbox or css grid i do want to show you both so i think what i'm going to do is build this top section using flexbox and then for the next section under it the articles i'm going to use css grid for that in my opinion i think you could use either flexbox or grid for both of these sections and it would be completely fine let's get started writing the actual code so if we go into our code editor we'll go to our index.html file and let me just minimize the hero section since i don't need that anymore and we'll create a new section tag and we're going to name it feature okay or maybe i'll say features since there's multiple features just to make it a little bit more clear now the first thing we're going to add is the text above the four features it says why choose easy bank with some subtitle and that one is full width on desktop so it's kind of the same for desktop and mobile so let's add that here we'll give this an h2 tag and then we'll copy over the text why choose easy bank and under that i'm going to create a paragraph tag and i will copy the paragraph text over there okay so then under the intro text is going to be the feature grid since we're using flexbox the first thing we need to do is we need to create the parent element the parent flex element so i'll say div and i'll give it a class of feature feature underscore underscore grid and then in that parent flex element i'll create some more divs so div class feature maybe item so each feature is going to have this div feature item let's go back to the design really quick each feature has a icon image then it has a title and then it has sort of a description so i need to add markup for all those things the first thing i'll say is div class feature actually i don't think i need to type in div i just say dot feature underscore underscore let's say icon then we'll say feature underscore underscore title and then feature description there we go so now we can add the different icons that we need for the icons and then the text as well so for the icon let's see what we got in our images folder so these are the image files from front end mentor that we are adding into our project so i'm guessing it's one of these icon api etc in our code we can say image source and then add the source as the svg file let's copy in our text as well so what i'm doing here is i'm just building the first feature block just by itself i'm not copying this three times that i have all four the reason for that is i don't want to duplicate it until i know exactly the correct markup and styles that i'm going to use so i'm just using this first one as kind of the first test case let's see how that looks and i'm really just seeing to make sure the icon image is loading correctly which it is i haven't added any other styles so it doesn't really look like much right now so let's go back into our code editor and i think this markup should be okay but let's start adding these styles so in our app folder in our scss subfolder i'm probably going to create a new sas file called features or feature i haven't decided which one i want yet create new file underscore feature i'll just say feature and i'm going to move it over to the right so we can see everything yeah so i'll do features as the section tag and then for the feature grid itself we'll just use the feature name so feature so i'm going to add underscore underscore grid item icon title and description and this is using the bem or block element modifier approach to writing your sas styles i personally really like it just because it keeps everything in a compact file with just the styles related to these feature blocks the first thing we wanted to do was create a style for the feature grid to use flexbox let's go back to the design we do need flexbox on desktop to make those four columns for the features but on mobile everything is just in one column so this doesn't actually need to use flexbox i'm only going to turn on flexbox for desktop so i'm going to use that media query breakpoint mixin breakpoint up large and then i will turn on flexbox with display flex we're probably going to be adding some styles to the feature item for flex as well so kind of get that started here and let's just start out saying flex of one all four of these feature items will be on the same row i'm guessing this markup is probably fine so i'm going to take this and just duplicate it and that's using the ctrl d shortcut so i'm going to save this and i know it's all the same item right now but i just want to make sure the styles look okay okay looks like flexbox is not working for some reason and let's go back and see what happened so we have the correct rules but actually i didn't include the feature sas file in our main sas file so it's always important to remember that now let's look at the browser again okay things are next to each other which is good i just want to kind of add some spacing so we don't get distracted by those other the other text underneath let's go back into our section tag and i'm going to add some of those container classes that we created last time to add padding this container container p-a-l-l for padding all should help and i'll put it in the features section tag there we go so it's a little bit better and this is one benefit of using these utility classes like the container class and container padding classes that i created because instead of having to manually write styles saying padding top you know 2.25 rems etc i can simply create the utility class and then i can use it in any html element that i want and it'll automatically take the styles so it's good because it's easier when you're creating new markup also you don't have to write duplicate styles because i know these are all taking the same the same padding and of course we'll probably tweak this a bit later on but right now we're just trying to get the basics down one thing that we need to remember with flexbox is that flexbox does not automatically include gap spacing between flex child elements unlike css grid we have a gap property it's not included at least not right now i think firefox is working on this property but it's not universally used even though i'm using firefox in my browser i'm going to manually add spacing using probably the margin property for these flex child items let's look at the design again and sort of think about what we want to do we need to add some space between these flex items and it's hard to tell exactly how much the space is because the text is left aligned so you're not always going to have consistent spacing between items but we can make an educated guess here right i'm using this little rectangle that i created in adobe xd using the the rectangle tool up here and it's just an easy way for me to kind of eyeball how much space and how big things are this you know the space is going to be at least this much maybe more it says 29. in this case it's 46. i think we're gonna stick with the 29 so what i need to do is i need to add spacing between the flex items now you might think okay well the easiest way to do this is to simply add spacing i could add a margin right so that it would be between each of these items right and that would look fine on desktop but what happens when we're going to tablet and earlier i said i want for tablet to be two columns in that case if there's space between each item when you stack them two and then two underneath the second item in that flex row is going to have extra spacing on the right so it won't look very good so we need to figure out what we want to do about that so it doesn't look weird on tablet when you have less than two flex items in a row now we could handle this a couple ways so one way would be in our styles we could say for the flex child items at a margin right of 30 pixels or whatever but only for desktop and then for tablet we could say for every other item it would have that margin rights then you wouldn't have that spacing then you could do something like in each feature item you would add padding to the feature item and then the content would automatically have a certain amount of spacing so how that would look would be you want to add spacing so there's space between the items but instead of margin we're going to add padding because there's 30 pixels of width between items you'd add half of that to the side pattern for each item each item is going to have padding to make it more uniform of 15 pixels that would ensure that you'd have 30 pixels of space between each item i personally like using the padding method more just because there's always going to be space between each item no matter if it's space between items next to each other or items above and below each other then you don't need to worry as much about media queries so let's do that now going into our feature sas file in the feature item we are going to say padding and of course we need our calculator and it's 30 pixel of padding between items so we need to divide that by 2 and say 15 pixels divided by 16 to get ram so 0.9375 rims and i think i'm just going to add padding all around the items just because we know on tablet is going to be two rows and then a mobile they'll be stacked one under each other so we're not going to put this padding rule in a media query and then also just for some additional visibility we're going to add a little border just for testing right now let's see what we got so now you can see we have our four flex items and they have a line between them and there is some padding so they're nicely spaced this looks pretty good since we did have the flex just for desktop watch what happens when we get below the desktop breakpoint they go to one column and this is what we would want on mobile but for tablet we want them to be two columns so how do we do that well let's go back into our code editor and we're going to start working with the flex property more now in the feature item selector we want to add another mix in for the tablet styles so include breakpoint up medium actually there's another thing we need to do we need to make sure flexbox is used on tablet as well so we need to add that medium breakpoint turn on display flex for that and then i guess we can turn this off or not turn this off we can delete that rather since we don't need to use display flex just for desktop what this mixin is saying is that it's going to have display flex for medium widths and up that's hence the name breakpoint dash up so going back into our feature item selector in the tablet styles we need to tell each feature item to take up basically half the width right so instead of the desktop where it's just fitting everything into one row and instead of the mobile styles where everything is on its own row for tablet we want each item to take up half the row so we can do that with the flex property so the flex property is going to be 1 0 and then i'll say 50 now let me explain this the flex property itself is actually a shorthand property and it has three different flex properties that it includes so the first one is flex grow second one is flex shrink and the last one is flex basis now flex basis means the default width that the item is going to have in our case we want the feature item to take up half the width so we say flex spaces is 50 now for flex grow what does that mean well setting it to one as opposed to zero means that it's allowed to grow in order to fill the space so that's why for the large we set it to just flex one and this is kind of a shorthand way of saying flex one zero and then i believe either auto or zero percent but you can just say flex one to make the flex child item fit the available width with as many of the flex child items as exist so if you want all the items to be the same width and to be on the same row you would say flex of 1. so in our case what is happening here is that each feature item is going to take up half the width and it's going to be allowed to grow to fill up the space if it needs to although this is not strictly necessary so this should also work even if we said flex grow of zero the next one is flex shrink this basically means if the item's allowed to shrink less than the flex basis in order to fit on the row so let's just start off with zero zero fifty percent and i'm going to also need to turn on wrapping and flexbox because by default if you don't turn wrapping on it's going to try to fit all the child items in one row so flex wrap and set to wrap okay so now i think we have the styles we need to have the tablet styles look correct okay so here's the page let's see how it looks on tablet oh look at that so now it's taking up 50 starting from the medium break point then as we continue decreasing it'll go to one column for mobile so this general layout is pretty set now it's kind of doing everything we want to do in terms of the number of columns so i think this should be all set in terms of flexbox stuff now let's move on to making each of these items have the correct icon as well as the correct text okay so going down here the next one is simple budgeting okay so we got our text down now we need to make sure the icons are correct the second one is simple budgeting let's see the file names on images icon budgeting icon budgeting that's the name budgeting next section is fast onboarding so icon onboarding then we got open api so it's probably this one icon api see how it looks on the website and we have our different icons and the text which is great let's go back and style the text and also fix some of this spacing stuff here the first thing we're going to do is we want to make sure that the intro text has the correct styles so if we go up here it looks like the h2 tag is going to be smaller than the hero h1 tag so let's see let's kind of estimate how big this text is i'm going to say it's going to be about 37 maybe 36 pixels let's start adding some global text styles for the h tags so a little descriptor there so for h2 the font size was 36 pixels divided by 16 is 2.25 rims and i believe that's just for desktop because if we look at the design the ychu's easy bank text looks smaller on mobile so we're going to add some styles for mobile as well this is about 30. not too much different but you know different enough 1.875 rams 1.875 rams and then we'll add the font size 2.25 rams in our point let's say just for large so we're going to tell the tablet styles to use the oh oh i forgot again break point dash up there's a little error down there and we also need to look at the margin underneath so what i'm kind of looking at here is the two h2 tags that we're going to need on the page so why choose easybank title and the latest articles title because they look like they're the same size and if you look at the format of the page they should be h2 tags from an seo standpoint i'm going to measure the space under each of them and make sure it's the same and if it is and we can just add the same margin bottom about 36 it looks like this is a little bit more it's going to be 55. honestly i think that i might get a little bit away from the design and have them be the same amount of space let me just see how much space i put under the hero in that h1 tag it's not a huge deal but i just want to kind of be consistent with the spacing if i can and see what i've done already it looks like here the margin bottom is 1.5 grams which is if we look on our layout tab 24 pixels so for whatever reason there's more space under the h2 tag than the h1 but that's totally fine you know this is just kind of how the design is so i think i might use the 36 spacing 36 pixel spacing for both h2 tags and it'll just be slightly different from the design in this case so 36 margin bottom and since we know that the font size is also 36 we'll just say 2.25 rams and then there's probably going to be a slightly different mobile margin bottom let's see what this is here about 25. so 25 divided by 16. it's 1.5625 1.5625 rims now let's see how this is looking so far okay so there's a lot of spacing i mean i guess that's how it is now we obviously need to make sure the text looks correct as well so it's pretty similar to the h1 styles except that it is a different size so let's copy some of the h1 styles over oh where did i put those h1 styles i wonder if i put it in the hero sass file oh yeah hero text h1 i'm going to move these h1 styles from the hero sas file into the globals just because theoretically if there were other pages on this website they would probably want to use the same h1 styles as we have in the hero so let's do that so let's open up the hero sas file that we were working with last time and find the h1 selector so i'm just going to copy this entire thing here save the hero and then we're going to add the h1 styles up here in the globals that way everything is the same now another thing we can do to make our code a little bit more efficient is we know looking at the design that the h1 tag and the h2 tags are using the same font weight and probably line height as well so i'm going to copy all the styles from the h1 tag that i think are going to be reused in the h2 tag and maybe even the h3 tag into this compound selector for h1h2 and h3 tags so we're going to take this color is the same we'll leave the margin bottom there because it's different but the text styles themselves we can reuse them so i think actually font size should stay just in the h1 tag there we go so now we know that h1 h2 and h3 tags we want to have the same look and the only difference that they're going to have from each other is the font size and then the margin bottoms so this kind of just makes your styles a bit more efficient let's go back to our site and now we can see that the h2 tag does have the same general look it's obviously a bit smaller okay going back to our design let's see what else we need to do let's check out the body copy styles and again it looks like we can reuse some of the styles that we did last time where the body copy looks the same as in the hero section itself so let's see where those styles came from and where i saved them so again it's hero text p line height 1.5 margin bottom is set so the font size itself comes from the body selector which is good it's the default font size what i think i can do is maybe assume again that the paragraph used in the hero is probably going to be similar styles to paragraphs used elsewhere in the site so i'm going to copy those styles over as well into our globals so we'll put this here under the headline tag styles and we'll save the hero one as well and check back on the site looks pretty similar i'm actually not sure if it looked different from before but that's okay now let's see what we have compare it back to the design and see what differences there might be now one thing i've noticed immediately is that the text the paragraph text in this section doesn't go all the way across it ends whereas right now it's going all the way across so i need to figure out how wide the paragraph is going to take and how i want to style that what i could do is i could add maybe a max width of this intro section it looks like it's going a little bit more than half because we can assume that the halfway mark of the page is down here and another trick that i use sometimes is you click on the artboard in adobe xd you go down here to the grid layout the grid section if you check this box it's going to superimpose columns and this is really handy for designers especially but it's also handy for developers because you can count how many columns need to be for each section and i think this should be yes a 12 column layout and of course like this is superimposed on a jpeg of the actual design so i may have to mess with this a little bit but i'm really just using this to see where the halfway point is so the halfway point is this white stripe right down there and so it looks like the paragraph is actually going beyond that halfway mark but doesn't seem to align with anything else what i might do is simply set this intro section to be 50 width or maybe 55 or 60 let's go back into our index.html and go into the intro section and i just kind of put the h2 and paragraph tags as direct children of the section tag so what i might do here is create a child div so class of feature maybe intro oops i'm running css styles intro and then press enter kind of hard to fight with the muscle memory okay there we go so now we have a feature intro this new selector that we're going to add into our features sass file so i usually try to order my selectors in the same order as they exist in the html markup the feature intro comes before the feature grid so we will add it above the feature grid so feature intro and i'm assuming that the 55 width is only going to be for desktop and for mobile it needs to go all the way across so we'll add the break point up large and we'll say with 55 and in this case for tablet it'll go all the way across but i think that's okay we can always tweak it later with a medium break point if we need to but let's load the site and see how it looks nice let's see exactly how long how far across that 55 goes so it goes about here kind of close to the design right we can also look at where the line break is so the line break here is that financial hub financial hub's on the second line so we could just maybe increase the percentage so financial hub fits it looks like 60 might be more accurate so we'll change this width property to 60 all right hey we're doing pretty good here now the next thing we want to do now that we've styled the intro section is style the cards first thing i'm going to look at is how much spacing there's between the intro and the cards themselves okay so there's quite a bit of space between the intro and the cards themselves now keeping in mind that we did add that padding i'm just going to leave a little extra space to kind of take up the space of the padding i added so it looks like it's about maybe 60 pixels tall where do we want to add the spacing let's go back to our site and check it out we could add it in the paragraph but let's say the client wanted to add another paragraph tag or multiple paragraphs into this section obviously this is a hypothetical client since this is just a demo website but this is kind of what happens in the real world you know you want to try to write your styles in a way that is future proof as much as possible so you need to consider you know what happens if they want to add more copy or less copy or you know more feature items or less feature items all these things could change in the future because you know these websites are supposed to be representations of real companies and things like that in terms of the spacing i'm probably going to add padding bottom padding to the feature intro section or maybe margin bottom to add space between that and the grid so it looks like there's some space already from the paragraph tag but we'll add some margin bottom to feature intro going to the feature intro the margin bottom and i think i said it was 60 pixels so divided by 16 3.75 rams so margin bottom 3.75 rims see how that looks all right so now there's more spacing which is awesome an interesting thing i don't know if you notice this but you can see in the developer tools the margin bottom is highlighted in yellow and that's the 60 pixels you can see that the paragraph also has margin bottom even though there's margin bottom in both the paragraph and the feature intro they don't combine together and like add to be you know whatever 2.25 rams plus 3.75 rams so i think we can consider this intro section actually done one thing i want to check really quickly is the mobile styles for that looks like it is 36 pixels from mobile between the intro and the grid okay it's less it's actually the same okay so it's still about 60 pixels of space between intro and grid so what i'm gonna do is move that margin bottom property into the default styles which are mobile styles in our case so now if we look at the site it is the same amount of space at the bottom 60 pixels no matter what your viewport is all right the next thing we want to do is we want to style these feature cards so going back to the design we can see that the icons have some space under them and we need to also style the text as well so i'll start with the icon spacing and the space between the icon and the text is about 44 pixels go into our code and the feature underscore underscore icon is where we're going to be adding this style rule and we want to say margin bottom 44 divided by 16 is 2.75 rims so now we got our space i also want to make sure the spacing is the same or see if the spacing is the same so it looks like there's a bit less spacing for mobile let's say 30 pixels from mobile so again we will add the default styles for mobile 30 divided by 16 is 1.875 and then we'll add the 2.75 rams in our in our break point up large media query there we go okay so we got our spacing cool let me also double check and see if the icon image is the same or different looks like they're the same just double check that to be sure about 74 and same for desktop so i think we are good with this they're staying the same between mobile and desktop let me actually add some spacing so that this can kind of scroll it more so i'm not blocking it with the image of myself i'm just going to add some a min height to our body selector at to the bottom here we'll say min height is maybe 200 viewport height see if that helps in terms of the scrolling yeah so now i can scroll down a little bit just a tiny bit more 300. now i can position it in the kind of a better place on the screen for all of you now let's do the feature block title looks like the font style are similar to our headline font styles obviously it's a much smaller font size let's say about 24 pixels now going back to our code it was feature underscore underscore title so in our feature sas file we'll say actually let's check the mobile styles first there's about 24 pixels big for the desktop and it looks a bit smaller for mobile it's more like 20 so 20 for mobile 24 for desktop so font size 20 it's 1.25 grams and then we'll add our mix in for the break point up large font size is 24 divided by 16 is 1.5 grams and we need to copy the headline styles that we had used from the globals so i'm just going to copy font weight 300 1.15 color dark blue and we'll add them over there for textiles i sort of follow this order i do font size first then font weight then line height then color and then i'll do line height under font size because they're sort of related let's check out our styles all right looks pretty good now let's add the space under the feature title so for desktop it's about 36 maybe 34. and for mobile it is a little bit smaller again 26. so let's say 24 and 34. this is going to be the featured title selector we'll add a margin bottom property 24 1.5 grams and then the margin bottom for large was 34 divided by 16 2.125 and checking back on the site looks good next thing is to style the paragraph the feature description styles so it looks like on mobile 15 let's say 16 just because and then for desktop looks like it might be the same actually for desktop and mobile yeah i think they're actually the same so 16 pixels for both this is for the feature description so font size and i know that 16 pixels is one rim so one rim it looks like we need more line height because there's not enough spacing between the lines fine height let's say 1.5 perhaps a start font looks a little smaller on the design than in the website maybe 14 pixels instead of 16. that seem a little closer i think that's closer this will be 14 pixels and then 1.5 line height so 14 divided by 16 is 0.875 rams and then line height 1.5 there we go okay looks good i think maybe we can take away the that magenta border that we'd added and then this should look pretty close to how it should look on the design okay one thing that i think i forgot is i need to add that gray background to this section okay let's see what color is this in our variables so the very light gray was the hero background maybe the light grayish blue see if that's correct so i'm going to add it to the let's see i want to add it into the features section i honestly might just rename this to be feature singular so it matches you know the feature underscore underscore classes as well background color and we'll paste in the light grayish blue does that seem right that seems pretty close now of course we need to add some more spacing here because yeah it's not quite enough looks like it's about 110 on top and then a little bit less on the bottom 90 on the bottom let me go double check what i'd added to that container class that we'd created last time so i think i said here we go padding top 2.25 rams times 16 to get the pixels 36 pixels so this is much more spacing for this section i wonder if i just hadn't added enough yeah padding to this i might just try to keep them all the same around 90 or so and then i'll add more for this top thing here i wonder why i'd added only 36 pixels of padding i wonder if that's because of the mobile style that i was looking at so i think i'm going to do is just increase the padding basically all around for that container class this will do 70 for mobile we'll do 96 for desktop and then we'll see if this breaks anything we're doing 70 for mobile so padding top and bottom should be 4.375 grams and we want that to be the same on the bottom as well and for now we'll leave the padding left and right yeah so we'll just any any case that we had padding top and bottom we're going to increase it to 4.375 rams for mobile and then for desktop so include break point up large i'm going to say padding top and that was 96 i think i said so 96 divided by 16 six rims this will be for both padding top and padding bottom this one just has padding tops we'll delete that and this just has padding bottom so we'll delete the padding top okay so for now we'll leave padding left and padding right check out our website see if things look better and if i broke anything so you can see there is more spacing here um it's good 70 on top and bottom looks decent enough go to desktop but in terms of spacing the container the nav looks okay which is good and then here i need to make sure this goes all the way across but the top and bottom padding that looks pretty good let's fix this thing here basically i need to make the container p-a-l-l a child of the section itself so that it doesn't get limited in width so i'm going to create a new div call it feature content perhaps and then i'm going to move all the html into this child div then i will move the container out of here and into the feature content and this will ensure that the feature section itself will have that light gray background and it won't be limited in terms of width it'll go all the way to the left and to the right you can see that's happening and then in the feature content that's where you get your max width set for the content inside the light gray so this looks pretty good go to the design and do just an eyeball and see if anything looks off or if this looks pretty close and this looks pretty close i'm pretty happy with that i think there might be a little too much spacing under here under the feature title yeah that's too much so it should be about 32 or so how much space do we actually have here 34. i think i need to just decrease this a little bit so let's say margin bottom 30 pixels margin bottom 30 pixels still looks like a little bit too much spacing yeah that's a lot less even though this is this does seem correct sometimes i just added spacing from the the text afterwards so you can see here there's a tiny little bit of spacing until the text starts so this is probably what i need to account for so let's try maybe down to 20 even maybe even a tiny bit more 22 maybe 24. i think that's close enough so we'll change the feature title margin bottom to 24 pixels going back to our feature sas file margin bottom needs to be 24 1.5 rems and then let's check it again for mobile because that will also probably need to be decreased so it's a little bit less yeah i think i'm just gonna have to try to eyeball it again margin bottom start with maybe 20 pixels let's try it with 16 pixels we'll do 16 pixels for margin bottom on mobiles and 16 pixels is one ram that looks much better let's go back to desktop and then compare it again to the design okay spacing looks pretty good and let's go to mobile see how that looks i guess we can use the emulator too okay so on the mobile everything is center aligned including the icon so let's do that so maybe in feature i'll say text align center for the default mobile styles and then let's start this with medium since it's two columns for the features for medium so we want we probably want those to be left aligned text align left it's not centered um let's check back here hmm why is that rule not working there's no error in the sas and i cannot see oh wait oh no i did this again break point up okay now it should be good okay now yeah text line left is showing up so now i'm going back to mobile that looks good and then tablet width is around here so this is going to be you can see two columns everything's left aligned desktop it's four columns and everything's left aligned all right yeah this looks pretty good looks close to the design okay so i think we can consider the feature block to be complete all right let's build out the latest articles section now for the use before we do any actual coding we're going to look at the design which i have open here in adobe xd and let's go down to that article section you can see that it is four columns on desktop and one column on mobile and we'll probably do two columns for tablet now if you saw the previous video where we built out this featured section just above it it has basically the same layout they're both four columns on desktop one column on mobile and i'd mentioned last time that while we're going to build the features section using flexbox for the article section we're going to use css grid so that's what we're going to do today we're going to build out this four column layout using css grid as opposed to flexbox and honestly i think that you could use either flexbox or grid for both of these sections i don't think either one of them has a super strong advantage over the other so this is one of those cases where you can just pick whichever you are more comfortable with all right so now that we have looked at the design we can just start getting all right so now that we've looked all right now that we've looked at the design let's start getting into the code so we're going to go into vs code our code editor and if you've been following along you might notice that my color scheme are slightly different i've been trying to tweak this customization in bs code for a bit and hopefully when everything's done i will be able to release it as an actual theme so you can all download it for free but for now it's still a work in progress okay now to get started we are going to look at the index.html and we're going to add our html markup so the first thing we're going to do is similar to the other sections we're going to add a section tag so we'll say section and we'll give it a class of maybe articles i know that i ended up making the section for the feature section feature singular as opposed to plural but i'm going to try i think maybe a slightly different approach for the articles now the section tag is going to be what's going to be full width on desktop inside the section tag we're going to add a child element which has the container class that we've been using and if we look at the features section again we see there's a feature underscore underscore content with some container classes and we're going to use those same ones down in the article section so let's add that now so add a div just by doing that dot for the class shortcut and we'll say article singular underscore underscore let's say content and we'll probably give it the same container actually container dot container dash dash p-a-l which is the class for padding all meaning it'll add the padding all the way around on each of the four sides and in the article content i think what we want to do is um let's see what i did for the previous thing okay yes so we're using h2 tag for the intro section and then we'll add probably the same article grid type of thing so we'll say class article actually let me look at the design so there's actually no like intro paragraph like the feature section so it just has that h2 so i think i can get away with just writing h2 and then we'll copy the text over latest articles then under the h2 we'll add another div and we'll say article grid and then in the article grid that's going to be our css grid parent element so then we'll add the child elements we'll say article i like to just say item for grid grid items whether it's flexbox or css grid so each each article is going to have a wrapper of article item now going back to the design again we can see that in each article item there's an image on top and then there is some sort of text content below that so you can kind of break this up into two different sections so what i'm going to do is say in the article item we'll say article underscore underscore image and then below that we'll do article underscore underscore and maybe i'll say text and that's going to contain all the text in the article now the reason i'm going the reason i'm wrapping all the text in one div article text is because of this padding all the way around so if i didn't add the article text i would have to basically add the left and right padding to each individual text element and then i would have to add the top and bottom padding or margin whichever one you want to the first and last element so i i personally think in this case it's just simpler to wrap all the text in one div element and then add a padding all the way around it's just a little bit less coding involved okay so we got the article image and when you have an image you always have to ask yourself do i want the choosing and when you have an image you always have to ask yourself all right do i want to use an image tag or do i want to use a background image and one way you can sort of help figure out which approach is better is if we look at the design let's let's take this dollar image and maybe i'll just delete this i don't really need that rectangle so if we look at the dollar image you can see that it's the same image of course but the cropping is a little bit different between desktop and mobile so here it's more squarish and if you look at the mobile you can see that the right edge goes just out a little bit farther it kind of cuts off on desktop right at the corner of that one bill the same goes for the left side you can see that cuts off here and it's a little bit longer on the left side as well so that kind of tells me that i probably want to use a background image for the image element that way you can crop it to different sizes and you're not going to you know adjust the size of the image or make it look kind of weird so in that case for the article image there's not going to be any actual content but i will add the background image using background image url and then we need to add the url of course of the image so if we go into our images folder it's going to be one of these it's probably going to be one of these image files here so this one's going to be image currency jpeg so we'll add that in so we'll start off with slash images and then image dash currency and i hope that is that right yeah the images folder is not in the app folder but it's in its own folder image image currency.jpg okay then let's add the markup for the text so if you look at the text item there is first an author section then there's a title of the blog post then there's a either a description or a summary um you know you can call this anything you want so let's write the markup this is going to be author title and then description so i'll say article author title description okay and then we'll just kind of copy those over as well there is an ellipsis at the end of that description just because it's a shortened blurb so we'll just copy over that ellipsis symbol as well okay now let me add a space here just to kind of differentiate the item from the grid itself there we go there we go and let's see you know there's one more thing that we probably want to do and that is when you have a grid like this if it's for blog posts or whatever it's usually going to be a link and there's no you know read more link in the design so what i'm going to do is make the entire item a an anchor link and that's usually i think the preferred way of doing it because even if you hover over the image you'd like you'd like to be able to click over to the blog post itself anywhere you click on this section so i think what i can do is article item i'm going to make that an anchor link and then we'll add href and of course it's not going anywhere so we'll just say pound okay so i think we got all the markup that we need i'm just going to do the styles just for this first article item just to make sure everything's correct then once everything's been kind of set and we know that it's correct then once we figure out all the styles for this we can copy it for the additional three items so to start off with the styles in our scss folder i'm going to create a new file i'll call it article.scss and of course since we created a new sas file we need to import it so we'll say import article all right so we should be adding the article sas file to the watch now let me scoot this over to the other side so the first thing i want to do is remember we made the section tag have a class of articles so i'll add some styles for that just in case we need it and then we'll add article so we'll add content grid item so i'm just you know i'm just copying all the classes i created in the next html file over to the sas file so image text uh oops author title and description all righty and i may delete this if we don't end up writing any styles for it but i think we'll be okay all right going back to the design we need to figure out what the background color of this is and it's very faint but it seems like the blog posts themselves are white and then this background is a very light gray so it's probably the same as what we had in the hero section so that's going to be a style rule for the articles section tag so background color and if we look in our variable sas file i'm going to be this very light gray color here so we'll do that and then see how that looks there we go so here's what we got so far we can see that because i did make the article item an anchor link it's has that purple link text and it's turning into the the hand when you hover over it but it does look like the background color is correct so i think that is just fine for now okay so the next thing we want to do is let's get the css grid stuff working so for article grid i want to set let's just say display grid for all widths even mobile just to just to do it that way okay now the first thing i'm going to do is i'm going to start writing the styles for css grid now even though mobile is just one column i think i'm still going to do display grid for mobile and then also tablet and desktop just to see if that's you know a good way of approaching this so we'll turn on grid with display grid now unlike flexbox if you write display grid just by itself with no other styles nothing is going to visibly happen and that is because for grid you need to not only set grid display grid but you also need to start creating your template this is one of the core differences between flexbox and grid flexbox is more of a content first approach so once you turn on flexbox for the flex parent it's going to just try to fit all the flex child items on the same row by default for grid you need to set the template meaning you need to set up the number and the size of the columns and or rows in in the layout so for our layout it's a four column layout for desktop two column tablet one column mobile so since mobile is just one column we'll say grid template columns and we just want one column so we'll say one fr and fr is a fractional unit it's kind of a general ratio unit um used for css grid meaning it will take up as much space as possible and if there's more than one child item in the column or the row it'll sort of divide the space up between those child items depending on the number so 104 is kind of the default like you know auto kind of width so mobile just has one column now let's add the grid template for tablet so we'll use our mixin that we wrote breakpoint dash up and for medium widths we're going to say grid and you can actually um abbreviate if you just type in gtc it has this really cool intellisense and it'll automatically detect so for tablet we want two columns so we're going to use the repeat function this is super handy for grid so repeat takes two parameters the first one is going to be how many columns you want to use we want two so you say two comma and then again we'll say one fr so this will basically create a layout that has two columns and they will each be the same with one fractional unit lastly we'll do desktop styles so break point up large and then again we'll say gtc and instead of two we'll say four so four comma one f r so this is just your sort of standard run-of-the-mill grid where you have a multi-column layout for different and the number of changes based on your device width so let's see what this looks like right now okay oh this is interesting so instead of taking up the full width you can see that this article is taking up only part of the width that's because we set four columns in that grid template so if we look at article grid i'm using firefox and they have a really helpful tool if you click on the layout tab and we expand grid so it detects the that this is a grid item because you know has display grid so if i check this box it's actually going to create lines it'll number the different columns and rows in the template that we made so remember we just created a four column layout in this grid thing so it's showing us the four columns in the grid template so if we added more items it would populate this grid so let's actually do that now i'm guessing the markup's probably okay so we'll take this we'll duplicate it one two three times save and go back to our browser so now we can see that the four columns are actually working which is pretty cool so let's let's see how this looks on tablet so we'll reduce the width and it went to two columns and then one column for mobile so yeah this is a pretty you know with just a few rules we've already sort of created our grid layout which is pretty cool so for css grid the approach that we used is a very sort of responsive design approach meaning we're using media queries to change the grid template and change the number of columns there are some there is another approach you can use with grid that is more intrinsic design meaning you don't have to use all these media queries because there are some built-in properties that can sort of figure out and adjust how the layout actually looks depending on the width of your browser so i'm going to show you one of those now and then i'll explain why i actually prefer this method with the media queries so let us let's just comment out everything except display grid so control k control c we'll comment that out in vs code and what you could do is for your grid template columns property we can use something called autofit and then also another function called min max and i'll explain what each of those is once we write out this rule so if you remembered we for the desktop oh wait i think i have an error here um no it should be okay i think okay so if you look down in the desktop rule we had previously it said grid template columns and then use the repeat function we're going to do something similar here so we're going to say repeat but instead of writing an actual number like 4 2 we're going to say auto fit and this is a property that sort of lets grid decide how many columns are going to actually be on the website which is pretty cool right you don't have to say two or four it'll sort of decide for you and then for the width of each column we're going to use min max so instead of saying you know i want this column to be 200 pixels wide or 1fr or 2frs we can sort of again give the grid itself the basically the control over how wide things will be as well as how many columns are going to be on the row so minmax as the name kind of sounds you give it a minimum and then you give it a maximum width in the parameters so the minimum width we're going to say let's go back to the design really quick and this square so this is about 200 pixels wide so we'll say that for the minimum we'll say about 200 pixels maybe a little wider let's say to 230 perhaps and usually i should convert that to rem so let's do that open the calculator and 230 divided by 16 is 14.375 so 14.375 rams and then the maximum we'll say 1fr right so this will basically give the grid column either a width of you know 230 pixels 14 rems minimum or it could be all the way up to 1fr so it could theoretically take up the entire space of the row and this is actually all you need so let's kind of see what that does to our grid in the browser so it looks the same on desktop there's four items and they're all in the same row and each item is currently 265 pixels so that is above that is between the min min width of 230 pixels and obviously one fr could be 100 percent let's see what happens when we take the browser with and we slowly reduce it okay still four okay so now you can see it broke to three columns and then there's three items on one row and then one item by itself on the second row we'll just kind of keep going here so now it's broken into two columns and then for mobile it is one column and this is actually really this is one of the i think this is one of the great parts of grid where with simply one rule in the in the grid parent grid template columns using repeat auto fit and min max it created this one column two column three column up to four column layout so you know this is pretty cool now you know why did i mention that i'm not going to use this approach well even though it is awesome that we can write this rule and create a multi-column layout without using any media queries i know that in real life if the design has four items and they want it in one row for desktop they may not be super happy when you have a layout like this where it looks uneven and let me show you let me kind of highlight that by hiding the grid lines so we'll just pretend that there's lines around each of them let's do that uh particle item border one pixel solid red so around each of these items now is the the um throughout each of these items there's a line now so you know this looks a bit uneven right so this looks a little bit uneven i think most people if they want to show four items they're not going to want it to look like this it looks better when it's even and there's just two two and two and of course it's fine when it's on mobile and it's just one column but this in-between state is not really desirable i would say and unfortunately that's just kind of the way that's kind of what happens when you let grid control you know the number of columns using autofit and then the width using the min max function so even though there's more rules for the sake of you know kind of maintaining control over that grid i'm going to go back to the media query thing um and for auto fit i don't know if i explained that fully but you go back to turning on the grid lines and then turning off the border so for autofit what happens is it will fit the items as well as it can in the template and the the other option instead of autofit is you could say auto fill and they're very similar but not quite the same let's see if we can see the difference here it doesn't seem to be different for us but let me just show you um there's a really good article on css tricks for auto fit auto phil okay yeah sarah sweden i'm sure this great article comparing what autofit and autofill look like so in this example you can see autofill will create the template but it's not going actually all the way across whereas auto fit will kind of try to fit the content to the row and then if you go down a little bit more i believe there's an animated example here so if you look at this the top one's auto fill so you can see there's actually a blank column when you keep extending it out whereas autofit will you know fit the existing content to the row so that's one difference between autofill and autofit again you know maybe it's you know not maybe it's best practice to use this kind of so that's autofill and autofit um again going back to our own website i'm going to go back to the media queries just because i like having that extra layer of control but this is also an option and it can definitely come in handy um in in other circumstances let's go back and we will delete this and then we will uncomment control k control u there we go we'll save go back to our site and we're back here there we go browser is a little slow sometimes so two columns on tablet and one column on mobile and it goes back to four columns for desktop so if that helps just kind of explaining sort of the basic this is a fairly basic css grid layout i'm using the grid template columns property and then you can designate how many columns you want with the repeat function and also how what size each of the columns are let's get started now actually styling the content in the articles themselves all right now let's start styling the cards themselves so we'll probably start with the image up here and then we'll move on to the text elements so using our little rectangle here see that it's about 200 pixels tall so let's go into our code editor and add those styles in so this is going to be for the article image element so down here article image we'll say height of 200 pixels and we do need to use our calculator for that so 200 divided by 16 is 12.5 rams and then since these are also background images let's add some of those background properties so background size cover so this will ensure that it will take up the entire div then background repeat and i pretty much always turn repeat off and then the other one light and then background position center center to make sure it's centered i think those should be good for now so let's check the site and see how that looks sweet so the images are loading up um looks like we forgot to add a gap in our grid parent properties let's do that so if we go back up to the article grid we'll add a gap of maybe 20 pixels and 20 divided by 16 and 1.25 grams so that looks pretty good um let's actually compare that with the design i think we got might be a little bit more than that just more like 30 pixels so 30 divided by 16 is 1.875 okay and i don't know if you notice but down here in the terminal for some reason it always throws an error when you start adding the gap property i think there's just maybe a bug in the live sas extension but if we re-watch it then everything's fine and there's no errors okay so that looks pretty good um let's see what else do we need to do here did i do the background i think i did do the background for the whole section let's just turn off the lines for now um okay so after the image we have the text here and i'm going to make that a white background color since you can see in the design this is what the text area has so let's do that and let's also add some padding so let's see here looks like it's about 30 so let's see if it's the same on the bottom looks like it's a bit less on the bottom but i might just make it 30 all the way around i don't see what the horizontal padding is looks like it's less it's about 25 on the sides and then 30 on top and bottom and let's see what we got on mobile as well looks like it might be a little bit more on mobile so the side padding on mobile is 30 i guess around 30. and then let's see what the bottom padding is 44 on the bottom and then it looks like it's less on the top 30. it looks like for i might just make them all the same 30 all the way around well i guess on mobile should have a little bit more space on the bottom let's see if it's the same yeah it looks like all these have much bigger bottom padding that's fine we'll do maybe 40. so 40 on the bottom and then the other sides will be 30 for mobile and then on desktop i believe it was 30 on top and bottom and then 25 on the sides is that right okay around 30 for the top and then 20 yeah we'll do 25 okay this is going to be the article item element we'll do the mobile padding first so padding oh caps lock padding so it's going to be 30 divided by 16 and 1.875 rems and then we'll do the same thing for everything except the bottom and then the bottom is going to be i think did i say 40 room or 40 pixels 2.5 grams there we go then we're going to do for i guess tablet medium and desktop we'll say padding and i think we said 30 on top and bottom and then 25 on the sides 25 divided by 16 1.5625 there we go okay let's see what we got um oh i know why the padding shouldn't be on the article item it should be on the article text so just for the text that's okay let's fix that move the padding down there there we go that's much better okay we also need to add a background color to the article text color and i think white made a variable for that yeah okay there we go so i mean it's a little hard to see since it's a very light gray in the background but that is what the styles are and i believe there's also a border radius around the whole card as you can see the the corners are slightly rounded all the way around so let's add a border radius um it doesn't look like it's very round so i might do something like 5 pixels so 5 divided by 16 0.3125 and we'll just do it all the way around and one thing you need to keep in mind with border radius is that sometimes in order for the border radius to actually show up and sort of cut those corners you need to add over um overflow yeah overflow hidden so that'll make sure that the actual rounded corners will show up cool that looks pretty good okay so let's do the text starting from the top just working our way down so the first part of this card text is the author section and this looks like it's quite small let's say yeah it's probably around 10 i would say 10 pixels tall so let's do that so here we go author font size it's going to be 10 divided by 16. 0.625 i'm assuming it's going to be the same for both mobile and tablet and desktop now let's move on to the title it looks like it's a darker gray and is bigger so about maybe 17 or 16. let's do 17. so font size 17 divided by 16 1.0625 and then for the description looks like it's bigger than 10 pixels since it's bigger than the author but not too much it's about 13. that's a bit small 13 divided by 16 is 0.8125 rims okay now let's see how that looks looks pretty good now of course we do need to do the colors right now since i made the whole article item and anchor tag it has that purple link color so we'll adjust those but size wise that looks fairly good we might need to tweak the line height a little bit but let's do those font colors so it looks like the author and the description are the regular gray that you know we saw kind of up here and the title is the same darker gray as the title up there let's do that so since we have both author and description the same color what i might do to make it slightly more efficient is in the article text i'm going to add the color property there and then i will make the different darker gray color for just the article title so if we go into our variables that sort of medium gray is probably this grayish blue and then the darker gray is probably this dark blue color or the title there we go okay okay looking much closer so let's now work with the spacing so we need to add some space between the elements and then we'll also adjust the line height on that title looks like it's a little bit too much but first spacing okay below the author is 16 pixels of spacing that's one room so we'll add a margin bottom of one rem to the author then to the title there's some space under that as well um looks like it's a bit less but honestly i'm just going to say 16 as well i think i'm being lazy and then let's see what else we need to do we need to adjust the line height of the title and also we'll check the line height of the description as well so right now seems like there's a little too much line height right here so let's try something like line height and i usually like to put the line height property under the font size property since they're kind of related so 1.15 maybe and i'm just kind of guessing here one like a line height of one means it's the same as the font size 1.15 means it's just just a little bit taller than what the font size is okay so that looks closer which is good um it seems pretty good maybe just tiny a little bit more so maybe 1.2 so 1.2 okay i think that's fairly close enough let's check out the line height for the description now i think that's actually pretty close yeah i think that's good enough and it looks like the spacing that we have between the elements is okay as well i feel like there's a bit less spacing here so maybe we should make that a little bit smaller so article title go to the rules tab and right now i think i had set a margin bottom of 16 pixels or one rim so let's adjust this so 16 pixels is a little too big so let's try 14 looks much closer on the design so maybe 10 pixels looks like it might be less than that actually maybe eight pixels okay let's do eight i feel like there's less spacing under the author as well i'll just copy this over first margin volume of 8 pixels article title 8 divided by 16 is 0.5 grams because i could have done the math because 16 divided by 2 is 8 anyway and the author well what happens if we just do the same thing 0.5 rooms it does look a bit better i think there's still a little bit more space under the author so we'll just tweak that a bit so instead of eight pixels let's say maybe 12 12 pixels 12 divided by 16.75 rams okay so i think that looks alright okay so i think our text is pretty good actually so now let's add the proper images and copy for each of these articles so in our next html file we will adjust that just copy these all over i guess we can just cut it since we're not don't really need to keep it this is already there okay so let's do the images so in the design it's the currency then it's like a restaurant then a plane with clouds and then confetti so restaurant plane confetti we look on our images folder image restaurant oh i had the name right restaurant and the second one was plain and then confetti all right let's see how this looks it looks pretty good so if we take it down comes two columns and then one column on mobile this is pretty good not too shabby so one extra thing that i'm going to add is some nice little hover states and i think i'm also going to add a box shadow just to make the card a little more separate from the background so let's add those in now so the box shadow i'm going to add to the article item itself since i want to go kind of all the way around so article item say box shadow and for box shadow it takes a bunch of different parameters so let me just type them in first and then explain what they are okay so in box shadow the first two numbers are the position of the shadow so the first zero pixels will control the horizontal position so i want it to be probably in the center so i'll leave that as zero pixels the second zero pixels is the vertical position and usually for shadows it's better to make it a little bit down from the object itself so it seems more like a real shadow so we'll maybe adjust that to be three pixels and i'll convert these two rams once we've kind of finalized everything and the last number parameter is the spread so it's kind of how diffuse versus how like hard line of a shadow it is so i tend to do at least 10 pixels maybe 12 pixels for the spread and we can of course tweak that as we see fit and then the last one is the color of the shadow and for shadows i usually like to use a semi um transparent shadow so what i've done is use rgba 0 0 0 which means black and then the last last number here is the alpha channel meaning the opacity and i've set that to 0.15 which means basically 15 opacity so it's it's pretty semi it's pretty transparent um okay so let's see how this looks oh there we go so we got a nice shadow here okay looks like we have some issues down here where the white doesn't go all the way down to the bottom so i think we need to figure that out um so let's see what's going on here article item goes all the way down there article image and then article text so it seems like because the text on the first two is shorter than the last two because you can see there's only four lines for the first two in the description but there's five lines for the description for the last two that's why they're taller so one thing i could do to fix that is maybe set the background color of article item white so now it's like that so let me try moving the background color to the article item instead of the article text see if that fixes the issue let's do here okay much better good let's make sure everything looks okay even when we're changing the width okay all right good now the next thing we want to do is i'm actually going to add a little hover state so it just looks nice you know when the these little i guess you can call micro interactions so the website kind of responds to the different actions you take so i want this to change in some way when i hover over each card and one thing i do a lot is scale it up slightly when you hover over it so let's try adding that and we'll do that to the entire article item as well so we'll add the hover selector and on hover we want to transform and we'll increase the size by using scale and then in the scale function we can set what we want to scale to scale of one means a hundred percent so it won't change at all so we want to be slightly more than 100 but not too much so maybe 1.05 so that would be 105 so we're only increasing by five percent so let's try that and see how it looks okay so it is just a bit larger and we also need to add a transition so smoother as well so transition we'll just say all um maybe 150 milliseconds and then ease in out that controls this the smoothness and speed of the animation let's try this now smooth like butter i like that i'm pretty happy with that okay so i think we can actually consider this section done it looks good on mobile obviously on actual mobile there's no real hover state but that's fine tablet two columns desktop four columns so yeah i think that looks pretty good all right so i think all right so i think we can consider this section complete before we get into actually building the footer i wanted to point out a mistake i'd made in a previous video that i just now noticed and the issue that some of you may have noticed already is that there's horizontal scroll bars appearing and this is caused because the hero content the images that we had sort of made offset have forced the container to be wider than the viewport width and that's what is causing these horizontal scroll bars to display all the content so the way to fix that is in our code if we go down in our global sas file to the body selector we can add overflow x hidden so what this is going to do is it's going to trim or cut off any extra content outside the viewport width so now let we go back to the website there's no more horizontal scroll bars which is good but we can still scroll vertically because we only did overflow x hidden not overflow hidden which would cut off anything extra and prevent you from scrolling vertically or horizontally so this is one way to fix issues when you do things like i did like moving things kind of offset from the viewport or if you have an off canvas menu you might need to add overflow hidden to some of the properties so i hope this helps any of you who may have noticed this if you're coding along with me and let's get back now to the rest of our website all right so first things first let's check out our design so we have here the mobile design and then the desktop design open in adobe xd let's take a bit closer look at the mobile version first so in the mobile version we have all the content stacked to one column looks like everything's also centered and the different parts of the footer are the easy bank logo there's some social media icon links then we have some text links a cta button and then at the bottom the copyright info for the desktop version if we go over to that it has the same content however instead of just being in one column the content is split out into four columns so the first column is going to have a logo and social media then we have two columns of the text links and the last column all the way on the right is the cta button and the copyright info all right so now how are we actually going to build out this footer well as in most things we can use multiple different approaches we could use flexbox if we wanted to i think that would be a perfectly fine solution to build out the footer i think i'm going to use css grid and the reason for that is i want to show you all different ways that you can use you know flexbox css grid to do layouts and we did use grid last time with the articles section but for the footer i'm going to try to use a feature of css grid called grid template areas and it's a really cool feature it is a little weird with the syntax until you get used to it but i promise it'll end up being more intuitive as you get along into it so how grid template areas works is you still sort of designate the template meaning the rows and columns in your grid layout but you can use named areas for each of the different areas in your layout and you can use those names to assign where in the grid you want those areas to take up but first let's just get the basic styles in place and i'm actually not even going to use css grid for the mobile design because everything is simply stacked in one column and then centered then when we do the desktop design we will use css grid as well as the grid template areas but the first thing we want to do is we want to create our html markup so i do want to keep in mind what i eventually want to be building for the desktop version so for example i can't just have you know individual social media icons or individual text links just in the footer tag itself i'm probably gonna have to group them together so we can lay out them a bit more easily when we do use grid later on so for example um i would probably have to group the logo or i would have to group these social media icons together in one div same thing with these text links i might group them into two different groups and then at the end i could group the cta button with the copyright info we'll see more as we get into it but we're sort of keeping that in mind as we're building out the layout even though we don't have to use grid for mobile let's go into our code editor vs code and in our index.html file i'm going to start creating the markup okay so i'm going to put everything in a footer tag so footer and i also need to create actually a new sas file so let's go into our app folder scss subfolder i'll create a new sas file called underscore footer.scss so that's open and then of course since we create a new sas file we need to add it in the main sas file so import footer save that and looks like yeah our live sas is working so we'll just close this up and then i'm going to just move the footer over to the right side so we can see both index.html as well as our styles so in our footer tag we're going to start adding the different content that we need so the first thing was the logo so the logo is usually going to be a link so i'll say anchor link i'm just going to make the href a pound and in the link it's actually an image because it's just loading that logo image so we'll add the image tag and we'll say source is images and let's see it's a logo probably this logo svg so that's going to be the logo and i guess we'll give it we'll start giving things a class as well um so first thing i'm going to do is give the footer tag a class of footer i know that seems kind of redundant but in our sas file over here it makes it easier to sort of follow the bem or block element modifier approach because the class of footer will be sort of the root and then everything else comes from that so for example for the logo we're going to give it a class of footer underscore underscore logo so then the same thing in the sas file will follow that pattern underscore underscore logo and the ampersand again just means that it inherits the root which is footer okay let's go on to the next section so under the footer was i believe some social media links so we'll create a div called footer i'll just say social so in this div we need to add all of our social media links so since they're links so again we'll add some more link elements and i'll just again do a pound for the href since there's they don't actually exist and then again each link is going to be i believe an image so image and the source should also be in the images folder and let's see which one was first so in our design so it's facebook youtube twitter pinterest instagram so facebook's first so images images and it looks like icon facebook and then i'll give it an alt of facebook so i'll do the same thing for the other links and i think there were six total yeah it's not a five so let's duplicate this by selecting it and then pressing ctrl d so there's five so i think the second one was youtube and then twitter so youtube i'm guessing it's just called yeah youtube then twitter and then change to alt i think pinterest was the next one and the last one was instagram there we go so we got the social links and then let's kind of go look back at the design so after the social links were the text links so as i mentioned earlier i'm going to create two groups of text links so let's say footer links then i'll add maybe another helper class and we'll just say uh link maybe column one there we go and then we'll add our links oops a link and the links was the text here so we'll just copy this over i think it was three per group and then we'll duplicate this so this will be footer links column two and i'll just replace the text okay about his contact blog career support privacy policy let's just double check and make sure yep that looks right okay and then last one is going to be the cta and i'm going to create one group to enclose the cta as well as the copyright so i'll say footer i'll just say cta even though the copyright's in there too and the first thing will be the button so i'll say a class of button and then the text was request invite this is basically the same button that we've had um earlier in the web website and below that is going to be the copyright info and i'm i'm going to make a separate div for that so footer copyright um easybank all rights reserved i may have deleted that somehow so i think the symbol is copy easy bank all rights reserved okay so now we have our markup and let's create the corresponding styles in our sas file and we're just going to kind of build out the skeleton so we got footer logo so the next thing is footer social and in the social we do have some links and images we'll just leave it like this for now and we'll add it as we need so next thing is going to be footer links and then footer links column one and column two so i'll just add those as well okay then after that is footer cta and then button we might need a button so i'll just say a button and then the last thing is going to be the footer copyright okay so save that okay looks good so we're not going to have too much on our website but let's just kind of see what we have here okay so we have a logo loading this may actually be a problem because this is the logo that we use up top with the sort of dark color but this is i believe yeah so the footer has this dark blue color in the background let's just add that now so we're going to have to i think modify the svg and i think we should be able to edit it we'll create a new svg for the dark um for the white on dark and then we should be able to edit that manually so footer we'll give it that background color of that dark blue and it should be in the variable satisfied so yeah dark blue and then i'll just say color white just to sort of give it a default um and maybe actually since everything is a link we also want to say a color white just to make sure that all the text links will get that white color okay so let's see what we got now yes you can see with that logo it is not visible so let's make the new svg file because i think we only had that one logo image yeah just that one logo so we opened the svg it's actually just like text just so you can um the cool thing about svg is that you can edit colors so you can see here these different colors this is probably the colors of the symbol in the back um so the you know this sort of diagonal stripes but we need to edit the text i'm guessing it's this thing pathfill um and this is just the letters of easy bank i'm guessing so let's create a copy of this logo svg file and then i'm going to rename it rename logo let's say dash dark because we're going to use that on a dark background so alt z to wrap the words and i believe this is the path fill and then we want to change that to white so we'll say f and we can't use sas variables in here because it's just it's an svg um it is not i can't use sas stuff okay so we'll change to logo dark in our index.html file um logo dark let's see if that worked e there we go and let's just double check it that does seem right yeah that seems right it's just white okay let's add some padding to this so it looks a bit better and i'm actually going to just turn on the responsive mode so we can see what it actually looks like so we want to add some padding on all the sides and we also want to center the text all the content let's see how much padding we need it's using my little rectangle that i created it's going to kind of estimate it's about maybe 40 pixels on top and i'm guessing on bottom um so about 40. yeah that's close enough and then maybe we'll just do 40 all the way around nothing's actually nothing is actually reaching out to that far but i think you know we'll just keep it at 40 just to have some padding all the way around okay so in the footer itself we'll say padding and 40 40 divided by 16 2.5 rims and again that's because to get from pixels to rams you divide it by 16 which is the base font size by default and rams are just a more accessible way that you can size things because it gives the user control if they change the zoom in the browser or even modify the base font size in their browser if you have measurements in rems it'll sort of scale up or scale down with the browser as opposed to pixels it would stay pixels no matter what so just better to use rems as opposed to pixels you can also use ems um but i like rams okay so now with the padding see we got okay good padding and text align center looks good now we need to start adding spacing so i just kind of go from top to bottom so i want to add spacing under the logo and on down and again i'm just kind of estimating here so it's about let's say 30 and then under the social okay so we'll give 30 pixels of space under the logo also under the social and then i'm assuming under the text links a little bit less but we'll just say 30 for everything just makes it easier okay so one add footer logo we'll say margin bottom and we'll say 30. so 30 divided by 16 1.875 grams and i guess we'll just add that margin bottom to all the elements that wanted them so footer social i believe needs it and then only the second footer link so footer links column two we'll have margin bottom as well and then i think under the button so in footer cta under the button we'll add margin bottom there we go okay um margin is not taking under the logo why is that it's there um maybe it needs to be display block or oops don't want to do it for footery footer logo because footage is every single link which is like pretty much everything in the footer so display block and the reason this worked is because before display block the element i'm assuming yeah anchor elements are displayed in line by default which means that they just kind of display however the default flow would be and you can't add things like margin and stuff it just won't take effect so you can say display block um or display inline block display block it'll take up 100 of the width that it can if i do display inline block it will only take up the width of the actual content so maybe displaying like inline block would be better for this so footer logo display inline block okay looks good so it looks like they were the margin did work for the other elements because those are divs and divs by nature they are by default display block elements now let me add some space between the social icons as well let's see how much space there is um 15 or maybe 16. it's a lot of one ram of space using margin margin right so okay so footer social which is this section here and then i'm going to add the space to the anchor links so again we probably need to do display blocks the margin actually like takes effect so display inline block actually um because the slave block can make them all 100 width which is not what we want we want them next to each other explain line block margin right one round oh and i don't want to do it for the last one so i think i could use the not last child so if it's not the last child it'll have this margin right okay and that looks like it worked let's just double check so margin and then they all have margin and then the last one does not have a margin which is great i think i do want display inline block for all of them so we'll just do this okay cool now the next thing for the text links the text links are they are each on their own row oh what i could do is i could create make footer social a flex parent let's try that so display flex and then i do need to set flex direction to be columns that will be one under the other instead of trying to fit them all in the same row so flex direction column oh not for social i want that for uh the links there we go okay so now they're very nicely in one column and centered i think i actually need to do is add some alignment to the flex parent so usually to control horizontal stuff that's justify content because it's vertical align items should control the width of the children so let's say align items and let's just say center just to see what happens okay so there we go so now we have centered them all and then it only makes the flex children take up the actual width of the content itself so let's add that in our style so align items center item center this looks pretty good and we also want to add some space between the text links themselves yeah let's just say 20 because there's usually a tiny bit of space from just like line height i wonder if i could just use line height to make that space let's let's experiment again line height 1.5 oh so i do two actually looks pretty good increasing the line height makes it take up a little bit more space which results in there being space between the links so then i don't have to do i don't have to add a margin to add space between them which is like sort of nice so that looks maybe a little bit more line height 2.25 for footer links a and i don't think this is actually necessary anymore since i fixed it with the align item center thing yeah that seems good okay so i think that this is basically the basic mobile styles let's move on to the desktop styles and in desktop the most important thing we need to figure out right now is what the grid template for css grid is going to be so i think initially i'd said we're going to make this a four column layout so the first column would be logo plus social then we'd have two columns of text links and then the last column would be the cta button and the copyright now i think that i'm going to also make it two rows because i want the logo to be on one row and the social media icons will be on the second row so that means the entire template is going to be two rows and four columns and i think the easiest way to demonstrate that is just to use adobe xd and to sort of draw squares around each of the cells so it's a little bit easier for you but also for me to see what the template's going to be and then i can write the code in the scss file so let's start with that now so we got two rows for this first column and then we'll just have the same you know going all the way down so that's the first column for text links and the second column for text links and you know this isn't super exact right now so there is going to be spaces between the cells but for just for illustrative purposes it's not going to be you know exactly correct so it's going to be something like this where we have four columns and two rows so this means that using the grid template areas this top one would be called logo and then this one would probably be called social this one i'll just call links one and then links to and then the last one will just be cta and we'll use those names to assign the locations in the template to each of these content blocks all right so in our code editor we need to figure out where we want to write the code for the footer layout for css grid kind of like flexbox you have a parent element and then you have the child grid elements so the parent element in this case is going to be the actual footer tag itself and then each of these areas are going to be the child elements in the grid so the first one would be logo second one would be social then the links one then links two then the cta these are all direct children of the parent footer element so in our sas file we want to add display grid for i think probably just desktop and up so we can do that with a breakpoint um our breakpoint mix in so include breakpoint up large and at this point we will add display grid so again this means that on mobile and tablet it's not going to have the grid layout it's going to have that stacked one column layout and we'll we'll do the same thing for the other properties as we add them so display grid and then grid template columns and we wanted four columns right so let's take a look at what we want the widths to be for those columns so it seems like these first three columns are probably roughly around the same width and then the last column is going to be wider i'd say maybe you know we can say these first three columns would be 1fr or fr meaning fractional unit and then the last one would probably be maybe 2fr maybe 3fr uh i'm not really sure yet and that will make that that will make this last column either twice or three times the width of the first columns so we'll just do 1fr1041fr and then 2fr for the last one and we can use the repeat function so the first three columns are one at far each so we can just say repeat 3 comma 1fr for the first three columns and then the last column will be 2fr then we want to add two rows so i'll say grid template rows and we want two rows probably the same height for each so again we'll use repeat two comma one fr which means the space each row will be given the same amount of space okay now the last thing is the grid template areas so this is a little bit um tricky it just has a bit different syntax and i know that when i sort of started using grid template areas it was a little bit confusing but basically going back to our design you write out the names of each of the areas sort of in the place where you want that block to be in in the grid so this one's going to be called logo it's going to be going across in the first row from column left to the right it'll be logo links one links two and then cta and then the second row is going to be social links one links to cta so using the same name for two different cells it tells the browser that that area is going to take up two cells so the first one's going to be logo so how this works is we just type in logo and it is in a string as you can see here and the second column is links one then links two and the last one will be cta so this is kind of the representation of the first row with each name taking up one column now we have two rows in our template so we're going to add a second one in a string again and instead of logo the social media icons will be the first column then links one links to and then cta again so this is our grid template now you also need to in addition to creating this in the elements themselves and i guess i should put this in a break point as well so include break point up large we tell it that the grid area name of this element is logo and this is part of the slightly confusing thing but this does not need to be in a string one one place that i look to a lot when i'm confused about grid or flexbox stuff is css tricks so a complete guide to grid and they also have one for flexbox so we're looking for grid areas this is kind of telling you how the grid temple areas work so you can see they have things in quotes and the actual element you just have the name and not in quotes again this grid area property of logo will tell the browser that the look the footer logo element subscribes to the logo grid template area so we have to do the same thing for each of these so i'm actually just going to copy this and then this is the footer social area and that's going to be called social and then for the links 1 we'll put it in the column 1 and then we'll do the same thing for column 2 which will be links 2. and the last area will be the cta and that's going to be the entire footer cta element which contains the button as well as the copyright info so that's going to be i think i just said cta these grid area properties they'll sort of match to what's in the grid template areas all right so this looks pretty good obviously it's not completely accurate at the moment but this is a really good start let's turn on in the layout tab the grid inspector so i want the footer to be highlighted this is a super helpful tool if you are working with flexboxer grid firefox has these special flexbox and grid inspectors and it just tells you a visual representation of what you have we actually have not only the lines to designate the rows and columns but it's also telling you the names of the grid areas that we just created it says logo social links one links one links two links to and then cta and it also tells us that with this dotted line it's sort of telling you that the area is taking up those two cells whereas for the logo and social there's a solid line between them indicating that they're separate i think that let me just uncheck the display area names so you can see a little bit better but we need to kind of align these correctly right so let's work on the horizontal alignment first and i think we want the logo and the social icons to be aligned to the left you can control alignment in two different ways one is sort of global alignment when you set properties on the grid parent you can also set properties in each grid child to just control the alignment of that cell so there's a lot of control you have using css grid and let's kind of figure out what we want to do here if you look at the design we do want the logo and social icons to be left aligned and we also want the text links to be left aligned as well and then the cta and the copyright are right aligned so everything's kind of like flush to the edge so i think we could try using justify content space between is that doing anything it doesn't look like it's doing anything this might be a flexbox thing let's go back into our handy css tricks guide let's justify items aligns grid items along the inline row as opposed to align items which aligns along the block so let's try justify items start so justify items start oh there we go i think what i was doing was justify content which i use a lot in flexbox but i think that just controls the child items as a whole you justify content yeah so it's the the total size of your grid so that seems okay um i also want to i think maybe set text align left for desktop because it was centered due to the mobile styles and then we can fix these as we go along now why are these not are these centered line item center i have a few different things going on here so i have the footer links it's a flexbox parent let's turn off the grid look at the flexbox i had done a line item center and i actually want to align items i believe start yeah start because this in this flexbox parent it's going vertically so line items will do the cross axis arrangement so i just need to remember to set footer links line items start for desktop and up so footer links and then for breakpoint up large we're adding a line item start and i'll make sure that the links themselves are aligned to the left the other thing we wanted to do was for the grid template justify items start let's go back to the grid inspector now we can see that the text links are aligned to the left the logo and social are aligned to the left as well and then for the cta we want to align that to the right i think we can say um justify items and oh this is not a grid thing so i can't do that i guess i could try text line right no that's not right oh it's because i did justify items to the left so i think for because this is an individual this is the grid child item i can't do justify items i have to do justify self because that applies to the individual child itself so i think if i do end there we go so if i do text align right and justify self end for the footer cta desktop styles so under the breakpoint area okay so it looks pretty good for the horizontal stuff right let's just double check and compare that with the design so yeah we got the logo and i social media icons on the left these are line left this is aligned to the right and that does seem like what we have so now we need to figure out the vertical alignment you know it looks like things are a little bit all over the place so we go back to the design let's just draw a box around the entire footer area just to see how things kind of line up with each other looks like things are kind of extending out to the top and the bottom they're like pretty much almost flush so if we go back to the footer parent itself i think what controls the vertical alignment is align justify content and align content just control the grid in like the greater parent so if i want to control the alignment inside the grid i have to use items so align items okay aligns grid items along the block axis so the values can be start and center and stretch so i think i want stretch so it goes all the way to the top and the bottom so we'll try that didn't seem to do anything something else is adding this extra space i wonder i might have some margins actually so let's look at the links oh there is margin in the social so let's just cancel that out so margin bottom zero and then i guess logo also there's a margin there okay i might just need to go back and move all the margins that i added from mobile into a breakpoint down media query because i only want it to take effect on mobile and tablet so let's see where here we go margin bottom so include break point down some of this apply to tablet and down oh medium i mean medium and down and then we'll add the margin bottom there let me just copy this media query so same thing here margin bottom here and i think there was one yeah for the button okay now that we've removed the margins from desktop let's see how the site looks did that help at all see the social icons are still like really they're too high i want them to be flushed to the bottom what happens if i do an align self for footer social i'll get rid of the height thing turn on the line self to the end does that seem right it seems a bit tall in any case we want them to be on the top and bottom anyway so let me add a line self to footer social for desktop okay the text links themselves look okay now i need to do this the aligning for the cta section so in the cta section we have this and then we have a copyright so i think if i do a line self miss stretch an option for this oh it is stretch not working this is kind of annoying okay i'm just kind of curious start have an end i think i may need to separate these out into different cells so i can sort of align them the same way i did with the logo and the social so footer cta i'll only have it have the button and i'll delete that extra div and then do that so then footer cta is in his own thing twitter copyrights is is in its own thing as well so let's go back and first i'll have to add a grid area for the copyright since that's a new thing so include breakpoint up large grid area and i'll call it copy right then i'll need to add the copyright name to the grid template so before we had the ctn copyright in one thing now we're going to have ct on top and then copyright on the bottom okay much better um so now we can sort of try to we'll add another rule for align self end and then justify self and okay okay that looks pretty good i do feel like things are a little bit taller than they should be you know i wonder if the font size should be smaller for the for the text links you see that this should be 15 or so pixels how big's the font size right now it is if we go to computed font size is 18 and where did that rule come from it's just from the body font size okay so for the footer links i need to set a font size of 15 pixels so that should help with making the content less tall i'm guessing it's going to be the same font size for mobile as well so font size 15 pixels divided by 16 is 0.9375 rems all right let's give that a shot okay looks shorter which is great maybe the easy bank text itself needs to be a bit smaller too it's probably about the same 15 pixels so we'll copy this property and add it to the copyright as well okay maybe there's just too much space because i initially added all that space using line height so if i reduce line height it's still a bit tall interesting let's just say line height one just to make it really short oh you know what it is it's because i set the row i set the rows to be 1fr which means the top row and the bottom row have to be the same height that's how i set it but obviously the bottom row the social media icons and the copyright doesn't need to be the same height as the top row and the top row looks like it's getting its height because of the button which is making everything be too tall let's fix this row problem first and then we'll figure out if we need to decrease the line height for these so instead of 1fr i think the second row should be something less where is it here grid template rows so the first top row should be 1fr if i do auto it'll just oh if i do auto it just sort of does that let's try that so in the parent we'll change grid template rows to 1fr and auto here we go so instead of this repeat thing for the rows we'll just do 1fr and auto okay so this is shorter now the line height is kind of what's limiting it so let's try one okay see now got really short which is great maybe 1.5 you know maybe i don't want to use line heights that's kind of like making it a static distance what if instead in the footer link since i know that is a flexbox parent i could say justify content space between and that will sort of auto stretch to fit that so i think that's a much better way of doing that at least for desktop we want the line height for mobile because we're not using grid for that so footer links for desktop here we go i think i personally just do justify stuff before the align properties okay so this looks closer which is great now i i'm guessing that this button might be a little bit tall i am kind of curious where this height is coming from now oh i still i forgot to take out the line height okay that's my problem so i'll just remove line height for the footer links a for desktop so i just want to use this on tablet and mobile so i'll use my break point down and i know that i usually use the break point up meaning i use min width media queries but i think in this case because we're adding styles for mobile i would prefer to use the breakpoint down using max with media queries otherwise i would have to cancel out all the margins and line heights for desktop that looks a lot better so i think maybe this button is now what's kind of making it a bit tall okay how big is this button oops it is 46 pixels tall or so and how big is it on the website okay so it is 46. you know i'm not going to split hairs here i think this looks pretty okay so even though it's taller than it is on the design i think it's okay and i just kind of added some space here so i'm not blocking it with a picture of myself for you all it's kind of weird it even looks like there's more space in the design i think the logo and the social media icons actually might be a little bit too tall so let's just tweak that and then we'll sort of consider this complete the logo should be 23 pixels tall and about the same for the social icons so let's see what we got um 20 and the icons look like they're 25 okay so yeah they are a little bit big the image itself says 20 which is good and then for some reason the thing is 25 the anchor link maybe i just need to set a height if i set a height of 20 pixels will that help oh yeah it does okay we'll just say hi 20 pixels for the footer social a social a here we go and i'm assuming the same height will be for mobile as well so we don't need to use a media query for that so 20 divided by 16 is 1.25 rems that seems all right okay now that i look at this again i think that there's a couple things i need to do the first one is i need to limit the footer content so it doesn't go all the way across i think i forgot to add the container class so let's do that first and then we might need to tweak some of the alignment okay so in footer i'm gonna have to add a container class container and i don't remember if i want to add the padding helper classes but let's just move these into the footer container and because originally the footer tag itself was a grid parent i'm going to have to move all the grid properties into the footer container so footer and then we'll just put it here at the top container so we'll move all the grid stuff into the container element okay hopefully that'll work let's take a look okay much better so now we can see it's not going all the way to the left and the right things just seem cramped even though the heights like so tall is that button really the right height yeah it's 46. and you make the copyright text smaller i think right now it is 15. i'm gonna make it i think 13. it needs to be a lot smaller 13 divided by 16.1 okay eight one two five not one eight there we go okay i think the color was darker too right it's not white it's kind of a light gray what color would that be maybe grayish blue so you know this is just kind of tweaking trying to double check the design and the site and just make sure everything looks correct yeah there's more space between the button and the copyright something is not right i wonder is it including the padding that i added no this is 70 oh okay so it's 76. okay so it is adding the padding so it's actually now it's too short which is the same as like what i was thinking it was so let's increase that line height again to um make it taller line height 1.5 oh wait wrong selector forgot a second underscore there we go maybe 1.75 2.25 2.25 line height is giving us the correct height of about 100. okay glad we figured that out so footer links a i knew something was off i just took me a while to figure out where it actually was there you go footer links a oh wait two point is that the same oh my gosh it's the same freaking line height so let's remove this media query there we go okay this looks much closer to the design okay so now we've gotten the height right i think we need to tweak this like horizontal spacing um there's it's too close here and there's too much space i think so yeah so it seems like there's more space between easy bank the logo and then the first text link let's see how do i want to do that i guess i could maybe increase the width of the first column so if we go into the grid parent instead of making all the columns the same i could just try to tweak these a little bit so i'll probably leave the text links as 1fr and so i'm just going to try this out in the browser but what if i said 2fr 1fr 1fr and then 3fr maybe 2far well maybe 3. okay let's see how close that is to the design hey that's not bad um there's a few things that look like they're off so there's just a tiny bit more space between these i think i also forgot to add a grid gap property so let's try that gap of maybe one rim two rims let's try one rim so that that gap property let me just show you how it looks so it's adding space of one rem or 16 pixels between all the cells in the template so i think that's probably good to keep so i need to add gap of one ram and then i need to change the template itself will be 2fr 1fr105r3fr okay so grid template columns place this i know i could use repeat to 1fr but i mean it's kind of the same at this point if you're only repeating if you're only repeating it once and then what else that i wanted to add oh yeah the gap of one i'll add the gap under areas i guess one rim okay that looks pretty good let's compare with the design again that looks fairly close and i'm actually okay with like i have a little more space between social icons but i think that's okay all right now moment of truth let's see how this looks on mobile because we decrease once it hits that break point for tablet it goes to one column and it is centered and stacked then for mobile i'll just turn on the emulator thing that looks pretty good so i think we have the basic styles down now let's get to some sort of let's kind of polish it up a little bit there's a few things i usually try to add main thing is hover states because these are all links and you want the style to change slightly when you hover over them so you know what's going on so for the socials let's check the design oh here we go so we did some if we hover it turns green on the social icons as well as the text links and then the request invite has the same thing where it like goes to white so let's do those the social icons that would be social icons the images um they're svgs and we want to change them from the white to the green color now since i loaded these svgs as image tags i might actually change that because what i want to do is change the fill and the svg itself let me show you what that looks like so icon facebook if we look at that so it tells you the fill is fff which is white and there is actually a way that you can alter that in css but only if you're loading the svg as an svg tag and not the image tag so i'm gonna have to change this so i'm gonna copy this so we're actually just using inline svgs at this point and then i think can i just move the alt no there's no alt for that that's interesting i'm just curious about this uh alt tag for svgs accessible it's purely decorative it doesn't need alternate decks i think we do because they're like social icons inside the svg add title oh must be the first child of its parent element it'll be used as a tool tip that's helpful okay so let's do that so say the first child um here so path is the first child originally but now we're adding titles and we'll add facebook that's pretty good and we'll have to do the same thing for the other one so youtube copy that place the image and then add the title youtube so now let's load it up everything's the same let's just double check yeah so it is actually loading the svgs which is good if we hover it tells us the title which is great so now to adjust the color to adjust the hover we want to in the svg alter the path fill and we can do that in css which is pretty awesome so if you go down to social a so in the a tag it's going to be svg path that's going to be the element social a cover i could nest it under the a element but okay maybe i'll do that under the a hover svg element and then the path element is going to have fill of the green color lime green and then we also want to add its transition so it's a little bit more nice looking hopefully this works phil and then how fast we want to be maybe 150 milliseconds he's in out oh hey very nice cool so we were able to add the transition and the hover fill color for these social icons we want to do the same thing for these text um links as well that's going to be in the footer links a so footer links a hover color lime green i think it was and then of course we're doing the same thing so transition color 150 milliseconds ease in out oops okay there we go nice and the last thing we want to do is this button hover state and you can see it's losing opacity when you hover over it and that's because when i first coded this button it was just on a white background so i could simply reduce the opacity and make it sort of look like there's a white overlay obviously it doesn't work with a dark background so i'm going to have to build a semi-transparent white overlay over this over the linear gradient color so i think i can do that with a pseudo element so let's just sort of try so in our global sas file going down to the button styles so right now the opacity thing i'm i'm just going to comment that out because it's not really working for us and i'm going to have to add a pseudo element so let's just try the before and content is blank so it shows up um you have to have a content property set for your before and after elements then i'll say background color i just do background since it's using a linear gradient um i think background is actually linear grains actually apply to the image if i'm not mistaken background image oh let me just see if that's correct really quick yeah so yeah background image and unfortunately background image does not transition nicely so we'll we might have some issues when we do this but okay going back here so we're making an overlay um i'm going to have to position this absolutely i think because we want it to be on top of the rest of the button right zero and this is just to make it go to you know all the different edges and because it's supposed to absolute i see to make sure the parent is positioned relative which it is that's good and i'll make sure the position absolute child will sort of remain inside the parent which is relative then background um color and because we want to eat rg we want it to be rgba so it will be semi-transparent so white is 255 255 255. and transparency let's just say 0.25 we don't want to go full white otherwise you won't be able to read the text okay now let's just see let's see how that looks and i'm not it's not attached to hover state right now i just kind of built it to sort of test and see how it'll look oh that looks it looks pretty close to what we had before actually um so let's set opacity so passing zero it won't show up and then it'll show up when we add when we get rid of the opacity zero so i'm going to use that for the hover state this actually was a pretty easy solution i thought it was going to be a bit harder than that so by default we'll set this opacity to zero and then on the hover state we'll set opacity to one so we want to transition that so it's nice and smooth we use 150 milliseconds like the other hover state speeds then on hover um hover on the parent we're going to make the before element opacity one hey not bad not too shabby okay so i think we got our hover states pretty good let's just double check and make sure the top one works too oh yeah nice sweet so let's just check one more time see how this looks on tablet and mobile good let's just use the emulator so it's easier to see so here's mobile looks pretty good and then ipad i think that's okay on tablet if you wanted to you could also make this like maybe two columns on tablet but i'm just going to stick with the one column because i think that's fine and it's at the bottom anyway so it's not like it's blocking it's like people have to scroll past it cool so i think we can actually consider this whole web page complete and that's it for building this landing page template if you made it all the way through congratulations and let us know down in the comments what you thought of this video and as always thanks for watching and keep on codinghey everyone jessica from codercoder here thanks so much to free codecamp for having me on their channel in this video we're going to build a landing page template from frontendmentor.io if you get stuck at any time during this tutorial you can check out the completed source code on my github link down below and if you like this video and want more i'm actually creating a course called responsive design for beginners you can sign up to get updates on my progress creating the course as well as be the first to find out when it launches and without further ado let's get into it all right so the website we're going to be building today is from front end mentor dot io they have tons of different challenges of website templates you can build yourself and the one we're building today is called easy bank landing page now what i'm going to do is download these starter free files and with that you just get jpegs of the design which you can definitely work off of but if you want the full sketch file you have to pay 8.99 so either way works we're going to be working with the free files right now so let's set up our project on the left i have my empty project folder and then on the right we have the files that we downloaded from front end mentor in this folder i have an index.html file which we do want to carry over here to our project there's also an images folder and these contain the svgs and pngs and jpegs that we need to use for this website so we're going to copy the images folder over as well and there's also a style guide file which i think would be pretty handy and then lastly the design folder contains the jpegs of the different designs now what i'm going to do is i'm going to show you i've made an adobe xd file and in that i've basically copied and pasted all the jpegs so that i have all the designs in one place just makes things a little bit easier so now that we have our files in our project let's open up vs code okay so here in vs code i have the project folder open you can see that we have the index.html file from frontimentor and we also have the style guide file which is helpful to tell you you know what what's the designs at as well as some colors and font information so we'll definitely be using those and we have the images folder here with all the images okay so when i'm working with website projects usually i'm going to be using sas scss syntax and we're going to have to also have some javascript so let's create those files now so in the project root i'm going to create a folder called app in that folder i'm going to create two sub folders one for js for the javascript file and one for scss for our sas files so in the sas file folder in the sas folder rather let's create our main sas file style.scss and this is going to be the main sas file that we're going to import all of our partial sas files into and we're going to create one called globals scss yeah that's right i also usually create one called variables because i like using sas variables a lot so let's import those into our main sas file import variables because we want our variables to come first so the other sas files can use them then import globals okay so let's start adding some boilerplate styles here so the global the first one i usually do is in the html selector i'm going to say font size is 100 this is more accessible lets the user control the zoom level in their browser we're also going to do box sizing border box and what this property does is it makes the size of elements sort of include padding in the final width so it's just a bit easier when you're working with elements like that then we also want to inherit that box sizing border box to all elements so using the wild card selector here as well as the before pseudo element and the after pseudo element selector and they're going to inherit the box sizing board box in the html element now for the body element let's add some sort of resets here so we'll say margin zero padding zero i also like to do a line height of 1.3 just to add some spacing between lines and we're going to add our fonts in as well we look at the style guide it said that the font that we're using is public sans i'm going to go to our browser here copy this in i think it wanted to use 300 light and then 400 regular so we'll select both of those and we're going to embed it we'll just copy this link tag here and put it in our index.html over here above the title now since we're in the index.html file let's also add a link tag for our css file i'm going to create a dist folder and i want to put all my final css files in there so i'm going to say disk style.css and then we also i think want to add a script to load our javascript file that one's just going to be in the app folder so app.js script.js let's go into our folder here and create that script.js then we'll just add some test code so we can test it hello world why not now that we have some sas files you know just basic styles added let's also test out our sas workflow to compile my sas to css i like to use this extension called live sas compiler so if you don't have this installed yet you can just type in live sas compiler in the extensions marketplace and click this button to install it you might need to restart vs code if you're installing it for the first time now but once you have that set up when you open a project file you should see some buttons in the bottom one says watch sas and the other one says go live so if we click that watch sas button going to watch our sas files and then if you want to go live we click the go live button and it should load the local website in our browser we can see that that is indeed the case obviously this doesn't look too fancy since you know we just added the text from the design here but we can also check down in the console window here and our hello world message is loading so it looks like everything's working correctly see we need to add that font to our code so in our globals we're going to say font family and let's do that before line height font family i believe it was called public sans so we're just going to copy this over there we go okay so let's check our browser again and we don't need this anymore so it looks like we have the font public sans successfully imported so now going back to our vs code we want to do is we want to basically start creating the markup for our website so let's go into our index.html file and we're going to start writing markup over here i'm just going to actually comment out all the copy from the design just so we don't have this extra stuff you know visible on the website we're going to start writing our markup so let's go back to our design and what i'm going to do is try to do the mobile first approach and we're going to make our default styles without media queries the mobile styles and we're going to build the mobile website first and what i usually do is i'll go from the top down so let's start with the header but taking a look at the header it has a logo on the left and it has a hamburger button on the right which then when you open it opens this mobile menu then if we compare that to what we have for the desktop design it also has a logo on the left that has some links looks like in the middle and then there's a cta button on the right side so let's create the markup and styles for this header in our body tag i'm going to create a header and then in that header we want to add our logo image and we're also going to assume that this is going to link to the home page so we'll just make that open that and then in this anchor tag we want to add our image for the logo so image source images and then we want to look for this logo svg then alt oops i'll we'll call that easy bank since that's the name of the plate we're making let's see if that loaded on our site okay so that was easy right i think actually what i want to do in addition to that is create a nav and i'm going to put everything in that navigation in this nav tag what we got is the logo and then we have our hamburger menu on the right so that's probably also going to be an anchor link it's just going to go to the same page and we want to create a hamburger menu and the hammer we're going to use those three lines so let's create three spans so we're gonna use an emmett shortcut span times three so three empty spans and we also probably need a class for this and we're just gonna call this hamburger for the hamburger menu and in the same way maybe we can create a class up here for the logo so we'll say class equals logo if we look back at the design we can see that everything is in one line so that tells me that this nav element should probably be a flexbox parent to put everything on the same line now one other thing i like to do is i like to use a lot of helper classes so instead of having to write display flex on every single element in this webpage that is a flexbox parent we're going to create a helper class called flex and i'm going to add that in our globals got it there so flexbox styles we'll say flex class and we're going to say display flex and let's add a few other flex related classes so flex um one property we use a lot is justify content so let's say jc dash space between and that will be justify content space between because that is used quite often you can also maybe create one for center and i'm just going to basically be creating these as you know as we need them so let's also create some align content properties so align content and usually it's aligned content center so we'll write that align content or i'm sorry align items rather center so it's a i enter okay so this is fine for now we're probably going to use more later but now what we've done is in my sas i've created a flex class for display flex and then these other ones for the flex properties so i can do now is uh let's see split this up so you can see our html on the left and our styles on the right what i'm going to do is in the nav in addition to the flex class we also want a flex justify content space between so let's just check out how it looks in the browser okay so you can see our logo here let's see what's going on so we can see the nav here so we have a logo and then we have the hamburger class but it looks like that has a zero width and box model yeah it looks like it has a no width but there is a height so what we probably need to do is make those spans spans by nature are our display inline so that means they're not going to take up any space so there's like no content in them so what we want to do is we want to add some styles now for our header so we go back to our sas folder create a new sas file i'm going to call this header.scss and then we want to make sure that we are importing that into our main sas file so just trying to keep things organized here header so now in our header what we want to do is i think i'm going to add another class for the header let's say class header and this is so i can use bam block element modifier for writing my sas classes so first we have this main element header and then in here we're going to say maybe header underscore underscore logo and then header underscore underscore menu maybe hamburger menu okay so now in our sas files we can start using the ampersand for header then there's a logo and then another one for the menu this is the mobile menu so we'll just add a little comment here saying that mobile menu and we also have an image tag here so i'm not sure if we're going to need this but we'll just add it here anyway so in the menu we have some span elements i'm just going to use the direct child selector here to make sure we keep things as specific as possible and we're going to say display block for these spans now if we go back to the design the hammer menu is looks like a bunch of dark black or very dark gray lines so we're going to start with some general styles here first thing was first actually we probably want to get our colors added in from the style guide so you can see here these are all the different colors they're using hsl instead of hex but that's totally fine so let's start adding variables for our colors so we can reuse them so dark blue and now we're probably going to use this dark blue color for the hamburger menu and we'll just kind of see how that looks so let's close our script file here we don't really need that right now it's going back to our header sas file we want those lines to be that dark blue color so what i'm going to do is i'm going to say width and the width of those hamburger lines are now since this is a jpeg this is kind of the only way that we can really see how big things are i'm creating a little rectangle here that's semi-transparent so you can still see through it but you can still move it around and you can kind of use it to see how big things are pretty small looks like it's about a 26 and then about 12 or 13 height okay so what i want to do is here i'm going to set this to i think was 26 pixels and then the height of each this is just for each line so let's say two pixels oh yeah and then the background color background color and we'll use the dark blue variable all right let's see how that looks on our website now okay so it's a little small up here but we do have our hamburger lines here but we need to add some spaces between the lines so what i'm going to do is i want to add a margin bottom to all the spans except the last one so what we can do is we can use the not selector so not last child and then if it's not the last child we'll say margin bottom and let's just kind of guess here maybe three pixels now going back to our website we can see now that we do have the three lines and our logo now of course everything's up right on the edge here so we need to add some padding here so let's see how much padding there is let's get the top and bottom padding first i'm going to kind of assume that the top and bottom padding are the same if we have a little rectangle here about 22 inches or pixels rather and if we move it down it might be a little bit more so maybe 24. so 24 pixels of padding on top and bottom and then for left and right about the same let's just say 24 all around so going back into our code what we can do is we want to add padding to the nav itself so in the header we're going to add another selector here for the nav just no class at least for now so we'll say padding uh 24 pixels all around okay so let's see how that looks all right oh why is that so tall let's see what's going on here so we have a nav here that's one of our pixels all around it looks like we need to center things vertically so what i didn't do is i need to add another flex property here so flex just to show you what i got here flex a i see that's going to align items to center all right so that looks a bit more centered there we go okay so we got our now we got our spacing one thing we do want to do is see what the differences are between the mobile and then the desktop nav mobile obviously has the hamburger menu does not have these links or the cta so these are desktop only but i should be able to use the same markup for both mobile and desktop so let's add some elements in for the links as well as the cta okay so let's scoot this over here a bit so logo's first for both and then for the mobile the menu is over here now since the the hamburger is not going to be visible on desktop i'm just going to add these other elements down here so the first one you want to do is since i'm using flexbox to separate them out let's create a new element we'll just say div and we'll say header underscore underscore links then in here we'll say anchor um link so i think there were how many links five link times five there we go and i think the text is down here so you can just kind of move those up into here into the links so header links and you know this is just a landing page we're doing so we're just going to make all the links the pound sign or the hashtag so going back to our header sas file we're probably going to have to add some styles for that so under the menu will say header underscore underscore links and in that is going to be some anchor links let's go back to our website and now we can see that we have our links okay first things we want to get rid of that underline and i want that to be true for all links on the page so we're going to add some styles here for just default styles so links a visited a hover um text decoration none okay good now let's style those links let's see what we got here check our notes in the style guide okay it says font size is 18 pixels i guess we could add that font size to the body tag so 18 pixels and it's actually better to use relative units like rems instead of pixels so to get from pixels to rams you can divide 18 by 16. so if we check this inspect element see yep font size is 1.125 rams and if you click on the computer tab it'll tell you it's 18 pixels which is what we want okay color seems to be this actually seems smaller so this might be like maybe 16 or even 14. let's find out it's about 14. so we're going to adjust the font size in the um better font size i think we said 14 so 14 pixels divided by 16 is 0.875 um another thing you can actually do and let's do that now is we're going to create some variables for these font sizes just in case we need to reuse them so we'll say body or maybe font medium the 18 pixels or font size 1.125 rims and then we'll replace this with the variable name the other one was font small this is going to be 14 pixels there we go take that over here and we'll replace that with the font small variable kind of helps just to add some comments so you can remember what this is 18 pixels we'll add more variables as we need but for now let's also check out the colors probably that lighter gray for the text here so i think i can actually i might just add it to the body selector since it seems like most of the body text is that gray color so let's add that in the global one as well this just makes it so that you don't have to add you know font size and color for every different element you can just add it globally first to the body for whatever you know the most often used one is and then you can make them different for the elements that need that let's check out this website where's the color coming from looks almost purple not gray there should be another color hopefully uh it's probably this light grayish blue so we'll just replace that there we go i wonder if this is from the link color change to red yeah it's not taking for some reason i think it's probably taking the default color from the browser so what i want to do is let's add that color property there okay that's a little bit too that's a little bit too light so we're just going to go back to the grayish blue and same for here there we go okay that looks more like it so now we have the links added we want to add that cta button that's just for desktop so let's move this over here because we're going to need that pretty soon this is going to be probably a button element so we'll say button type equals button and then what does it say request invite okay so now it's a button now of course we need to style these button styles so we're going to add the button styles again in our globals so first thing i want to do is we want to kind of reset the colors and different styles so this one is a gradient background and it has rounded corners what we probably want to do is figure out what the size of the button is so we can do that by i'm just going to add padding to the sides so it's about 16 padding on top about the same on the bottom and then oops for the left and right it's about let's just say 30. so we'll say 16 padding on top and bottom and then 30 on left and right so we're going to use the button element as well as the button class just in case because sometimes we might want to have an anchor link that has the button class as well padding 16 on top so that's one rim and then 30 which would be 30 divided by 16 1.875 around this okay and then also around a corner so border radius um i'm not sure we'll just say 50 pixels for now okay let's see how that looks okay getting there we also probably want to make it use the cursor when you hover over it there we go so now it looks like it's a link looking back at the design this is a gradient looks like it's a linear gradient just going from left to right so going from this green color to this kind of teal blue green color let's see which colors we're going to be using it's probably lime green going to bright cyan so let's add it i like adding the background here background linear gradient and it's going to go lime green to bright cyan okay so it's horizontally i don't want to make it go kind of vertical so i think it is too right i'm not positive that's the correct syntax and it looks like it's not css linear gradient this is what i do quite a bit when i'm building websites so we can go to let's check out mdn okay two left comma so i need to add a comma there and let's go back to our website oh still didn't work what's going on here i am not using the right property background linear gradient to left let's kind of inspect this in the thing itself linear gradient that's right to dash right no there's no dash that's why just test this to make sure i think i need to edit in the code itself there we go oh yeah i think we need to get rid of that border so in buttons we're going to say border zero okay so now that's gone which is good then we want the color to be white nice and let's see how that matches looks like it might be bold actually font weight we'll say 700 for bold although it said it was let's check our notes again weights 300 and 400. go back to the design here so i'm guessing the default weight is the 300 for light and the normal is sort of the headline stuff so let's kind of go back into our body font weight we want default weight to be 300 and then for the link we'll say the weight is 400 since it is a little bit heavier is that taking um font weight 300 which is good check this out want weight is 400 it doesn't look any different weird okay i think this might be because it is a button element um if we do font weight 300 font weight 400. seem to change at all changes to an anchor link yeah it is changing a bit so this might just be a bug for the button element maybe we'll just change that button to an actual anchor link because it could be an acrylic in real life it really just depends on what you want to do add a class and we'll say class of button now we know that this should inherit all these styles here so let's check this again okay looks like the weight is correct pretty big i think in the design it looks like it was the same size so let's go back to header this is maybe header underscore underscore cta so font size we'll just make this also font small and color will make this white uh why is this gray oh my gosh nothing's working what color red important oh my it's because it's the anchor link oh okay probably because oh yeah i did this color grayish blue i might actually just get rid of this thing here and instead add it to the anchor links because it's a bit more specific because i don't want every single link to necessarily be that grayish blue color there we go that looks pretty good all the links are there so the next thing we want to do is we want to either hide or show the different navigation elements depending on if they're needed on the mobile design and then the desktop design so how we're going to control that is another set of helper classes this is going to be a bit more complicated because first i need to create the classes we'll just call this visibility so hide for mobile i'm including tablet with this mobile class so in this what we want to do is hide for tablet and mobile devices and we'll create another one hide for desktop hide for desktop widths viewport widths so the way we're going to target this is we need to create a media query but what i'm going to do is create a mixin so we can make things a bit more reusable let's create a new sas file called mixins and this one's going to be related to breakpoints the final code that we want to have is something like media and then the target will be min width 1024 pixels for desktop 1024 divided by 16 64. and for media queries you want to use ems they've just been shown to be the most consistent among browsers and then we have our styles go here this is what we want to output but we want to save these break points so we don't have to keep typing them every time right so what we're going to do is we're going to create a sas map we're going to call this breakpoints up and then we're going to basically create a bunch of different values for breakpoints up meaning at this point and bigger use these styles so to do that we're going to first create one for medium because we're assuming the small size is the default one 640 pixels divided by 16 is 40 ems 40 ems i'll create another one for a large and let's say that one's going to be 10 24 pixels divide by 16 is 64. and we'll create another one for extra large since we have a lot of large screens these days 1400 divided by 16. so 87.5 ems so now this is our sas map for breakpoints up but i'm also going to create one for break points down the first one breakpoints up is if you want to target this viewport and up and that's what i use for most of my styles but there are some cases where you want to target a style from a certain viewport and on down so for that we're going to not use the x large because x large on down is basically everything but we are going to add a small here for mobile devices for mobile we're going to take this value here because medium would be 40 ems and on and on up for small we're going to say 40 ends and down and we'll move this up here from medium on down so this is anything smaller than 10 24 and then 87.5 ems oops i need to leave that there we don't want to overlap these so i'm just going to make these one pixels smaller the breakpoints we're using are 640 pixels 10 24 pixels and i think i said 1400 pixels that's for the break points up so for these we want it to be 640 and up so 639 and down this is so we don't have any overlapping styles i try to not mix breakpoints up and break points down in the same style rule it's either one or the other usually going to be break points up we need to recalculate these numbers here this is going to be 639 divided by 16. 39.9375 9 and then 1023 divided by 16. 63.9375 and the last one is going to be 13.99 87.4375 there we go now we have our two maps what we can do now is create our mixin so we're going to say mix in break point up it's going to take a parameter we'll just call it size i'm going to write what we want the the mixing 2 output so we want to output a media query so media and then min width and this is where we're going to put in this size variable i'm sorry this is not right so the min width is going to be the the the value for that size that we've determined so to get that we need to use map dash get so you can see this code has some helper text here turns value in a map associated with the given key so map get and the map we're using is going to be for the first one break points up we also want to grab that size parameter so the size is going to be either small medium large x large and will return this ems number when we're using this mix-in we want to write this media query and then in the media query we're going to just output whatever content is in the style and i'll show you how that works in a second we got our mixing written or breakpoint up and let's create another one for break point down and everything's going to be pretty much the same except reasonably down and then also instead of min width is going to be max width and then the content so going into our global styles again the hide for mobile class we want to hide for medium and down so we're going to call the mixin by using include and we want to do break point down and the size we're going to call is going to be the medium because for medium and down we want to say display none and then in a similar way for the desktop we want to call a mixin but the one mixing we're going to use is going to be breakpoint up because we want to hide the element using this class for desktop and up so that would be large and extra large display none okay now let's see if this works by adding these classes to the different elements in the header so for mobile we want to hide those links as well as that cta so let's add the class here and then for desktop we want to hide the hamburger menu since we don't need that for desktop and we're going to keep the logo because that's going to be used for both okay so now moment of truth let's see how this works looks like something's not really working but let's see yeah this is when we debug our code so hide from mobile and for desktop interesting looks like there's no errors so what we want to do is maybe check out the final css file there we go let's see if we can find that class oh looks like we didn't even didn't even get pulled in for some reason that's weird oh wait there's a error here no mixing named breakpoint down okay let's go back and start from the beginning oh we didn't add the mixins sass file so let's let's do that that seems pretty important now we go okay now there's a success message go back to our site oh my gosh what's going on here okay so it does look like things are hiding and showing so let's see when when does this switch potentially four and up it's showing the links and the button and then yeah so hide for desktop display none or the the hamburger menu then here there's no styles here but as soon as we get shorter use the hide from mobile so at 10 24 is when everything either gets hidden or shown so this looks like it is working let's look at the design again and just make sure we have all the styles correctly we need some more space between these links here so let's see how much space we need to add it's about maybe 32 pixels so going into our header sas file header links a what we're going to do is we're going to add a margin to the right of the link but we don't add a right margin to the last link because there's nothing after that so we're going to use a not selector and then not last child so as long as it's not the last child margin right is going to be what do we say 32 pixels all right so now let's make sure there's no margin added to that last link contact blog why is there white space here and then queers does not have it so the white space is probably added because of the enter key um there we go okay now there's no white space that's weird let's go back here check one more time let's check this button styles again 152 by 50 seems a little bit big to me i feel like some of the padding might not be quite accurate here is our div 163 by 44 and let's kind of guess what this font size is it's probably 14 which i think it should be correct let's double check the font first and then we'll adjust the padding to match so if we go to computed and see that the font size is 14 so that's right so we're just going to adjust the padding here the pattern right now is 16 on the top and bottom it's 50 pixels tall right now and it should be 46 we need to subtract 4 pixels so 2 pixels from the top and bottom so let's go back to our button styles and here's the padding so one round which is 16 pixels but we want to subtract that and make it 14. um 14 divided by 16. 0.875 rem there you go so now it's 46 which is pretty good and then it should be 163 and it's only 152 so it's about 10 so we'll add five more to each the left and the right right now it is 30. we want to be 35 on each so 35 divided by 16 is 2.1875 2.1875 okay so that looks a bit more like the design 162 by 46 which looks much closer yeah that looks pretty good and let's actually double check this logo size as well for both mobile and desktop it looks like they're the same size for both let's just make sure it's about 141x22 if it's the same for mobile yeah it's the same let's see what the actual logo is here 139 by 20 and it should be 141 by 22. so let's see where this gets set i think it's in the header oh we didn't even set the size okay so it needs to be 141 by 22. so 141 divided by 16 8.8125 and then height should be 22 1.375 okay let's see if that helps at all alrighty the 141 by 22 141 by 22. all right this is pretty good so we got our mobile styles here for the hamburger menu as we get bigger we got the desktop styles so let's check out the active states for desktop we go over here looks like the text gets darker and oh we have this border here and then for the button it looks like it gets sort of like whited out a little bit yeah it looks like that so first let's tackle the that bottom border and the color for the text so the header links i'm going to do is for the hover pseudo selector we want the color to be the darker gray so it was grayish blue here so it's probably this dark blue color here let's double check on that nice and to make it a little bit nicer we can add a transition so transition for the color and the timing for that let's just say maybe 200 milliseconds and then i like to do ease in out for most transitions there we go so you can see it's a little you know just a little bit nicer let's figure out how to do that bottom gradient so the problem is here right now these elements are just the width or the height of the text itself so what i will need to do is i need to add some either margin or padding for the top and our bottom to make it the height of the probably the entire thing because we're centering everything remember so where's my little rectangle where'd it go i left it over here oh there's another one down there like this one we'll take this one in case we need it later make it bigger so we can see it let's take that over here and see how tall this thing needs to be looks like the header itself is about probably 80 pixels tall is what we would guess and then the little border thing is about 5 pixels tall let's go back to our site add some border so we can see what we're doing here i can see that this has a border this is actually a little bit tall as well and it really should be 80 pixels tall it's probably the padding the header has no padding the nav has padding here 24 pixels of padding so let's try and we should probably convert that to rams as well so if the total height is going to be 80 we can take this down so 17 pixels and 24 pixels or header nav padding and then if we want to convert that to rems 1.0625 and then 24 1.5 okay so now it is 80 pixels tall which is pretty much about what we wanted let's see if we can do it with a pseudo element not sure if this is going to work let's just say for this one um header links a new set of styles here airlinks a b4 so content needs to be an empty string so let's try position absolute width of 100 display block and we'll make it a height of 5 pixels and then background of let's just say you know the lime green color so the suit elements going all the way across which we don't want it to do i thought this position relative would work let's try adding it here okay there we go maybe we'll try to align it to the zero left of zero right of zero so instead of width we're just saying left and right so now each link has a little line which is what we want but it doesn't seem like it's in the right place and i think it's because we want to adjust it so that it's right up to the header so now we want this green line to be down where the blue line is so let's see if we can do that we might actually just need to add a static let me think about this what we could do is say bottom zero negative statically set it to 30. that might actually be the easiest one so let's do that okay so before we forget let's copy these styles so header links a i'm going to say position relative and then the header links a let's add this here so before let me content empty and then let's just kind of copy those other styles that we'd added here okay so now this actually worked oops what did i do what did i do looks like set position relative hmm what did i do oh i didn't add position absolute there we go there we go i think it was happening before was position relative and you just made them stack for some reason makes every element a display block which takes up 100 width and then it's in the flow of the document interesting okay anyway so here we got our lines now what we want to do is make the colors correct first of all and we're going to only show the line when you're hovering if we look over here it looks like let's see it has the same green actually as the button it goes from lime green to blue so let's go back to our button styles so here's the linear gradient i wonder if we're using this gradient again in this website so it's using the buttons which is already taken care of this i'm assuming are just icons this is just green i think we'll be okay just leaving the styles like this and then we can just copy it if if it was used multiple times i might create like a helper class for that but let's just leave it like this for now and then we also only want that to appear on hover so when you hover on the element itself the pseudo element will get this background that's cool now we need to figure out a way to make this more transitioned because it's a little bit you know kind of jarring just like suddenly pops up as opposed to the color of the text like itself what we can do is unfortunately you cannot make the background itself you can't make the background itself transition it just doesn't work that way so what we're gonna do is we're going to put the background back in the pseudo-element by default but we're going to make opacity zero and then when it's hovered we'll change the opacity to one and then we can add the transition here opacity 300 milliseconds ease and it'll be the same oh wait 200 milliseconds so now let's get rid of that border too don't need that let's see what this looks like now you can see it is fading in and out pretty nicely might make it a little bit slower let's make them 300 for both okay so now it's a pretty nice little transition here okay so i think these text links are good let's move on to the hover state for that button let's look at the design one more time it looks like it just kind of fades to white so i wonder if we can just make this adjust the opacity let's see what this looks like opacity let's try 0.75 see what that switches look that's pretty good okay so button header cta in the header let's find the cta and then we're going to add a transition for the opacity again and we'll do the same thing 300 milliseconds oops ease in out now on hover um we'll say opacity is zero okay so let's see how that looks now whoa oh it doesn't want to be 0.75 i think i said that wouldn't be very good user experience that's pretty good for making this hamburger menu the first thing is we need to turn this hamburger into an x when you click on it so some kind of cool animation second thing that happens is this overlay will in some way shape or form appear over the rest of the website and then on top of the overlay will be the actual mobile menu then clicking on the x will animate it back into the hamburger the overlay will disappear and the mobile menu itself will also disappear in some way so the first thing i'm going to do is starting with the hamburger menu animate it from hamburger to x so to do that let's do a little bit of research online so i'm going to go to codepen dot io and i will type in hamburger menu and just kind of see what happens see what we can find here i do want to mention before we get into this is that even though you can legally copy any code you find on codepen i try to do research see what other people have done terms of solutions see what they've built but then try to build it myself so this is really just the steps that i take to build something just to do some research that's kind of cool let me try hamburger animation that's really the specific thing we're looking for here i don't want anything too flashy or too fancy um yeah that's a little too much for me and i just wanted to include this part in the video because i do feel like researching is a very important part of coding you always have to invent everything from scratch okay i actually kind of like this animation the middle bar disappears it fades out and the two the top and bottom bars form the x so let's just see what they did here they've added some transitions onto this and transform origin line two goes to opacity zero so it fades out so it looks like line one i'm assuming is the top one rotates 45 degrees so it's angled the bottom line is going to rotate negative 45 degrees and i do like how this looks so i think i'm going to just try to build this animation one thing that i think i'm going to do which is a bit different from a design is i'm going to make this hamburger menu a little bit taller and more square because we can see the x is actually square and it looks taller than the hamburger menu we'll make that change then we'll start adding in the animation so what i did here was basically added three pixels of margin bottom to the first two spans it's 26 by 14 height right now i know 26 by 26 is really what i want we'll just try to eyeball it honestly let's do five pixels this is the header underscore underscore menu this is one benefit of using the bem styling because i know everything has to be in the header sass file there we go five and we'll go back here okay that looks pretty good i think i'm going to add a class on this header menu so that when it's open that will sort of turn on the animation okay so header menu go back here so header menu then i'll add a helper class and we'll just say open so in the header let's kind of refer back to our markup as well so this here is the mobile menu so those spans in the header underscore underscore menu if header underscore in a square menu has a class of open as well then we're going to transform those spans span first child and we'll add another one or last child and then i think i need to add one for the middle child there's no middle child selector but i think we can do nth child i think it should be two because i think the number for those starts with one so when it has class of open we're going to do transform rotate 45 degrees then for the last child we'll do negative 45 degrees and then the middle child will say opacity zero and the reason i'm doing opacity instead of like display none is because you can't transition display block to display none you have to do opacity which can use a transition now let us test this in the browser it's going to reload and of course i didn't add any javascript or anything yet so we're just going to add manually the open class to the menu that doesn't look too good i think it has to do with the transform origin because right now what is happening is they're kind of just rotating themselves wherever their middle is let's add a transition then we can kind of see that a bit more clearly transition will say all 300 milliseconds ease in out all right let's try this again we can add a class of open take a look at the hamburger menu yes you can see each line is kind of rotating on wherever the center is the middle one's fine because it's just disappearing so i actually kind of need to look back at that because you can see that you want the transform origin to be on the sort of left side let's kind of see what they did here okay transform origin 20 ammonium i haven't used transform origin really before so let's google that transform origin i try to look at mozilla developer network when i can okay transform origin sets the origin for an element's transformations it's rotating the origin is the center and i'm assuming that's default so let's try top left instead of just rotating from the center it's the corner is kind of where the rotation starts so that might be what we want for the first line let's just try transform origin top maybe center left since they're just lines let's just add it for all of them transform origin center left or let's do left center i don't know which one needs to be first i'm not sure if it matters let's add this open thing again getting closer i think i'm actually going to add the javascript here so i don't have to keep manually adding it in i don't really need the hello world anymore for clicking on this i'm actually going to add an id because i like to use ids for the javascript functionality so button hamburger and then take this id then the script.js will say document query selector and selector is going to be the hash button hamburger and then let's add event listener and it's going to be a click then when you add it it'll run this function i always use a little console logs to test first open hamburger const hamburger equals the button hamburger over here actually let's just call it button hamburger then we can reuse this constant that we created when you click the hamburger i'm going to run this console.log message and then i also want to add a class and we can do this with classlist dot add and then the class name we want to add click hamburger so i'm gonna use a little if statement here so if button hamburger class list contains if it has open the open class i want to remove it otherwise i want to add the open class that should take care of the functionality we need for now let's click on this look at that add the open class and click on it again and it removes it okay so this looks good obviously this is x looks a bit weird we just need to kind of adjust the transform origin i think let's try zero pixels zero pixels just to see what happens oh look at this boy this looks weird oh that looks much better three pixels in one pixel in the header or was that oh transform origin there we go let's try again clicking on the hamburger menu nice looks like a nice little x hey look at that okay so this is the first functionality of the hamburger menu next thing we want to do is we want to load the overlay because we don't have any regular content in the website i'm just going to maybe add some stuff just so you can see the overlay opening over the regular content we'll just uncomment all of the html here okay so the next thing i'm going to do is we want to load an overlay so going back to the design the overlay it appears under the white navigation bar and then just over everything else so the headers here and the nav is included in that so i could do a couple things i could create an overlay on the same level as a header and then just make sure the header has a higher z index so it's on top of the overlay so let's try that actually so here's the header i'm just going to add a div class overlay okay so to make the overlay let's look at the design again so it starts with this gray color i'm assuming it's this sort of blue gray color which we can use and then it's a linear gradient which fades as you go down to transparent first let's get the color that we need it's probably this dark blue here the overlay let's just add a background color as a fallback then linear gradient oh wait background image linear gradient and i always forget what the but let's just try transparent we'll see i am a professional web developer but i do look up a lot of stuff okay so looks like that's the correct linear gradient thing so we do need to make this um cover everything and i want to do position absolute and then we'll just set top to zero for now right zero bottom zero left zero actually i think i might need to do a fixed because it's sort of going like this so you need to basically set the height of it to 100 vh so the viewport height i think this should accomplish the same thing we'll see oh look at that overlay oh yeah so i don't really want that i can use the shorthand those two 2d 314d hmm that's not what i want um css gradient fallback color um let's try linear gradient here we go there's a way to use these gradients and fallback colors that's what i did background color yada yada background image oh fallback image i don't know if that's actually because i did that but then it just add the background color like this um what if i did this nope well i guess that okay yes yes yes weird i don't know why this is not working well in any case maybe we'll just get rid of that background color weird i will just delete it this is kind of what we want i want to make sure the text goes sort of taller than what we can do so we'll just do this let's just do there we go okay so you can scroll down overlays fix which is pretty good obviously now it's covering up the header so we don't want that so for here we need to i think declare the position set the position rather or i think what we need to do is make the top the height of the nav bar so this is about 60. we'll just say top is 60 pixels there we go now we have our overlay we got top to 60. actually we should use rems so we'll do our little dividing game here 60 divided by 16 is 3.75 rams now um we also want to control this with a css class so before we if we add the open class to the hamburger it'll open what i could do is try to just use one css class to control all the animations so i think i'm going to add the open class to the header instead of the button hamburger itself open so what i'm going to do is i'm going to take this and then i'm going to add another section here hamburger open styles and the overlay into the header and then we'll add our open styles here and we'll put it in the header itself of course i'll set it at the top so if if the header has class open then i'm going to say um header menu we need to add these styles here so what i'm doing is i'm basically moving that all the open styles into if the header element has the open class not the header menu let's now test these adjusted styles and update our javascript so that we are adding the open class in the header element itself so create a new constant we'll just call this header and we'll use the same document query selector and we will select the class of header element so now instead of checking if the button hamburger has the open class we're going to change it to checking if the header has the open class we'll update these to remove the open class from the header and then here we'll add the open class to the header so what this is doing now is when you click the button you're going to check if the header has the open class and if it doesn't have it added and if it does have it remove it let's test this out in our site what we hope will happen is when we click this it'll add the open class oh yeah oh yeah it works it's always a good feeling when the code does what you wanted to do the first time without having to tweak it okay let's go back into our scss and i'm also going to start animating the overlay because right now on the side it's just kind of like there let's take a look at here in the header we have the overlay and it's positioned fixed so i'm going to create a css animation a keyframe animation and i'm going to attach it to a helper class actually i'm probably going to attach it to the if the header has the open class then using that css keyframe animation it's going to fade in or fade out the overlay we might have to tweak a little bit as we go but that's kind of general idea i think what i'm going to do is by default i want to make the overlay display none and then we will fade it in probably using the opacity and transition and then fade it out when we close the menu so i'm going to create a new sas file actually so in our app scss folder let's create a new file i'm going to call this animation so any keyframe animations we're going to load in this animation sas file and then of course we want to actually load it import it in the main sas file so animations there we go actually let's just put it up under the mixins just to keep things kind of organized so these are like the functional sas styles and then starting here is where we have elements in the different component styles keyframe animations you start by typing at key frames and then you write a name for what the animation is so what i want to do is i'm going to create maybe two animations for the overlay i'm just going to call them fade in and fade out so the first one's going to be fade in and with keyframes you start with a from and then you end with a 2 and then you put the initial styles in the from bracket and then the end of styles in the two bracket and you can also add percentage of progress in here so if i wanted to i could say let's say 50 do something let's indent this a little bit or any percent you want and then it'll use that to time when certain animations take place this is more if you have like complex animations what we're doing in is a pretty simple fade and so i think i might be able to get away with just using from into okay so in the header sas file the overlay has a default display of none and then in the animations i'm just going to add display none just because it's where we're starting and then i want to end up having a display block and opacity of one and we're also going to start with an opacity of zero now the tricky thing about this is you can transition opacity from zero to one it'll have a nice smooth animation from zero to one but you can't transition display none to display block that's just not how css works first it's gonna be display none then i'm going to say maybe one percent so right after it starts it's going to be display block but it's going to be opacity still of zero and then from one percent to basically 100 the end it will stay at display block but then it's going to transition from zero to one we can try this out by adding this animation in our styles and i'll just add the overlay styles up here so if the header is open then the overlay is going to have animation and it actually gives you a little help here so name duration timing function um direction things like that the name is the name that we added here so fade dash in duration let's just say 300 milliseconds that's kind of my default timing function ease in out is what i usually use and delay i don't think i need a delay iteration count you know how many times you want this to happen we just want it to happen once so i think you don't need to add anything there and then direction we want forwards and then fill mode i don't think i need that i don't think i need that so forwards this is actually important because saying forwards will ensure that once the animation is complete it will stay at whatever styles that you've put on the two otherwise it'll kind of animate and then reset back to whatever you had styled before adding any animation so we want to keep this display block opacity one after it's finished all right these are the styles we need for the overlay and let's i guess test it out okay so you can see the header and then we can see the overlay now is display none let's click on this and see what happens okay looks like camera is still working but the overlay is not animating in so we know the animation is being added to the overlay but for some reason the loading isn't actually working and we're not sure why what happens if i uncheck the display none oh so it did actually fade in look at that for some reason it's not sticking the end state is not staying on the thing display none but it does have the animation okay time to google again or i guess stuck that go css animation final state maybe okay maintaining the final say the end of css3 thing and then i like using looking at css tricks as well as mdn so stack overflow css tricks and mdn are kind of my my main three sources that i go to okay looks like this person's also opacity changing from opacity zero to one elements go back to opacity zero animation fill mode is forwards well i did use that i believe yeah forwards maybe does the order matter in terms of what properties i put in here i'm not really sure i mean it seems like it's working if i uncheck the display none so i'm not sure what is happening it just says forwards should make sure it'll hold the last keyframe state don't forget to specify 100 huh i wonder if that does anything i don't know if that's gonna work but let's check on mdn i don't know if you need the both 100 and the two this is just from two yeah from 75 percent to i don't think i need to actually say 100 i mean i guess i can't hurt let's just try i'm not even sure this is like good syntax okay let's try again nope not working so i don't think it's this i'm going to delete the 100 stuff i know this is bad but i'm going to add an important to this see if that does anything nope jeez this is kind of annoying fade in 300 milliseconds easing out forwards hmm it seems like i'm doing everything right but obviously it's not working let's just get rid of this important because that didn't help i'm going to try commenting out the display none just for now and i'm going to try just setting it to opacity 0 and see if that makes it do anything different okay so it did fade it in so somehow adding a display block is not getting added because unfortunately i do need the overlay to like be display none otherwise i'm not going to be able to click things that are under the overlay so let's put that back in oh what if i okay by default overlay display none but but what if i add display block when it's open oh my gosh this work whoa that's so weird what if cs animations don't actually affect the display property at all that could definitely be the case let's look at this css does css animation display block because it might just maybe not affect the display property at all and make them just leave block display none that's sort of what i'm looking for um as you know oh one of the properties that cannot be animated is the display property okay so that's why i mean i guess it makes sense although intuitively you would think that you could add an animation from display none to display block and it would sort of understand that you want to fade it in so i think i don't need to add any display properties in the animation since obviously nothing's happening and because i'm not doing that i think i don't even need the one percent thing because i had just done that to make it display block and opacity zero so let's try this again okay here's the overlay header doesn't have open class let's click on it oh yeah okay so that's a fade in animation um and then let's make another one that's going to do the opposite fade out fade out from opacity one two opacity zero okay i added the fade in animation when the open class is added i don't know if it'll work if i add the fade out animation or like the default let's just try it we might need to add a helper class to the actual overlay to fade it in and fade it out but let's just reload because i want to make sure nothing weird happens with this okay i just want to make sure that because i added a fade out animation by default to the overlay i didn't want it to like fade out when you load the page because that would obviously look very strange okay clicking on the hamburger menu fade it in very good and it just sort of disappears so it doesn't have the transition which means the animation is not being added so let's make this a little bit more reusable so what i'm going to do is i'll just add a little helper class fade in and then we'll take this and instead of applying it specifically to the overlay i'm going to add it to this helper class here so we can do the same thing with the fade out we'll add a little helper class i think this might be a better practice anyway because then i can fade in or fade out any element using these helper classes so just fade out i do need to leave the display block here just to flip it from display none to display block but what i think i need to do is in javascript add that fade in and fade out class to the overlay so if header if it contains open remove opens this is when you close the hamburger menu just so i don't get things mixed up close hamburger menu else add open class meaning open hamburger menu so when you open the hamburger menu we want to add the fade in class to the overlay so let's add a new constant here let's call this overlay document query selector and it's just a class of overlay so when you open the hamburger menu overlay class list add fade in let's just test the fade in functionality now go back to our site okay so you can see the fade in class was added and it's adding this animation and then we'll do the sort of the opposite we'll say overlay classless add fade out when you close it and might need to also it just to kind of reset everything okay let's try it again reload for good measure all right it's fading in now what we want to happen is we want the classes to basically swap when we close the menu it's fading in but it's not oh you know what's happening it's because this when you remove the open class from the header it immediately just like goes back to display none shoot it's kind of annoying but i think i need to remove the overlay getting the display block and instead adding it to the overlay element itself so it doesn't get affected if the header has the open class or not so overlay if it has class fade in this is just going to do the same thing of just making it disappear oh boy this is tough okay fades in still doesn't fade out okay let's think about this what's happening step by step so okay going back to zero this is the default state you click on this it will add display block and then also fade it in the animation works because going from display none to display block it's still opacity zero so it's not going to like show up um without the nice transition the animated transition but then if you remove if you remove that then it's going to just display none right away so what we want to do is make it go from display block to display none after it fades out from opacity one two opacity zero so let's just research some other possible solutions um css animation display well it's kind of what i was searching for before display none display block none see what stack overflow has for us okay yep changing display none okay cs or jquery ie javascript can't animate between display none and display block i see 0 visibility hidden interesting i just want to make sure that the stuff is still clickable when we have like a visibility hidden but it still exists get rid of this display none see rid of opacity zero so now it is default display block visibility hidden it's interesting oh it seems like it's actually still clickable oh shoot this might be the silver bullet i'm looking for yeah so it's still clickable which is awesome to see what happens is it's just opacity zero it's not clickable like i can't select text as easily yeah i can't select the text but if it's visibility hidden it does select the text and i think visibility should be able to be animated so let's go back here so fade in we're going to go from visibility hidden to this might be where we need to just switch it quickly to visibility visibility visible with opacity zero so we're kind of combining so it's sort of like display block but i guess it could be animated for whatever reason then we'll do the same thing here so from opacity 1 visibility visible we'll go to opacity 0 and then we want it to be visibility hidden but in order to make it still visibility visible but opacity zero we're going to add 99 so when the animation is almost done it's going to be at visibility visible but opacity zero and then let's see if i need to adjust any of these styles here i guess i don't need this anymore opacity or display none i think this should work famous last words let's reload for good measure okay see what happens fades in all right oh my gosh it fades out yes uh i always feel so good when you're like struggling with something and you're researching it and then finally get it to work that's an interesting little lesson i guess like display none is different from visibility hidden versus opacity zero and they all sort of do different things okay yay let's go back to the mobile view here oh i'm so happy oh this is great okay so now that we have our nice fade-in animation of the overlay next step is to actually code the menu now to start off building this off canvas menu looking at the design we can see that it's fairly simple it's just a white block and each link is in its own row so what we're going to do is first write the html markup and then i'm going to style it in our scss and then the last step will be to handle the animation and make it slide on screen or fade in or something when you open the hamburger menu so let's go into our code editor and let's figure out where we want to put the markup for the menu so obviously we want to be in the header tag since it is part of the header the menu is so i'm going to i think put the menu in a div after the nav so let's call this header underscore underscore menu maybe wait am i using this already oh yeah i'm using the menu for the hamburger i think this is more of the menu so i'm going to rename what the hamburger is so instead of underscore ownership menu let's make it underscore underscore toggle and then i'll just rename this in these styles so here we go header menus now header toggle let's just do quick find and replace here i'll just add a little toggle here to clarify what that's doing let's double check the javascript as well it doesn't look like there's a menu so we're good on that side let's just go back to our site real quick make sure everything's still working okay overlay and the hamburger icon are still working which is good so now let's move forward and create our header menu the header menu is going to be you know that white block and then in that we're going to make some links so let's look back at the design one two three four five links so we'll say a link times five again using that emit shortcut press enter and we got five links this is just a landing page so i don't need to have these actually be links so it's gonna be home about contact blog careers boom about a boot contact blog it's like a test of my short-term memory and careers let's just double check that all about contact blog careers yay i think this should be all the markup that we need let's go back into the header and then add the styles for the menu so the menu so the background is going to be background will be white did i create a variable for the white color the variables white i did it'll be background white and then in that will be links and i don't think i need an additional class for the anchor links themselves it's just enough that they're anchor links so that's going to be color and looks like it's probably the same gray as the header here so let's go back into our variables and i'm guessing it's the dark blue thing now we also need to add a bit of spacing get my handy dandy little rectangle here and then we will see first how much spacing there is on the top and bottom of the whole thing this looks like about 36. it's the same on the bottom and then each link oh i need some space too what i might do is do something like this where each link is going to be a certain height maybe 36 and then let me duplicate this square here then i'll add another padding on top and bottom of 26 so then each link is going to be you know 36 something like this we can always tweak it later on so it's gonna be padding of top and bottom is 26 and then 36 height for each link so padding i guess i need to use a calculator again 36 no no 26 for the padding divided by 16 is 1.625 rems 1.625 rams on top and bottom and then 0 on left and right i guess we just do it all around so we got the padding and then i think i also want to now there's a couple ways you could do this i could i could add top and bottom padding to the link itself i could also add the height of 36 and then make it a flexbox parent and align items center i think i'm just going to add the top and bottom padding let's say 10 pixels on top and bottom that way i don't have to write as many styles as i would if i had to turn this into a flexbox thing so padding oops padding and 10 going back to calculator 0.625 and what the heck we'll just make it all the way around now let's see what we got on our site and we got our links it has a white space but i think that's okay so i want them to not be side by side and it's happening because anchor links by default are display i think inline or inline block one of those if we change them to display block then they will take up the whole width that they want that they can there we go so display block maybe text align center oops on the caps lock again text line center looks like that works so let's add those styles into our code display block and for whatever reason i like to order my styles in this way where text line center where i start with the bigger properties like display and position flexbox things and then i move on to margin and padding and then i do text colors and then at the end i'll do like transitions or whatever it's just a way that i like to keep things a little bit organized because when you start getting more rules you don't want to be searching so i just try to group these similar styles together let's slow the site that looks pretty good now the other thing we need to look at is this white block for the menu doesn't take up the entire width but it looks like so you can see on the mobile site there's like a container width so you have some space on left and right and it looks like it's kind of sort of the same um all the way down let me refresh my memory and see if i actually added some padding to stuff okay i did added some padding and that's from header nav so it's just kind of a global padding thing okay so before i do more stuff with the menu itself i think i need to add some add this padding that i have here on the header and put it sort of for anything on the mobile page because we want we don't want things to go all the way to the edge and it looks like things are right now because yeah like later on we're gonna need that padding the padding that i was looking at was on the nav okay i think the best way to do this is to take this padding not have it nav specific but make it a helper class of course so let's add some spacing so we'll say the generic container class and then this will have the padding so that means we want to go into the nav element and then add the container padding there okay looks like it's working so it doesn't have the padding in the nav but it's in the container class so now that means we can add this container class to other other elements but actually for the container class i only want the left and right padding i don't want the top and bottom so i think what i'm going to do is take this top and bottom make it zero for the container upper class but go back to the header and put the nav selector back and say padding 1.0625 rams zero because oh boy what did i do oh i know why it's because this reset the padding so the nav has the padding just on top and bottom and it's cancelling out the left and right padding here and that's because i'm using this padding shorthand so the best way to do this is to specify padding top and padding bottom i use a little control d to duplicate the line so it's a really helpful shortcut here and then here it's going to be padding left and right of 1.5 rims there we go shorthand properties are great but sometimes you do want to split them out just because you might want different values for different elements so now the nav has padding all the way across which is good and we can start adding the container class padding to other elements when we have the menu open we want it to be on top of the overlay and then have that spacing so i think if i just add the container class to the header menu itself should automatically do that we can't see it right now but there we go so we can see there is padding there although wait a minute i don't want padding i want margin for that so i'm going to keep the padding because i do need it for like the other content down on the page but we need to change this padding to margin for just the header menu so let's get rid of this and let's take that padding left and right it's 1.5 rems we do want it to match the padding that the rest of the container elements are going to have but we're going to make it a margin instead so margin and i think we can use the shorthand so 0 and then 1.5 rims so now you can see that it does have that margin you just can't see it on the page itself because everything's white so i think we should be good to go now let's just take one more look at the design okay so there are some rounded corners let's add a border radius to the menu as well border radius let's try three pixels i think we have enough now that we can start doing the overlay thing right now the header menu is under the overlay because the overlay as i'm assuming it has a z index maybe it doesn't have z index because i didn't do it yet let's see what we got here overlay and then nav is there menu's under that i guess because this doesn't have a z index set and that is probably because there's no position property so if you don't have a position property it's going to default to position static which means that anything that has its position set or has a z-index value is going to be on top of it so let's see what happens if we add position absolute okay so now it's on top of stuff and let's try with 100 you can see it's like going off the screen so what we want to do is this margin thing isn't actually doing anything so it's positioned absolute what you could do is instead of with 100 you could say with like 90 and then margin actually i don't know if it's going to work because it's position absolute yeah it's not so since it's positioned absolute unfortunately you can't use the margin auto on left and right to center it because it's like not in relation to anything else it's absolute now i do want to make that spacing right so since we had that margin before of 1.5 rams which is not being used obviously i don't know if it's the best way but i can do a calc and say i want this to be all the way across 100 minus 1.5 rams on either side so 1.5 times 2 is 3 so 3 rims then when we center it it'll be it'll sort of be flushed to either side for the container for position absolute element you can center it by using left 50 and then trans form translate x negative 50 and what this is doing is left 50 is making it go 50 or halfway across you know its container so that's why it's right in the middle what transform does is it's going to let me turn off that left if you don't have it by default it's going to be left aligned right so if you turn on transform translate x you're moving it 50 of the object itself so not the container but the object itself so that's why combining the left so this is the middle line right here and we want to move it back to be centered we only want to move it back this much half of the width of the element itself so that's why these combined will give you a centered position absolute item so let's do this we're going to copy these things over to our code there we go so position absolute width is the calc hundred percent my three rims to have the padding and doing the left 50 transform translate x negative 50. i think i need to get rid of this margin yeah there we go don't need that anymore opening the overlay now we can see it's nicely centered and we probably need a little bit of space on the top there using our little handy dandy rectangle here let's see how much space that is about 24 so we are going to do margin top where's the calculator 24 divided by 16. 1.5 there we go okay so now looks pretty good i think i might need a little bit more rounded corners let's try increasing that border radius a little bit maybe five i compared the design it's actually not super round i think five is good okay so there we have our mobile menu the next thing we need to do is we want to animate the menu on screen when the menu's closed is going to be off canvas meaning off you know your viewport you're not going to be able to see it and then it'll somehow animate in we could either fade it in we could slide it down from the top or slide it in from the right let's do some research so go back to codepen search for off canvas menu maybe maybe mobile menu maybe animated mobile menu get a little more specific okay responsive menu with icon this seems pretty popular so i'm just kind of getting ideas for you know how they're handling this thing um where's the menu what no well not sure what happened to that bootstrap 4 animated menu you click this thing so this is interesting it sort of fades in covers everything so that's that's one way we could do it sort of similar to the how the overlay sort of fades into fades out you could fade in the menu along with the overlay so that would actually be sort of cool i think i'm going to do that i was thinking i was going to slide in from the left or right but fading in actually seems quite nice and we can hopefully utilize some of the same styles and animations that we did for the overlay into the menu so looking again the overlay was set at opacity zero position fixed is that right wait a minute it's opacity zero it's still you can't click through it so it is here oh yeah it's not clickable what did i do i think i forgot to maybe add visibility hidden then we can still select stuff underneath it yeah i just needed to add that visibility hidden and actually i since i'm reusing this for the overlay and also the menu let's make it a helper class like everything else so let's see here visibility maybe i should put it in animations so we're using visibility so what i'm gonna do is before the keyframes i'm going to add another helper class i'll say has fade and i'll say visibility hidden and that's gonna be the default state of any of these elements that we're fading in and fading fading out let's see go to header okay it doesn't have visibility here because i had forgotten it last time but now i can add the has fade class to the overlay and if this works we'll also add it to our menu itself let's reload for a good measure okay so overlay has fade visibility is hidden i can see that i can select through like the overlay is not preventing me from clicking here because it's the text cursor okay so this is working so i'm going to add that has fade class also to the menu itself so header menu has fade so now it's not visible because it is visibility hidden let's find the element there it is so has fade so now i can just kind of do the same thing that i did for the overlay in our javascript scoot this over a little bit so we can see our javascripts we are when we open the hamburger menu we are adding the fade in fade out to the overlay we also want to do that to the menu but since they both have that has faith class what i could do is instead of having to duplicate both these lines of code for both elements i could say const i'll just say fade elements elements so document query selector and then if it has that class of has fade i can hopefully target it with this actually i might need query selector oh yeah because query selector i think will just yeah it just gets the first one so i need to do query selector all that's why i'm naming the constant name with a plural instead of a singular just little little hints like that will sort of help you not make mistakes so let's handle the open stuff first fade elements and i think you can do four each for each all right i can't remember the syntax uh javascript for each i know this is very basic i admit i'm not super well versed in javascript here we go oh yeah for each function yada yada so for each function we want to do this so then in the function it's going to be element hopefully this will work okay so what we want to happen is on both the overlay and the header menu when we click this we want it to add the fade in class ooh it worked um what happened here weird it's disappearing for some strange reason what happened maybe let me try removing the has fade class from the menu just to see what happens when it's only on the overlay weird why is it disappearing like that that's very strange let me try to do it manually fade in oh even if i do it manually weird something about the has fade is like canceling this for some reason because i have the visibility hidden okay let's start from the beginning adding the class via javascript does seem to be working so that's not the problem the problem seems to be because of this has fade class where i set the visibility to hidden oh it's because i think i didn't add the end state for this visibility visible there we go i think that should work now yeah because the way i'm running the animation it's going forward so it's keeping the end state here so because this was not here it kind of defaulted back to the visibility hidden from that has fade class so now things should work let's see okay stays like that okay so let's add the has fade class back to the header menu all right oh i didn't add the other stuff we just added code for the fade in which seems to be working looks pretty nice might speed that animation up a little bit so let's do the reverse so do the same thing fade elements for each function element so the element parameter because it's looping through every element that has the has fade class you can use the element parameter to target and run functions and stuff like that so element element okay so now both the open and close functionality should work so let's give it a run hey look at that nice okay i'm gonna speed that up a bit it's just a little bit a little bit slow so let's do 200 for both fade in and fade out but i'm pretty pleased how this looks i think that's pretty good now i did want to fix that overlay because when you scroll like this like the overlay is not going all the way to the top overlay i said top 3.75 how about zero oh it's because i don't want it to be on top of the header or i don't want it to be on top of the nav i want the header to be on top of it but i think that adding it should still go all the way to the top so i think it's because this doesn't have a position set i think this is position relative i'm trying to put the nav on top of the overlay oh it doesn't have a background color it was just using it from the um the body but it needs its own background color there we go so now still scrolls and stuff let's do that so to the nav we'll add position relative and the background color relative background color white all right there we go now oh i forgot to rest remove the overlay thing top of zero to reload here we go now you know this looks pretty good another thing people do sometimes is when you open the menu you sort of lock scrolling on the body so you basically say overflow hidden so then you can't scroll so i think i might do that with yet another helper class so body what another class of this we'll just say no scroll so overflow hidden we are going to have to add this class to the body when you open the menu so when you open the menu we're going to oh i need to add it as a constant let's add it to the top here constant body equals document query selector body there we go when you open it you're going to lock the scroll by adding this class list add no scroll and then we'll do the reverse remove and we'll just put this one first since that's the way we had it in the other one let's see if this works so opening the menu all right so we can't scroll i'm trying to scroll and it's not happening because it wants to keep you on the menu when i close the menu removes no scroll class and we can again scroll down okay hey this is turning out to be pretty good so we're done with the mobile menu and the next step is going to be going back and adding the rest of the content of the site all right now before we start any coding of course we want to look back at the design and just have an idea of where we're going with this and how we want things to look on mobile and desktop so looking at the design the hero section on mobile is stacked to one column with the image on top and then the copy and button below that then on desktop we have two columns instead of one column with the text on the left and then the image on the right you might also notice that the images on the hero are slightly different between mobile and desktop so let's look at our files and see how that is going to be set up i have open here my project folder with all the website files and i already had saved all the images from front mentor in this images subfolder so my guess is the background intro desktop is going to be this one yep and then we got one from mobile this is just that designed background we need to look for the images of the phones probably this image mockups here what this is is a png with a transparent background and we can overlay that same image of the phones over the mobile background from mobile and then the desktop background going back to the design one more time we can probably use the same markup for both mobile and desktop and then we'll use styles to differentiate the styles between mobile and desktop as well so let's get started going into our code editor vs code and we're going to add markup for our hero section so i'm going to create a section tag and i'm going to call it class of hero underscore underscore just hero actually then in the hero section tag we'll add a div of class i'll start with the image so hero underscore underscore image and under that we'll do div class hero underscore underscore we'll just say text up in the hero image is going to be the image with the phones and the background and then the hero text is going to be under that and i'm doing it this way because on mobile we have the image first and then the copy so then we can just change the style so that the image is going to be on the right for desktop so now let's go into our files from front of mentor and we want to copy over the text that they gave us so we don't have to like type it out manually when you download the files from front of mentor they give you an index.html file with all the text already there so i'm just going to copy and paste that over so hero title is next generation digital banking now let me figure out what html tag we want to use so usually on a website the h1 tag is going to be the name of the page but i've also seen it where for a home page you use an h1 tag for the hero title and then why choose easy bank would be h2 latest articles would be h2 and so on and then we would do h3 tags for these little subtitles here for each section so yeah i think i'm going to do next generation digital banking is going to be the h1 tag we'll do that h1 and it doesn't need a class since there's just gonna be one of these then we'll copy over this text sorry this goes in the text hero section there we go and then i'm also going to add the button and let's kind of look back and see what i had done before or like this request invite button up in the header you just look for request invite there we go so i did an anchor tag with this button class and then a header cta class so let's do the same thing here we'll just use an anchor tag and let's say it's an anchor link we'll just do a round and we'll give it a class of hero cta but we also need a class of buttons so it takes all those button styles that we had built in the previous videos request invite is the text in that button so let's do that and i think i'm forgetting the yeah there's some subtitle stuff here this is an h1 i think because this is longer it's not really a subtitle i'm just going to put it in a paragraph tag and i don't think i need to put a class on that because we can just use the hero text paragraph tag selector so let's just do that copy this text over here we go oh wait i had already copied this so i actually don't need this file open anymore okay so i'll just delete this since we don't need it anymore okay so now if we look at our site you can see that we have the button styles have already gotten ported over which is great and then the next thing we want to do is we want to figure out how we want to code the hero image what i think i want to do is i'm going to create a div and we also need to keep in mind that on desktop you can see this phone image on the right kind of overhangs the section because next section has this really light gray background my guess is that this phone image is going to need to be absolutely positioned you can sort of guess something needs to be absolutely positioned if it's like on top of something else so because the phone image is on top of the next section over sort of overhanging it a little bit we can guess that this needs to be absolutely positioned there's a couple ways you could do this you could create a separate div just for the images which you know obviously i have the hero image div you could also use maybe pseudo elements and then have that absolutely positioned so what i think i'm going to do is in the hero image itself is where i'm going to put the background image that svg sort of designed background and then maybe i'll store the phone images in a pseudo class or pseudo-element like before pseudoelement so let's try that so in that case we actually don't need to add any more markup to the hero image because everything's going to be added in the styles let's move on to adding our styles so in our app folder i just need to make sure that i'm writing the styles in the correct place and since this hero section is a new section and it kind of is by itself let's create a new sas file so create new file we'll call this hero.scss and of course we need to add the file importing importing it into our main sas file so we can just close that for now and then in the hero section just move it over to the right side so we can sort of see our markup and our styles at the same time we'll add a selector of hero then i'm just going to add the ampersand underscore underscore image ampersand underscore underscore text so let's start with the mobile styles first so in the hero image selector i want to say background image url and we're going to load that so in the images folder you want to load the background intro mobile now we also want to add some other background style rules so background size we're going to say cover i do that so that you kind of keep the correct aspect ratio of the image and it doesn't you know stretch it or whatever but also it'll fill the space then background repeat no repeat because we don't want it to repeat and then just for good measure i usually do background position we'll just do center center so it is centered in the div now let's see what that looks like in our browser okay it doesn't look like anything and the reason for that is probably because there is no actual content in the hero image tag so you can see that there are the styles there the background image is showing up but because there's no height it is not going to show up at all so we need to do is figure out how tall we want this div to be and we'll sort of add that in the styles as well i'm going to grab my little handy dandy rectangle here maybe we'll zoom in a little bit on the mobile design i'm just gonna figure out how tall of roughly do i want this div to be so it's about 282 so maybe we'll say 280 pixels so let's say for mobile min height is 280 pixels and then i'm going to convert that to rems by dividing 280 pixels by 16. 16 is the base font size so you get 17.5 rams now let's take another look at our website oh there we go so it did now show up now this is a little bit wider than mobile of course so maybe i'll just turn on the mobile emulator in my browser so this looks closer to what we want in the design zoom out a little bit so you can see here we got the background going so now we just need to add in the image of those phones and i decided to do that in a before pseudo element with a background image it doesn't work we can try something else like using an actual image tag you know there's almost always more than one way of building anything so you don't need to worry too much about finding the one perfect way as long as it is as simple as possible and it is understandable for yourself in the future or another dev to look at the code and understand how it works then i think that you can choose any approach that makes the most sense to you the image is image mockups we'll kind of do the same thing where we're going to do the background size cover and these other background properties the other thing we want to do is we want to do position absolute since we're going to do that later on and because this is position absolute we have to make sure that the parent of the before pseudo element which is the hero image selector is position relative otherwise this image is going to basically basically fly up out of where you want it to be so just make sure that when you position absolute you make the parent a position relative to keep it sort of within the balance of the parent so let's just see what this looks like now look like anything this is probably again because oh i forgot so when you have a before or an after pseudo element you need to give it a content property otherwise it will just not even exist on the page this is just a characteristic of using these pseudo elements okay so now we can see in our inspector before is there so i think what i want to do is maybe add the height and i'm going to set height to 100 so that it will match the height of the parent so let's save that and what's going on oh there's no width here so when something's not showing up or doing what you want to do it's really good idea to always check in your code inspector i'm just trying to figure out and troubleshoot what is causing the issue so right now the issue we're looking at is why is the phone image not showing up look at this before element i can see that it has zero width but it does have 280 height because i set the height property so we're also going to set the width to 100 percent and we'll see how that looks okay so now we got our phones they are not quite the right size i think looking at this we want the bottom of that phone to perfectly align with the bottom of the background and that is not what's happening here this is the bottom of the background and just for good measure and debugging i often like to do this so i'll do a temporary border one pixel solid let's do magenta adding a border will sort of tweak the size of the div but for most cases i think it's still okay now we see we have a border of the hero image and we have the background going down there but we want the phones to end on the bottom we don't want it to be centered like it is right now so what we want to do is adjust the background position so it aligns from the bottom for center center this is the center horizontally is the first center second center is the vertical center instead of center for vertical we're going to say we want to position itself at the bottom so now we can see that the image kind of ends right at the bottom of that hero image div now looking back at the design i think the phone images are a little bit yeah it looks like they're a little bit smaller than what we have in our website there's just a little bit more space on left and right so let's go and sort of adjust that a little bit so the phone images are in the pseudo element the before element so how do we make this narrower what we could do there's a couple ways right now the width is 100 so if you decrease that um it would sort of decrease but then you have a case where it's not centered so then you'd have to add like a margin auto weight display block maybe oh because it's absolutely oh that would be too annoying you have to do left 50 transform translate x negative 50 to center it that's a little bit too much so i'm just going to delete those the better way i think is to keep the width at 100 so it's still 100 of the width of the parent but in background size instead of cover cover will basically ensure that the image is going to cover the entire div so even if it means cutting off from the sides it'll make sure that it covers everything that's usually what we want for things like this but because i want to make it a little bit smaller so we can also use percentages in background size so if you say 100 it's going to looks like pretty close to cover yes just basically 100 of the div so if we reduce that then maybe down to 94 it's reducing the background size but it is still centered because the width is at 100 and then we set background position to center for the horizontal so we'll just adjust that background size so maybe 93 for that before element so background size 93 reload for good measure that looks wait now the bottom isn't matching oh i forgot to save the center bottom let's do that there we go now it is pretty much close to the bottom not perfectly but i think that's okay we'll just sort of live with the imperfection and then it is kind of in from the sides a little bit so that looks pretty good now the next thing we're going to look at is the copy for the hero section so let's look at the design and obviously it looks a little bit different than what we got here on our website so it looks like we need to make sure the font is the right font family also the color needs to be a bit different let's just start with this title next generation digital banking i believe the font family itself should be the same as some of the title fonts that we have let's check out our style guide just to make sure what we're doing okay so font family we just are using public sands for everything weight 300 and 400 300 is light 400 is regular the font still looks still slightly off let's just check this out this pull extends so maybe we just need to make the font size bigger get this let's get a rectangle here and it's going to try to guesstimate what size the font is 30 pixels tall looks like font size 30 pixels the font weight seems a lot different in the design you know what i mean like it looks a lot more thin seems like that's the font that we're using and 30 pixels looks different as well okay so maybe 30 pixels is right but maybe the font weight is not correct that's 300 what does 400 look like doesn't look any different for some reason the h1 oh i bet it's because the h1 tag it's not going to show this here but usually the browser default will set all font weights to bold so font weight here we go 300 now that looks a bit closer to the weight in the design going back to our hero bass file so in the hero text section we'll add another selector for h1 and we'll say font weight is 300 and font family has already been chosen in the global fast file everything is public stands i'm just going to close this animation this thing too all you do here is the want weight of 300 and then the color is this sort of dark blue so in our variables last file it's this dark blue variable and we'll say color dark blue and usually what i do for headline tags is i'm going to add a line of about one i'll just put it in the h1 tag line height one usually for headline tags title tags you want the line height to be around one maybe slightly bigger and then when you have body copy like paragraphs where you have like longer longer amounts of text then you want the line to be a bit greater than that like 1.3 or 1.5 depending on the design font size i think i said was 30. let's get the calculator out 30 divided by 16 is 1.875 1.875 grams much closer to what we want here i think maybe 30 might not be big enough actually that's 37 size 37 pixels going back here okay that looks much closer in size i think i need to increase the line height a little bit maybe 1.1 maybe 1.2 a little bit less let's do 1.15 just kind of meet in the middle there all right so let's copy these styles over so i think i said font size was 37 pixels i need to convert that 37 divided by 16 is 2.31 just round a little bit here and then line height was i think 1.15 all right and we need to center the text here it seems like most of the content on mobile is centered so i think maybe for now i'll just set text align center for the entire hero section hero text we can do there text align center and then we'll change it to left align for the desktop media query there we go so going back to the hero let's add the selector for the paragraph in the text hero text area and we'll say line height and i'm not sure if this is right yet but maybe 1.5 to start off and it's going to be inheriting the font size of 14 pixels facing looks okay and we also need to figure out some of the spacing under the headline to the paragraph so this is something like 24 and then under the paragraph above the button so maybe something like 37 or 36 so 24 space under the headline 36 space under the paragraph itself so h1 by default will inherit the styles in the browser which we don't necessarily want i want to basically take out this top margin that just gets added to the headline tags i usually try to add space between elements by adding margin to the bottom of things not to the top here headline tags so we'll say h1 h2 h3 margin top of zero there we go now i'm gonna go back here now it's all the way up to the top a lot of spacing in the hero text area itself but for the margin bottom right now it's about 30 and i think it was 24 so under the hero margin bottom 24 divided by 16 1.5 rams and then in the paragraph we're adding a margin bottom of i think was 36 pixels divided by 16 2.25 rims now looks a bit closer to our design eh so there's space between the paragraph and the button now which is pretty good i need to figure out the space above the headline and to the end of the thing so it actually looks pretty similar to 36 so 36 on the top on the bottom it's all the way up to 87. so i think what i want to do is ideally at least in my mind you would probably want the same amount of space at the top and bottom of each section so this space here should be the same amount of space as up to here 85 seems like a little bit but i think we'll do maybe 60 pixels as kind of like the wrapper that way i can put it in a helper class which means i can then just add the wrapper class to each section that i want to add that space and so we kind of make our styles a little bit more consistent and a little bit simpler all right so i said container padding left and padding right as you can see here container has has padding of 24 on the left and the right so i had padding top and bottom just for the nav and then i had added padding left and right for the container and that is equal to 24. let's do that first the left and the right spacing by adding that container class and then we'll move on to adding the top and bottom spacing so hero text i think maybe let's just see if we can do that there container and then go back to our website and now you can see here the hero text has this space and i didn't want to do it on the hero image because that one kind of goes to the full left and right let's see if i add a container then it kind of messes up the alignment that i had going okay so now i've got the hero text it has a padding on left and right which is good kind of matches what we have here with the image of the phone so now i'm going to think of a way of creating that top and bottom spacing with a helper class you know do i want to add it to the container or do i want to add it somewhere else because not everything wants to have that top and bottom padding i'd only use the container thing in the nav so i wonder if in the container i could add padding top and bottom of i think i said 60. let's think about this if i add it to the container that would be good for this because then it has a space on top and bottom and left and right but then it would also take effect in a nav and i don't want that let's just add it to the container and see where you know kind of breaks the design so 2.25 rims i'll do the same thing for bottom you might do the same thing as me but when i'm going around for adding padding or margin i always start from the top actually right should be next top right bottom and left is last let's just check on that now and see how this looks so going to our rules you can see header nav it has a padding top and bottom which i had set previously which is good if we scroll down to the container you can see that did have the padding top and padding bottom of 2.25 rem but that got overridden by the more specific rule of header nav this is because using the class of header within the child nav is more specific than the just the general class of container just curious what if i do header container okay so in that case that would be more specific probably because the first rule is using the class of header and then the element of nav whereas the class of header and class container class is more specific than the element itself that's why this would override the class header nav selector so it's almost like rock paper scissors class beats element selector but then id selector will be class selector it's just something that is good to know when you're working with css a lot looks like we have our container stuff all set go back to our mobile view and just kind of double check on that things look a little better right we're getting more spacing added we spacing on top and bottom and we have this see the buttons kind of going into the bottom padding i believe that's because i probably need to set display inline block because i think by default if i don't say anything it's just going to be an anchor tag is going to be display inline so making it display block will make it have to follow the the rules that i've set for padding and stuff so now you can see having set display in line block the button is now inside the content and not going into the padding wait and that's in the header i might need to move the button rolls out of the header sas file just because there's places outside of the header that are using the buttons let's do display inline block at the top so now this actually looks pretty good we got our hero section from mobile looks like everything is good in terms of spacing got our button going click the hover state's not working on that you see i have that hover state on the top let's see where those rules are coming from make sure that they get applied to all buttons so in the inspector i'm going to select that top header button click on the hover and if you check this hover box it'll sort of force the hover state so you can see which style rules are getting applied so it looks like yeah the hover is part of the header cta rules and i want that to be applied to any button so let's go into our header sas file that was under the cta so font size font small so i wonder if i need to make the font size and color in the button itself so i think what i'm going to do is i'm going to let me move this globals over here what i want to do is i'm going to take the font size from the cta the header ct button and put it in the global button rules let's just do it down here font size and then the color is white it's already set there so i don't really need that this can also also just be copied over so i'm just going to delete this header cta now all the styles that we need are going to apply to all buttons since we're saving it in the global sas file let's try this again now we can see the hero button has that nice little hover state you don't always have to write your styles perfectly the first time because a lot of things you just kind of figure out as you build the website there's always going to be going back and sort of correcting things and tweaking things depending on issues that come up as you're building out this website there's nothing at all wrong with going back and changing your work a little bit now that we have our mobile styles for the hero let's add the desktop styles going back to our design you can see that the hero was one column on mobile with the image first then the text on desktop it is two columns with the text on the left and the image on the right so we're going to do is add some flexbox to this what i want to do is in the hero selector add display flex to turn on flexbox but i only want this rule to take effect for desktop widths and up what i've done before was i created a mixins sas file and we have our breakpoint up mixin that i can then use to add the media query so we'll say include breakpoint dash up and in the parameters the size we want to hit we're going to focus on the large and up then i can move this rule into the breakpoint media query so just by adding this one rule let's look at our website and see how that looks for desktop okay so you can probably guess what's happening here the hero image doesn't have any height but we can see that flexbox is turned on there we go flex 1 and we'll add flex 1 to the hero text as well this is just to start off to kind of make both of them the same amount of space but you can see that let's add that flex of one in the desktop width to both the image and the text selectors so we'll say flex of one and we'll change this later on but we just kind of want to get things started now we can see that there is height because adding the flux of one that makes the child flex element be the same height across both of the flex child elements you notice in the design the image is on the right for the desktop but because in the market we added hero image first that's why it's on the left so that's another thing you can do in flexbox is you can adjust the order so we want the image to be second on desktop i think it's flex order it's just order and we want to be two so we want to be second and we want text to be first so order of one there we go second thing we need to do is look at the heights because this looks like it's not quite tall enough compared to the design so on desktop the hero image is about and we're not going to take into consideration this overhang here because the section itself ends just about down here the pixels tall there's a couple ways we can do that we can of course adjust the hero section itself to be 655 pixels tall or we can make the image 655 pixels tall and then we know that the text will sort of take the same height so hero image what happens if we say height of 655 pixels so now we can see that it is taking up more space which is what we want so let's just say minimum height for desktop and that's 655 divided by 16 to get 40 let's just say 41 rems it doesn't need to be perfectly exact but going back here so now it's taller we do want to center the text we want to center the content in the flexbox in the flexbox parent in the hero flexbox parent you can say align items enter this will automatically vertically align everything so now of course what we need to do is we need to make this hero image the height of the parent hero do that by in the desktop breakpoint say height is 100 so we'll take the height of the parent hmm let's see let's see let's see i bet it's because in flexbox it's kind of intelligent so it'll size things based on the content and because the image has no content it's really looking to the hero text element for the height so i think actually i do need to move the height from the hero parent selector to the hero image let's try this just say height okay so there we go this is a little more like what we're hoping it'll look like i'm gonna get rid of that magenta outline i don't really need that anymore now we're getting there right texas centered on the left we've got our image on the right the height is pretty much what we want now we need to make sure the image is correct because you remember we had two different ones here we go right now it's just loading the mobile one and get another media query and then for the image i'll say background intro probably desktop so now it's loading the desktop so let's check on the design again looks like the phone sort of starts here kind of toward the end of that blue little wavy section so we need to move that background over a little bit so we can see the end we'll adjust the background position because right now it's just centered i'm just testing it in the browser it's a little bit quicker that way horizontally i really want it to start from the left side of that background image so we'll say left center we'll center it vertically so this is actually a little bit the phone's a bit down from the top of that gray blue section so what happens if we do bottom of it left top oh actually i think we can leave it left center but what we want to do is adjust the mock-up so that they're down so we can do something like top 10 or something then at least it's going to be a little bit closer to being under there and we also looks like we want to move it over a little bit but let's just focus on this background stuff right now and copy over the style so that i don't forget what i did the background position left center for desktop for hero image image desktop new background image and now it's also going to have a new background position that looks pretty good we'll adjust how the phones are positioned over the background image after we make it the right width because right now this is 50 and then the image is 50 but in reality there's more s width given to the images so now we're going to do is going to go back into our hero section sas file and we're going to adjust the flex child properties the first one was image and the image one was a wider one so we'll set that flex of three then for the text it's going to be two so what these numbers mean is the available space in the parent gets allotted to each child it's kind of like a ratio image is going to get three parts and then the text is going to get two parts okay so it looks a little bit closer to the design right so there's more more space given for the image and then a little bit less space for the for the text now i think i also need to make sure that we're using that container to have a max width set because right now everything is just going across so this is 1240. oh yeah it's going all the way across so what i think i need to do is for the container helper class which i already added which is good i'm going to have to add a max width let me just show you what that will look like max width and i think it was 11 13 pixels and then we're going to have a margin of auto it'll center it so then anything with the container helper class is going to have a max width set and then it'll be centered if the width is larger than that going back to our code editor and i believe it's in our globals so max width is going to be i said 11 13 just according to the design maybe we'll round it down 11 10 and turn into around 69.375 grams and then margin of zero on top and bottom and then auto left and right and that will center the container now we go back to here so we can see the header now is centered nicely it's limited to that 11 110 and then we're going to add that container class to the hero as well this is going to be tricky because i use the container class in the hero text to add that padding for the mobile styles but i think if i just add the container class to the hero itself hopefully the padding on the left and right should stay from mobile let's just go back to mobile styles and make sure that we have the spacing that we wanted here there's two things we want to do we want to control the max width to have that container but then we also want to add padding around the sections what we could do is i could split it out into two different helper classes like a container class and then wrapper or some other generic word like that or i could add some modifiers to the container class where i could add padding and then add the that special modifier clasp sounds pretty good let's try that if you just have a container the most important thing i want to do is to have that max width in the auto margin keeping in mind that there are cases that i want to only add padding to one side or maybe i wanted to add to all sides except for the top what if i did something like adding modifier where it's container padding top and then if you have that it gets the padding top and i can do the same thing there we go so now we have the padding but there might be cases where i want the padding all the way around might be cases where i just want it maybe top and bottom or just left and right so i think i'll create maybe two more helper class modifiers where it's padding just top and bottom let's just say padding y that's kind of the vertical axis and then for that we'll add adding top and padding bottom and then if i want padding only on the left and right we'll save padding x for horizontal then we'll add padding adding right and adding left it looks like i'm taking up a lot of space by creating these extra classes but it'll save me time when i'm creating the markup later on because now let me show you what i can do for the the header i want padding all the way around so i can say maybe i should add one more helper class where it's p all and then this one is going to have everything all the options so now i know it says pal we can now add container p-a-l-l to the nav and then for the hero we can say container p x let's see the hero container actually didn't want any padding on this at all now it's like this change that okay hero container now this is good there's no padding here i need to add padding to the hero text so what i could do there is a container maybe padding all because it's in the text element here we go now we got container padding all this is good too because i'm not adding the max width rule to this element it won't hurt anything it won't break the side but it's just not really needed i'm pretty happy with this but then let's check out on desktop we got hero container which is fine and then the header if you look in the nav it has a container max width set and then it has the padding all the way around which is perfect all right i had to adjust the lighting there because as i was recording the last video someone was kind of going down so things were just getting darker and darker but now we should be all set so back in our hero section um i think the next thing we want to do is let's fix the hero text styles because i think in the design it is left aligned as opposed to being centered like it is here let's go into our hero styles and here we go so text text line center is what we set as a default mobile style styles that's kind of an example of mobile first styles where your mobile styles are the default styles without any media queries and then you add on your desktop and so on styles using a media query you how that looks and there we go but i wonder if the text styles are bigger on desktop perhaps oh yeah definitely bigger i think before it was maybe 37 is that right 37 yeah let's estimate what the desktop h1 font size is going to be 40 52 let's try 52 font medium well i guess we'll just add font maybe x large just in case we need something between 18 and 52. so 52 divided by 16 is 3.25 so now for the the hero text section h1 we want to add include breakpoint up large and font size is going to be that font x large so there we go and that looks more close to the design where the line breaks at next generation and then digital banking's on the next line let's just while we're at it double check our body copy here so it looks like it's a little bigger on desktop as well let's see how big this is going to be for desktop i think it's about maybe 20 maybe 19. let's just say 20. yes font oh boy medium maybe large for 20 pixels 20 divided by 16 is 1.25 that was for the body that's in the global sas file here we go so font size font small add or include break point up orange font size font large looks pretty good looks smaller on the design let's take that down to maybe you know let's just try 18 since i already have that variable saved that looks pretty close to the design i'm happy with that now i need to tackle the more tricky part which is this hero image section the problem with this is that we want the hero content to have that container right so the max width is set but for the hero image we actually want this to go outside of the container oh also the image goes all the way up to the top of the um header and actually oh my gosh it looks like because the headers white but then this hero background i thought it was white but it actually looks like a very very very light gray that's pretty subtle okay so they did have that already set which is great so i think i can just add it to the hero selector i'm assuming we want that for mobile as well background color very light gray okay so now it's very light gray but now you can see here we have this problem where the container is limiting the width so the gray's not going all the way out i think i still will have to add the container class to a child of the hero container or just of the hero rather so it will be something like this class equals container and that container will move the hero image and the hero text divs kind of like this now going back into our browser oops i need to add the flexbox stuff like flex oh this is a problem so the flex styles you want to put that in um hero container okay so now it looks better let's just double check that looks okay on mobile that looks okay okay so we'll go back to desktop now we got our very light gray background color and we need to figure out how to make this image going all the way to the right side so i wonder if it would make sense to make this position absolute on desktop because if it's positioned absolutely i can kind of position it and make it like right zero or whatever oh gosh got rid of the height right 100 will that fix it no oh yeah width is not working that's not right also i think i need to add the container to have shin relative there we go this is kind of a mess let me think about this again okay so this looks okay it's just the image that's not really working for us oh what if i do something like i know i'm already storing the mock-ups in the before element but what if for desktop i put the background background image svg into the after pseudo element so then i can absolutely position that but then the flex styles don't get messed up let's try that what have i got to lose right so we have this before class here add the after it's actually going to look quite similar to the before so i might just copy this and then just change the actual image so i think since i'm going to move the background image here i'm just going to comment it out here you know to kind of cover my cover my butt in case i need to go back to this so let's try this again okay um we got two background images as now slowing the mobile so what i actually need to do is background image none okay so now we just have the desktop thing now the znx stuff is a little messed up the reason the background image svg is on top of the mockups is because the background image is in the after pseudo element which is coming after the before pseudo element and how css works is if you don't sort of designate explicitly what the znx is it's going to put elements later on on top of elements before i guess i could fix this relatively easily by just switching the before and after so this will become four before it will come after and then the order doesn't really matter but just for the sake of being more clear i try to put the before pseudo element before the after suitable element now let's see that okay so now the phones are on top which is good so let's think about this the background is not big enough you can see it's much bigger in the design where it's like kind of off the page i guess part of the problem is the width has to be bigger than the width of the parent but what if we make the width bigger oh hey this is looking better because it looks like the phones are about the right size let's try one let's just go for 150 width of 150 not too bad just seems a lot taller the green parts going straight off the screen we can try to fix that a little bit later okay so we got this to be 150 width now the problem with this is that looks like it's actually starting under the careers fit between blog and career that's where the left edge of this image is and it's also going off so what if i do left of 20 and this is going off the screen which seems to be part of the design so just keep moving it off screen the phones are a little bit down so let's say top five percent that's not what i want so i think i need to do transform translate why oh shoot also background size is 93 let's try contain so that looks better because all the phones are visible was it what 93 percent first let's try to maybe match the size of the design so it's going up all the way it's getting cut off just above that 74 000 thing so 97 perhaps so it's actually looking pretty okay let's move it a little bit to the left that looks pretty good it looks like this needs to be down a little bit more so let's translate it down i'm not actually sure if translate is gonna be the way to go for this because it's getting cut off so the problem is i want where this gets cut off to like stick to the top i think i'm going to uncheck the transform because this looks pretty close to the design right you can see this is going right up to that top nav bar so i think i will maybe increase the size a little bit and then i think i just need to make the after pseudo element a little bit smaller let's just worry about the background image first i kind of just want to start over so let's reload to refresh all the styles okay so let's start with just the intro desktop svg the problem with this was it's not big enough right so what i did was i increased the width to 150 which looks good so let's put that in the code before we'll add a little break point here include breakpoint large width of 150 percent one style saved now the problem is is that it's not going down all the way to like the blue in the design is going all the way down the bottom and this is not weird let me actually add some outlines to both of these just so you can see a little bit what i'm doing okay so now i can see a little bit better hopefully okay why did that not thick or an error oh there's an error there is an error oh no mix and name breakpoint okay i was typing some wrong stuff in there breakpoint up now this magenta border should show up there we go you know what i'm just going to hide this right now i can just focus on the background thing okay so this needs to move down all the way down to the bottom of that hero let's just do 15. um okay if on big screens it's gonna see more i don't want it to like get cut off something like this or at least you can see that bottom edge okay see this is hard guys don't let anyone tell you it's easy let's just add a little more space the green is actually getting cut off whereas in the website it's you know not going all the way up i think i'm just not making it large enough now i need to move it a little bit okay so zero percent 83 that actually looks pretty good it's still a little bit taller so it actually is getting quite close which is great that's this looks pretty close i'm going to copy this and we'll add it to these styles no repeat is fine and then background position and background size change see this is looking closer and closer now i need to just kind of position the phones a lot of times when we're coding and building stuff we try to just do everything at once like i was trying to do like the background svg and also the phone mock-up at the same time but it's quicker in the long run for me to just focus on one thing at a time so what i did was i focused just on that background svg got that and then now i can work on positioning the phones i think you'll be more successful doing it that way because you aren't splitting your attention between two different things or three different things trying to figure them all out at once much easier when you just separate things out and just attack one problem at a time so now these phones actually look pretty close now of course it's not going all the way down under here into the next section so we do need to figure that out let's just get this to a hundred percent all right let's do contain oh let me think about this the reason that this keeps getting cut off i was doing background size 100 and then i was trying to do like top five percent or something to move it down but i don't want this get cut off right i think it's because the height is always going to be the same so what if i make the height taller than the parent which is the case right because you're looking at the design the phone starts at the top and it extends beyond so it's like 100 plus a little more so let's try height of 110 maybe maybe a little bit more than that so you can see now things are moving down which is good i'm really just overhanging a little bit it's down a little bit too much bring that top thing back maybe negative two but it's not going up here so i wonder if i need to increase the background size yeah so background size let's just kind of guess here 120 maybe so the width also needs to be greater than the hero image div because remember the hero image div is limited by the flexbox properties that's why it's only 637 whereas this one needs to be wider and taller than the parent so let's increase this as well because we're increasing the width the size of the background image is increasing too so we can take that down by decreasing the background size just a little bit of like kind of finagle things around so let's start trying to align this leftmost phone near that puzzle piece thing so we'll add a left property start with zero percent and we'll kind of increase it and then we can see it going up maybe there yeah maybe a little bit less it's the 22 perhaps i think we need to move it up a little bit because it looks like the corner of this phone is just getting into that green area so we'll move it up maybe that much it's pretty close i think and then let's see how if this is kind of the right look that we got here so yeah overhang just a little bit now of course we don't want this to go all up into the header i think actually we don't want the we want the top to always be zero i think this looks pretty good we do want to move this up a little bit right but i think we can maybe control that not with the element itself but with the background position because i said center bottom if i do center is zero percent and then i use that so then what this is doing is it's adjusting the background image within that div so if it if the background image goes over it's not going to show that overlap because it's just the background image it's not the div itself it can be kind of tricky the more time you spend doing this kind of stuff the more you'll sort of understand how things work and how different properties fit together and like what they do this looks pretty close background size should be a little bit more let's try 95 and then we'll kind of move it down as we need to i think i can actually erase this top property because it's just zero let's take this these properties oh yeah and the width and height properties too make sure we copied that over and then put them into our sas file oh wait this is for just desktop i don't want to delete the mobile styles there we go okay so we don't need this image mockups because it's the same as the mobile styles everything else is changing um we don't even know repeat let's um remove this border stuff because we don't don't want to be distracted by that now this is looking pretty close to the design i think if we increase the width you can see you know it is going to nicely stay flush that right edge we have the mobile design that looks i think that looks pretty close to what we had then for tablet it's looking a little weird right so i think one fix for that could be just to increase the size of the hero for for tablet hero image so min height is 17.5 which is 280 pixels if you want to know how many pixels something is if it's using another unit like rams or ems you can check in the computed that'll give you the sort of resulting pixel size so this one was min height of 280. obviously that's not quite tall enough for tablet so let's say min min height of maybe 400 pixels you don't want it to be too tall because you do want the whole hero to i think fit in the viewport when you're loading it in a tablet but maybe just a little bit shorter your image i have the background here and then the mock-ups ooh this was not an immediate query loading the desktop image that's not good the motherboard looks slightly strange here okay let's fix that first so in the before sudo element i need to move this into a media query looks like i just put it in the default styles let's think about this again but i changed things where i load the mockups in the after pseudo element and then the background images in the before suitable element for desktop but the background image for mobile is in the hero image element itself so i could actually move all these properties into desktop i think so i don't need the width i do need the height maybe i'll just comment things out just in case i need to bring it back okay so this still looks good on desktop and then on mobile it's only loading the mobile background because before we're loading like both let's go back to this section and we wanted to change that min height right let's try 400 pixels and then i wanted to try background position maybe center top for the mock-ups it's in the after so background position center up i feel like center bottom was better we'll leave it center bottom and then we're going to make the min height 400 pixels and we will convert that to rems for medium break point up medium 400 pixels divided by 16 is 25 rems for large is just height of 41. so here's the thing on mobile here it is on tablet and here it is on desktop and it takes a second to load that thing like that i don't know if i'm happy with this it's too big i think so maybe for medium we can do something like background size is something like this i see two percent so hero image after background size is 52 for medium medium background size 52 so we can remove this commented out thing oh what did i do um i might have put it in the wrong property oh the before suit element after suit element is what i need for the mock-ups move that down there this should work now okay that looks closer to what we had that is okay let's just tweak this tablet background image again so i think i want to make it background position bottom so let's try center bottom or center then at least it's sort of like closer to like what the mobile thing was center 60. so background position center 64. hero image on medium there we go okay i think this looks a little better right it is hard because i'd say 99 of the time if you're in any kind of design you know work situation or whatever the designer is usually only going to give you a mobile design and then desktop design which you can see it was the case here with front-end mentor so for tablet a lot of times it's kind of on you to figure out okay what combination of like mobile styles and desktop styles am i gonna do for mobile um for tablet i mean this is tablet and this is phone and then this is all right now before we start any actual coding we're of course going to look at the design and figure out how we're going to build this so we're going to be building the feature section which is this why choose easy bank section under the hero on desktop you can see that they're in four columns and then they stack on mobile to a single column for tablet i'm guessing i might do a two column layout now for this section i think what i'm going to do is build this using flexbox now there's a lot of cases in layouts where you can use either flexbox or css grid i do want to show you both so i think what i'm going to do is build this top section using flexbox and then for the next section under it the articles i'm going to use css grid for that in my opinion i think you could use either flexbox or grid for both of these sections and it would be completely fine let's get started writing the actual code so if we go into our code editor we'll go to our index.html file and let me just minimize the hero section since i don't need that anymore and we'll create a new section tag and we're going to name it feature okay or maybe i'll say features since there's multiple features just to make it a little bit more clear now the first thing we're going to add is the text above the four features it says why choose easy bank with some subtitle and that one is full width on desktop so it's kind of the same for desktop and mobile so let's add that here we'll give this an h2 tag and then we'll copy over the text why choose easy bank and under that i'm going to create a paragraph tag and i will copy the paragraph text over there okay so then under the intro text is going to be the feature grid since we're using flexbox the first thing we need to do is we need to create the parent element the parent flex element so i'll say div and i'll give it a class of feature feature underscore underscore grid and then in that parent flex element i'll create some more divs so div class feature maybe item so each feature is going to have this div feature item let's go back to the design really quick each feature has a icon image then it has a title and then it has sort of a description so i need to add markup for all those things the first thing i'll say is div class feature actually i don't think i need to type in div i just say dot feature underscore underscore let's say icon then we'll say feature underscore underscore title and then feature description there we go so now we can add the different icons that we need for the icons and then the text as well so for the icon let's see what we got in our images folder so these are the image files from front end mentor that we are adding into our project so i'm guessing it's one of these icon api etc in our code we can say image source and then add the source as the svg file let's copy in our text as well so what i'm doing here is i'm just building the first feature block just by itself i'm not copying this three times that i have all four the reason for that is i don't want to duplicate it until i know exactly the correct markup and styles that i'm going to use so i'm just using this first one as kind of the first test case let's see how that looks and i'm really just seeing to make sure the icon image is loading correctly which it is i haven't added any other styles so it doesn't really look like much right now so let's go back into our code editor and i think this markup should be okay but let's start adding these styles so in our app folder in our scss subfolder i'm probably going to create a new sas file called features or feature i haven't decided which one i want yet create new file underscore feature i'll just say feature and i'm going to move it over to the right so we can see everything yeah so i'll do features as the section tag and then for the feature grid itself we'll just use the feature name so feature so i'm going to add underscore underscore grid item icon title and description and this is using the bem or block element modifier approach to writing your sas styles i personally really like it just because it keeps everything in a compact file with just the styles related to these feature blocks the first thing we wanted to do was create a style for the feature grid to use flexbox let's go back to the design we do need flexbox on desktop to make those four columns for the features but on mobile everything is just in one column so this doesn't actually need to use flexbox i'm only going to turn on flexbox for desktop so i'm going to use that media query breakpoint mixin breakpoint up large and then i will turn on flexbox with display flex we're probably going to be adding some styles to the feature item for flex as well so kind of get that started here and let's just start out saying flex of one all four of these feature items will be on the same row i'm guessing this markup is probably fine so i'm going to take this and just duplicate it and that's using the ctrl d shortcut so i'm going to save this and i know it's all the same item right now but i just want to make sure the styles look okay okay looks like flexbox is not working for some reason and let's go back and see what happened so we have the correct rules but actually i didn't include the feature sas file in our main sas file so it's always important to remember that now let's look at the browser again okay things are next to each other which is good i just want to kind of add some spacing so we don't get distracted by those other the other text underneath let's go back into our section tag and i'm going to add some of those container classes that we created last time to add padding this container container p-a-l-l for padding all should help and i'll put it in the features section tag there we go so it's a little bit better and this is one benefit of using these utility classes like the container class and container padding classes that i created because instead of having to manually write styles saying padding top you know 2.25 rems etc i can simply create the utility class and then i can use it in any html element that i want and it'll automatically take the styles so it's good because it's easier when you're creating new markup also you don't have to write duplicate styles because i know these are all taking the same the same padding and of course we'll probably tweak this a bit later on but right now we're just trying to get the basics down one thing that we need to remember with flexbox is that flexbox does not automatically include gap spacing between flex child elements unlike css grid we have a gap property it's not included at least not right now i think firefox is working on this property but it's not universally used even though i'm using firefox in my browser i'm going to manually add spacing using probably the margin property for these flex child items let's look at the design again and sort of think about what we want to do we need to add some space between these flex items and it's hard to tell exactly how much the space is because the text is left aligned so you're not always going to have consistent spacing between items but we can make an educated guess here right i'm using this little rectangle that i created in adobe xd using the the rectangle tool up here and it's just an easy way for me to kind of eyeball how much space and how big things are this you know the space is going to be at least this much maybe more it says 29. in this case it's 46. i think we're gonna stick with the 29 so what i need to do is i need to add spacing between the flex items now you might think okay well the easiest way to do this is to simply add spacing i could add a margin right so that it would be between each of these items right and that would look fine on desktop but what happens when we're going to tablet and earlier i said i want for tablet to be two columns in that case if there's space between each item when you stack them two and then two underneath the second item in that flex row is going to have extra spacing on the right so it won't look very good so we need to figure out what we want to do about that so it doesn't look weird on tablet when you have less than two flex items in a row now we could handle this a couple ways so one way would be in our styles we could say for the flex child items at a margin right of 30 pixels or whatever but only for desktop and then for tablet we could say for every other item it would have that margin rights then you wouldn't have that spacing then you could do something like in each feature item you would add padding to the feature item and then the content would automatically have a certain amount of spacing so how that would look would be you want to add spacing so there's space between the items but instead of margin we're going to add padding because there's 30 pixels of width between items you'd add half of that to the side pattern for each item each item is going to have padding to make it more uniform of 15 pixels that would ensure that you'd have 30 pixels of space between each item i personally like using the padding method more just because there's always going to be space between each item no matter if it's space between items next to each other or items above and below each other then you don't need to worry as much about media queries so let's do that now going into our feature sas file in the feature item we are going to say padding and of course we need our calculator and it's 30 pixel of padding between items so we need to divide that by 2 and say 15 pixels divided by 16 to get ram so 0.9375 rims and i think i'm just going to add padding all around the items just because we know on tablet is going to be two rows and then a mobile they'll be stacked one under each other so we're not going to put this padding rule in a media query and then also just for some additional visibility we're going to add a little border just for testing right now let's see what we got so now you can see we have our four flex items and they have a line between them and there is some padding so they're nicely spaced this looks pretty good since we did have the flex just for desktop watch what happens when we get below the desktop breakpoint they go to one column and this is what we would want on mobile but for tablet we want them to be two columns so how do we do that well let's go back into our code editor and we're going to start working with the flex property more now in the feature item selector we want to add another mix in for the tablet styles so include breakpoint up medium actually there's another thing we need to do we need to make sure flexbox is used on tablet as well so we need to add that medium breakpoint turn on display flex for that and then i guess we can turn this off or not turn this off we can delete that rather since we don't need to use display flex just for desktop what this mixin is saying is that it's going to have display flex for medium widths and up that's hence the name breakpoint dash up so going back into our feature item selector in the tablet styles we need to tell each feature item to take up basically half the width right so instead of the desktop where it's just fitting everything into one row and instead of the mobile styles where everything is on its own row for tablet we want each item to take up half the row so we can do that with the flex property so the flex property is going to be 1 0 and then i'll say 50 now let me explain this the flex property itself is actually a shorthand property and it has three different flex properties that it includes so the first one is flex grow second one is flex shrink and the last one is flex basis now flex basis means the default width that the item is going to have in our case we want the feature item to take up half the width so we say flex spaces is 50 now for flex grow what does that mean well setting it to one as opposed to zero means that it's allowed to grow in order to fill the space so that's why for the large we set it to just flex one and this is kind of a shorthand way of saying flex one zero and then i believe either auto or zero percent but you can just say flex one to make the flex child item fit the available width with as many of the flex child items as exist so if you want all the items to be the same width and to be on the same row you would say flex of 1. so in our case what is happening here is that each feature item is going to take up half the width and it's going to be allowed to grow to fill up the space if it needs to although this is not strictly necessary so this should also work even if we said flex grow of zero the next one is flex shrink this basically means if the item's allowed to shrink less than the flex basis in order to fit on the row so let's just start off with zero zero fifty percent and i'm going to also need to turn on wrapping and flexbox because by default if you don't turn wrapping on it's going to try to fit all the child items in one row so flex wrap and set to wrap okay so now i think we have the styles we need to have the tablet styles look correct okay so here's the page let's see how it looks on tablet oh look at that so now it's taking up 50 starting from the medium break point then as we continue decreasing it'll go to one column for mobile so this general layout is pretty set now it's kind of doing everything we want to do in terms of the number of columns so i think this should be all set in terms of flexbox stuff now let's move on to making each of these items have the correct icon as well as the correct text okay so going down here the next one is simple budgeting okay so we got our text down now we need to make sure the icons are correct the second one is simple budgeting let's see the file names on images icon budgeting icon budgeting that's the name budgeting next section is fast onboarding so icon onboarding then we got open api so it's probably this one icon api see how it looks on the website and we have our different icons and the text which is great let's go back and style the text and also fix some of this spacing stuff here the first thing we're going to do is we want to make sure that the intro text has the correct styles so if we go up here it looks like the h2 tag is going to be smaller than the hero h1 tag so let's see let's kind of estimate how big this text is i'm going to say it's going to be about 37 maybe 36 pixels let's start adding some global text styles for the h tags so a little descriptor there so for h2 the font size was 36 pixels divided by 16 is 2.25 rims and i believe that's just for desktop because if we look at the design the ychu's easy bank text looks smaller on mobile so we're going to add some styles for mobile as well this is about 30. not too much different but you know different enough 1.875 rams 1.875 rams and then we'll add the font size 2.25 rams in our point let's say just for large so we're going to tell the tablet styles to use the oh oh i forgot again break point dash up there's a little error down there and we also need to look at the margin underneath so what i'm kind of looking at here is the two h2 tags that we're going to need on the page so why choose easybank title and the latest articles title because they look like they're the same size and if you look at the format of the page they should be h2 tags from an seo standpoint i'm going to measure the space under each of them and make sure it's the same and if it is and we can just add the same margin bottom about 36 it looks like this is a little bit more it's going to be 55. honestly i think that i might get a little bit away from the design and have them be the same amount of space let me just see how much space i put under the hero in that h1 tag it's not a huge deal but i just want to kind of be consistent with the spacing if i can and see what i've done already it looks like here the margin bottom is 1.5 grams which is if we look on our layout tab 24 pixels so for whatever reason there's more space under the h2 tag than the h1 but that's totally fine you know this is just kind of how the design is so i think i might use the 36 spacing 36 pixel spacing for both h2 tags and it'll just be slightly different from the design in this case so 36 margin bottom and since we know that the font size is also 36 we'll just say 2.25 rams and then there's probably going to be a slightly different mobile margin bottom let's see what this is here about 25. so 25 divided by 16. it's 1.5625 1.5625 rims now let's see how this is looking so far okay so there's a lot of spacing i mean i guess that's how it is now we obviously need to make sure the text looks correct as well so it's pretty similar to the h1 styles except that it is a different size so let's copy some of the h1 styles over oh where did i put those h1 styles i wonder if i put it in the hero sass file oh yeah hero text h1 i'm going to move these h1 styles from the hero sas file into the globals just because theoretically if there were other pages on this website they would probably want to use the same h1 styles as we have in the hero so let's do that so let's open up the hero sas file that we were working with last time and find the h1 selector so i'm just going to copy this entire thing here save the hero and then we're going to add the h1 styles up here in the globals that way everything is the same now another thing we can do to make our code a little bit more efficient is we know looking at the design that the h1 tag and the h2 tags are using the same font weight and probably line height as well so i'm going to copy all the styles from the h1 tag that i think are going to be reused in the h2 tag and maybe even the h3 tag into this compound selector for h1h2 and h3 tags so we're going to take this color is the same we'll leave the margin bottom there because it's different but the text styles themselves we can reuse them so i think actually font size should stay just in the h1 tag there we go so now we know that h1 h2 and h3 tags we want to have the same look and the only difference that they're going to have from each other is the font size and then the margin bottoms so this kind of just makes your styles a bit more efficient let's go back to our site and now we can see that the h2 tag does have the same general look it's obviously a bit smaller okay going back to our design let's see what else we need to do let's check out the body copy styles and again it looks like we can reuse some of the styles that we did last time where the body copy looks the same as in the hero section itself so let's see where those styles came from and where i saved them so again it's hero text p line height 1.5 margin bottom is set so the font size itself comes from the body selector which is good it's the default font size what i think i can do is maybe assume again that the paragraph used in the hero is probably going to be similar styles to paragraphs used elsewhere in the site so i'm going to copy those styles over as well into our globals so we'll put this here under the headline tag styles and we'll save the hero one as well and check back on the site looks pretty similar i'm actually not sure if it looked different from before but that's okay now let's see what we have compare it back to the design and see what differences there might be now one thing i've noticed immediately is that the text the paragraph text in this section doesn't go all the way across it ends whereas right now it's going all the way across so i need to figure out how wide the paragraph is going to take and how i want to style that what i could do is i could add maybe a max width of this intro section it looks like it's going a little bit more than half because we can assume that the halfway mark of the page is down here and another trick that i use sometimes is you click on the artboard in adobe xd you go down here to the grid layout the grid section if you check this box it's going to superimpose columns and this is really handy for designers especially but it's also handy for developers because you can count how many columns need to be for each section and i think this should be yes a 12 column layout and of course like this is superimposed on a jpeg of the actual design so i may have to mess with this a little bit but i'm really just using this to see where the halfway point is so the halfway point is this white stripe right down there and so it looks like the paragraph is actually going beyond that halfway mark but doesn't seem to align with anything else what i might do is simply set this intro section to be 50 width or maybe 55 or 60 let's go back into our index.html and go into the intro section and i just kind of put the h2 and paragraph tags as direct children of the section tag so what i might do here is create a child div so class of feature maybe intro oops i'm running css styles intro and then press enter kind of hard to fight with the muscle memory okay there we go so now we have a feature intro this new selector that we're going to add into our features sass file so i usually try to order my selectors in the same order as they exist in the html markup the feature intro comes before the feature grid so we will add it above the feature grid so feature intro and i'm assuming that the 55 width is only going to be for desktop and for mobile it needs to go all the way across so we'll add the break point up large and we'll say with 55 and in this case for tablet it'll go all the way across but i think that's okay we can always tweak it later with a medium break point if we need to but let's load the site and see how it looks nice let's see exactly how long how far across that 55 goes so it goes about here kind of close to the design right we can also look at where the line break is so the line break here is that financial hub financial hub's on the second line so we could just maybe increase the percentage so financial hub fits it looks like 60 might be more accurate so we'll change this width property to 60 all right hey we're doing pretty good here now the next thing we want to do now that we've styled the intro section is style the cards first thing i'm going to look at is how much spacing there's between the intro and the cards themselves okay so there's quite a bit of space between the intro and the cards themselves now keeping in mind that we did add that padding i'm just going to leave a little extra space to kind of take up the space of the padding i added so it looks like it's about maybe 60 pixels tall where do we want to add the spacing let's go back to our site and check it out we could add it in the paragraph but let's say the client wanted to add another paragraph tag or multiple paragraphs into this section obviously this is a hypothetical client since this is just a demo website but this is kind of what happens in the real world you know you want to try to write your styles in a way that is future proof as much as possible so you need to consider you know what happens if they want to add more copy or less copy or you know more feature items or less feature items all these things could change in the future because you know these websites are supposed to be representations of real companies and things like that in terms of the spacing i'm probably going to add padding bottom padding to the feature intro section or maybe margin bottom to add space between that and the grid so it looks like there's some space already from the paragraph tag but we'll add some margin bottom to feature intro going to the feature intro the margin bottom and i think i said it was 60 pixels so divided by 16 3.75 rams so margin bottom 3.75 rims see how that looks all right so now there's more spacing which is awesome an interesting thing i don't know if you notice this but you can see in the developer tools the margin bottom is highlighted in yellow and that's the 60 pixels you can see that the paragraph also has margin bottom even though there's margin bottom in both the paragraph and the feature intro they don't combine together and like add to be you know whatever 2.25 rams plus 3.75 rams so i think we can consider this intro section actually done one thing i want to check really quickly is the mobile styles for that looks like it is 36 pixels from mobile between the intro and the grid okay it's less it's actually the same okay so it's still about 60 pixels of space between intro and grid so what i'm gonna do is move that margin bottom property into the default styles which are mobile styles in our case so now if we look at the site it is the same amount of space at the bottom 60 pixels no matter what your viewport is all right the next thing we want to do is we want to style these feature cards so going back to the design we can see that the icons have some space under them and we need to also style the text as well so i'll start with the icon spacing and the space between the icon and the text is about 44 pixels go into our code and the feature underscore underscore icon is where we're going to be adding this style rule and we want to say margin bottom 44 divided by 16 is 2.75 rims so now we got our space i also want to make sure the spacing is the same or see if the spacing is the same so it looks like there's a bit less spacing for mobile let's say 30 pixels from mobile so again we will add the default styles for mobile 30 divided by 16 is 1.875 and then we'll add the 2.75 rams in our in our break point up large media query there we go okay so we got our spacing cool let me also double check and see if the icon image is the same or different looks like they're the same just double check that to be sure about 74 and same for desktop so i think we are good with this they're staying the same between mobile and desktop let me actually add some spacing so that this can kind of scroll it more so i'm not blocking it with the image of myself i'm just going to add some a min height to our body selector at to the bottom here we'll say min height is maybe 200 viewport height see if that helps in terms of the scrolling yeah so now i can scroll down a little bit just a tiny bit more 300. now i can position it in the kind of a better place on the screen for all of you now let's do the feature block title looks like the font style are similar to our headline font styles obviously it's a much smaller font size let's say about 24 pixels now going back to our code it was feature underscore underscore title so in our feature sas file we'll say actually let's check the mobile styles first there's about 24 pixels big for the desktop and it looks a bit smaller for mobile it's more like 20 so 20 for mobile 24 for desktop so font size 20 it's 1.25 grams and then we'll add our mix in for the break point up large font size is 24 divided by 16 is 1.5 grams and we need to copy the headline styles that we had used from the globals so i'm just going to copy font weight 300 1.15 color dark blue and we'll add them over there for textiles i sort of follow this order i do font size first then font weight then line height then color and then i'll do line height under font size because they're sort of related let's check out our styles all right looks pretty good now let's add the space under the feature title so for desktop it's about 36 maybe 34. and for mobile it is a little bit smaller again 26. so let's say 24 and 34. this is going to be the featured title selector we'll add a margin bottom property 24 1.5 grams and then the margin bottom for large was 34 divided by 16 2.125 and checking back on the site looks good next thing is to style the paragraph the feature description styles so it looks like on mobile 15 let's say 16 just because and then for desktop looks like it might be the same actually for desktop and mobile yeah i think they're actually the same so 16 pixels for both this is for the feature description so font size and i know that 16 pixels is one rim so one rim it looks like we need more line height because there's not enough spacing between the lines fine height let's say 1.5 perhaps a start font looks a little smaller on the design than in the website maybe 14 pixels instead of 16. that seem a little closer i think that's closer this will be 14 pixels and then 1.5 line height so 14 divided by 16 is 0.875 rams and then line height 1.5 there we go okay looks good i think maybe we can take away the that magenta border that we'd added and then this should look pretty close to how it should look on the design okay one thing that i think i forgot is i need to add that gray background to this section okay let's see what color is this in our variables so the very light gray was the hero background maybe the light grayish blue see if that's correct so i'm going to add it to the let's see i want to add it into the features section i honestly might just rename this to be feature singular so it matches you know the feature underscore underscore classes as well background color and we'll paste in the light grayish blue does that seem right that seems pretty close now of course we need to add some more spacing here because yeah it's not quite enough looks like it's about 110 on top and then a little bit less on the bottom 90 on the bottom let me go double check what i'd added to that container class that we'd created last time so i think i said here we go padding top 2.25 rams times 16 to get the pixels 36 pixels so this is much more spacing for this section i wonder if i just hadn't added enough yeah padding to this i might just try to keep them all the same around 90 or so and then i'll add more for this top thing here i wonder why i'd added only 36 pixels of padding i wonder if that's because of the mobile style that i was looking at so i think i'm going to do is just increase the padding basically all around for that container class this will do 70 for mobile we'll do 96 for desktop and then we'll see if this breaks anything we're doing 70 for mobile so padding top and bottom should be 4.375 grams and we want that to be the same on the bottom as well and for now we'll leave the padding left and right yeah so we'll just any any case that we had padding top and bottom we're going to increase it to 4.375 rams for mobile and then for desktop so include break point up large i'm going to say padding top and that was 96 i think i said so 96 divided by 16 six rims this will be for both padding top and padding bottom this one just has padding tops we'll delete that and this just has padding bottom so we'll delete the padding top okay so for now we'll leave padding left and padding right check out our website see if things look better and if i broke anything so you can see there is more spacing here um it's good 70 on top and bottom looks decent enough go to desktop but in terms of spacing the container the nav looks okay which is good and then here i need to make sure this goes all the way across but the top and bottom padding that looks pretty good let's fix this thing here basically i need to make the container p-a-l-l a child of the section itself so that it doesn't get limited in width so i'm going to create a new div call it feature content perhaps and then i'm going to move all the html into this child div then i will move the container out of here and into the feature content and this will ensure that the feature section itself will have that light gray background and it won't be limited in terms of width it'll go all the way to the left and to the right you can see that's happening and then in the feature content that's where you get your max width set for the content inside the light gray so this looks pretty good go to the design and do just an eyeball and see if anything looks off or if this looks pretty close and this looks pretty close i'm pretty happy with that i think there might be a little too much spacing under here under the feature title yeah that's too much so it should be about 32 or so how much space do we actually have here 34. i think i need to just decrease this a little bit so let's say margin bottom 30 pixels margin bottom 30 pixels still looks like a little bit too much spacing yeah that's a lot less even though this is this does seem correct sometimes i just added spacing from the the text afterwards so you can see here there's a tiny little bit of spacing until the text starts so this is probably what i need to account for so let's try maybe down to 20 even maybe even a tiny bit more 22 maybe 24. i think that's close enough so we'll change the feature title margin bottom to 24 pixels going back to our feature sas file margin bottom needs to be 24 1.5 rems and then let's check it again for mobile because that will also probably need to be decreased so it's a little bit less yeah i think i'm just gonna have to try to eyeball it again margin bottom start with maybe 20 pixels let's try it with 16 pixels we'll do 16 pixels for margin bottom on mobiles and 16 pixels is one ram that looks much better let's go back to desktop and then compare it again to the design okay spacing looks pretty good and let's go to mobile see how that looks i guess we can use the emulator too okay so on the mobile everything is center aligned including the icon so let's do that so maybe in feature i'll say text align center for the default mobile styles and then let's start this with medium since it's two columns for the features for medium so we want we probably want those to be left aligned text align left it's not centered um let's check back here hmm why is that rule not working there's no error in the sas and i cannot see oh wait oh no i did this again break point up okay now it should be good okay now yeah text line left is showing up so now i'm going back to mobile that looks good and then tablet width is around here so this is going to be you can see two columns everything's left aligned desktop it's four columns and everything's left aligned all right yeah this looks pretty good looks close to the design okay so i think we can consider the feature block to be complete all right let's build out the latest articles section now for the use before we do any actual coding we're going to look at the design which i have open here in adobe xd and let's go down to that article section you can see that it is four columns on desktop and one column on mobile and we'll probably do two columns for tablet now if you saw the previous video where we built out this featured section just above it it has basically the same layout they're both four columns on desktop one column on mobile and i'd mentioned last time that while we're going to build the features section using flexbox for the article section we're going to use css grid so that's what we're going to do today we're going to build out this four column layout using css grid as opposed to flexbox and honestly i think that you could use either flexbox or grid for both of these sections i don't think either one of them has a super strong advantage over the other so this is one of those cases where you can just pick whichever you are more comfortable with all right so now that we have looked at the design we can just start getting all right so now that we've looked all right now that we've looked at the design let's start getting into the code so we're going to go into vs code our code editor and if you've been following along you might notice that my color scheme are slightly different i've been trying to tweak this customization in bs code for a bit and hopefully when everything's done i will be able to release it as an actual theme so you can all download it for free but for now it's still a work in progress okay now to get started we are going to look at the index.html and we're going to add our html markup so the first thing we're going to do is similar to the other sections we're going to add a section tag so we'll say section and we'll give it a class of maybe articles i know that i ended up making the section for the feature section feature singular as opposed to plural but i'm going to try i think maybe a slightly different approach for the articles now the section tag is going to be what's going to be full width on desktop inside the section tag we're going to add a child element which has the container class that we've been using and if we look at the features section again we see there's a feature underscore underscore content with some container classes and we're going to use those same ones down in the article section so let's add that now so add a div just by doing that dot for the class shortcut and we'll say article singular underscore underscore let's say content and we'll probably give it the same container actually container dot container dash dash p-a-l which is the class for padding all meaning it'll add the padding all the way around on each of the four sides and in the article content i think what we want to do is um let's see what i did for the previous thing okay yes so we're using h2 tag for the intro section and then we'll add probably the same article grid type of thing so we'll say class article actually let me look at the design so there's actually no like intro paragraph like the feature section so it just has that h2 so i think i can get away with just writing h2 and then we'll copy the text over latest articles then under the h2 we'll add another div and we'll say article grid and then in the article grid that's going to be our css grid parent element so then we'll add the child elements we'll say article i like to just say item for grid grid items whether it's flexbox or css grid so each each article is going to have a wrapper of article item now going back to the design again we can see that in each article item there's an image on top and then there is some sort of text content below that so you can kind of break this up into two different sections so what i'm going to do is say in the article item we'll say article underscore underscore image and then below that we'll do article underscore underscore and maybe i'll say text and that's going to contain all the text in the article now the reason i'm going the reason i'm wrapping all the text in one div article text is because of this padding all the way around so if i didn't add the article text i would have to basically add the left and right padding to each individual text element and then i would have to add the top and bottom padding or margin whichever one you want to the first and last element so i i personally think in this case it's just simpler to wrap all the text in one div element and then add a padding all the way around it's just a little bit less coding involved okay so we got the article image and when you have an image you always have to ask yourself do i want the choosing and when you have an image you always have to ask yourself all right do i want to use an image tag or do i want to use a background image and one way you can sort of help figure out which approach is better is if we look at the design let's let's take this dollar image and maybe i'll just delete this i don't really need that rectangle so if we look at the dollar image you can see that it's the same image of course but the cropping is a little bit different between desktop and mobile so here it's more squarish and if you look at the mobile you can see that the right edge goes just out a little bit farther it kind of cuts off on desktop right at the corner of that one bill the same goes for the left side you can see that cuts off here and it's a little bit longer on the left side as well so that kind of tells me that i probably want to use a background image for the image element that way you can crop it to different sizes and you're not going to you know adjust the size of the image or make it look kind of weird so in that case for the article image there's not going to be any actual content but i will add the background image using background image url and then we need to add the url of course of the image so if we go into our images folder it's going to be one of these it's probably going to be one of these image files here so this one's going to be image currency jpeg so we'll add that in so we'll start off with slash images and then image dash currency and i hope that is that right yeah the images folder is not in the app folder but it's in its own folder image image currency.jpg okay then let's add the markup for the text so if you look at the text item there is first an author section then there's a title of the blog post then there's a either a description or a summary um you know you can call this anything you want so let's write the markup this is going to be author title and then description so i'll say article author title description okay and then we'll just kind of copy those over as well there is an ellipsis at the end of that description just because it's a shortened blurb so we'll just copy over that ellipsis symbol as well okay now let me add a space here just to kind of differentiate the item from the grid itself there we go there we go and let's see you know there's one more thing that we probably want to do and that is when you have a grid like this if it's for blog posts or whatever it's usually going to be a link and there's no you know read more link in the design so what i'm going to do is make the entire item a an anchor link and that's usually i think the preferred way of doing it because even if you hover over the image you'd like you'd like to be able to click over to the blog post itself anywhere you click on this section so i think what i can do is article item i'm going to make that an anchor link and then we'll add href and of course it's not going anywhere so we'll just say pound okay so i think we got all the markup that we need i'm just going to do the styles just for this first article item just to make sure everything's correct then once everything's been kind of set and we know that it's correct then once we figure out all the styles for this we can copy it for the additional three items so to start off with the styles in our scss folder i'm going to create a new file i'll call it article.scss and of course since we created a new sas file we need to import it so we'll say import article all right so we should be adding the article sas file to the watch now let me scoot this over to the other side so the first thing i want to do is remember we made the section tag have a class of articles so i'll add some styles for that just in case we need it and then we'll add article so we'll add content grid item so i'm just you know i'm just copying all the classes i created in the next html file over to the sas file so image text uh oops author title and description all righty and i may delete this if we don't end up writing any styles for it but i think we'll be okay all right going back to the design we need to figure out what the background color of this is and it's very faint but it seems like the blog posts themselves are white and then this background is a very light gray so it's probably the same as what we had in the hero section so that's going to be a style rule for the articles section tag so background color and if we look in our variable sas file i'm going to be this very light gray color here so we'll do that and then see how that looks there we go so here's what we got so far we can see that because i did make the article item an anchor link it's has that purple link text and it's turning into the the hand when you hover over it but it does look like the background color is correct so i think that is just fine for now okay so the next thing we want to do is let's get the css grid stuff working so for article grid i want to set let's just say display grid for all widths even mobile just to just to do it that way okay now the first thing i'm going to do is i'm going to start writing the styles for css grid now even though mobile is just one column i think i'm still going to do display grid for mobile and then also tablet and desktop just to see if that's you know a good way of approaching this so we'll turn on grid with display grid now unlike flexbox if you write display grid just by itself with no other styles nothing is going to visibly happen and that is because for grid you need to not only set grid display grid but you also need to start creating your template this is one of the core differences between flexbox and grid flexbox is more of a content first approach so once you turn on flexbox for the flex parent it's going to just try to fit all the flex child items on the same row by default for grid you need to set the template meaning you need to set up the number and the size of the columns and or rows in in the layout so for our layout it's a four column layout for desktop two column tablet one column mobile so since mobile is just one column we'll say grid template columns and we just want one column so we'll say one fr and fr is a fractional unit it's kind of a general ratio unit um used for css grid meaning it will take up as much space as possible and if there's more than one child item in the column or the row it'll sort of divide the space up between those child items depending on the number so 104 is kind of the default like you know auto kind of width so mobile just has one column now let's add the grid template for tablet so we'll use our mixin that we wrote breakpoint dash up and for medium widths we're going to say grid and you can actually um abbreviate if you just type in gtc it has this really cool intellisense and it'll automatically detect so for tablet we want two columns so we're going to use the repeat function this is super handy for grid so repeat takes two parameters the first one is going to be how many columns you want to use we want two so you say two comma and then again we'll say one fr so this will basically create a layout that has two columns and they will each be the same with one fractional unit lastly we'll do desktop styles so break point up large and then again we'll say gtc and instead of two we'll say four so four comma one f r so this is just your sort of standard run-of-the-mill grid where you have a multi-column layout for different and the number of changes based on your device width so let's see what this looks like right now okay oh this is interesting so instead of taking up the full width you can see that this article is taking up only part of the width that's because we set four columns in that grid template so if we look at article grid i'm using firefox and they have a really helpful tool if you click on the layout tab and we expand grid so it detects the that this is a grid item because you know has display grid so if i check this box it's actually going to create lines it'll number the different columns and rows in the template that we made so remember we just created a four column layout in this grid thing so it's showing us the four columns in the grid template so if we added more items it would populate this grid so let's actually do that now i'm guessing the markup's probably okay so we'll take this we'll duplicate it one two three times save and go back to our browser so now we can see that the four columns are actually working which is pretty cool so let's let's see how this looks on tablet so we'll reduce the width and it went to two columns and then one column for mobile so yeah this is a pretty you know with just a few rules we've already sort of created our grid layout which is pretty cool so for css grid the approach that we used is a very sort of responsive design approach meaning we're using media queries to change the grid template and change the number of columns there are some there is another approach you can use with grid that is more intrinsic design meaning you don't have to use all these media queries because there are some built-in properties that can sort of figure out and adjust how the layout actually looks depending on the width of your browser so i'm going to show you one of those now and then i'll explain why i actually prefer this method with the media queries so let us let's just comment out everything except display grid so control k control c we'll comment that out in vs code and what you could do is for your grid template columns property we can use something called autofit and then also another function called min max and i'll explain what each of those is once we write out this rule so if you remembered we for the desktop oh wait i think i have an error here um no it should be okay i think okay so if you look down in the desktop rule we had previously it said grid template columns and then use the repeat function we're going to do something similar here so we're going to say repeat but instead of writing an actual number like 4 2 we're going to say auto fit and this is a property that sort of lets grid decide how many columns are going to actually be on the website which is pretty cool right you don't have to say two or four it'll sort of decide for you and then for the width of each column we're going to use min max so instead of saying you know i want this column to be 200 pixels wide or 1fr or 2frs we can sort of again give the grid itself the basically the control over how wide things will be as well as how many columns are going to be on the row so minmax as the name kind of sounds you give it a minimum and then you give it a maximum width in the parameters so the minimum width we're going to say let's go back to the design really quick and this square so this is about 200 pixels wide so we'll say that for the minimum we'll say about 200 pixels maybe a little wider let's say to 230 perhaps and usually i should convert that to rem so let's do that open the calculator and 230 divided by 16 is 14.375 so 14.375 rams and then the maximum we'll say 1fr right so this will basically give the grid column either a width of you know 230 pixels 14 rems minimum or it could be all the way up to 1fr so it could theoretically take up the entire space of the row and this is actually all you need so let's kind of see what that does to our grid in the browser so it looks the same on desktop there's four items and they're all in the same row and each item is currently 265 pixels so that is above that is between the min min width of 230 pixels and obviously one fr could be 100 percent let's see what happens when we take the browser with and we slowly reduce it okay still four okay so now you can see it broke to three columns and then there's three items on one row and then one item by itself on the second row we'll just kind of keep going here so now it's broken into two columns and then for mobile it is one column and this is actually really this is one of the i think this is one of the great parts of grid where with simply one rule in the in the grid parent grid template columns using repeat auto fit and min max it created this one column two column three column up to four column layout so you know this is pretty cool now you know why did i mention that i'm not going to use this approach well even though it is awesome that we can write this rule and create a multi-column layout without using any media queries i know that in real life if the design has four items and they want it in one row for desktop they may not be super happy when you have a layout like this where it looks uneven and let me show you let me kind of highlight that by hiding the grid lines so we'll just pretend that there's lines around each of them let's do that uh particle item border one pixel solid red so around each of these items now is the the um throughout each of these items there's a line now so you know this looks a bit uneven right so this looks a little bit uneven i think most people if they want to show four items they're not going to want it to look like this it looks better when it's even and there's just two two and two and of course it's fine when it's on mobile and it's just one column but this in-between state is not really desirable i would say and unfortunately that's just kind of the way that's kind of what happens when you let grid control you know the number of columns using autofit and then the width using the min max function so even though there's more rules for the sake of you know kind of maintaining control over that grid i'm going to go back to the media query thing um and for auto fit i don't know if i explained that fully but you go back to turning on the grid lines and then turning off the border so for autofit what happens is it will fit the items as well as it can in the template and the the other option instead of autofit is you could say auto fill and they're very similar but not quite the same let's see if we can see the difference here it doesn't seem to be different for us but let me just show you um there's a really good article on css tricks for auto fit auto phil okay yeah sarah sweden i'm sure this great article comparing what autofit and autofill look like so in this example you can see autofill will create the template but it's not going actually all the way across whereas auto fit will kind of try to fit the content to the row and then if you go down a little bit more i believe there's an animated example here so if you look at this the top one's auto fill so you can see there's actually a blank column when you keep extending it out whereas autofit will you know fit the existing content to the row so that's one difference between autofill and autofit again you know maybe it's you know not maybe it's best practice to use this kind of so that's autofill and autofit um again going back to our own website i'm going to go back to the media queries just because i like having that extra layer of control but this is also an option and it can definitely come in handy um in in other circumstances let's go back and we will delete this and then we will uncomment control k control u there we go we'll save go back to our site and we're back here there we go browser is a little slow sometimes so two columns on tablet and one column on mobile and it goes back to four columns for desktop so if that helps just kind of explaining sort of the basic this is a fairly basic css grid layout i'm using the grid template columns property and then you can designate how many columns you want with the repeat function and also how what size each of the columns are let's get started now actually styling the content in the articles themselves all right now let's start styling the cards themselves so we'll probably start with the image up here and then we'll move on to the text elements so using our little rectangle here see that it's about 200 pixels tall so let's go into our code editor and add those styles in so this is going to be for the article image element so down here article image we'll say height of 200 pixels and we do need to use our calculator for that so 200 divided by 16 is 12.5 rams and then since these are also background images let's add some of those background properties so background size cover so this will ensure that it will take up the entire div then background repeat and i pretty much always turn repeat off and then the other one light and then background position center center to make sure it's centered i think those should be good for now so let's check the site and see how that looks sweet so the images are loading up um looks like we forgot to add a gap in our grid parent properties let's do that so if we go back up to the article grid we'll add a gap of maybe 20 pixels and 20 divided by 16 and 1.25 grams so that looks pretty good um let's actually compare that with the design i think we got might be a little bit more than that just more like 30 pixels so 30 divided by 16 is 1.875 okay and i don't know if you notice but down here in the terminal for some reason it always throws an error when you start adding the gap property i think there's just maybe a bug in the live sas extension but if we re-watch it then everything's fine and there's no errors okay so that looks pretty good um let's see what else do we need to do here did i do the background i think i did do the background for the whole section let's just turn off the lines for now um okay so after the image we have the text here and i'm going to make that a white background color since you can see in the design this is what the text area has so let's do that and let's also add some padding so let's see here looks like it's about 30 so let's see if it's the same on the bottom looks like it's a bit less on the bottom but i might just make it 30 all the way around i don't see what the horizontal padding is looks like it's less it's about 25 on the sides and then 30 on top and bottom and let's see what we got on mobile as well looks like it might be a little bit more on mobile so the side padding on mobile is 30 i guess around 30. and then let's see what the bottom padding is 44 on the bottom and then it looks like it's less on the top 30. it looks like for i might just make them all the same 30 all the way around well i guess on mobile should have a little bit more space on the bottom let's see if it's the same yeah it looks like all these have much bigger bottom padding that's fine we'll do maybe 40. so 40 on the bottom and then the other sides will be 30 for mobile and then on desktop i believe it was 30 on top and bottom and then 25 on the sides is that right okay around 30 for the top and then 20 yeah we'll do 25 okay this is going to be the article item element we'll do the mobile padding first so padding oh caps lock padding so it's going to be 30 divided by 16 and 1.875 rems and then we'll do the same thing for everything except the bottom and then the bottom is going to be i think did i say 40 room or 40 pixels 2.5 grams there we go then we're going to do for i guess tablet medium and desktop we'll say padding and i think we said 30 on top and bottom and then 25 on the sides 25 divided by 16 1.5625 there we go okay let's see what we got um oh i know why the padding shouldn't be on the article item it should be on the article text so just for the text that's okay let's fix that move the padding down there there we go that's much better okay we also need to add a background color to the article text color and i think white made a variable for that yeah okay there we go so i mean it's a little hard to see since it's a very light gray in the background but that is what the styles are and i believe there's also a border radius around the whole card as you can see the the corners are slightly rounded all the way around so let's add a border radius um it doesn't look like it's very round so i might do something like 5 pixels so 5 divided by 16 0.3125 and we'll just do it all the way around and one thing you need to keep in mind with border radius is that sometimes in order for the border radius to actually show up and sort of cut those corners you need to add over um overflow yeah overflow hidden so that'll make sure that the actual rounded corners will show up cool that looks pretty good okay so let's do the text starting from the top just working our way down so the first part of this card text is the author section and this looks like it's quite small let's say yeah it's probably around 10 i would say 10 pixels tall so let's do that so here we go author font size it's going to be 10 divided by 16. 0.625 i'm assuming it's going to be the same for both mobile and tablet and desktop now let's move on to the title it looks like it's a darker gray and is bigger so about maybe 17 or 16. let's do 17. so font size 17 divided by 16 1.0625 and then for the description looks like it's bigger than 10 pixels since it's bigger than the author but not too much it's about 13. that's a bit small 13 divided by 16 is 0.8125 rims okay now let's see how that looks looks pretty good now of course we do need to do the colors right now since i made the whole article item and anchor tag it has that purple link color so we'll adjust those but size wise that looks fairly good we might need to tweak the line height a little bit but let's do those font colors so it looks like the author and the description are the regular gray that you know we saw kind of up here and the title is the same darker gray as the title up there let's do that so since we have both author and description the same color what i might do to make it slightly more efficient is in the article text i'm going to add the color property there and then i will make the different darker gray color for just the article title so if we go into our variables that sort of medium gray is probably this grayish blue and then the darker gray is probably this dark blue color or the title there we go okay okay looking much closer so let's now work with the spacing so we need to add some space between the elements and then we'll also adjust the line height on that title looks like it's a little bit too much but first spacing okay below the author is 16 pixels of spacing that's one room so we'll add a margin bottom of one rem to the author then to the title there's some space under that as well um looks like it's a bit less but honestly i'm just going to say 16 as well i think i'm being lazy and then let's see what else we need to do we need to adjust the line height of the title and also we'll check the line height of the description as well so right now seems like there's a little too much line height right here so let's try something like line height and i usually like to put the line height property under the font size property since they're kind of related so 1.15 maybe and i'm just kind of guessing here one like a line height of one means it's the same as the font size 1.15 means it's just just a little bit taller than what the font size is okay so that looks closer which is good um it seems pretty good maybe just tiny a little bit more so maybe 1.2 so 1.2 okay i think that's fairly close enough let's check out the line height for the description now i think that's actually pretty close yeah i think that's good enough and it looks like the spacing that we have between the elements is okay as well i feel like there's a bit less spacing here so maybe we should make that a little bit smaller so article title go to the rules tab and right now i think i had set a margin bottom of 16 pixels or one rim so let's adjust this so 16 pixels is a little too big so let's try 14 looks much closer on the design so maybe 10 pixels looks like it might be less than that actually maybe eight pixels okay let's do eight i feel like there's less spacing under the author as well i'll just copy this over first margin volume of 8 pixels article title 8 divided by 16 is 0.5 grams because i could have done the math because 16 divided by 2 is 8 anyway and the author well what happens if we just do the same thing 0.5 rooms it does look a bit better i think there's still a little bit more space under the author so we'll just tweak that a bit so instead of eight pixels let's say maybe 12 12 pixels 12 divided by 16.75 rams okay so i think that looks alright okay so i think our text is pretty good actually so now let's add the proper images and copy for each of these articles so in our next html file we will adjust that just copy these all over i guess we can just cut it since we're not don't really need to keep it this is already there okay so let's do the images so in the design it's the currency then it's like a restaurant then a plane with clouds and then confetti so restaurant plane confetti we look on our images folder image restaurant oh i had the name right restaurant and the second one was plain and then confetti all right let's see how this looks it looks pretty good so if we take it down comes two columns and then one column on mobile this is pretty good not too shabby so one extra thing that i'm going to add is some nice little hover states and i think i'm also going to add a box shadow just to make the card a little more separate from the background so let's add those in now so the box shadow i'm going to add to the article item itself since i want to go kind of all the way around so article item say box shadow and for box shadow it takes a bunch of different parameters so let me just type them in first and then explain what they are okay so in box shadow the first two numbers are the position of the shadow so the first zero pixels will control the horizontal position so i want it to be probably in the center so i'll leave that as zero pixels the second zero pixels is the vertical position and usually for shadows it's better to make it a little bit down from the object itself so it seems more like a real shadow so we'll maybe adjust that to be three pixels and i'll convert these two rams once we've kind of finalized everything and the last number parameter is the spread so it's kind of how diffuse versus how like hard line of a shadow it is so i tend to do at least 10 pixels maybe 12 pixels for the spread and we can of course tweak that as we see fit and then the last one is the color of the shadow and for shadows i usually like to use a semi um transparent shadow so what i've done is use rgba 0 0 0 which means black and then the last last number here is the alpha channel meaning the opacity and i've set that to 0.15 which means basically 15 opacity so it's it's pretty semi it's pretty transparent um okay so let's see how this looks oh there we go so we got a nice shadow here okay looks like we have some issues down here where the white doesn't go all the way down to the bottom so i think we need to figure that out um so let's see what's going on here article item goes all the way down there article image and then article text so it seems like because the text on the first two is shorter than the last two because you can see there's only four lines for the first two in the description but there's five lines for the description for the last two that's why they're taller so one thing i could do to fix that is maybe set the background color of article item white so now it's like that so let me try moving the background color to the article item instead of the article text see if that fixes the issue let's do here okay much better good let's make sure everything looks okay even when we're changing the width okay all right good now the next thing we want to do is i'm actually going to add a little hover state so it just looks nice you know when the these little i guess you can call micro interactions so the website kind of responds to the different actions you take so i want this to change in some way when i hover over each card and one thing i do a lot is scale it up slightly when you hover over it so let's try adding that and we'll do that to the entire article item as well so we'll add the hover selector and on hover we want to transform and we'll increase the size by using scale and then in the scale function we can set what we want to scale to scale of one means a hundred percent so it won't change at all so we want to be slightly more than 100 but not too much so maybe 1.05 so that would be 105 so we're only increasing by five percent so let's try that and see how it looks okay so it is just a bit larger and we also need to add a transition so smoother as well so transition we'll just say all um maybe 150 milliseconds and then ease in out that controls this the smoothness and speed of the animation let's try this now smooth like butter i like that i'm pretty happy with that okay so i think we can actually consider this section done it looks good on mobile obviously on actual mobile there's no real hover state but that's fine tablet two columns desktop four columns so yeah i think that looks pretty good all right so i think all right so i think we can consider this section complete before we get into actually building the footer i wanted to point out a mistake i'd made in a previous video that i just now noticed and the issue that some of you may have noticed already is that there's horizontal scroll bars appearing and this is caused because the hero content the images that we had sort of made offset have forced the container to be wider than the viewport width and that's what is causing these horizontal scroll bars to display all the content so the way to fix that is in our code if we go down in our global sas file to the body selector we can add overflow x hidden so what this is going to do is it's going to trim or cut off any extra content outside the viewport width so now let we go back to the website there's no more horizontal scroll bars which is good but we can still scroll vertically because we only did overflow x hidden not overflow hidden which would cut off anything extra and prevent you from scrolling vertically or horizontally so this is one way to fix issues when you do things like i did like moving things kind of offset from the viewport or if you have an off canvas menu you might need to add overflow hidden to some of the properties so i hope this helps any of you who may have noticed this if you're coding along with me and let's get back now to the rest of our website all right so first things first let's check out our design so we have here the mobile design and then the desktop design open in adobe xd let's take a bit closer look at the mobile version first so in the mobile version we have all the content stacked to one column looks like everything's also centered and the different parts of the footer are the easy bank logo there's some social media icon links then we have some text links a cta button and then at the bottom the copyright info for the desktop version if we go over to that it has the same content however instead of just being in one column the content is split out into four columns so the first column is going to have a logo and social media then we have two columns of the text links and the last column all the way on the right is the cta button and the copyright info all right so now how are we actually going to build out this footer well as in most things we can use multiple different approaches we could use flexbox if we wanted to i think that would be a perfectly fine solution to build out the footer i think i'm going to use css grid and the reason for that is i want to show you all different ways that you can use you know flexbox css grid to do layouts and we did use grid last time with the articles section but for the footer i'm going to try to use a feature of css grid called grid template areas and it's a really cool feature it is a little weird with the syntax until you get used to it but i promise it'll end up being more intuitive as you get along into it so how grid template areas works is you still sort of designate the template meaning the rows and columns in your grid layout but you can use named areas for each of the different areas in your layout and you can use those names to assign where in the grid you want those areas to take up but first let's just get the basic styles in place and i'm actually not even going to use css grid for the mobile design because everything is simply stacked in one column and then centered then when we do the desktop design we will use css grid as well as the grid template areas but the first thing we want to do is we want to create our html markup so i do want to keep in mind what i eventually want to be building for the desktop version so for example i can't just have you know individual social media icons or individual text links just in the footer tag itself i'm probably gonna have to group them together so we can lay out them a bit more easily when we do use grid later on so for example um i would probably have to group the logo or i would have to group these social media icons together in one div same thing with these text links i might group them into two different groups and then at the end i could group the cta button with the copyright info we'll see more as we get into it but we're sort of keeping that in mind as we're building out the layout even though we don't have to use grid for mobile let's go into our code editor vs code and in our index.html file i'm going to start creating the markup okay so i'm going to put everything in a footer tag so footer and i also need to create actually a new sas file so let's go into our app folder scss subfolder i'll create a new sas file called underscore footer.scss so that's open and then of course since we create a new sas file we need to add it in the main sas file so import footer save that and looks like yeah our live sas is working so we'll just close this up and then i'm going to just move the footer over to the right side so we can see both index.html as well as our styles so in our footer tag we're going to start adding the different content that we need so the first thing was the logo so the logo is usually going to be a link so i'll say anchor link i'm just going to make the href a pound and in the link it's actually an image because it's just loading that logo image so we'll add the image tag and we'll say source is images and let's see it's a logo probably this logo svg so that's going to be the logo and i guess we'll give it we'll start giving things a class as well um so first thing i'm going to do is give the footer tag a class of footer i know that seems kind of redundant but in our sas file over here it makes it easier to sort of follow the bem or block element modifier approach because the class of footer will be sort of the root and then everything else comes from that so for example for the logo we're going to give it a class of footer underscore underscore logo so then the same thing in the sas file will follow that pattern underscore underscore logo and the ampersand again just means that it inherits the root which is footer okay let's go on to the next section so under the footer was i believe some social media links so we'll create a div called footer i'll just say social so in this div we need to add all of our social media links so since they're links so again we'll add some more link elements and i'll just again do a pound for the href since there's they don't actually exist and then again each link is going to be i believe an image so image and the source should also be in the images folder and let's see which one was first so in our design so it's facebook youtube twitter pinterest instagram so facebook's first so images images and it looks like icon facebook and then i'll give it an alt of facebook so i'll do the same thing for the other links and i think there were six total yeah it's not a five so let's duplicate this by selecting it and then pressing ctrl d so there's five so i think the second one was youtube and then twitter so youtube i'm guessing it's just called yeah youtube then twitter and then change to alt i think pinterest was the next one and the last one was instagram there we go so we got the social links and then let's kind of go look back at the design so after the social links were the text links so as i mentioned earlier i'm going to create two groups of text links so let's say footer links then i'll add maybe another helper class and we'll just say uh link maybe column one there we go and then we'll add our links oops a link and the links was the text here so we'll just copy this over i think it was three per group and then we'll duplicate this so this will be footer links column two and i'll just replace the text okay about his contact blog career support privacy policy let's just double check and make sure yep that looks right okay and then last one is going to be the cta and i'm going to create one group to enclose the cta as well as the copyright so i'll say footer i'll just say cta even though the copyright's in there too and the first thing will be the button so i'll say a class of button and then the text was request invite this is basically the same button that we've had um earlier in the web website and below that is going to be the copyright info and i'm i'm going to make a separate div for that so footer copyright um easybank all rights reserved i may have deleted that somehow so i think the symbol is copy easy bank all rights reserved okay so now we have our markup and let's create the corresponding styles in our sas file and we're just going to kind of build out the skeleton so we got footer logo so the next thing is footer social and in the social we do have some links and images we'll just leave it like this for now and we'll add it as we need so next thing is going to be footer links and then footer links column one and column two so i'll just add those as well okay then after that is footer cta and then button we might need a button so i'll just say a button and then the last thing is going to be the footer copyright okay so save that okay looks good so we're not going to have too much on our website but let's just kind of see what we have here okay so we have a logo loading this may actually be a problem because this is the logo that we use up top with the sort of dark color but this is i believe yeah so the footer has this dark blue color in the background let's just add that now so we're going to have to i think modify the svg and i think we should be able to edit it we'll create a new svg for the dark um for the white on dark and then we should be able to edit that manually so footer we'll give it that background color of that dark blue and it should be in the variable satisfied so yeah dark blue and then i'll just say color white just to sort of give it a default um and maybe actually since everything is a link we also want to say a color white just to make sure that all the text links will get that white color okay so let's see what we got now yes you can see with that logo it is not visible so let's make the new svg file because i think we only had that one logo image yeah just that one logo so we opened the svg it's actually just like text just so you can um the cool thing about svg is that you can edit colors so you can see here these different colors this is probably the colors of the symbol in the back um so the you know this sort of diagonal stripes but we need to edit the text i'm guessing it's this thing pathfill um and this is just the letters of easy bank i'm guessing so let's create a copy of this logo svg file and then i'm going to rename it rename logo let's say dash dark because we're going to use that on a dark background so alt z to wrap the words and i believe this is the path fill and then we want to change that to white so we'll say f and we can't use sas variables in here because it's just it's an svg um it is not i can't use sas stuff okay so we'll change to logo dark in our index.html file um logo dark let's see if that worked e there we go and let's just double check it that does seem right yeah that seems right it's just white okay let's add some padding to this so it looks a bit better and i'm actually going to just turn on the responsive mode so we can see what it actually looks like so we want to add some padding on all the sides and we also want to center the text all the content let's see how much padding we need it's using my little rectangle that i created it's going to kind of estimate it's about maybe 40 pixels on top and i'm guessing on bottom um so about 40. yeah that's close enough and then maybe we'll just do 40 all the way around nothing's actually nothing is actually reaching out to that far but i think you know we'll just keep it at 40 just to have some padding all the way around okay so in the footer itself we'll say padding and 40 40 divided by 16 2.5 rims and again that's because to get from pixels to rams you divide it by 16 which is the base font size by default and rams are just a more accessible way that you can size things because it gives the user control if they change the zoom in the browser or even modify the base font size in their browser if you have measurements in rems it'll sort of scale up or scale down with the browser as opposed to pixels it would stay pixels no matter what so just better to use rems as opposed to pixels you can also use ems um but i like rams okay so now with the padding see we got okay good padding and text align center looks good now we need to start adding spacing so i just kind of go from top to bottom so i want to add spacing under the logo and on down and again i'm just kind of estimating here so it's about let's say 30 and then under the social okay so we'll give 30 pixels of space under the logo also under the social and then i'm assuming under the text links a little bit less but we'll just say 30 for everything just makes it easier okay so one add footer logo we'll say margin bottom and we'll say 30. so 30 divided by 16 1.875 grams and i guess we'll just add that margin bottom to all the elements that wanted them so footer social i believe needs it and then only the second footer link so footer links column two we'll have margin bottom as well and then i think under the button so in footer cta under the button we'll add margin bottom there we go okay um margin is not taking under the logo why is that it's there um maybe it needs to be display block or oops don't want to do it for footery footer logo because footage is every single link which is like pretty much everything in the footer so display block and the reason this worked is because before display block the element i'm assuming yeah anchor elements are displayed in line by default which means that they just kind of display however the default flow would be and you can't add things like margin and stuff it just won't take effect so you can say display block um or display inline block display block it'll take up 100 of the width that it can if i do display inline block it will only take up the width of the actual content so maybe displaying like inline block would be better for this so footer logo display inline block okay looks good so it looks like they were the margin did work for the other elements because those are divs and divs by nature they are by default display block elements now let me add some space between the social icons as well let's see how much space there is um 15 or maybe 16. it's a lot of one ram of space using margin margin right so okay so footer social which is this section here and then i'm going to add the space to the anchor links so again we probably need to do display blocks the margin actually like takes effect so display inline block actually um because the slave block can make them all 100 width which is not what we want we want them next to each other explain line block margin right one round oh and i don't want to do it for the last one so i think i could use the not last child so if it's not the last child it'll have this margin right okay and that looks like it worked let's just double check so margin and then they all have margin and then the last one does not have a margin which is great i think i do want display inline block for all of them so we'll just do this okay cool now the next thing for the text links the text links are they are each on their own row oh what i could do is i could create make footer social a flex parent let's try that so display flex and then i do need to set flex direction to be columns that will be one under the other instead of trying to fit them all in the same row so flex direction column oh not for social i want that for uh the links there we go okay so now they're very nicely in one column and centered i think i actually need to do is add some alignment to the flex parent so usually to control horizontal stuff that's justify content because it's vertical align items should control the width of the children so let's say align items and let's just say center just to see what happens okay so there we go so now we have centered them all and then it only makes the flex children take up the actual width of the content itself so let's add that in our style so align items center item center this looks pretty good and we also want to add some space between the text links themselves yeah let's just say 20 because there's usually a tiny bit of space from just like line height i wonder if i could just use line height to make that space let's let's experiment again line height 1.5 oh so i do two actually looks pretty good increasing the line height makes it take up a little bit more space which results in there being space between the links so then i don't have to do i don't have to add a margin to add space between them which is like sort of nice so that looks maybe a little bit more line height 2.25 for footer links a and i don't think this is actually necessary anymore since i fixed it with the align item center thing yeah that seems good okay so i think that this is basically the basic mobile styles let's move on to the desktop styles and in desktop the most important thing we need to figure out right now is what the grid template for css grid is going to be so i think initially i'd said we're going to make this a four column layout so the first column would be logo plus social then we'd have two columns of text links and then the last column would be the cta button and the copyright now i think that i'm going to also make it two rows because i want the logo to be on one row and the social media icons will be on the second row so that means the entire template is going to be two rows and four columns and i think the easiest way to demonstrate that is just to use adobe xd and to sort of draw squares around each of the cells so it's a little bit easier for you but also for me to see what the template's going to be and then i can write the code in the scss file so let's start with that now so we got two rows for this first column and then we'll just have the same you know going all the way down so that's the first column for text links and the second column for text links and you know this isn't super exact right now so there is going to be spaces between the cells but for just for illustrative purposes it's not going to be you know exactly correct so it's going to be something like this where we have four columns and two rows so this means that using the grid template areas this top one would be called logo and then this one would probably be called social this one i'll just call links one and then links to and then the last one will just be cta and we'll use those names to assign the locations in the template to each of these content blocks all right so in our code editor we need to figure out where we want to write the code for the footer layout for css grid kind of like flexbox you have a parent element and then you have the child grid elements so the parent element in this case is going to be the actual footer tag itself and then each of these areas are going to be the child elements in the grid so the first one would be logo second one would be social then the links one then links two then the cta these are all direct children of the parent footer element so in our sas file we want to add display grid for i think probably just desktop and up so we can do that with a breakpoint um our breakpoint mix in so include breakpoint up large and at this point we will add display grid so again this means that on mobile and tablet it's not going to have the grid layout it's going to have that stacked one column layout and we'll we'll do the same thing for the other properties as we add them so display grid and then grid template columns and we wanted four columns right so let's take a look at what we want the widths to be for those columns so it seems like these first three columns are probably roughly around the same width and then the last column is going to be wider i'd say maybe you know we can say these first three columns would be 1fr or fr meaning fractional unit and then the last one would probably be maybe 2fr maybe 3fr uh i'm not really sure yet and that will make that that will make this last column either twice or three times the width of the first columns so we'll just do 1fr1041fr and then 2fr for the last one and we can use the repeat function so the first three columns are one at far each so we can just say repeat 3 comma 1fr for the first three columns and then the last column will be 2fr then we want to add two rows so i'll say grid template rows and we want two rows probably the same height for each so again we'll use repeat two comma one fr which means the space each row will be given the same amount of space okay now the last thing is the grid template areas so this is a little bit um tricky it just has a bit different syntax and i know that when i sort of started using grid template areas it was a little bit confusing but basically going back to our design you write out the names of each of the areas sort of in the place where you want that block to be in in the grid so this one's going to be called logo it's going to be going across in the first row from column left to the right it'll be logo links one links two and then cta and then the second row is going to be social links one links to cta so using the same name for two different cells it tells the browser that that area is going to take up two cells so the first one's going to be logo so how this works is we just type in logo and it is in a string as you can see here and the second column is links one then links two and the last one will be cta so this is kind of the representation of the first row with each name taking up one column now we have two rows in our template so we're going to add a second one in a string again and instead of logo the social media icons will be the first column then links one links to and then cta again so this is our grid template now you also need to in addition to creating this in the elements themselves and i guess i should put this in a break point as well so include break point up large we tell it that the grid area name of this element is logo and this is part of the slightly confusing thing but this does not need to be in a string one one place that i look to a lot when i'm confused about grid or flexbox stuff is css tricks so a complete guide to grid and they also have one for flexbox so we're looking for grid areas this is kind of telling you how the grid temple areas work so you can see they have things in quotes and the actual element you just have the name and not in quotes again this grid area property of logo will tell the browser that the look the footer logo element subscribes to the logo grid template area so we have to do the same thing for each of these so i'm actually just going to copy this and then this is the footer social area and that's going to be called social and then for the links 1 we'll put it in the column 1 and then we'll do the same thing for column 2 which will be links 2. and the last area will be the cta and that's going to be the entire footer cta element which contains the button as well as the copyright info so that's going to be i think i just said cta these grid area properties they'll sort of match to what's in the grid template areas all right so this looks pretty good obviously it's not completely accurate at the moment but this is a really good start let's turn on in the layout tab the grid inspector so i want the footer to be highlighted this is a super helpful tool if you are working with flexboxer grid firefox has these special flexbox and grid inspectors and it just tells you a visual representation of what you have we actually have not only the lines to designate the rows and columns but it's also telling you the names of the grid areas that we just created it says logo social links one links one links two links to and then cta and it also tells us that with this dotted line it's sort of telling you that the area is taking up those two cells whereas for the logo and social there's a solid line between them indicating that they're separate i think that let me just uncheck the display area names so you can see a little bit better but we need to kind of align these correctly right so let's work on the horizontal alignment first and i think we want the logo and the social icons to be aligned to the left you can control alignment in two different ways one is sort of global alignment when you set properties on the grid parent you can also set properties in each grid child to just control the alignment of that cell so there's a lot of control you have using css grid and let's kind of figure out what we want to do here if you look at the design we do want the logo and social icons to be left aligned and we also want the text links to be left aligned as well and then the cta and the copyright are right aligned so everything's kind of like flush to the edge so i think we could try using justify content space between is that doing anything it doesn't look like it's doing anything this might be a flexbox thing let's go back into our handy css tricks guide let's justify items aligns grid items along the inline row as opposed to align items which aligns along the block so let's try justify items start so justify items start oh there we go i think what i was doing was justify content which i use a lot in flexbox but i think that just controls the child items as a whole you justify content yeah so it's the the total size of your grid so that seems okay um i also want to i think maybe set text align left for desktop because it was centered due to the mobile styles and then we can fix these as we go along now why are these not are these centered line item center i have a few different things going on here so i have the footer links it's a flexbox parent let's turn off the grid look at the flexbox i had done a line item center and i actually want to align items i believe start yeah start because this in this flexbox parent it's going vertically so line items will do the cross axis arrangement so i just need to remember to set footer links line items start for desktop and up so footer links and then for breakpoint up large we're adding a line item start and i'll make sure that the links themselves are aligned to the left the other thing we wanted to do was for the grid template justify items start let's go back to the grid inspector now we can see that the text links are aligned to the left the logo and social are aligned to the left as well and then for the cta we want to align that to the right i think we can say um justify items and oh this is not a grid thing so i can't do that i guess i could try text line right no that's not right oh it's because i did justify items to the left so i think for because this is an individual this is the grid child item i can't do justify items i have to do justify self because that applies to the individual child itself so i think if i do end there we go so if i do text align right and justify self end for the footer cta desktop styles so under the breakpoint area okay so it looks pretty good for the horizontal stuff right let's just double check and compare that with the design so yeah we got the logo and i social media icons on the left these are line left this is aligned to the right and that does seem like what we have so now we need to figure out the vertical alignment you know it looks like things are a little bit all over the place so we go back to the design let's just draw a box around the entire footer area just to see how things kind of line up with each other looks like things are kind of extending out to the top and the bottom they're like pretty much almost flush so if we go back to the footer parent itself i think what controls the vertical alignment is align justify content and align content just control the grid in like the greater parent so if i want to control the alignment inside the grid i have to use items so align items okay aligns grid items along the block axis so the values can be start and center and stretch so i think i want stretch so it goes all the way to the top and the bottom so we'll try that didn't seem to do anything something else is adding this extra space i wonder i might have some margins actually so let's look at the links oh there is margin in the social so let's just cancel that out so margin bottom zero and then i guess logo also there's a margin there okay i might just need to go back and move all the margins that i added from mobile into a breakpoint down media query because i only want it to take effect on mobile and tablet so let's see where here we go margin bottom so include break point down some of this apply to tablet and down oh medium i mean medium and down and then we'll add the margin bottom there let me just copy this media query so same thing here margin bottom here and i think there was one yeah for the button okay now that we've removed the margins from desktop let's see how the site looks did that help at all see the social icons are still like really they're too high i want them to be flushed to the bottom what happens if i do an align self for footer social i'll get rid of the height thing turn on the line self to the end does that seem right it seems a bit tall in any case we want them to be on the top and bottom anyway so let me add a line self to footer social for desktop okay the text links themselves look okay now i need to do this the aligning for the cta section so in the cta section we have this and then we have a copyright so i think if i do a line self miss stretch an option for this oh it is stretch not working this is kind of annoying okay i'm just kind of curious start have an end i think i may need to separate these out into different cells so i can sort of align them the same way i did with the logo and the social so footer cta i'll only have it have the button and i'll delete that extra div and then do that so then footer cta is in his own thing twitter copyrights is is in its own thing as well so let's go back and first i'll have to add a grid area for the copyright since that's a new thing so include breakpoint up large grid area and i'll call it copy right then i'll need to add the copyright name to the grid template so before we had the ctn copyright in one thing now we're going to have ct on top and then copyright on the bottom okay much better um so now we can sort of try to we'll add another rule for align self end and then justify self and okay okay that looks pretty good i do feel like things are a little bit taller than they should be you know i wonder if the font size should be smaller for the for the text links you see that this should be 15 or so pixels how big's the font size right now it is if we go to computed font size is 18 and where did that rule come from it's just from the body font size okay so for the footer links i need to set a font size of 15 pixels so that should help with making the content less tall i'm guessing it's going to be the same font size for mobile as well so font size 15 pixels divided by 16 is 0.9375 rems all right let's give that a shot okay looks shorter which is great maybe the easy bank text itself needs to be a bit smaller too it's probably about the same 15 pixels so we'll copy this property and add it to the copyright as well okay maybe there's just too much space because i initially added all that space using line height so if i reduce line height it's still a bit tall interesting let's just say line height one just to make it really short oh you know what it is it's because i set the row i set the rows to be 1fr which means the top row and the bottom row have to be the same height that's how i set it but obviously the bottom row the social media icons and the copyright doesn't need to be the same height as the top row and the top row looks like it's getting its height because of the button which is making everything be too tall let's fix this row problem first and then we'll figure out if we need to decrease the line height for these so instead of 1fr i think the second row should be something less where is it here grid template rows so the first top row should be 1fr if i do auto it'll just oh if i do auto it just sort of does that let's try that so in the parent we'll change grid template rows to 1fr and auto here we go so instead of this repeat thing for the rows we'll just do 1fr and auto okay so this is shorter now the line height is kind of what's limiting it so let's try one okay see now got really short which is great maybe 1.5 you know maybe i don't want to use line heights that's kind of like making it a static distance what if instead in the footer link since i know that is a flexbox parent i could say justify content space between and that will sort of auto stretch to fit that so i think that's a much better way of doing that at least for desktop we want the line height for mobile because we're not using grid for that so footer links for desktop here we go i think i personally just do justify stuff before the align properties okay so this looks closer which is great now i i'm guessing that this button might be a little bit tall i am kind of curious where this height is coming from now oh i still i forgot to take out the line height okay that's my problem so i'll just remove line height for the footer links a for desktop so i just want to use this on tablet and mobile so i'll use my break point down and i know that i usually use the break point up meaning i use min width media queries but i think in this case because we're adding styles for mobile i would prefer to use the breakpoint down using max with media queries otherwise i would have to cancel out all the margins and line heights for desktop that looks a lot better so i think maybe this button is now what's kind of making it a bit tall okay how big is this button oops it is 46 pixels tall or so and how big is it on the website okay so it is 46. you know i'm not going to split hairs here i think this looks pretty okay so even though it's taller than it is on the design i think it's okay and i just kind of added some space here so i'm not blocking it with a picture of myself for you all it's kind of weird it even looks like there's more space in the design i think the logo and the social media icons actually might be a little bit too tall so let's just tweak that and then we'll sort of consider this complete the logo should be 23 pixels tall and about the same for the social icons so let's see what we got um 20 and the icons look like they're 25 okay so yeah they are a little bit big the image itself says 20 which is good and then for some reason the thing is 25 the anchor link maybe i just need to set a height if i set a height of 20 pixels will that help oh yeah it does okay we'll just say hi 20 pixels for the footer social a social a here we go and i'm assuming the same height will be for mobile as well so we don't need to use a media query for that so 20 divided by 16 is 1.25 rems that seems all right okay now that i look at this again i think that there's a couple things i need to do the first one is i need to limit the footer content so it doesn't go all the way across i think i forgot to add the container class so let's do that first and then we might need to tweak some of the alignment okay so in footer i'm gonna have to add a container class container and i don't remember if i want to add the padding helper classes but let's just move these into the footer container and because originally the footer tag itself was a grid parent i'm going to have to move all the grid properties into the footer container so footer and then we'll just put it here at the top container so we'll move all the grid stuff into the container element okay hopefully that'll work let's take a look okay much better so now we can see it's not going all the way to the left and the right things just seem cramped even though the heights like so tall is that button really the right height yeah it's 46. and you make the copyright text smaller i think right now it is 15. i'm gonna make it i think 13. it needs to be a lot smaller 13 divided by 16.1 okay eight one two five not one eight there we go okay i think the color was darker too right it's not white it's kind of a light gray what color would that be maybe grayish blue so you know this is just kind of tweaking trying to double check the design and the site and just make sure everything looks correct yeah there's more space between the button and the copyright something is not right i wonder is it including the padding that i added no this is 70 oh okay so it's 76. okay so it is adding the padding so it's actually now it's too short which is the same as like what i was thinking it was so let's increase that line height again to um make it taller line height 1.5 oh wait wrong selector forgot a second underscore there we go maybe 1.75 2.25 2.25 line height is giving us the correct height of about 100. okay glad we figured that out so footer links a i knew something was off i just took me a while to figure out where it actually was there you go footer links a oh wait two point is that the same oh my gosh it's the same freaking line height so let's remove this media query there we go okay this looks much closer to the design okay so now we've gotten the height right i think we need to tweak this like horizontal spacing um there's it's too close here and there's too much space i think so yeah so it seems like there's more space between easy bank the logo and then the first text link let's see how do i want to do that i guess i could maybe increase the width of the first column so if we go into the grid parent instead of making all the columns the same i could just try to tweak these a little bit so i'll probably leave the text links as 1fr and so i'm just going to try this out in the browser but what if i said 2fr 1fr 1fr and then 3fr maybe 2far well maybe 3. okay let's see how close that is to the design hey that's not bad um there's a few things that look like they're off so there's just a tiny bit more space between these i think i also forgot to add a grid gap property so let's try that gap of maybe one rim two rims let's try one rim so that that gap property let me just show you how it looks so it's adding space of one rem or 16 pixels between all the cells in the template so i think that's probably good to keep so i need to add gap of one ram and then i need to change the template itself will be 2fr 1fr105r3fr okay so grid template columns place this i know i could use repeat to 1fr but i mean it's kind of the same at this point if you're only repeating if you're only repeating it once and then what else that i wanted to add oh yeah the gap of one i'll add the gap under areas i guess one rim okay that looks pretty good let's compare with the design again that looks fairly close and i'm actually okay with like i have a little more space between social icons but i think that's okay all right now moment of truth let's see how this looks on mobile because we decrease once it hits that break point for tablet it goes to one column and it is centered and stacked then for mobile i'll just turn on the emulator thing that looks pretty good so i think we have the basic styles down now let's get to some sort of let's kind of polish it up a little bit there's a few things i usually try to add main thing is hover states because these are all links and you want the style to change slightly when you hover over them so you know what's going on so for the socials let's check the design oh here we go so we did some if we hover it turns green on the social icons as well as the text links and then the request invite has the same thing where it like goes to white so let's do those the social icons that would be social icons the images um they're svgs and we want to change them from the white to the green color now since i loaded these svgs as image tags i might actually change that because what i want to do is change the fill and the svg itself let me show you what that looks like so icon facebook if we look at that so it tells you the fill is fff which is white and there is actually a way that you can alter that in css but only if you're loading the svg as an svg tag and not the image tag so i'm gonna have to change this so i'm gonna copy this so we're actually just using inline svgs at this point and then i think can i just move the alt no there's no alt for that that's interesting i'm just curious about this uh alt tag for svgs accessible it's purely decorative it doesn't need alternate decks i think we do because they're like social icons inside the svg add title oh must be the first child of its parent element it'll be used as a tool tip that's helpful okay so let's do that so say the first child um here so path is the first child originally but now we're adding titles and we'll add facebook that's pretty good and we'll have to do the same thing for the other one so youtube copy that place the image and then add the title youtube so now let's load it up everything's the same let's just double check yeah so it is actually loading the svgs which is good if we hover it tells us the title which is great so now to adjust the color to adjust the hover we want to in the svg alter the path fill and we can do that in css which is pretty awesome so if you go down to social a so in the a tag it's going to be svg path that's going to be the element social a cover i could nest it under the a element but okay maybe i'll do that under the a hover svg element and then the path element is going to have fill of the green color lime green and then we also want to add its transition so it's a little bit more nice looking hopefully this works phil and then how fast we want to be maybe 150 milliseconds he's in out oh hey very nice cool so we were able to add the transition and the hover fill color for these social icons we want to do the same thing for these text um links as well that's going to be in the footer links a so footer links a hover color lime green i think it was and then of course we're doing the same thing so transition color 150 milliseconds ease in out oops okay there we go nice and the last thing we want to do is this button hover state and you can see it's losing opacity when you hover over it and that's because when i first coded this button it was just on a white background so i could simply reduce the opacity and make it sort of look like there's a white overlay obviously it doesn't work with a dark background so i'm going to have to build a semi-transparent white overlay over this over the linear gradient color so i think i can do that with a pseudo element so let's just sort of try so in our global sas file going down to the button styles so right now the opacity thing i'm i'm just going to comment that out because it's not really working for us and i'm going to have to add a pseudo element so let's just try the before and content is blank so it shows up um you have to have a content property set for your before and after elements then i'll say background color i just do background since it's using a linear gradient um i think background is actually linear grains actually apply to the image if i'm not mistaken background image oh let me just see if that's correct really quick yeah so yeah background image and unfortunately background image does not transition nicely so we'll we might have some issues when we do this but okay going back here so we're making an overlay um i'm going to have to position this absolutely i think because we want it to be on top of the rest of the button right zero and this is just to make it go to you know all the different edges and because it's supposed to absolute i see to make sure the parent is positioned relative which it is that's good and i'll make sure the position absolute child will sort of remain inside the parent which is relative then background um color and because we want to eat rg we want it to be rgba so it will be semi-transparent so white is 255 255 255. and transparency let's just say 0.25 we don't want to go full white otherwise you won't be able to read the text okay now let's just see let's see how that looks and i'm not it's not attached to hover state right now i just kind of built it to sort of test and see how it'll look oh that looks it looks pretty close to what we had before actually um so let's set opacity so passing zero it won't show up and then it'll show up when we add when we get rid of the opacity zero so i'm going to use that for the hover state this actually was a pretty easy solution i thought it was going to be a bit harder than that so by default we'll set this opacity to zero and then on the hover state we'll set opacity to one so we want to transition that so it's nice and smooth we use 150 milliseconds like the other hover state speeds then on hover um hover on the parent we're going to make the before element opacity one hey not bad not too shabby okay so i think we got our hover states pretty good let's just double check and make sure the top one works too oh yeah nice sweet so let's just check one more time see how this looks on tablet and mobile good let's just use the emulator so it's easier to see so here's mobile looks pretty good and then ipad i think that's okay on tablet if you wanted to you could also make this like maybe two columns on tablet but i'm just going to stick with the one column because i think that's fine and it's at the bottom anyway so it's not like it's blocking it's like people have to scroll past it cool so i think we can actually consider this whole web page complete and that's it for building this landing page template if you made it all the way through congratulations and let us know down in the comments what you thought of this video and as always thanks for watching and keep on codinghey everyone jessica from codercoder here thanks so much to free codecamp for having me on their channel in this video we're going to build a landing page template from frontendmentor.io if you get stuck at any time during this tutorial you can check out the completed source code on my github link down below and if you like this video and want more i'm actually creating a course called responsive design for beginners you can sign up to get updates on my progress creating the course as well as be the first to find out when it launches and without further ado let's get into it all right so the website we're going to be building today is from front end mentor dot io they have tons of different challenges of website templates you can build yourself and the one we're building today is called easy bank landing page now what i'm going to do is download these starter free files and with that you just get jpegs of the design which you can definitely work off of but if you want the full sketch file you have to pay 8.99 so either way works we're going to be working with the free files right now so let's set up our project on the left i have my empty project folder and then on the right we have the files that we downloaded from front end mentor in this folder i have an index.html file which we do want to carry over here to our project there's also an images folder and these contain the svgs and pngs and jpegs that we need to use for this website so we're going to copy the images folder over as well and there's also a style guide file which i think would be pretty handy and then lastly the design folder contains the jpegs of the different designs now what i'm going to do is i'm going to show you i've made an adobe xd file and in that i've basically copied and pasted all the jpegs so that i have all the designs in one place just makes things a little bit easier so now that we have our files in our project let's open up vs code okay so here in vs code i have the project folder open you can see that we have the index.html file from frontimentor and we also have the style guide file which is helpful to tell you you know what what's the designs at as well as some colors and font information so we'll definitely be using those and we have the images folder here with all the images okay so when i'm working with website projects usually i'm going to be using sas scss syntax and we're going to have to also have some javascript so let's create those files now so in the project root i'm going to create a folder called app in that folder i'm going to create two sub folders one for js for the javascript file and one for scss for our sas files so in the sas file folder in the sas folder rather let's create our main sas file style.scss and this is going to be the main sas file that we're going to import all of our partial sas files into and we're going to create one called globals scss yeah that's right i also usually create one called variables because i like using sas variables a lot so let's import those into our main sas file import variables because we want our variables to come first so the other sas files can use them then import globals okay so let's start adding some boilerplate styles here so the global the first one i usually do is in the html selector i'm going to say font size is 100 this is more accessible lets the user control the zoom level in their browser we're also going to do box sizing border box and what this property does is it makes the size of elements sort of include padding in the final width so it's just a bit easier when you're working with elements like that then we also want to inherit that box sizing border box to all elements so using the wild card selector here as well as the before pseudo element and the after pseudo element selector and they're going to inherit the box sizing board box in the html element now for the body element let's add some sort of resets here so we'll say margin zero padding zero i also like to do a line height of 1.3 just to add some spacing between lines and we're going to add our fonts in as well we look at the style guide it said that the font that we're using is public sans i'm going to go to our browser here copy this in i think it wanted to use 300 light and then 400 regular so we'll select both of those and we're going to embed it we'll just copy this link tag here and put it in our index.html over here above the title now since we're in the index.html file let's also add a link tag for our css file i'm going to create a dist folder and i want to put all my final css files in there so i'm going to say disk style.css and then we also i think want to add a script to load our javascript file that one's just going to be in the app folder so app.js script.js let's go into our folder here and create that script.js then we'll just add some test code so we can test it hello world why not now that we have some sas files you know just basic styles added let's also test out our sas workflow to compile my sas to css i like to use this extension called live sas compiler so if you don't have this installed yet you can just type in live sas compiler in the extensions marketplace and click this button to install it you might need to restart vs code if you're installing it for the first time now but once you have that set up when you open a project file you should see some buttons in the bottom one says watch sas and the other one says go live so if we click that watch sas button going to watch our sas files and then if you want to go live we click the go live button and it should load the local website in our browser we can see that that is indeed the case obviously this doesn't look too fancy since you know we just added the text from the design here but we can also check down in the console window here and our hello world message is loading so it looks like everything's working correctly see we need to add that font to our code so in our globals we're going to say font family and let's do that before line height font family i believe it was called public sans so we're just going to copy this over there we go okay so let's check our browser again and we don't need this anymore so it looks like we have the font public sans successfully imported so now going back to our vs code we want to do is we want to basically start creating the markup for our website so let's go into our index.html file and we're going to start writing markup over here i'm just going to actually comment out all the copy from the design just so we don't have this extra stuff you know visible on the website we're going to start writing our markup so let's go back to our design and what i'm going to do is try to do the mobile first approach and we're going to make our default styles without media queries the mobile styles and we're going to build the mobile website first and what i usually do is i'll go from the top down so let's start with the header but taking a look at the header it has a logo on the left and it has a hamburger button on the right which then when you open it opens this mobile menu then if we compare that to what we have for the desktop design it also has a logo on the left that has some links looks like in the middle and then there's a cta button on the right side so let's create the markup and styles for this header in our body tag i'm going to create a header and then in that header we want to add our logo image and we're also going to assume that this is going to link to the home page so we'll just make that open that and then in this anchor tag we want to add our image for the logo so image source images and then we want to look for this logo svg then alt oops i'll we'll call that easy bank since that's the name of the plate we're making let's see if that loaded on our site okay so that was easy right i think actually what i want to do in addition to that is create a nav and i'm going to put everything in that navigation in this nav tag what we got is the logo and then we have our hamburger menu on the right so that's probably also going to be an anchor link it's just going to go to the same page and we want to create a hamburger menu and the hammer we're going to use those three lines so let's create three spans so we're gonna use an emmett shortcut span times three so three empty spans and we also probably need a class for this and we're just gonna call this hamburger for the hamburger menu and in the same way maybe we can create a class up here for the logo so we'll say class equals logo if we look back at the design we can see that everything is in one line so that tells me that this nav element should probably be a flexbox parent to put everything on the same line now one other thing i like to do is i like to use a lot of helper classes so instead of having to write display flex on every single element in this webpage that is a flexbox parent we're going to create a helper class called flex and i'm going to add that in our globals got it there so flexbox styles we'll say flex class and we're going to say display flex and let's add a few other flex related classes so flex um one property we use a lot is justify content so let's say jc dash space between and that will be justify content space between because that is used quite often you can also maybe create one for center and i'm just going to basically be creating these as you know as we need them so let's also create some align content properties so align content and usually it's aligned content center so we'll write that align content or i'm sorry align items rather center so it's a i enter okay so this is fine for now we're probably going to use more later but now what we've done is in my sas i've created a flex class for display flex and then these other ones for the flex properties so i can do now is uh let's see split this up so you can see our html on the left and our styles on the right what i'm going to do is in the nav in addition to the flex class we also want a flex justify content space between so let's just check out how it looks in the browser okay so you can see our logo here let's see what's going on so we can see the nav here so we have a logo and then we have the hamburger class but it looks like that has a zero width and box model yeah it looks like it has a no width but there is a height so what we probably need to do is make those spans spans by nature are our display inline so that means they're not going to take up any space so there's like no content in them so what we want to do is we want to add some styles now for our header so we go back to our sas folder create a new sas file i'm going to call this header.scss and then we want to make sure that we are importing that into our main sas file so just trying to keep things organized here header so now in our header what we want to do is i think i'm going to add another class for the header let's say class header and this is so i can use bam block element modifier for writing my sas classes so first we have this main element header and then in here we're going to say maybe header underscore underscore logo and then header underscore underscore menu maybe hamburger menu okay so now in our sas files we can start using the ampersand for header then there's a logo and then another one for the menu this is the mobile menu so we'll just add a little comment here saying that mobile menu and we also have an image tag here so i'm not sure if we're going to need this but we'll just add it here anyway so in the menu we have some span elements i'm just going to use the direct child selector here to make sure we keep things as specific as possible and we're going to say display block for these spans now if we go back to the design the hammer menu is looks like a bunch of dark black or very dark gray lines so we're going to start with some general styles here first thing was first actually we probably want to get our colors added in from the style guide so you can see here these are all the different colors they're using hsl instead of hex but that's totally fine so let's start adding variables for our colors so we can reuse them so dark blue and now we're probably going to use this dark blue color for the hamburger menu and we'll just kind of see how that looks so let's close our script file here we don't really need that right now it's going back to our header sas file we want those lines to be that dark blue color so what i'm going to do is i'm going to say width and the width of those hamburger lines are now since this is a jpeg this is kind of the only way that we can really see how big things are i'm creating a little rectangle here that's semi-transparent so you can still see through it but you can still move it around and you can kind of use it to see how big things are pretty small looks like it's about a 26 and then about 12 or 13 height okay so what i want to do is here i'm going to set this to i think was 26 pixels and then the height of each this is just for each line so let's say two pixels oh yeah and then the background color background color and we'll use the dark blue variable all right let's see how that looks on our website now okay so it's a little small up here but we do have our hamburger lines here but we need to add some spaces between the lines so what i'm going to do is i want to add a margin bottom to all the spans except the last one so what we can do is we can use the not selector so not last child and then if it's not the last child we'll say margin bottom and let's just kind of guess here maybe three pixels now going back to our website we can see now that we do have the three lines and our logo now of course everything's up right on the edge here so we need to add some padding here so let's see how much padding there is let's get the top and bottom padding first i'm going to kind of assume that the top and bottom padding are the same if we have a little rectangle here about 22 inches or pixels rather and if we move it down it might be a little bit more so maybe 24. so 24 pixels of padding on top and bottom and then for left and right about the same let's just say 24 all around so going back into our code what we can do is we want to add padding to the nav itself so in the header we're going to add another selector here for the nav just no class at least for now so we'll say padding uh 24 pixels all around okay so let's see how that looks all right oh why is that so tall let's see what's going on here so we have a nav here that's one of our pixels all around it looks like we need to center things vertically so what i didn't do is i need to add another flex property here so flex just to show you what i got here flex a i see that's going to align items to center all right so that looks a bit more centered there we go okay so we got our now we got our spacing one thing we do want to do is see what the differences are between the mobile and then the desktop nav mobile obviously has the hamburger menu does not have these links or the cta so these are desktop only but i should be able to use the same markup for both mobile and desktop so let's add some elements in for the links as well as the cta okay so let's scoot this over here a bit so logo's first for both and then for the mobile the menu is over here now since the the hamburger is not going to be visible on desktop i'm just going to add these other elements down here so the first one you want to do is since i'm using flexbox to separate them out let's create a new element we'll just say div and we'll say header underscore underscore links then in here we'll say anchor um link so i think there were how many links five link times five there we go and i think the text is down here so you can just kind of move those up into here into the links so header links and you know this is just a landing page we're doing so we're just going to make all the links the pound sign or the hashtag so going back to our header sas file we're probably going to have to add some styles for that so under the menu will say header underscore underscore links and in that is going to be some anchor links let's go back to our website and now we can see that we have our links okay first things we want to get rid of that underline and i want that to be true for all links on the page so we're going to add some styles here for just default styles so links a visited a hover um text decoration none okay good now let's style those links let's see what we got here check our notes in the style guide okay it says font size is 18 pixels i guess we could add that font size to the body tag so 18 pixels and it's actually better to use relative units like rems instead of pixels so to get from pixels to rams you can divide 18 by 16. so if we check this inspect element see yep font size is 1.125 rams and if you click on the computer tab it'll tell you it's 18 pixels which is what we want okay color seems to be this actually seems smaller so this might be like maybe 16 or even 14. let's find out it's about 14. so we're going to adjust the font size in the um better font size i think we said 14 so 14 pixels divided by 16 is 0.875 um another thing you can actually do and let's do that now is we're going to create some variables for these font sizes just in case we need to reuse them so we'll say body or maybe font medium the 18 pixels or font size 1.125 rims and then we'll replace this with the variable name the other one was font small this is going to be 14 pixels there we go take that over here and we'll replace that with the font small variable kind of helps just to add some comments so you can remember what this is 18 pixels we'll add more variables as we need but for now let's also check out the colors probably that lighter gray for the text here so i think i can actually i might just add it to the body selector since it seems like most of the body text is that gray color so let's add that in the global one as well this just makes it so that you don't have to add you know font size and color for every different element you can just add it globally first to the body for whatever you know the most often used one is and then you can make them different for the elements that need that let's check out this website where's the color coming from looks almost purple not gray there should be another color hopefully uh it's probably this light grayish blue so we'll just replace that there we go i wonder if this is from the link color change to red yeah it's not taking for some reason i think it's probably taking the default color from the browser so what i want to do is let's add that color property there okay that's a little bit too that's a little bit too light so we're just going to go back to the grayish blue and same for here there we go okay that looks more like it so now we have the links added we want to add that cta button that's just for desktop so let's move this over here because we're going to need that pretty soon this is going to be probably a button element so we'll say button type equals button and then what does it say request invite okay so now it's a button now of course we need to style these button styles so we're going to add the button styles again in our globals so first thing i want to do is we want to kind of reset the colors and different styles so this one is a gradient background and it has rounded corners what we probably want to do is figure out what the size of the button is so we can do that by i'm just going to add padding to the sides so it's about 16 padding on top about the same on the bottom and then oops for the left and right it's about let's just say 30. so we'll say 16 padding on top and bottom and then 30 on left and right so we're going to use the button element as well as the button class just in case because sometimes we might want to have an anchor link that has the button class as well padding 16 on top so that's one rim and then 30 which would be 30 divided by 16 1.875 around this okay and then also around a corner so border radius um i'm not sure we'll just say 50 pixels for now okay let's see how that looks okay getting there we also probably want to make it use the cursor when you hover over it there we go so now it looks like it's a link looking back at the design this is a gradient looks like it's a linear gradient just going from left to right so going from this green color to this kind of teal blue green color let's see which colors we're going to be using it's probably lime green going to bright cyan so let's add it i like adding the background here background linear gradient and it's going to go lime green to bright cyan okay so it's horizontally i don't want to make it go kind of vertical so i think it is too right i'm not positive that's the correct syntax and it looks like it's not css linear gradient this is what i do quite a bit when i'm building websites so we can go to let's check out mdn okay two left comma so i need to add a comma there and let's go back to our website oh still didn't work what's going on here i am not using the right property background linear gradient to left let's kind of inspect this in the thing itself linear gradient that's right to dash right no there's no dash that's why just test this to make sure i think i need to edit in the code itself there we go oh yeah i think we need to get rid of that border so in buttons we're going to say border zero okay so now that's gone which is good then we want the color to be white nice and let's see how that matches looks like it might be bold actually font weight we'll say 700 for bold although it said it was let's check our notes again weights 300 and 400. go back to the design here so i'm guessing the default weight is the 300 for light and the normal is sort of the headline stuff so let's kind of go back into our body font weight we want default weight to be 300 and then for the link we'll say the weight is 400 since it is a little bit heavier is that taking um font weight 300 which is good check this out want weight is 400 it doesn't look any different weird okay i think this might be because it is a button element um if we do font weight 300 font weight 400. seem to change at all changes to an anchor link yeah it is changing a bit so this might just be a bug for the button element maybe we'll just change that button to an actual anchor link because it could be an acrylic in real life it really just depends on what you want to do add a class and we'll say class of button now we know that this should inherit all these styles here so let's check this again okay looks like the weight is correct pretty big i think in the design it looks like it was the same size so let's go back to header this is maybe header underscore underscore cta so font size we'll just make this also font small and color will make this white uh why is this gray oh my gosh nothing's working what color red important oh my it's because it's the anchor link oh okay probably because oh yeah i did this color grayish blue i might actually just get rid of this thing here and instead add it to the anchor links because it's a bit more specific because i don't want every single link to necessarily be that grayish blue color there we go that looks pretty good all the links are there so the next thing we want to do is we want to either hide or show the different navigation elements depending on if they're needed on the mobile design and then the desktop design so how we're going to control that is another set of helper classes this is going to be a bit more complicated because first i need to create the classes we'll just call this visibility so hide for mobile i'm including tablet with this mobile class so in this what we want to do is hide for tablet and mobile devices and we'll create another one hide for desktop hide for desktop widths viewport widths so the way we're going to target this is we need to create a media query but what i'm going to do is create a mixin so we can make things a bit more reusable let's create a new sas file called mixins and this one's going to be related to breakpoints the final code that we want to have is something like media and then the target will be min width 1024 pixels for desktop 1024 divided by 16 64. and for media queries you want to use ems they've just been shown to be the most consistent among browsers and then we have our styles go here this is what we want to output but we want to save these break points so we don't have to keep typing them every time right so what we're going to do is we're going to create a sas map we're going to call this breakpoints up and then we're going to basically create a bunch of different values for breakpoints up meaning at this point and bigger use these styles so to do that we're going to first create one for medium because we're assuming the small size is the default one 640 pixels divided by 16 is 40 ems 40 ems i'll create another one for a large and let's say that one's going to be 10 24 pixels divide by 16 is 64. and we'll create another one for extra large since we have a lot of large screens these days 1400 divided by 16. so 87.5 ems so now this is our sas map for breakpoints up but i'm also going to create one for break points down the first one breakpoints up is if you want to target this viewport and up and that's what i use for most of my styles but there are some cases where you want to target a style from a certain viewport and on down so for that we're going to not use the x large because x large on down is basically everything but we are going to add a small here for mobile devices for mobile we're going to take this value here because medium would be 40 ems and on and on up for small we're going to say 40 ends and down and we'll move this up here from medium on down so this is anything smaller than 10 24 and then 87.5 ems oops i need to leave that there we don't want to overlap these so i'm just going to make these one pixels smaller the breakpoints we're using are 640 pixels 10 24 pixels and i think i said 1400 pixels that's for the break points up so for these we want it to be 640 and up so 639 and down this is so we don't have any overlapping styles i try to not mix breakpoints up and break points down in the same style rule it's either one or the other usually going to be break points up we need to recalculate these numbers here this is going to be 639 divided by 16. 39.9375 9 and then 1023 divided by 16. 63.9375 and the last one is going to be 13.99 87.4375 there we go now we have our two maps what we can do now is create our mixin so we're going to say mix in break point up it's going to take a parameter we'll just call it size i'm going to write what we want the the mixing 2 output so we want to output a media query so media and then min width and this is where we're going to put in this size variable i'm sorry this is not right so the min width is going to be the the the value for that size that we've determined so to get that we need to use map dash get so you can see this code has some helper text here turns value in a map associated with the given key so map get and the map we're using is going to be for the first one break points up we also want to grab that size parameter so the size is going to be either small medium large x large and will return this ems number when we're using this mix-in we want to write this media query and then in the media query we're going to just output whatever content is in the style and i'll show you how that works in a second we got our mixing written or breakpoint up and let's create another one for break point down and everything's going to be pretty much the same except reasonably down and then also instead of min width is going to be max width and then the content so going into our global styles again the hide for mobile class we want to hide for medium and down so we're going to call the mixin by using include and we want to do break point down and the size we're going to call is going to be the medium because for medium and down we want to say display none and then in a similar way for the desktop we want to call a mixin but the one mixing we're going to use is going to be breakpoint up because we want to hide the element using this class for desktop and up so that would be large and extra large display none okay now let's see if this works by adding these classes to the different elements in the header so for mobile we want to hide those links as well as that cta so let's add the class here and then for desktop we want to hide the hamburger menu since we don't need that for desktop and we're going to keep the logo because that's going to be used for both okay so now moment of truth let's see how this works looks like something's not really working but let's see yeah this is when we debug our code so hide from mobile and for desktop interesting looks like there's no errors so what we want to do is maybe check out the final css file there we go let's see if we can find that class oh looks like we didn't even didn't even get pulled in for some reason that's weird oh wait there's a error here no mixing named breakpoint down okay let's go back and start from the beginning oh we didn't add the mixins sass file so let's let's do that that seems pretty important now we go okay now there's a success message go back to our site oh my gosh what's going on here okay so it does look like things are hiding and showing so let's see when when does this switch potentially four and up it's showing the links and the button and then yeah so hide for desktop display none or the the hamburger menu then here there's no styles here but as soon as we get shorter use the hide from mobile so at 10 24 is when everything either gets hidden or shown so this looks like it is working let's look at the design again and just make sure we have all the styles correctly we need some more space between these links here so let's see how much space we need to add it's about maybe 32 pixels so going into our header sas file header links a what we're going to do is we're going to add a margin to the right of the link but we don't add a right margin to the last link because there's nothing after that so we're going to use a not selector and then not last child so as long as it's not the last child margin right is going to be what do we say 32 pixels all right so now let's make sure there's no margin added to that last link contact blog why is there white space here and then queers does not have it so the white space is probably added because of the enter key um there we go okay now there's no white space that's weird let's go back here check one more time let's check this button styles again 152 by 50 seems a little bit big to me i feel like some of the padding might not be quite accurate here is our div 163 by 44 and let's kind of guess what this font size is it's probably 14 which i think it should be correct let's double check the font first and then we'll adjust the padding to match so if we go to computed and see that the font size is 14 so that's right so we're just going to adjust the padding here the pattern right now is 16 on the top and bottom it's 50 pixels tall right now and it should be 46 we need to subtract 4 pixels so 2 pixels from the top and bottom so let's go back to our button styles and here's the padding so one round which is 16 pixels but we want to subtract that and make it 14. um 14 divided by 16. 0.875 rem there you go so now it's 46 which is pretty good and then it should be 163 and it's only 152 so it's about 10 so we'll add five more to each the left and the right right now it is 30. we want to be 35 on each so 35 divided by 16 is 2.1875 2.1875 okay so that looks a bit more like the design 162 by 46 which looks much closer yeah that looks pretty good and let's actually double check this logo size as well for both mobile and desktop it looks like they're the same size for both let's just make sure it's about 141x22 if it's the same for mobile yeah it's the same let's see what the actual logo is here 139 by 20 and it should be 141 by 22. so let's see where this gets set i think it's in the header oh we didn't even set the size okay so it needs to be 141 by 22. so 141 divided by 16 8.8125 and then height should be 22 1.375 okay let's see if that helps at all alrighty the 141 by 22 141 by 22. all right this is pretty good so we got our mobile styles here for the hamburger menu as we get bigger we got the desktop styles so let's check out the active states for desktop we go over here looks like the text gets darker and oh we have this border here and then for the button it looks like it gets sort of like whited out a little bit yeah it looks like that so first let's tackle the that bottom border and the color for the text so the header links i'm going to do is for the hover pseudo selector we want the color to be the darker gray so it was grayish blue here so it's probably this dark blue color here let's double check on that nice and to make it a little bit nicer we can add a transition so transition for the color and the timing for that let's just say maybe 200 milliseconds and then i like to do ease in out for most transitions there we go so you can see it's a little you know just a little bit nicer let's figure out how to do that bottom gradient so the problem is here right now these elements are just the width or the height of the text itself so what i will need to do is i need to add some either margin or padding for the top and our bottom to make it the height of the probably the entire thing because we're centering everything remember so where's my little rectangle where'd it go i left it over here oh there's another one down there like this one we'll take this one in case we need it later make it bigger so we can see it let's take that over here and see how tall this thing needs to be looks like the header itself is about probably 80 pixels tall is what we would guess and then the little border thing is about 5 pixels tall let's go back to our site add some border so we can see what we're doing here i can see that this has a border this is actually a little bit tall as well and it really should be 80 pixels tall it's probably the padding the header has no padding the nav has padding here 24 pixels of padding so let's try and we should probably convert that to rams as well so if the total height is going to be 80 we can take this down so 17 pixels and 24 pixels or header nav padding and then if we want to convert that to rems 1.0625 and then 24 1.5 okay so now it is 80 pixels tall which is pretty much about what we wanted let's see if we can do it with a pseudo element not sure if this is going to work let's just say for this one um header links a new set of styles here airlinks a b4 so content needs to be an empty string so let's try position absolute width of 100 display block and we'll make it a height of 5 pixels and then background of let's just say you know the lime green color so the suit elements going all the way across which we don't want it to do i thought this position relative would work let's try adding it here okay there we go maybe we'll try to align it to the zero left of zero right of zero so instead of width we're just saying left and right so now each link has a little line which is what we want but it doesn't seem like it's in the right place and i think it's because we want to adjust it so that it's right up to the header so now we want this green line to be down where the blue line is so let's see if we can do that we might actually just need to add a static let me think about this what we could do is say bottom zero negative statically set it to 30. that might actually be the easiest one so let's do that okay so before we forget let's copy these styles so header links a i'm going to say position relative and then the header links a let's add this here so before let me content empty and then let's just kind of copy those other styles that we'd added here okay so now this actually worked oops what did i do what did i do looks like set position relative hmm what did i do oh i didn't add position absolute there we go there we go i think it was happening before was position relative and you just made them stack for some reason makes every element a display block which takes up 100 width and then it's in the flow of the document interesting okay anyway so here we got our lines now what we want to do is make the colors correct first of all and we're going to only show the line when you're hovering if we look over here it looks like let's see it has the same green actually as the button it goes from lime green to blue so let's go back to our button styles so here's the linear gradient i wonder if we're using this gradient again in this website so it's using the buttons which is already taken care of this i'm assuming are just icons this is just green i think we'll be okay just leaving the styles like this and then we can just copy it if if it was used multiple times i might create like a helper class for that but let's just leave it like this for now and then we also only want that to appear on hover so when you hover on the element itself the pseudo element will get this background that's cool now we need to figure out a way to make this more transitioned because it's a little bit you know kind of jarring just like suddenly pops up as opposed to the color of the text like itself what we can do is unfortunately you cannot make the background itself you can't make the background itself transition it just doesn't work that way so what we're gonna do is we're going to put the background back in the pseudo-element by default but we're going to make opacity zero and then when it's hovered we'll change the opacity to one and then we can add the transition here opacity 300 milliseconds ease and it'll be the same oh wait 200 milliseconds so now let's get rid of that border too don't need that let's see what this looks like now you can see it is fading in and out pretty nicely might make it a little bit slower let's make them 300 for both okay so now it's a pretty nice little transition here okay so i think these text links are good let's move on to the hover state for that button let's look at the design one more time it looks like it just kind of fades to white so i wonder if we can just make this adjust the opacity let's see what this looks like opacity let's try 0.75 see what that switches look that's pretty good okay so button header cta in the header let's find the cta and then we're going to add a transition for the opacity again and we'll do the same thing 300 milliseconds oops ease in out now on hover um we'll say opacity is zero okay so let's see how that looks now whoa oh it doesn't want to be 0.75 i think i said that wouldn't be very good user experience that's pretty good for making this hamburger menu the first thing is we need to turn this hamburger into an x when you click on it so some kind of cool animation second thing that happens is this overlay will in some way shape or form appear over the rest of the website and then on top of the overlay will be the actual mobile menu then clicking on the x will animate it back into the hamburger the overlay will disappear and the mobile menu itself will also disappear in some way so the first thing i'm going to do is starting with the hamburger menu animate it from hamburger to x so to do that let's do a little bit of research online so i'm going to go to codepen dot io and i will type in hamburger menu and just kind of see what happens see what we can find here i do want to mention before we get into this is that even though you can legally copy any code you find on codepen i try to do research see what other people have done terms of solutions see what they've built but then try to build it myself so this is really just the steps that i take to build something just to do some research that's kind of cool let me try hamburger animation that's really the specific thing we're looking for here i don't want anything too flashy or too fancy um yeah that's a little too much for me and i just wanted to include this part in the video because i do feel like researching is a very important part of coding you always have to invent everything from scratch okay i actually kind of like this animation the middle bar disappears it fades out and the two the top and bottom bars form the x so let's just see what they did here they've added some transitions onto this and transform origin line two goes to opacity zero so it fades out so it looks like line one i'm assuming is the top one rotates 45 degrees so it's angled the bottom line is going to rotate negative 45 degrees and i do like how this looks so i think i'm going to just try to build this animation one thing that i think i'm going to do which is a bit different from a design is i'm going to make this hamburger menu a little bit taller and more square because we can see the x is actually square and it looks taller than the hamburger menu we'll make that change then we'll start adding in the animation so what i did here was basically added three pixels of margin bottom to the first two spans it's 26 by 14 height right now i know 26 by 26 is really what i want we'll just try to eyeball it honestly let's do five pixels this is the header underscore underscore menu this is one benefit of using the bem styling because i know everything has to be in the header sass file there we go five and we'll go back here okay that looks pretty good i think i'm going to add a class on this header menu so that when it's open that will sort of turn on the animation okay so header menu go back here so header menu then i'll add a helper class and we'll just say open so in the header let's kind of refer back to our markup as well so this here is the mobile menu so those spans in the header underscore underscore menu if header underscore in a square menu has a class of open as well then we're going to transform those spans span first child and we'll add another one or last child and then i think i need to add one for the middle child there's no middle child selector but i think we can do nth child i think it should be two because i think the number for those starts with one so when it has class of open we're going to do transform rotate 45 degrees then for the last child we'll do negative 45 degrees and then the middle child will say opacity zero and the reason i'm doing opacity instead of like display none is because you can't transition display block to display none you have to do opacity which can use a transition now let us test this in the browser it's going to reload and of course i didn't add any javascript or anything yet so we're just going to add manually the open class to the menu that doesn't look too good i think it has to do with the transform origin because right now what is happening is they're kind of just rotating themselves wherever their middle is let's add a transition then we can kind of see that a bit more clearly transition will say all 300 milliseconds ease in out all right let's try this again we can add a class of open take a look at the hamburger menu yes you can see each line is kind of rotating on wherever the center is the middle one's fine because it's just disappearing so i actually kind of need to look back at that because you can see that you want the transform origin to be on the sort of left side let's kind of see what they did here okay transform origin 20 ammonium i haven't used transform origin really before so let's google that transform origin i try to look at mozilla developer network when i can okay transform origin sets the origin for an element's transformations it's rotating the origin is the center and i'm assuming that's default so let's try top left instead of just rotating from the center it's the corner is kind of where the rotation starts so that might be what we want for the first line let's just try transform origin top maybe center left since they're just lines let's just add it for all of them transform origin center left or let's do left center i don't know which one needs to be first i'm not sure if it matters let's add this open thing again getting closer i think i'm actually going to add the javascript here so i don't have to keep manually adding it in i don't really need the hello world anymore for clicking on this i'm actually going to add an id because i like to use ids for the javascript functionality so button hamburger and then take this id then the script.js will say document query selector and selector is going to be the hash button hamburger and then let's add event listener and it's going to be a click then when you add it it'll run this function i always use a little console logs to test first open hamburger const hamburger equals the button hamburger over here actually let's just call it button hamburger then we can reuse this constant that we created when you click the hamburger i'm going to run this console.log message and then i also want to add a class and we can do this with classlist dot add and then the class name we want to add click hamburger so i'm gonna use a little if statement here so if button hamburger class list contains if it has open the open class i want to remove it otherwise i want to add the open class that should take care of the functionality we need for now let's click on this look at that add the open class and click on it again and it removes it okay so this looks good obviously this is x looks a bit weird we just need to kind of adjust the transform origin i think let's try zero pixels zero pixels just to see what happens oh look at this boy this looks weird oh that looks much better three pixels in one pixel in the header or was that oh transform origin there we go let's try again clicking on the hamburger menu nice looks like a nice little x hey look at that okay so this is the first functionality of the hamburger menu next thing we want to do is we want to load the overlay because we don't have any regular content in the website i'm just going to maybe add some stuff just so you can see the overlay opening over the regular content we'll just uncomment all of the html here okay so the next thing i'm going to do is we want to load an overlay so going back to the design the overlay it appears under the white navigation bar and then just over everything else so the headers here and the nav is included in that so i could do a couple things i could create an overlay on the same level as a header and then just make sure the header has a higher z index so it's on top of the overlay so let's try that actually so here's the header i'm just going to add a div class overlay okay so to make the overlay let's look at the design again so it starts with this gray color i'm assuming it's this sort of blue gray color which we can use and then it's a linear gradient which fades as you go down to transparent first let's get the color that we need it's probably this dark blue here the overlay let's just add a background color as a fallback then linear gradient oh wait background image linear gradient and i always forget what the but let's just try transparent we'll see i am a professional web developer but i do look up a lot of stuff okay so looks like that's the correct linear gradient thing so we do need to make this um cover everything and i want to do position absolute and then we'll just set top to zero for now right zero bottom zero left zero actually i think i might need to do a fixed because it's sort of going like this so you need to basically set the height of it to 100 vh so the viewport height i think this should accomplish the same thing we'll see oh look at that overlay oh yeah so i don't really want that i can use the shorthand those two 2d 314d hmm that's not what i want um css gradient fallback color um let's try linear gradient here we go there's a way to use these gradients and fallback colors that's what i did background color yada yada background image oh fallback image i don't know if that's actually because i did that but then it just add the background color like this um what if i did this nope well i guess that okay yes yes yes weird i don't know why this is not working well in any case maybe we'll just get rid of that background color weird i will just delete it this is kind of what we want i want to make sure the text goes sort of taller than what we can do so we'll just do this let's just do there we go okay so you can scroll down overlays fix which is pretty good obviously now it's covering up the header so we don't want that so for here we need to i think declare the position set the position rather or i think what we need to do is make the top the height of the nav bar so this is about 60. we'll just say top is 60 pixels there we go now we have our overlay we got top to 60. actually we should use rems so we'll do our little dividing game here 60 divided by 16 is 3.75 rams now um we also want to control this with a css class so before we if we add the open class to the hamburger it'll open what i could do is try to just use one css class to control all the animations so i think i'm going to add the open class to the header instead of the button hamburger itself open so what i'm going to do is i'm going to take this and then i'm going to add another section here hamburger open styles and the overlay into the header and then we'll add our open styles here and we'll put it in the header itself of course i'll set it at the top so if if the header has class open then i'm going to say um header menu we need to add these styles here so what i'm doing is i'm basically moving that all the open styles into if the header element has the open class not the header menu let's now test these adjusted styles and update our javascript so that we are adding the open class in the header element itself so create a new constant we'll just call this header and we'll use the same document query selector and we will select the class of header element so now instead of checking if the button hamburger has the open class we're going to change it to checking if the header has the open class we'll update these to remove the open class from the header and then here we'll add the open class to the header so what this is doing now is when you click the button you're going to check if the header has the open class and if it doesn't have it added and if it does have it remove it let's test this out in our site what we hope will happen is when we click this it'll add the open class oh yeah oh yeah it works it's always a good feeling when the code does what you wanted to do the first time without having to tweak it okay let's go back into our scss and i'm also going to start animating the overlay because right now on the side it's just kind of like there let's take a look at here in the header we have the overlay and it's positioned fixed so i'm going to create a css animation a keyframe animation and i'm going to attach it to a helper class actually i'm probably going to attach it to the if the header has the open class then using that css keyframe animation it's going to fade in or fade out the overlay we might have to tweak a little bit as we go but that's kind of general idea i think what i'm going to do is by default i want to make the overlay display none and then we will fade it in probably using the opacity and transition and then fade it out when we close the menu so i'm going to create a new sas file actually so in our app scss folder let's create a new file i'm going to call this animation so any keyframe animations we're going to load in this animation sas file and then of course we want to actually load it import it in the main sas file so animations there we go actually let's just put it up under the mixins just to keep things kind of organized so these are like the functional sas styles and then starting here is where we have elements in the different component styles keyframe animations you start by typing at key frames and then you write a name for what the animation is so what i want to do is i'm going to create maybe two animations for the overlay i'm just going to call them fade in and fade out so the first one's going to be fade in and with keyframes you start with a from and then you end with a 2 and then you put the initial styles in the from bracket and then the end of styles in the two bracket and you can also add percentage of progress in here so if i wanted to i could say let's say 50 do something let's indent this a little bit or any percent you want and then it'll use that to time when certain animations take place this is more if you have like complex animations what we're doing in is a pretty simple fade and so i think i might be able to get away with just using from into okay so in the header sas file the overlay has a default display of none and then in the animations i'm just going to add display none just because it's where we're starting and then i want to end up having a display block and opacity of one and we're also going to start with an opacity of zero now the tricky thing about this is you can transition opacity from zero to one it'll have a nice smooth animation from zero to one but you can't transition display none to display block that's just not how css works first it's gonna be display none then i'm going to say maybe one percent so right after it starts it's going to be display block but it's going to be opacity still of zero and then from one percent to basically 100 the end it will stay at display block but then it's going to transition from zero to one we can try this out by adding this animation in our styles and i'll just add the overlay styles up here so if the header is open then the overlay is going to have animation and it actually gives you a little help here so name duration timing function um direction things like that the name is the name that we added here so fade dash in duration let's just say 300 milliseconds that's kind of my default timing function ease in out is what i usually use and delay i don't think i need a delay iteration count you know how many times you want this to happen we just want it to happen once so i think you don't need to add anything there and then direction we want forwards and then fill mode i don't think i need that i don't think i need that so forwards this is actually important because saying forwards will ensure that once the animation is complete it will stay at whatever styles that you've put on the two otherwise it'll kind of animate and then reset back to whatever you had styled before adding any animation so we want to keep this display block opacity one after it's finished all right these are the styles we need for the overlay and let's i guess test it out okay so you can see the header and then we can see the overlay now is display none let's click on this and see what happens okay looks like camera is still working but the overlay is not animating in so we know the animation is being added to the overlay but for some reason the loading isn't actually working and we're not sure why what happens if i uncheck the display none oh so it did actually fade in look at that for some reason it's not sticking the end state is not staying on the thing display none but it does have the animation okay time to google again or i guess stuck that go css animation final state maybe okay maintaining the final say the end of css3 thing and then i like using looking at css tricks as well as mdn so stack overflow css tricks and mdn are kind of my my main three sources that i go to okay looks like this person's also opacity changing from opacity zero to one elements go back to opacity zero animation fill mode is forwards well i did use that i believe yeah forwards maybe does the order matter in terms of what properties i put in here i'm not really sure i mean it seems like it's working if i uncheck the display none so i'm not sure what is happening it just says forwards should make sure it'll hold the last keyframe state don't forget to specify 100 huh i wonder if that does anything i don't know if that's gonna work but let's check on mdn i don't know if you need the both 100 and the two this is just from two yeah from 75 percent to i don't think i need to actually say 100 i mean i guess i can't hurt let's just try i'm not even sure this is like good syntax okay let's try again nope not working so i don't think it's this i'm going to delete the 100 stuff i know this is bad but i'm going to add an important to this see if that does anything nope jeez this is kind of annoying fade in 300 milliseconds easing out forwards hmm it seems like i'm doing everything right but obviously it's not working let's just get rid of this important because that didn't help i'm going to try commenting out the display none just for now and i'm going to try just setting it to opacity 0 and see if that makes it do anything different okay so it did fade it in so somehow adding a display block is not getting added because unfortunately i do need the overlay to like be display none otherwise i'm not going to be able to click things that are under the overlay so let's put that back in oh what if i okay by default overlay display none but but what if i add display block when it's open oh my gosh this work whoa that's so weird what if cs animations don't actually affect the display property at all that could definitely be the case let's look at this css does css animation display block because it might just maybe not affect the display property at all and make them just leave block display none that's sort of what i'm looking for um as you know oh one of the properties that cannot be animated is the display property okay so that's why i mean i guess it makes sense although intuitively you would think that you could add an animation from display none to display block and it would sort of understand that you want to fade it in so i think i don't need to add any display properties in the animation since obviously nothing's happening and because i'm not doing that i think i don't even need the one percent thing because i had just done that to make it display block and opacity zero so let's try this again okay here's the overlay header doesn't have open class let's click on it oh yeah okay so that's a fade in animation um and then let's make another one that's going to do the opposite fade out fade out from opacity one two opacity zero okay i added the fade in animation when the open class is added i don't know if it'll work if i add the fade out animation or like the default let's just try it we might need to add a helper class to the actual overlay to fade it in and fade it out but let's just reload because i want to make sure nothing weird happens with this okay i just want to make sure that because i added a fade out animation by default to the overlay i didn't want it to like fade out when you load the page because that would obviously look very strange okay clicking on the hamburger menu fade it in very good and it just sort of disappears so it doesn't have the transition which means the animation is not being added so let's make this a little bit more reusable so what i'm going to do is i'll just add a little helper class fade in and then we'll take this and instead of applying it specifically to the overlay i'm going to add it to this helper class here so we can do the same thing with the fade out we'll add a little helper class i think this might be a better practice anyway because then i can fade in or fade out any element using these helper classes so just fade out i do need to leave the display block here just to flip it from display none to display block but what i think i need to do is in javascript add that fade in and fade out class to the overlay so if header if it contains open remove opens this is when you close the hamburger menu just so i don't get things mixed up close hamburger menu else add open class meaning open hamburger menu so when you open the hamburger menu we want to add the fade in class to the overlay so let's add a new constant here let's call this overlay document query selector and it's just a class of overlay so when you open the hamburger menu overlay class list add fade in let's just test the fade in functionality now go back to our site okay so you can see the fade in class was added and it's adding this animation and then we'll do the sort of the opposite we'll say overlay classless add fade out when you close it and might need to also it just to kind of reset everything okay let's try it again reload for good measure all right it's fading in now what we want to happen is we want the classes to basically swap when we close the menu it's fading in but it's not oh you know what's happening it's because this when you remove the open class from the header it immediately just like goes back to display none shoot it's kind of annoying but i think i need to remove the overlay getting the display block and instead adding it to the overlay element itself so it doesn't get affected if the header has the open class or not so overlay if it has class fade in this is just going to do the same thing of just making it disappear oh boy this is tough okay fades in still doesn't fade out okay let's think about this what's happening step by step so okay going back to zero this is the default state you click on this it will add display block and then also fade it in the animation works because going from display none to display block it's still opacity zero so it's not going to like show up um without the nice transition the animated transition but then if you remove if you remove that then it's going to just display none right away so what we want to do is make it go from display block to display none after it fades out from opacity one two opacity zero so let's just research some other possible solutions um css animation display well it's kind of what i was searching for before display none display block none see what stack overflow has for us okay yep changing display none okay cs or jquery ie javascript can't animate between display none and display block i see 0 visibility hidden interesting i just want to make sure that the stuff is still clickable when we have like a visibility hidden but it still exists get rid of this display none see rid of opacity zero so now it is default display block visibility hidden it's interesting oh it seems like it's actually still clickable oh shoot this might be the silver bullet i'm looking for yeah so it's still clickable which is awesome to see what happens is it's just opacity zero it's not clickable like i can't select text as easily yeah i can't select the text but if it's visibility hidden it does select the text and i think visibility should be able to be animated so let's go back here so fade in we're going to go from visibility hidden to this might be where we need to just switch it quickly to visibility visibility visible with opacity zero so we're kind of combining so it's sort of like display block but i guess it could be animated for whatever reason then we'll do the same thing here so from opacity 1 visibility visible we'll go to opacity 0 and then we want it to be visibility hidden but in order to make it still visibility visible but opacity zero we're going to add 99 so when the animation is almost done it's going to be at visibility visible but opacity zero and then let's see if i need to adjust any of these styles here i guess i don't need this anymore opacity or display none i think this should work famous last words let's reload for good measure okay see what happens fades in all right oh my gosh it fades out yes uh i always feel so good when you're like struggling with something and you're researching it and then finally get it to work that's an interesting little lesson i guess like display none is different from visibility hidden versus opacity zero and they all sort of do different things okay yay let's go back to the mobile view here oh i'm so happy oh this is great okay so now that we have our nice fade-in animation of the overlay next step is to actually code the menu now to start off building this off canvas menu looking at the design we can see that it's fairly simple it's just a white block and each link is in its own row so what we're going to do is first write the html markup and then i'm going to style it in our scss and then the last step will be to handle the animation and make it slide on screen or fade in or something when you open the hamburger menu so let's go into our code editor and let's figure out where we want to put the markup for the menu so obviously we want to be in the header tag since it is part of the header the menu is so i'm going to i think put the menu in a div after the nav so let's call this header underscore underscore menu maybe wait am i using this already oh yeah i'm using the menu for the hamburger i think this is more of the menu so i'm going to rename what the hamburger is so instead of underscore ownership menu let's make it underscore underscore toggle and then i'll just rename this in these styles so here we go header menus now header toggle let's just do quick find and replace here i'll just add a little toggle here to clarify what that's doing let's double check the javascript as well it doesn't look like there's a menu so we're good on that side let's just go back to our site real quick make sure everything's still working okay overlay and the hamburger icon are still working which is good so now let's move forward and create our header menu the header menu is going to be you know that white block and then in that we're going to make some links so let's look back at the design one two three four five links so we'll say a link times five again using that emit shortcut press enter and we got five links this is just a landing page so i don't need to have these actually be links so it's gonna be home about contact blog careers boom about a boot contact blog it's like a test of my short-term memory and careers let's just double check that all about contact blog careers yay i think this should be all the markup that we need let's go back into the header and then add the styles for the menu so the menu so the background is going to be background will be white did i create a variable for the white color the variables white i did it'll be background white and then in that will be links and i don't think i need an additional class for the anchor links themselves it's just enough that they're anchor links so that's going to be color and looks like it's probably the same gray as the header here so let's go back into our variables and i'm guessing it's the dark blue thing now we also need to add a bit of spacing get my handy dandy little rectangle here and then we will see first how much spacing there is on the top and bottom of the whole thing this looks like about 36. it's the same on the bottom and then each link oh i need some space too what i might do is do something like this where each link is going to be a certain height maybe 36 and then let me duplicate this square here then i'll add another padding on top and bottom of 26 so then each link is going to be you know 36 something like this we can always tweak it later on so it's gonna be padding of top and bottom is 26 and then 36 height for each link so padding i guess i need to use a calculator again 36 no no 26 for the padding divided by 16 is 1.625 rems 1.625 rams on top and bottom and then 0 on left and right i guess we just do it all around so we got the padding and then i think i also want to now there's a couple ways you could do this i could i could add top and bottom padding to the link itself i could also add the height of 36 and then make it a flexbox parent and align items center i think i'm just going to add the top and bottom padding let's say 10 pixels on top and bottom that way i don't have to write as many styles as i would if i had to turn this into a flexbox thing so padding oops padding and 10 going back to calculator 0.625 and what the heck we'll just make it all the way around now let's see what we got on our site and we got our links it has a white space but i think that's okay so i want them to not be side by side and it's happening because anchor links by default are display i think inline or inline block one of those if we change them to display block then they will take up the whole width that they want that they can there we go so display block maybe text align center oops on the caps lock again text line center looks like that works so let's add those styles into our code display block and for whatever reason i like to order my styles in this way where text line center where i start with the bigger properties like display and position flexbox things and then i move on to margin and padding and then i do text colors and then at the end i'll do like transitions or whatever it's just a way that i like to keep things a little bit organized because when you start getting more rules you don't want to be searching so i just try to group these similar styles together let's slow the site that looks pretty good now the other thing we need to look at is this white block for the menu doesn't take up the entire width but it looks like so you can see on the mobile site there's like a container width so you have some space on left and right and it looks like it's kind of sort of the same um all the way down let me refresh my memory and see if i actually added some padding to stuff okay i did added some padding and that's from header nav so it's just kind of a global padding thing okay so before i do more stuff with the menu itself i think i need to add some add this padding that i have here on the header and put it sort of for anything on the mobile page because we want we don't want things to go all the way to the edge and it looks like things are right now because yeah like later on we're gonna need that padding the padding that i was looking at was on the nav okay i think the best way to do this is to take this padding not have it nav specific but make it a helper class of course so let's add some spacing so we'll say the generic container class and then this will have the padding so that means we want to go into the nav element and then add the container padding there okay looks like it's working so it doesn't have the padding in the nav but it's in the container class so now that means we can add this container class to other other elements but actually for the container class i only want the left and right padding i don't want the top and bottom so i think what i'm going to do is take this top and bottom make it zero for the container upper class but go back to the header and put the nav selector back and say padding 1.0625 rams zero because oh boy what did i do oh i know why it's because this reset the padding so the nav has the padding just on top and bottom and it's cancelling out the left and right padding here and that's because i'm using this padding shorthand so the best way to do this is to specify padding top and padding bottom i use a little control d to duplicate the line so it's a really helpful shortcut here and then here it's going to be padding left and right of 1.5 rims there we go shorthand properties are great but sometimes you do want to split them out just because you might want different values for different elements so now the nav has padding all the way across which is good and we can start adding the container class padding to other elements when we have the menu open we want it to be on top of the overlay and then have that spacing so i think if i just add the container class to the header menu itself should automatically do that we can't see it right now but there we go so we can see there is padding there although wait a minute i don't want padding i want margin for that so i'm going to keep the padding because i do need it for like the other content down on the page but we need to change this padding to margin for just the header menu so let's get rid of this and let's take that padding left and right it's 1.5 rems we do want it to match the padding that the rest of the container elements are going to have but we're going to make it a margin instead so margin and i think we can use the shorthand so 0 and then 1.5 rims so now you can see that it does have that margin you just can't see it on the page itself because everything's white so i think we should be good to go now let's just take one more look at the design okay so there are some rounded corners let's add a border radius to the menu as well border radius let's try three pixels i think we have enough now that we can start doing the overlay thing right now the header menu is under the overlay because the overlay as i'm assuming it has a z index maybe it doesn't have z index because i didn't do it yet let's see what we got here overlay and then nav is there menu's under that i guess because this doesn't have a z index set and that is probably because there's no position property so if you don't have a position property it's going to default to position static which means that anything that has its position set or has a z-index value is going to be on top of it so let's see what happens if we add position absolute okay so now it's on top of stuff and let's try with 100 you can see it's like going off the screen so what we want to do is this margin thing isn't actually doing anything so it's positioned absolute what you could do is instead of with 100 you could say with like 90 and then margin actually i don't know if it's going to work because it's position absolute yeah it's not so since it's positioned absolute unfortunately you can't use the margin auto on left and right to center it because it's like not in relation to anything else it's absolute now i do want to make that spacing right so since we had that margin before of 1.5 rams which is not being used obviously i don't know if it's the best way but i can do a calc and say i want this to be all the way across 100 minus 1.5 rams on either side so 1.5 times 2 is 3 so 3 rims then when we center it it'll be it'll sort of be flushed to either side for the container for position absolute element you can center it by using left 50 and then trans form translate x negative 50 and what this is doing is left 50 is making it go 50 or halfway across you know its container so that's why it's right in the middle what transform does is it's going to let me turn off that left if you don't have it by default it's going to be left aligned right so if you turn on transform translate x you're moving it 50 of the object itself so not the container but the object itself so that's why combining the left so this is the middle line right here and we want to move it back to be centered we only want to move it back this much half of the width of the element itself so that's why these combined will give you a centered position absolute item so let's do this we're going to copy these things over to our code there we go so position absolute width is the calc hundred percent my three rims to have the padding and doing the left 50 transform translate x negative 50. i think i need to get rid of this margin yeah there we go don't need that anymore opening the overlay now we can see it's nicely centered and we probably need a little bit of space on the top there using our little handy dandy rectangle here let's see how much space that is about 24 so we are going to do margin top where's the calculator 24 divided by 16. 1.5 there we go okay so now looks pretty good i think i might need a little bit more rounded corners let's try increasing that border radius a little bit maybe five i compared the design it's actually not super round i think five is good okay so there we have our mobile menu the next thing we need to do is we want to animate the menu on screen when the menu's closed is going to be off canvas meaning off you know your viewport you're not going to be able to see it and then it'll somehow animate in we could either fade it in we could slide it down from the top or slide it in from the right let's do some research so go back to codepen search for off canvas menu maybe maybe mobile menu maybe animated mobile menu get a little more specific okay responsive menu with icon this seems pretty popular so i'm just kind of getting ideas for you know how they're handling this thing um where's the menu what no well not sure what happened to that bootstrap 4 animated menu you click this thing so this is interesting it sort of fades in covers everything so that's that's one way we could do it sort of similar to the how the overlay sort of fades into fades out you could fade in the menu along with the overlay so that would actually be sort of cool i think i'm going to do that i was thinking i was going to slide in from the left or right but fading in actually seems quite nice and we can hopefully utilize some of the same styles and animations that we did for the overlay into the menu so looking again the overlay was set at opacity zero position fixed is that right wait a minute it's opacity zero it's still you can't click through it so it is here oh yeah it's not clickable what did i do i think i forgot to maybe add visibility hidden then we can still select stuff underneath it yeah i just needed to add that visibility hidden and actually i since i'm reusing this for the overlay and also the menu let's make it a helper class like everything else so let's see here visibility maybe i should put it in animations so we're using visibility so what i'm gonna do is before the keyframes i'm going to add another helper class i'll say has fade and i'll say visibility hidden and that's gonna be the default state of any of these elements that we're fading in and fading fading out let's see go to header okay it doesn't have visibility here because i had forgotten it last time but now i can add the has fade class to the overlay and if this works we'll also add it to our menu itself let's reload for a good measure okay so overlay has fade visibility is hidden i can see that i can select through like the overlay is not preventing me from clicking here because it's the text cursor okay so this is working so i'm going to add that has fade class also to the menu itself so header menu has fade so now it's not visible because it is visibility hidden let's find the element there it is so has fade so now i can just kind of do the same thing that i did for the overlay in our javascript scoot this over a little bit so we can see our javascripts we are when we open the hamburger menu we are adding the fade in fade out to the overlay we also want to do that to the menu but since they both have that has faith class what i could do is instead of having to duplicate both these lines of code for both elements i could say const i'll just say fade elements elements so document query selector and then if it has that class of has fade i can hopefully target it with this actually i might need query selector oh yeah because query selector i think will just yeah it just gets the first one so i need to do query selector all that's why i'm naming the constant name with a plural instead of a singular just little little hints like that will sort of help you not make mistakes so let's handle the open stuff first fade elements and i think you can do four each for each all right i can't remember the syntax uh javascript for each i know this is very basic i admit i'm not super well versed in javascript here we go oh yeah for each function yada yada so for each function we want to do this so then in the function it's going to be element hopefully this will work okay so what we want to happen is on both the overlay and the header menu when we click this we want it to add the fade in class ooh it worked um what happened here weird it's disappearing for some strange reason what happened maybe let me try removing the has fade class from the menu just to see what happens when it's only on the overlay weird why is it disappearing like that that's very strange let me try to do it manually fade in oh even if i do it manually weird something about the has fade is like canceling this for some reason because i have the visibility hidden okay let's start from the beginning adding the class via javascript does seem to be working so that's not the problem the problem seems to be because of this has fade class where i set the visibility to hidden oh it's because i think i didn't add the end state for this visibility visible there we go i think that should work now yeah because the way i'm running the animation it's going forward so it's keeping the end state here so because this was not here it kind of defaulted back to the visibility hidden from that has fade class so now things should work let's see okay stays like that okay so let's add the has fade class back to the header menu all right oh i didn't add the other stuff we just added code for the fade in which seems to be working looks pretty nice might speed that animation up a little bit so let's do the reverse so do the same thing fade elements for each function element so the element parameter because it's looping through every element that has the has fade class you can use the element parameter to target and run functions and stuff like that so element element okay so now both the open and close functionality should work so let's give it a run hey look at that nice okay i'm gonna speed that up a bit it's just a little bit a little bit slow so let's do 200 for both fade in and fade out but i'm pretty pleased how this looks i think that's pretty good now i did want to fix that overlay because when you scroll like this like the overlay is not going all the way to the top overlay i said top 3.75 how about zero oh it's because i don't want it to be on top of the header or i don't want it to be on top of the nav i want the header to be on top of it but i think that adding it should still go all the way to the top so i think it's because this doesn't have a position set i think this is position relative i'm trying to put the nav on top of the overlay oh it doesn't have a background color it was just using it from the um the body but it needs its own background color there we go so now still scrolls and stuff let's do that so to the nav we'll add position relative and the background color relative background color white all right there we go now oh i forgot to rest remove the overlay thing top of zero to reload here we go now you know this looks pretty good another thing people do sometimes is when you open the menu you sort of lock scrolling on the body so you basically say overflow hidden so then you can't scroll so i think i might do that with yet another helper class so body what another class of this we'll just say no scroll so overflow hidden we are going to have to add this class to the body when you open the menu so when you open the menu we're going to oh i need to add it as a constant let's add it to the top here constant body equals document query selector body there we go when you open it you're going to lock the scroll by adding this class list add no scroll and then we'll do the reverse remove and we'll just put this one first since that's the way we had it in the other one let's see if this works so opening the menu all right so we can't scroll i'm trying to scroll and it's not happening because it wants to keep you on the menu when i close the menu removes no scroll class and we can again scroll down okay hey this is turning out to be pretty good so we're done with the mobile menu and the next step is going to be going back and adding the rest of the content of the site all right now before we start any coding of course we want to look back at the design and just have an idea of where we're going with this and how we want things to look on mobile and desktop so looking at the design the hero section on mobile is stacked to one column with the image on top and then the copy and button below that then on desktop we have two columns instead of one column with the text on the left and then the image on the right you might also notice that the images on the hero are slightly different between mobile and desktop so let's look at our files and see how that is going to be set up i have open here my project folder with all the website files and i already had saved all the images from front mentor in this images subfolder so my guess is the background intro desktop is going to be this one yep and then we got one from mobile this is just that designed background we need to look for the images of the phones probably this image mockups here what this is is a png with a transparent background and we can overlay that same image of the phones over the mobile background from mobile and then the desktop background going back to the design one more time we can probably use the same markup for both mobile and desktop and then we'll use styles to differentiate the styles between mobile and desktop as well so let's get started going into our code editor vs code and we're going to add markup for our hero section so i'm going to create a section tag and i'm going to call it class of hero underscore underscore just hero actually then in the hero section tag we'll add a div of class i'll start with the image so hero underscore underscore image and under that we'll do div class hero underscore underscore we'll just say text up in the hero image is going to be the image with the phones and the background and then the hero text is going to be under that and i'm doing it this way because on mobile we have the image first and then the copy so then we can just change the style so that the image is going to be on the right for desktop so now let's go into our files from front of mentor and we want to copy over the text that they gave us so we don't have to like type it out manually when you download the files from front of mentor they give you an index.html file with all the text already there so i'm just going to copy and paste that over so hero title is next generation digital banking now let me figure out what html tag we want to use so usually on a website the h1 tag is going to be the name of the page but i've also seen it where for a home page you use an h1 tag for the hero title and then why choose easy bank would be h2 latest articles would be h2 and so on and then we would do h3 tags for these little subtitles here for each section so yeah i think i'm going to do next generation digital banking is going to be the h1 tag we'll do that h1 and it doesn't need a class since there's just gonna be one of these then we'll copy over this text sorry this goes in the text hero section there we go and then i'm also going to add the button and let's kind of look back and see what i had done before or like this request invite button up in the header you just look for request invite there we go so i did an anchor tag with this button class and then a header cta class so let's do the same thing here we'll just use an anchor tag and let's say it's an anchor link we'll just do a round and we'll give it a class of hero cta but we also need a class of buttons so it takes all those button styles that we had built in the previous videos request invite is the text in that button so let's do that and i think i'm forgetting the yeah there's some subtitle stuff here this is an h1 i think because this is longer it's not really a subtitle i'm just going to put it in a paragraph tag and i don't think i need to put a class on that because we can just use the hero text paragraph tag selector so let's just do that copy this text over here we go oh wait i had already copied this so i actually don't need this file open anymore okay so i'll just delete this since we don't need it anymore okay so now if we look at our site you can see that we have the button styles have already gotten ported over which is great and then the next thing we want to do is we want to figure out how we want to code the hero image what i think i want to do is i'm going to create a div and we also need to keep in mind that on desktop you can see this phone image on the right kind of overhangs the section because next section has this really light gray background my guess is that this phone image is going to need to be absolutely positioned you can sort of guess something needs to be absolutely positioned if it's like on top of something else so because the phone image is on top of the next section over sort of overhanging it a little bit we can guess that this needs to be absolutely positioned there's a couple ways you could do this you could create a separate div just for the images which you know obviously i have the hero image div you could also use maybe pseudo elements and then have that absolutely positioned so what i think i'm going to do is in the hero image itself is where i'm going to put the background image that svg sort of designed background and then maybe i'll store the phone images in a pseudo class or pseudo-element like before pseudoelement so let's try that so in that case we actually don't need to add any more markup to the hero image because everything's going to be added in the styles let's move on to adding our styles so in our app folder i just need to make sure that i'm writing the styles in the correct place and since this hero section is a new section and it kind of is by itself let's create a new sas file so create new file we'll call this hero.scss and of course we need to add the file importing importing it into our main sas file so we can just close that for now and then in the hero section just move it over to the right side so we can sort of see our markup and our styles at the same time we'll add a selector of hero then i'm just going to add the ampersand underscore underscore image ampersand underscore underscore text so let's start with the mobile styles first so in the hero image selector i want to say background image url and we're going to load that so in the images folder you want to load the background intro mobile now we also want to add some other background style rules so background size we're going to say cover i do that so that you kind of keep the correct aspect ratio of the image and it doesn't you know stretch it or whatever but also it'll fill the space then background repeat no repeat because we don't want it to repeat and then just for good measure i usually do background position we'll just do center center so it is centered in the div now let's see what that looks like in our browser okay it doesn't look like anything and the reason for that is probably because there is no actual content in the hero image tag so you can see that there are the styles there the background image is showing up but because there's no height it is not going to show up at all so we need to do is figure out how tall we want this div to be and we'll sort of add that in the styles as well i'm going to grab my little handy dandy rectangle here maybe we'll zoom in a little bit on the mobile design i'm just gonna figure out how tall of roughly do i want this div to be so it's about 282 so maybe we'll say 280 pixels so let's say for mobile min height is 280 pixels and then i'm going to convert that to rems by dividing 280 pixels by 16. 16 is the base font size so you get 17.5 rams now let's take another look at our website oh there we go so it did now show up now this is a little bit wider than mobile of course so maybe i'll just turn on the mobile emulator in my browser so this looks closer to what we want in the design zoom out a little bit so you can see here we got the background going so now we just need to add in the image of those phones and i decided to do that in a before pseudo element with a background image it doesn't work we can try something else like using an actual image tag you know there's almost always more than one way of building anything so you don't need to worry too much about finding the one perfect way as long as it is as simple as possible and it is understandable for yourself in the future or another dev to look at the code and understand how it works then i think that you can choose any approach that makes the most sense to you the image is image mockups we'll kind of do the same thing where we're going to do the background size cover and these other background properties the other thing we want to do is we want to do position absolute since we're going to do that later on and because this is position absolute we have to make sure that the parent of the before pseudo element which is the hero image selector is position relative otherwise this image is going to basically basically fly up out of where you want it to be so just make sure that when you position absolute you make the parent a position relative to keep it sort of within the balance of the parent so let's just see what this looks like now look like anything this is probably again because oh i forgot so when you have a before or an after pseudo element you need to give it a content property otherwise it will just not even exist on the page this is just a characteristic of using these pseudo elements okay so now we can see in our inspector before is there so i think what i want to do is maybe add the height and i'm going to set height to 100 so that it will match the height of the parent so let's save that and what's going on oh there's no width here so when something's not showing up or doing what you want to do it's really good idea to always check in your code inspector i'm just trying to figure out and troubleshoot what is causing the issue so right now the issue we're looking at is why is the phone image not showing up look at this before element i can see that it has zero width but it does have 280 height because i set the height property so we're also going to set the width to 100 percent and we'll see how that looks okay so now we got our phones they are not quite the right size i think looking at this we want the bottom of that phone to perfectly align with the bottom of the background and that is not what's happening here this is the bottom of the background and just for good measure and debugging i often like to do this so i'll do a temporary border one pixel solid let's do magenta adding a border will sort of tweak the size of the div but for most cases i think it's still okay now we see we have a border of the hero image and we have the background going down there but we want the phones to end on the bottom we don't want it to be centered like it is right now so what we want to do is adjust the background position so it aligns from the bottom for center center this is the center horizontally is the first center second center is the vertical center instead of center for vertical we're going to say we want to position itself at the bottom so now we can see that the image kind of ends right at the bottom of that hero image div now looking back at the design i think the phone images are a little bit yeah it looks like they're a little bit smaller than what we have in our website there's just a little bit more space on left and right so let's go and sort of adjust that a little bit so the phone images are in the pseudo element the before element so how do we make this narrower what we could do there's a couple ways right now the width is 100 so if you decrease that um it would sort of decrease but then you have a case where it's not centered so then you'd have to add like a margin auto weight display block maybe oh because it's absolutely oh that would be too annoying you have to do left 50 transform translate x negative 50 to center it that's a little bit too much so i'm just going to delete those the better way i think is to keep the width at 100 so it's still 100 of the width of the parent but in background size instead of cover cover will basically ensure that the image is going to cover the entire div so even if it means cutting off from the sides it'll make sure that it covers everything that's usually what we want for things like this but because i want to make it a little bit smaller so we can also use percentages in background size so if you say 100 it's going to looks like pretty close to cover yes just basically 100 of the div so if we reduce that then maybe down to 94 it's reducing the background size but it is still centered because the width is at 100 and then we set background position to center for the horizontal so we'll just adjust that background size so maybe 93 for that before element so background size 93 reload for good measure that looks wait now the bottom isn't matching oh i forgot to save the center bottom let's do that there we go now it is pretty much close to the bottom not perfectly but i think that's okay we'll just sort of live with the imperfection and then it is kind of in from the sides a little bit so that looks pretty good now the next thing we're going to look at is the copy for the hero section so let's look at the design and obviously it looks a little bit different than what we got here on our website so it looks like we need to make sure the font is the right font family also the color needs to be a bit different let's just start with this title next generation digital banking i believe the font family itself should be the same as some of the title fonts that we have let's check out our style guide just to make sure what we're doing okay so font family we just are using public sands for everything weight 300 and 400 300 is light 400 is regular the font still looks still slightly off let's just check this out this pull extends so maybe we just need to make the font size bigger get this let's get a rectangle here and it's going to try to guesstimate what size the font is 30 pixels tall looks like font size 30 pixels the font weight seems a lot different in the design you know what i mean like it looks a lot more thin seems like that's the font that we're using and 30 pixels looks different as well okay so maybe 30 pixels is right but maybe the font weight is not correct that's 300 what does 400 look like doesn't look any different for some reason the h1 oh i bet it's because the h1 tag it's not going to show this here but usually the browser default will set all font weights to bold so font weight here we go 300 now that looks a bit closer to the weight in the design going back to our hero bass file so in the hero text section we'll add another selector for h1 and we'll say font weight is 300 and font family has already been chosen in the global fast file everything is public stands i'm just going to close this animation this thing too all you do here is the want weight of 300 and then the color is this sort of dark blue so in our variables last file it's this dark blue variable and we'll say color dark blue and usually what i do for headline tags is i'm going to add a line of about one i'll just put it in the h1 tag line height one usually for headline tags title tags you want the line height to be around one maybe slightly bigger and then when you have body copy like paragraphs where you have like longer longer amounts of text then you want the line to be a bit greater than that like 1.3 or 1.5 depending on the design font size i think i said was 30. let's get the calculator out 30 divided by 16 is 1.875 1.875 grams much closer to what we want here i think maybe 30 might not be big enough actually that's 37 size 37 pixels going back here okay that looks much closer in size i think i need to increase the line height a little bit maybe 1.1 maybe 1.2 a little bit less let's do 1.15 just kind of meet in the middle there all right so let's copy these styles over so i think i said font size was 37 pixels i need to convert that 37 divided by 16 is 2.31 just round a little bit here and then line height was i think 1.15 all right and we need to center the text here it seems like most of the content on mobile is centered so i think maybe for now i'll just set text align center for the entire hero section hero text we can do there text align center and then we'll change it to left align for the desktop media query there we go so going back to the hero let's add the selector for the paragraph in the text hero text area and we'll say line height and i'm not sure if this is right yet but maybe 1.5 to start off and it's going to be inheriting the font size of 14 pixels facing looks okay and we also need to figure out some of the spacing under the headline to the paragraph so this is something like 24 and then under the paragraph above the button so maybe something like 37 or 36 so 24 space under the headline 36 space under the paragraph itself so h1 by default will inherit the styles in the browser which we don't necessarily want i want to basically take out this top margin that just gets added to the headline tags i usually try to add space between elements by adding margin to the bottom of things not to the top here headline tags so we'll say h1 h2 h3 margin top of zero there we go now i'm gonna go back here now it's all the way up to the top a lot of spacing in the hero text area itself but for the margin bottom right now it's about 30 and i think it was 24 so under the hero margin bottom 24 divided by 16 1.5 rams and then in the paragraph we're adding a margin bottom of i think was 36 pixels divided by 16 2.25 rims now looks a bit closer to our design eh so there's space between the paragraph and the button now which is pretty good i need to figure out the space above the headline and to the end of the thing so it actually looks pretty similar to 36 so 36 on the top on the bottom it's all the way up to 87. so i think what i want to do is ideally at least in my mind you would probably want the same amount of space at the top and bottom of each section so this space here should be the same amount of space as up to here 85 seems like a little bit but i think we'll do maybe 60 pixels as kind of like the wrapper that way i can put it in a helper class which means i can then just add the wrapper class to each section that i want to add that space and so we kind of make our styles a little bit more consistent and a little bit simpler all right so i said container padding left and padding right as you can see here container has has padding of 24 on the left and the right so i had padding top and bottom just for the nav and then i had added padding left and right for the container and that is equal to 24. let's do that first the left and the right spacing by adding that container class and then we'll move on to adding the top and bottom spacing so hero text i think maybe let's just see if we can do that there container and then go back to our website and now you can see here the hero text has this space and i didn't want to do it on the hero image because that one kind of goes to the full left and right let's see if i add a container then it kind of messes up the alignment that i had going okay so now i've got the hero text it has a padding on left and right which is good kind of matches what we have here with the image of the phone so now i'm going to think of a way of creating that top and bottom spacing with a helper class you know do i want to add it to the container or do i want to add it somewhere else because not everything wants to have that top and bottom padding i'd only use the container thing in the nav so i wonder if in the container i could add padding top and bottom of i think i said 60. let's think about this if i add it to the container that would be good for this because then it has a space on top and bottom and left and right but then it would also take effect in a nav and i don't want that let's just add it to the container and see where you know kind of breaks the design so 2.25 rims i'll do the same thing for bottom you might do the same thing as me but when i'm going around for adding padding or margin i always start from the top actually right should be next top right bottom and left is last let's just check on that now and see how this looks so going to our rules you can see header nav it has a padding top and bottom which i had set previously which is good if we scroll down to the container you can see that did have the padding top and padding bottom of 2.25 rem but that got overridden by the more specific rule of header nav this is because using the class of header within the child nav is more specific than the just the general class of container just curious what if i do header container okay so in that case that would be more specific probably because the first rule is using the class of header and then the element of nav whereas the class of header and class container class is more specific than the element itself that's why this would override the class header nav selector so it's almost like rock paper scissors class beats element selector but then id selector will be class selector it's just something that is good to know when you're working with css a lot looks like we have our container stuff all set go back to our mobile view and just kind of double check on that things look a little better right we're getting more spacing added we spacing on top and bottom and we have this see the buttons kind of going into the bottom padding i believe that's because i probably need to set display inline block because i think by default if i don't say anything it's just going to be an anchor tag is going to be display inline so making it display block will make it have to follow the the rules that i've set for padding and stuff so now you can see having set display in line block the button is now inside the content and not going into the padding wait and that's in the header i might need to move the button rolls out of the header sas file just because there's places outside of the header that are using the buttons let's do display inline block at the top so now this actually looks pretty good we got our hero section from mobile looks like everything is good in terms of spacing got our button going click the hover state's not working on that you see i have that hover state on the top let's see where those rules are coming from make sure that they get applied to all buttons so in the inspector i'm going to select that top header button click on the hover and if you check this hover box it'll sort of force the hover state so you can see which style rules are getting applied so it looks like yeah the hover is part of the header cta rules and i want that to be applied to any button so let's go into our header sas file that was under the cta so font size font small so i wonder if i need to make the font size and color in the button itself so i think what i'm going to do is i'm going to let me move this globals over here what i want to do is i'm going to take the font size from the cta the header ct button and put it in the global button rules let's just do it down here font size and then the color is white it's already set there so i don't really need that this can also also just be copied over so i'm just going to delete this header cta now all the styles that we need are going to apply to all buttons since we're saving it in the global sas file let's try this again now we can see the hero button has that nice little hover state you don't always have to write your styles perfectly the first time because a lot of things you just kind of figure out as you build the website there's always going to be going back and sort of correcting things and tweaking things depending on issues that come up as you're building out this website there's nothing at all wrong with going back and changing your work a little bit now that we have our mobile styles for the hero let's add the desktop styles going back to our design you can see that the hero was one column on mobile with the image first then the text on desktop it is two columns with the text on the left and the image on the right so we're going to do is add some flexbox to this what i want to do is in the hero selector add display flex to turn on flexbox but i only want this rule to take effect for desktop widths and up what i've done before was i created a mixins sas file and we have our breakpoint up mixin that i can then use to add the media query so we'll say include breakpoint dash up and in the parameters the size we want to hit we're going to focus on the large and up then i can move this rule into the breakpoint media query so just by adding this one rule let's look at our website and see how that looks for desktop okay so you can probably guess what's happening here the hero image doesn't have any height but we can see that flexbox is turned on there we go flex 1 and we'll add flex 1 to the hero text as well this is just to start off to kind of make both of them the same amount of space but you can see that let's add that flex of one in the desktop width to both the image and the text selectors so we'll say flex of one and we'll change this later on but we just kind of want to get things started now we can see that there is height because adding the flux of one that makes the child flex element be the same height across both of the flex child elements you notice in the design the image is on the right for the desktop but because in the market we added hero image first that's why it's on the left so that's another thing you can do in flexbox is you can adjust the order so we want the image to be second on desktop i think it's flex order it's just order and we want to be two so we want to be second and we want text to be first so order of one there we go second thing we need to do is look at the heights because this looks like it's not quite tall enough compared to the design so on desktop the hero image is about and we're not going to take into consideration this overhang here because the section itself ends just about down here the pixels tall there's a couple ways we can do that we can of course adjust the hero section itself to be 655 pixels tall or we can make the image 655 pixels tall and then we know that the text will sort of take the same height so hero image what happens if we say height of 655 pixels so now we can see that it is taking up more space which is what we want so let's just say minimum height for desktop and that's 655 divided by 16 to get 40 let's just say 41 rems it doesn't need to be perfectly exact but going back here so now it's taller we do want to center the text we want to center the content in the flexbox in the flexbox parent in the hero flexbox parent you can say align items enter this will automatically vertically align everything so now of course what we need to do is we need to make this hero image the height of the parent hero do that by in the desktop breakpoint say height is 100 so we'll take the height of the parent hmm let's see let's see let's see i bet it's because in flexbox it's kind of intelligent so it'll size things based on the content and because the image has no content it's really looking to the hero text element for the height so i think actually i do need to move the height from the hero parent selector to the hero image let's try this just say height okay so there we go this is a little more like what we're hoping it'll look like i'm gonna get rid of that magenta outline i don't really need that anymore now we're getting there right texas centered on the left we've got our image on the right the height is pretty much what we want now we need to make sure the image is correct because you remember we had two different ones here we go right now it's just loading the mobile one and get another media query and then for the image i'll say background intro probably desktop so now it's loading the desktop so let's check on the design again looks like the phone sort of starts here kind of toward the end of that blue little wavy section so we need to move that background over a little bit so we can see the end we'll adjust the background position because right now it's just centered i'm just testing it in the browser it's a little bit quicker that way horizontally i really want it to start from the left side of that background image so we'll say left center we'll center it vertically so this is actually a little bit the phone's a bit down from the top of that gray blue section so what happens if we do bottom of it left top oh actually i think we can leave it left center but what we want to do is adjust the mock-up so that they're down so we can do something like top 10 or something then at least it's going to be a little bit closer to being under there and we also looks like we want to move it over a little bit but let's just focus on this background stuff right now and copy over the style so that i don't forget what i did the background position left center for desktop for hero image image desktop new background image and now it's also going to have a new background position that looks pretty good we'll adjust how the phones are positioned over the background image after we make it the right width because right now this is 50 and then the image is 50 but in reality there's more s width given to the images so now we're going to do is going to go back into our hero section sas file and we're going to adjust the flex child properties the first one was image and the image one was a wider one so we'll set that flex of three then for the text it's going to be two so what these numbers mean is the available space in the parent gets allotted to each child it's kind of like a ratio image is going to get three parts and then the text is going to get two parts okay so it looks a little bit closer to the design right so there's more more space given for the image and then a little bit less space for the for the text now i think i also need to make sure that we're using that container to have a max width set because right now everything is just going across so this is 1240. oh yeah it's going all the way across so what i think i need to do is for the container helper class which i already added which is good i'm going to have to add a max width let me just show you what that will look like max width and i think it was 11 13 pixels and then we're going to have a margin of auto it'll center it so then anything with the container helper class is going to have a max width set and then it'll be centered if the width is larger than that going back to our code editor and i believe it's in our globals so max width is going to be i said 11 13 just according to the design maybe we'll round it down 11 10 and turn into around 69.375 grams and then margin of zero on top and bottom and then auto left and right and that will center the container now we go back to here so we can see the header now is centered nicely it's limited to that 11 110 and then we're going to add that container class to the hero as well this is going to be tricky because i use the container class in the hero text to add that padding for the mobile styles but i think if i just add the container class to the hero itself hopefully the padding on the left and right should stay from mobile let's just go back to mobile styles and make sure that we have the spacing that we wanted here there's two things we want to do we want to control the max width to have that container but then we also want to add padding around the sections what we could do is i could split it out into two different helper classes like a container class and then wrapper or some other generic word like that or i could add some modifiers to the container class where i could add padding and then add the that special modifier clasp sounds pretty good let's try that if you just have a container the most important thing i want to do is to have that max width in the auto margin keeping in mind that there are cases that i want to only add padding to one side or maybe i wanted to add to all sides except for the top what if i did something like adding modifier where it's container padding top and then if you have that it gets the padding top and i can do the same thing there we go so now we have the padding but there might be cases where i want the padding all the way around might be cases where i just want it maybe top and bottom or just left and right so i think i'll create maybe two more helper class modifiers where it's padding just top and bottom let's just say padding y that's kind of the vertical axis and then for that we'll add adding top and padding bottom and then if i want padding only on the left and right we'll save padding x for horizontal then we'll add padding adding right and adding left it looks like i'm taking up a lot of space by creating these extra classes but it'll save me time when i'm creating the markup later on because now let me show you what i can do for the the header i want padding all the way around so i can say maybe i should add one more helper class where it's p all and then this one is going to have everything all the options so now i know it says pal we can now add container p-a-l-l to the nav and then for the hero we can say container p x let's see the hero container actually didn't want any padding on this at all now it's like this change that okay hero container now this is good there's no padding here i need to add padding to the hero text so what i could do there is a container maybe padding all because it's in the text element here we go now we got container padding all this is good too because i'm not adding the max width rule to this element it won't hurt anything it won't break the side but it's just not really needed i'm pretty happy with this but then let's check out on desktop we got hero container which is fine and then the header if you look in the nav it has a container max width set and then it has the padding all the way around which is perfect all right i had to adjust the lighting there because as i was recording the last video someone was kind of going down so things were just getting darker and darker but now we should be all set so back in our hero section um i think the next thing we want to do is let's fix the hero text styles because i think in the design it is left aligned as opposed to being centered like it is here let's go into our hero styles and here we go so text text line center is what we set as a default mobile style styles that's kind of an example of mobile first styles where your mobile styles are the default styles without any media queries and then you add on your desktop and so on styles using a media query you how that looks and there we go but i wonder if the text styles are bigger on desktop perhaps oh yeah definitely bigger i think before it was maybe 37 is that right 37 yeah let's estimate what the desktop h1 font size is going to be 40 52 let's try 52 font medium well i guess we'll just add font maybe x large just in case we need something between 18 and 52. so 52 divided by 16 is 3.25 so now for the the hero text section h1 we want to add include breakpoint up large and font size is going to be that font x large so there we go and that looks more close to the design where the line breaks at next generation and then digital banking's on the next line let's just while we're at it double check our body copy here so it looks like it's a little bigger on desktop as well let's see how big this is going to be for desktop i think it's about maybe 20 maybe 19. let's just say 20. yes font oh boy medium maybe large for 20 pixels 20 divided by 16 is 1.25 that was for the body that's in the global sas file here we go so font size font small add or include break point up orange font size font large looks pretty good looks smaller on the design let's take that down to maybe you know let's just try 18 since i already have that variable saved that looks pretty close to the design i'm happy with that now i need to tackle the more tricky part which is this hero image section the problem with this is that we want the hero content to have that container right so the max width is set but for the hero image we actually want this to go outside of the container oh also the image goes all the way up to the top of the um header and actually oh my gosh it looks like because the headers white but then this hero background i thought it was white but it actually looks like a very very very light gray that's pretty subtle okay so they did have that already set which is great so i think i can just add it to the hero selector i'm assuming we want that for mobile as well background color very light gray okay so now it's very light gray but now you can see here we have this problem where the container is limiting the width so the gray's not going all the way out i think i still will have to add the container class to a child of the hero container or just of the hero rather so it will be something like this class equals container and that container will move the hero image and the hero text divs kind of like this now going back into our browser oops i need to add the flexbox stuff like flex oh this is a problem so the flex styles you want to put that in um hero container okay so now it looks better let's just double check that looks okay on mobile that looks okay okay so we'll go back to desktop now we got our very light gray background color and we need to figure out how to make this image going all the way to the right side so i wonder if it would make sense to make this position absolute on desktop because if it's positioned absolutely i can kind of position it and make it like right zero or whatever oh gosh got rid of the height right 100 will that fix it no oh yeah width is not working that's not right also i think i need to add the container to have shin relative there we go this is kind of a mess let me think about this again okay so this looks okay it's just the image that's not really working for us oh what if i do something like i know i'm already storing the mock-ups in the before element but what if for desktop i put the background background image svg into the after pseudo element so then i can absolutely position that but then the flex styles don't get messed up let's try that what have i got to lose right so we have this before class here add the after it's actually going to look quite similar to the before so i might just copy this and then just change the actual image so i think since i'm going to move the background image here i'm just going to comment it out here you know to kind of cover my cover my butt in case i need to go back to this so let's try this again okay um we got two background images as now slowing the mobile so what i actually need to do is background image none okay so now we just have the desktop thing now the znx stuff is a little messed up the reason the background image svg is on top of the mockups is because the background image is in the after pseudo element which is coming after the before pseudo element and how css works is if you don't sort of designate explicitly what the znx is it's going to put elements later on on top of elements before i guess i could fix this relatively easily by just switching the before and after so this will become four before it will come after and then the order doesn't really matter but just for the sake of being more clear i try to put the before pseudo element before the after suitable element now let's see that okay so now the phones are on top which is good so let's think about this the background is not big enough you can see it's much bigger in the design where it's like kind of off the page i guess part of the problem is the width has to be bigger than the width of the parent but what if we make the width bigger oh hey this is looking better because it looks like the phones are about the right size let's try one let's just go for 150 width of 150 not too bad just seems a lot taller the green parts going straight off the screen we can try to fix that a little bit later okay so we got this to be 150 width now the problem with this is that looks like it's actually starting under the careers fit between blog and career that's where the left edge of this image is and it's also going off so what if i do left of 20 and this is going off the screen which seems to be part of the design so just keep moving it off screen the phones are a little bit down so let's say top five percent that's not what i want so i think i need to do transform translate why oh shoot also background size is 93 let's try contain so that looks better because all the phones are visible was it what 93 percent first let's try to maybe match the size of the design so it's going up all the way it's getting cut off just above that 74 000 thing so 97 perhaps so it's actually looking pretty okay let's move it a little bit to the left that looks pretty good it looks like this needs to be down a little bit more so let's translate it down i'm not actually sure if translate is gonna be the way to go for this because it's getting cut off so the problem is i want where this gets cut off to like stick to the top i think i'm going to uncheck the transform because this looks pretty close to the design right you can see this is going right up to that top nav bar so i think i will maybe increase the size a little bit and then i think i just need to make the after pseudo element a little bit smaller let's just worry about the background image first i kind of just want to start over so let's reload to refresh all the styles okay so let's start with just the intro desktop svg the problem with this was it's not big enough right so what i did was i increased the width to 150 which looks good so let's put that in the code before we'll add a little break point here include breakpoint large width of 150 percent one style saved now the problem is is that it's not going down all the way to like the blue in the design is going all the way down the bottom and this is not weird let me actually add some outlines to both of these just so you can see a little bit what i'm doing okay so now i can see a little bit better hopefully okay why did that not thick or an error oh there's an error there is an error oh no mix and name breakpoint okay i was typing some wrong stuff in there breakpoint up now this magenta border should show up there we go you know what i'm just going to hide this right now i can just focus on the background thing okay so this needs to move down all the way down to the bottom of that hero let's just do 15. um okay if on big screens it's gonna see more i don't want it to like get cut off something like this or at least you can see that bottom edge okay see this is hard guys don't let anyone tell you it's easy let's just add a little more space the green is actually getting cut off whereas in the website it's you know not going all the way up i think i'm just not making it large enough now i need to move it a little bit okay so zero percent 83 that actually looks pretty good it's still a little bit taller so it actually is getting quite close which is great that's this looks pretty close i'm going to copy this and we'll add it to these styles no repeat is fine and then background position and background size change see this is looking closer and closer now i need to just kind of position the phones a lot of times when we're coding and building stuff we try to just do everything at once like i was trying to do like the background svg and also the phone mock-up at the same time but it's quicker in the long run for me to just focus on one thing at a time so what i did was i focused just on that background svg got that and then now i can work on positioning the phones i think you'll be more successful doing it that way because you aren't splitting your attention between two different things or three different things trying to figure them all out at once much easier when you just separate things out and just attack one problem at a time so now these phones actually look pretty close now of course it's not going all the way down under here into the next section so we do need to figure that out let's just get this to a hundred percent all right let's do contain oh let me think about this the reason that this keeps getting cut off i was doing background size 100 and then i was trying to do like top five percent or something to move it down but i don't want this get cut off right i think it's because the height is always going to be the same so what if i make the height taller than the parent which is the case right because you're looking at the design the phone starts at the top and it extends beyond so it's like 100 plus a little more so let's try height of 110 maybe maybe a little bit more than that so you can see now things are moving down which is good i'm really just overhanging a little bit it's down a little bit too much bring that top thing back maybe negative two but it's not going up here so i wonder if i need to increase the background size yeah so background size let's just kind of guess here 120 maybe so the width also needs to be greater than the hero image div because remember the hero image div is limited by the flexbox properties that's why it's only 637 whereas this one needs to be wider and taller than the parent so let's increase this as well because we're increasing the width the size of the background image is increasing too so we can take that down by decreasing the background size just a little bit of like kind of finagle things around so let's start trying to align this leftmost phone near that puzzle piece thing so we'll add a left property start with zero percent and we'll kind of increase it and then we can see it going up maybe there yeah maybe a little bit less it's the 22 perhaps i think we need to move it up a little bit because it looks like the corner of this phone is just getting into that green area so we'll move it up maybe that much it's pretty close i think and then let's see how if this is kind of the right look that we got here so yeah overhang just a little bit now of course we don't want this to go all up into the header i think actually we don't want the we want the top to always be zero i think this looks pretty good we do want to move this up a little bit right but i think we can maybe control that not with the element itself but with the background position because i said center bottom if i do center is zero percent and then i use that so then what this is doing is it's adjusting the background image within that div so if it if the background image goes over it's not going to show that overlap because it's just the background image it's not the div itself it can be kind of tricky the more time you spend doing this kind of stuff the more you'll sort of understand how things work and how different properties fit together and like what they do this looks pretty close background size should be a little bit more let's try 95 and then we'll kind of move it down as we need to i think i can actually erase this top property because it's just zero let's take this these properties oh yeah and the width and height properties too make sure we copied that over and then put them into our sas file oh wait this is for just desktop i don't want to delete the mobile styles there we go okay so we don't need this image mockups because it's the same as the mobile styles everything else is changing um we don't even know repeat let's um remove this border stuff because we don't don't want to be distracted by that now this is looking pretty close to the design i think if we increase the width you can see you know it is going to nicely stay flush that right edge we have the mobile design that looks i think that looks pretty close to what we had then for tablet it's looking a little weird right so i think one fix for that could be just to increase the size of the hero for for tablet hero image so min height is 17.5 which is 280 pixels if you want to know how many pixels something is if it's using another unit like rams or ems you can check in the computed that'll give you the sort of resulting pixel size so this one was min height of 280. obviously that's not quite tall enough for tablet so let's say min min height of maybe 400 pixels you don't want it to be too tall because you do want the whole hero to i think fit in the viewport when you're loading it in a tablet but maybe just a little bit shorter your image i have the background here and then the mock-ups ooh this was not an immediate query loading the desktop image that's not good the motherboard looks slightly strange here okay let's fix that first so in the before sudo element i need to move this into a media query looks like i just put it in the default styles let's think about this again but i changed things where i load the mockups in the after pseudo element and then the background images in the before suitable element for desktop but the background image for mobile is in the hero image element itself so i could actually move all these properties into desktop i think so i don't need the width i do need the height maybe i'll just comment things out just in case i need to bring it back okay so this still looks good on desktop and then on mobile it's only loading the mobile background because before we're loading like both let's go back to this section and we wanted to change that min height right let's try 400 pixels and then i wanted to try background position maybe center top for the mock-ups it's in the after so background position center up i feel like center bottom was better we'll leave it center bottom and then we're going to make the min height 400 pixels and we will convert that to rems for medium break point up medium 400 pixels divided by 16 is 25 rems for large is just height of 41. so here's the thing on mobile here it is on tablet and here it is on desktop and it takes a second to load that thing like that i don't know if i'm happy with this it's too big i think so maybe for medium we can do something like background size is something like this i see two percent so hero image after background size is 52 for medium medium background size 52 so we can remove this commented out thing oh what did i do um i might have put it in the wrong property oh the before suit element after suit element is what i need for the mock-ups move that down there this should work now okay that looks closer to what we had that is okay let's just tweak this tablet background image again so i think i want to make it background position bottom so let's try center bottom or center then at least it's sort of like closer to like what the mobile thing was center 60. so background position center 64. hero image on medium there we go okay i think this looks a little better right it is hard because i'd say 99 of the time if you're in any kind of design you know work situation or whatever the designer is usually only going to give you a mobile design and then desktop design which you can see it was the case here with front-end mentor so for tablet a lot of times it's kind of on you to figure out okay what combination of like mobile styles and desktop styles am i gonna do for mobile um for tablet i mean this is tablet and this is phone and then this is all right now before we start any actual coding we're of course going to look at the design and figure out how we're going to build this so we're going to be building the feature section which is this why choose easy bank section under the hero on desktop you can see that they're in four columns and then they stack on mobile to a single column for tablet i'm guessing i might do a two column layout now for this section i think what i'm going to do is build this using flexbox now there's a lot of cases in layouts where you can use either flexbox or css grid i do want to show you both so i think what i'm going to do is build this top section using flexbox and then for the next section under it the articles i'm going to use css grid for that in my opinion i think you could use either flexbox or grid for both of these sections and it would be completely fine let's get started writing the actual code so if we go into our code editor we'll go to our index.html file and let me just minimize the hero section since i don't need that anymore and we'll create a new section tag and we're going to name it feature okay or maybe i'll say features since there's multiple features just to make it a little bit more clear now the first thing we're going to add is the text above the four features it says why choose easy bank with some subtitle and that one is full width on desktop so it's kind of the same for desktop and mobile so let's add that here we'll give this an h2 tag and then we'll copy over the text why choose easy bank and under that i'm going to create a paragraph tag and i will copy the paragraph text over there okay so then under the intro text is going to be the feature grid since we're using flexbox the first thing we need to do is we need to create the parent element the parent flex element so i'll say div and i'll give it a class of feature feature underscore underscore grid and then in that parent flex element i'll create some more divs so div class feature maybe item so each feature is going to have this div feature item let's go back to the design really quick each feature has a icon image then it has a title and then it has sort of a description so i need to add markup for all those things the first thing i'll say is div class feature actually i don't think i need to type in div i just say dot feature underscore underscore let's say icon then we'll say feature underscore underscore title and then feature description there we go so now we can add the different icons that we need for the icons and then the text as well so for the icon let's see what we got in our images folder so these are the image files from front end mentor that we are adding into our project so i'm guessing it's one of these icon api etc in our code we can say image source and then add the source as the svg file let's copy in our text as well so what i'm doing here is i'm just building the first feature block just by itself i'm not copying this three times that i have all four the reason for that is i don't want to duplicate it until i know exactly the correct markup and styles that i'm going to use so i'm just using this first one as kind of the first test case let's see how that looks and i'm really just seeing to make sure the icon image is loading correctly which it is i haven't added any other styles so it doesn't really look like much right now so let's go back into our code editor and i think this markup should be okay but let's start adding these styles so in our app folder in our scss subfolder i'm probably going to create a new sas file called features or feature i haven't decided which one i want yet create new file underscore feature i'll just say feature and i'm going to move it over to the right so we can see everything yeah so i'll do features as the section tag and then for the feature grid itself we'll just use the feature name so feature so i'm going to add underscore underscore grid item icon title and description and this is using the bem or block element modifier approach to writing your sas styles i personally really like it just because it keeps everything in a compact file with just the styles related to these feature blocks the first thing we wanted to do was create a style for the feature grid to use flexbox let's go back to the design we do need flexbox on desktop to make those four columns for the features but on mobile everything is just in one column so this doesn't actually need to use flexbox i'm only going to turn on flexbox for desktop so i'm going to use that media query breakpoint mixin breakpoint up large and then i will turn on flexbox with display flex we're probably going to be adding some styles to the feature item for flex as well so kind of get that started here and let's just start out saying flex of one all four of these feature items will be on the same row i'm guessing this markup is probably fine so i'm going to take this and just duplicate it and that's using the ctrl d shortcut so i'm going to save this and i know it's all the same item right now but i just want to make sure the styles look okay okay looks like flexbox is not working for some reason and let's go back and see what happened so we have the correct rules but actually i didn't include the feature sas file in our main sas file so it's always important to remember that now let's look at the browser again okay things are next to each other which is good i just want to kind of add some spacing so we don't get distracted by those other the other text underneath let's go back into our section tag and i'm going to add some of those container classes that we created last time to add padding this container container p-a-l-l for padding all should help and i'll put it in the features section tag there we go so it's a little bit better and this is one benefit of using these utility classes like the container class and container padding classes that i created because instead of having to manually write styles saying padding top you know 2.25 rems etc i can simply create the utility class and then i can use it in any html element that i want and it'll automatically take the styles so it's good because it's easier when you're creating new markup also you don't have to write duplicate styles because i know these are all taking the same the same padding and of course we'll probably tweak this a bit later on but right now we're just trying to get the basics down one thing that we need to remember with flexbox is that flexbox does not automatically include gap spacing between flex child elements unlike css grid we have a gap property it's not included at least not right now i think firefox is working on this property but it's not universally used even though i'm using firefox in my browser i'm going to manually add spacing using probably the margin property for these flex child items let's look at the design again and sort of think about what we want to do we need to add some space between these flex items and it's hard to tell exactly how much the space is because the text is left aligned so you're not always going to have consistent spacing between items but we can make an educated guess here right i'm using this little rectangle that i created in adobe xd using the the rectangle tool up here and it's just an easy way for me to kind of eyeball how much space and how big things are this you know the space is going to be at least this much maybe more it says 29. in this case it's 46. i think we're gonna stick with the 29 so what i need to do is i need to add spacing between the flex items now you might think okay well the easiest way to do this is to simply add spacing i could add a margin right so that it would be between each of these items right and that would look fine on desktop but what happens when we're going to tablet and earlier i said i want for tablet to be two columns in that case if there's space between each item when you stack them two and then two underneath the second item in that flex row is going to have extra spacing on the right so it won't look very good so we need to figure out what we want to do about that so it doesn't look weird on tablet when you have less than two flex items in a row now we could handle this a couple ways so one way would be in our styles we could say for the flex child items at a margin right of 30 pixels or whatever but only for desktop and then for tablet we could say for every other item it would have that margin rights then you wouldn't have that spacing then you could do something like in each feature item you would add padding to the feature item and then the content would automatically have a certain amount of spacing so how that would look would be you want to add spacing so there's space between the items but instead of margin we're going to add padding because there's 30 pixels of width between items you'd add half of that to the side pattern for each item each item is going to have padding to make it more uniform of 15 pixels that would ensure that you'd have 30 pixels of space between each item i personally like using the padding method more just because there's always going to be space between each item no matter if it's space between items next to each other or items above and below each other then you don't need to worry as much about media queries so let's do that now going into our feature sas file in the feature item we are going to say padding and of course we need our calculator and it's 30 pixel of padding between items so we need to divide that by 2 and say 15 pixels divided by 16 to get ram so 0.9375 rims and i think i'm just going to add padding all around the items just because we know on tablet is going to be two rows and then a mobile they'll be stacked one under each other so we're not going to put this padding rule in a media query and then also just for some additional visibility we're going to add a little border just for testing right now let's see what we got so now you can see we have our four flex items and they have a line between them and there is some padding so they're nicely spaced this looks pretty good since we did have the flex just for desktop watch what happens when we get below the desktop breakpoint they go to one column and this is what we would want on mobile but for tablet we want them to be two columns so how do we do that well let's go back into our code editor and we're going to start working with the flex property more now in the feature item selector we want to add another mix in for the tablet styles so include breakpoint up medium actually there's another thing we need to do we need to make sure flexbox is used on tablet as well so we need to add that medium breakpoint turn on display flex for that and then i guess we can turn this off or not turn this off we can delete that rather since we don't need to use display flex just for desktop what this mixin is saying is that it's going to have display flex for medium widths and up that's hence the name breakpoint dash up so going back into our feature item selector in the tablet styles we need to tell each feature item to take up basically half the width right so instead of the desktop where it's just fitting everything into one row and instead of the mobile styles where everything is on its own row for tablet we want each item to take up half the row so we can do that with the flex property so the flex property is going to be 1 0 and then i'll say 50 now let me explain this the flex property itself is actually a shorthand property and it has three different flex properties that it includes so the first one is flex grow second one is flex shrink and the last one is flex basis now flex basis means the default width that the item is going to have in our case we want the feature item to take up half the width so we say flex spaces is 50 now for flex grow what does that mean well setting it to one as opposed to zero means that it's allowed to grow in order to fill the space so that's why for the large we set it to just flex one and this is kind of a shorthand way of saying flex one zero and then i believe either auto or zero percent but you can just say flex one to make the flex child item fit the available width with as many of the flex child items as exist so if you want all the items to be the same width and to be on the same row you would say flex of 1. so in our case what is happening here is that each feature item is going to take up half the width and it's going to be allowed to grow to fill up the space if it needs to although this is not strictly necessary so this should also work even if we said flex grow of zero the next one is flex shrink this basically means if the item's allowed to shrink less than the flex basis in order to fit on the row so let's just start off with zero zero fifty percent and i'm going to also need to turn on wrapping and flexbox because by default if you don't turn wrapping on it's going to try to fit all the child items in one row so flex wrap and set to wrap okay so now i think we have the styles we need to have the tablet styles look correct okay so here's the page let's see how it looks on tablet oh look at that so now it's taking up 50 starting from the medium break point then as we continue decreasing it'll go to one column for mobile so this general layout is pretty set now it's kind of doing everything we want to do in terms of the number of columns so i think this should be all set in terms of flexbox stuff now let's move on to making each of these items have the correct icon as well as the correct text okay so going down here the next one is simple budgeting okay so we got our text down now we need to make sure the icons are correct the second one is simple budgeting let's see the file names on images icon budgeting icon budgeting that's the name budgeting next section is fast onboarding so icon onboarding then we got open api so it's probably this one icon api see how it looks on the website and we have our different icons and the text which is great let's go back and style the text and also fix some of this spacing stuff here the first thing we're going to do is we want to make sure that the intro text has the correct styles so if we go up here it looks like the h2 tag is going to be smaller than the hero h1 tag so let's see let's kind of estimate how big this text is i'm going to say it's going to be about 37 maybe 36 pixels let's start adding some global text styles for the h tags so a little descriptor there so for h2 the font size was 36 pixels divided by 16 is 2.25 rims and i believe that's just for desktop because if we look at the design the ychu's easy bank text looks smaller on mobile so we're going to add some styles for mobile as well this is about 30. not too much different but you know different enough 1.875 rams 1.875 rams and then we'll add the font size 2.25 rams in our point let's say just for large so we're going to tell the tablet styles to use the oh oh i forgot again break point dash up there's a little error down there and we also need to look at the margin underneath so what i'm kind of looking at here is the two h2 tags that we're going to need on the page so why choose easybank title and the latest articles title because they look like they're the same size and if you look at the format of the page they should be h2 tags from an seo standpoint i'm going to measure the space under each of them and make sure it's the same and if it is and we can just add the same margin bottom about 36 it looks like this is a little bit more it's going to be 55. honestly i think that i might get a little bit away from the design and have them be the same amount of space let me just see how much space i put under the hero in that h1 tag it's not a huge deal but i just want to kind of be consistent with the spacing if i can and see what i've done already it looks like here the margin bottom is 1.5 grams which is if we look on our layout tab 24 pixels so for whatever reason there's more space under the h2 tag than the h1 but that's totally fine you know this is just kind of how the design is so i think i might use the 36 spacing 36 pixel spacing for both h2 tags and it'll just be slightly different from the design in this case so 36 margin bottom and since we know that the font size is also 36 we'll just say 2.25 rams and then there's probably going to be a slightly different mobile margin bottom let's see what this is here about 25. so 25 divided by 16. it's 1.5625 1.5625 rims now let's see how this is looking so far okay so there's a lot of spacing i mean i guess that's how it is now we obviously need to make sure the text looks correct as well so it's pretty similar to the h1 styles except that it is a different size so let's copy some of the h1 styles over oh where did i put those h1 styles i wonder if i put it in the hero sass file oh yeah hero text h1 i'm going to move these h1 styles from the hero sas file into the globals just because theoretically if there were other pages on this website they would probably want to use the same h1 styles as we have in the hero so let's do that so let's open up the hero sas file that we were working with last time and find the h1 selector so i'm just going to copy this entire thing here save the hero and then we're going to add the h1 styles up here in the globals that way everything is the same now another thing we can do to make our code a little bit more efficient is we know looking at the design that the h1 tag and the h2 tags are using the same font weight and probably line height as well so i'm going to copy all the styles from the h1 tag that i think are going to be reused in the h2 tag and maybe even the h3 tag into this compound selector for h1h2 and h3 tags so we're going to take this color is the same we'll leave the margin bottom there because it's different but the text styles themselves we can reuse them so i think actually font size should stay just in the h1 tag there we go so now we know that h1 h2 and h3 tags we want to have the same look and the only difference that they're going to have from each other is the font size and then the margin bottoms so this kind of just makes your styles a bit more efficient let's go back to our site and now we can see that the h2 tag does have the same general look it's obviously a bit smaller okay going back to our design let's see what else we need to do let's check out the body copy styles and again it looks like we can reuse some of the styles that we did last time where the body copy looks the same as in the hero section itself so let's see where those styles came from and where i saved them so again it's hero text p line height 1.5 margin bottom is set so the font size itself comes from the body selector which is good it's the default font size what i think i can do is maybe assume again that the paragraph used in the hero is probably going to be similar styles to paragraphs used elsewhere in the site so i'm going to copy those styles over as well into our globals so we'll put this here under the headline tag styles and we'll save the hero one as well and check back on the site looks pretty similar i'm actually not sure if it looked different from before but that's okay now let's see what we have compare it back to the design and see what differences there might be now one thing i've noticed immediately is that the text the paragraph text in this section doesn't go all the way across it ends whereas right now it's going all the way across so i need to figure out how wide the paragraph is going to take and how i want to style that what i could do is i could add maybe a max width of this intro section it looks like it's going a little bit more than half because we can assume that the halfway mark of the page is down here and another trick that i use sometimes is you click on the artboard in adobe xd you go down here to the grid layout the grid section if you check this box it's going to superimpose columns and this is really handy for designers especially but it's also handy for developers because you can count how many columns need to be for each section and i think this should be yes a 12 column layout and of course like this is superimposed on a jpeg of the actual design so i may have to mess with this a little bit but i'm really just using this to see where the halfway point is so the halfway point is this white stripe right down there and so it looks like the paragraph is actually going beyond that halfway mark but doesn't seem to align with anything else what i might do is simply set this intro section to be 50 width or maybe 55 or 60 let's go back into our index.html and go into the intro section and i just kind of put the h2 and paragraph tags as direct children of the section tag so what i might do here is create a child div so class of feature maybe intro oops i'm running css styles intro and then press enter kind of hard to fight with the muscle memory okay there we go so now we have a feature intro this new selector that we're going to add into our features sass file so i usually try to order my selectors in the same order as they exist in the html markup the feature intro comes before the feature grid so we will add it above the feature grid so feature intro and i'm assuming that the 55 width is only going to be for desktop and for mobile it needs to go all the way across so we'll add the break point up large and we'll say with 55 and in this case for tablet it'll go all the way across but i think that's okay we can always tweak it later with a medium break point if we need to but let's load the site and see how it looks nice let's see exactly how long how far across that 55 goes so it goes about here kind of close to the design right we can also look at where the line break is so the line break here is that financial hub financial hub's on the second line so we could just maybe increase the percentage so financial hub fits it looks like 60 might be more accurate so we'll change this width property to 60 all right hey we're doing pretty good here now the next thing we want to do now that we've styled the intro section is style the cards first thing i'm going to look at is how much spacing there's between the intro and the cards themselves okay so there's quite a bit of space between the intro and the cards themselves now keeping in mind that we did add that padding i'm just going to leave a little extra space to kind of take up the space of the padding i added so it looks like it's about maybe 60 pixels tall where do we want to add the spacing let's go back to our site and check it out we could add it in the paragraph but let's say the client wanted to add another paragraph tag or multiple paragraphs into this section obviously this is a hypothetical client since this is just a demo website but this is kind of what happens in the real world you know you want to try to write your styles in a way that is future proof as much as possible so you need to consider you know what happens if they want to add more copy or less copy or you know more feature items or less feature items all these things could change in the future because you know these websites are supposed to be representations of real companies and things like that in terms of the spacing i'm probably going to add padding bottom padding to the feature intro section or maybe margin bottom to add space between that and the grid so it looks like there's some space already from the paragraph tag but we'll add some margin bottom to feature intro going to the feature intro the margin bottom and i think i said it was 60 pixels so divided by 16 3.75 rams so margin bottom 3.75 rims see how that looks all right so now there's more spacing which is awesome an interesting thing i don't know if you notice this but you can see in the developer tools the margin bottom is highlighted in yellow and that's the 60 pixels you can see that the paragraph also has margin bottom even though there's margin bottom in both the paragraph and the feature intro they don't combine together and like add to be you know whatever 2.25 rams plus 3.75 rams so i think we can consider this intro section actually done one thing i want to check really quickly is the mobile styles for that looks like it is 36 pixels from mobile between the intro and the grid okay it's less it's actually the same okay so it's still about 60 pixels of space between intro and grid so what i'm gonna do is move that margin bottom property into the default styles which are mobile styles in our case so now if we look at the site it is the same amount of space at the bottom 60 pixels no matter what your viewport is all right the next thing we want to do is we want to style these feature cards so going back to the design we can see that the icons have some space under them and we need to also style the text as well so i'll start with the icon spacing and the space between the icon and the text is about 44 pixels go into our code and the feature underscore underscore icon is where we're going to be adding this style rule and we want to say margin bottom 44 divided by 16 is 2.75 rims so now we got our space i also want to make sure the spacing is the same or see if the spacing is the same so it looks like there's a bit less spacing for mobile let's say 30 pixels from mobile so again we will add the default styles for mobile 30 divided by 16 is 1.875 and then we'll add the 2.75 rams in our in our break point up large media query there we go okay so we got our spacing cool let me also double check and see if the icon image is the same or different looks like they're the same just double check that to be sure about 74 and same for desktop so i think we are good with this they're staying the same between mobile and desktop let me actually add some spacing so that this can kind of scroll it more so i'm not blocking it with the image of myself i'm just going to add some a min height to our body selector at to the bottom here we'll say min height is maybe 200 viewport height see if that helps in terms of the scrolling yeah so now i can scroll down a little bit just a tiny bit more 300. now i can position it in the kind of a better place on the screen for all of you now let's do the feature block title looks like the font style are similar to our headline font styles obviously it's a much smaller font size let's say about 24 pixels now going back to our code it was feature underscore underscore title so in our feature sas file we'll say actually let's check the mobile styles first there's about 24 pixels big for the desktop and it looks a bit smaller for mobile it's more like 20 so 20 for mobile 24 for desktop so font size 20 it's 1.25 grams and then we'll add our mix in for the break point up large font size is 24 divided by 16 is 1.5 grams and we need to copy the headline styles that we had used from the globals so i'm just going to copy font weight 300 1.15 color dark blue and we'll add them over there for textiles i sort of follow this order i do font size first then font weight then line height then color and then i'll do line height under font size because they're sort of related let's check out our styles all right looks pretty good now let's add the space under the feature title so for desktop it's about 36 maybe 34. and for mobile it is a little bit smaller again 26. so let's say 24 and 34. this is going to be the featured title selector we'll add a margin bottom property 24 1.5 grams and then the margin bottom for large was 34 divided by 16 2.125 and checking back on the site looks good next thing is to style the paragraph the feature description styles so it looks like on mobile 15 let's say 16 just because and then for desktop looks like it might be the same actually for desktop and mobile yeah i think they're actually the same so 16 pixels for both this is for the feature description so font size and i know that 16 pixels is one rim so one rim it looks like we need more line height because there's not enough spacing between the lines fine height let's say 1.5 perhaps a start font looks a little smaller on the design than in the website maybe 14 pixels instead of 16. that seem a little closer i think that's closer this will be 14 pixels and then 1.5 line height so 14 divided by 16 is 0.875 rams and then line height 1.5 there we go okay looks good i think maybe we can take away the that magenta border that we'd added and then this should look pretty close to how it should look on the design okay one thing that i think i forgot is i need to add that gray background to this section okay let's see what color is this in our variables so the very light gray was the hero background maybe the light grayish blue see if that's correct so i'm going to add it to the let's see i want to add it into the features section i honestly might just rename this to be feature singular so it matches you know the feature underscore underscore classes as well background color and we'll paste in the light grayish blue does that seem right that seems pretty close now of course we need to add some more spacing here because yeah it's not quite enough looks like it's about 110 on top and then a little bit less on the bottom 90 on the bottom let me go double check what i'd added to that container class that we'd created last time so i think i said here we go padding top 2.25 rams times 16 to get the pixels 36 pixels so this is much more spacing for this section i wonder if i just hadn't added enough yeah padding to this i might just try to keep them all the same around 90 or so and then i'll add more for this top thing here i wonder why i'd added only 36 pixels of padding i wonder if that's because of the mobile style that i was looking at so i think i'm going to do is just increase the padding basically all around for that container class this will do 70 for mobile we'll do 96 for desktop and then we'll see if this breaks anything we're doing 70 for mobile so padding top and bottom should be 4.375 grams and we want that to be the same on the bottom as well and for now we'll leave the padding left and right yeah so we'll just any any case that we had padding top and bottom we're going to increase it to 4.375 rams for mobile and then for desktop so include break point up large i'm going to say padding top and that was 96 i think i said so 96 divided by 16 six rims this will be for both padding top and padding bottom this one just has padding tops we'll delete that and this just has padding bottom so we'll delete the padding top okay so for now we'll leave padding left and padding right check out our website see if things look better and if i broke anything so you can see there is more spacing here um it's good 70 on top and bottom looks decent enough go to desktop but in terms of spacing the container the nav looks okay which is good and then here i need to make sure this goes all the way across but the top and bottom padding that looks pretty good let's fix this thing here basically i need to make the container p-a-l-l a child of the section itself so that it doesn't get limited in width so i'm going to create a new div call it feature content perhaps and then i'm going to move all the html into this child div then i will move the container out of here and into the feature content and this will ensure that the feature section itself will have that light gray background and it won't be limited in terms of width it'll go all the way to the left and to the right you can see that's happening and then in the feature content that's where you get your max width set for the content inside the light gray so this looks pretty good go to the design and do just an eyeball and see if anything looks off or if this looks pretty close and this looks pretty close i'm pretty happy with that i think there might be a little too much spacing under here under the feature title yeah that's too much so it should be about 32 or so how much space do we actually have here 34. i think i need to just decrease this a little bit so let's say margin bottom 30 pixels margin bottom 30 pixels still looks like a little bit too much spacing yeah that's a lot less even though this is this does seem correct sometimes i just added spacing from the the text afterwards so you can see here there's a tiny little bit of spacing until the text starts so this is probably what i need to account for so let's try maybe down to 20 even maybe even a tiny bit more 22 maybe 24. i think that's close enough so we'll change the feature title margin bottom to 24 pixels going back to our feature sas file margin bottom needs to be 24 1.5 rems and then let's check it again for mobile because that will also probably need to be decreased so it's a little bit less yeah i think i'm just gonna have to try to eyeball it again margin bottom start with maybe 20 pixels let's try it with 16 pixels we'll do 16 pixels for margin bottom on mobiles and 16 pixels is one ram that looks much better let's go back to desktop and then compare it again to the design okay spacing looks pretty good and let's go to mobile see how that looks i guess we can use the emulator too okay so on the mobile everything is center aligned including the icon so let's do that so maybe in feature i'll say text align center for the default mobile styles and then let's start this with medium since it's two columns for the features for medium so we want we probably want those to be left aligned text align left it's not centered um let's check back here hmm why is that rule not working there's no error in the sas and i cannot see oh wait oh no i did this again break point up okay now it should be good okay now yeah text line left is showing up so now i'm going back to mobile that looks good and then tablet width is around here so this is going to be you can see two columns everything's left aligned desktop it's four columns and everything's left aligned all right yeah this looks pretty good looks close to the design okay so i think we can consider the feature block to be complete all right let's build out the latest articles section now for the use before we do any actual coding we're going to look at the design which i have open here in adobe xd and let's go down to that article section you can see that it is four columns on desktop and one column on mobile and we'll probably do two columns for tablet now if you saw the previous video where we built out this featured section just above it it has basically the same layout they're both four columns on desktop one column on mobile and i'd mentioned last time that while we're going to build the features section using flexbox for the article section we're going to use css grid so that's what we're going to do today we're going to build out this four column layout using css grid as opposed to flexbox and honestly i think that you could use either flexbox or grid for both of these sections i don't think either one of them has a super strong advantage over the other so this is one of those cases where you can just pick whichever you are more comfortable with all right so now that we have looked at the design we can just start getting all right so now that we've looked all right now that we've looked at the design let's start getting into the code so we're going to go into vs code our code editor and if you've been following along you might notice that my color scheme are slightly different i've been trying to tweak this customization in bs code for a bit and hopefully when everything's done i will be able to release it as an actual theme so you can all download it for free but for now it's still a work in progress okay now to get started we are going to look at the index.html and we're going to add our html markup so the first thing we're going to do is similar to the other sections we're going to add a section tag so we'll say section and we'll give it a class of maybe articles i know that i ended up making the section for the feature section feature singular as opposed to plural but i'm going to try i think maybe a slightly different approach for the articles now the section tag is going to be what's going to be full width on desktop inside the section tag we're going to add a child element which has the container class that we've been using and if we look at the features section again we see there's a feature underscore underscore content with some container classes and we're going to use those same ones down in the article section so let's add that now so add a div just by doing that dot for the class shortcut and we'll say article singular underscore underscore let's say content and we'll probably give it the same container actually container dot container dash dash p-a-l which is the class for padding all meaning it'll add the padding all the way around on each of the four sides and in the article content i think what we want to do is um let's see what i did for the previous thing okay yes so we're using h2 tag for the intro section and then we'll add probably the same article grid type of thing so we'll say class article actually let me look at the design so there's actually no like intro paragraph like the feature section so it just has that h2 so i think i can get away with just writing h2 and then we'll copy the text over latest articles then under the h2 we'll add another div and we'll say article grid and then in the article grid that's going to be our css grid parent element so then we'll add the child elements we'll say article i like to just say item for grid grid items whether it's flexbox or css grid so each each article is going to have a wrapper of article item now going back to the design again we can see that in each article item there's an image on top and then there is some sort of text content below that so you can kind of break this up into two different sections so what i'm going to do is say in the article item we'll say article underscore underscore image and then below that we'll do article underscore underscore and maybe i'll say text and that's going to contain all the text in the article now the reason i'm going the reason i'm wrapping all the text in one div article text is because of this padding all the way around so if i didn't add the article text i would have to basically add the left and right padding to each individual text element and then i would have to add the top and bottom padding or margin whichever one you want to the first and last element so i i personally think in this case it's just simpler to wrap all the text in one div element and then add a padding all the way around it's just a little bit less coding involved okay so we got the article image and when you have an image you always have to ask yourself do i want the choosing and when you have an image you always have to ask yourself all right do i want to use an image tag or do i want to use a background image and one way you can sort of help figure out which approach is better is if we look at the design let's let's take this dollar image and maybe i'll just delete this i don't really need that rectangle so if we look at the dollar image you can see that it's the same image of course but the cropping is a little bit different between desktop and mobile so here it's more squarish and if you look at the mobile you can see that the right edge goes just out a little bit farther it kind of cuts off on desktop right at the corner of that one bill the same goes for the left side you can see that cuts off here and it's a little bit longer on the left side as well so that kind of tells me that i probably want to use a background image for the image element that way you can crop it to different sizes and you're not going to you know adjust the size of the image or make it look kind of weird so in that case for the article image there's not going to be any actual content but i will add the background image using background image url and then we need to add the url of course of the image so if we go into our images folder it's going to be one of these it's probably going to be one of these image files here so this one's going to be image currency jpeg so we'll add that in so we'll start off with slash images and then image dash currency and i hope that is that right yeah the images folder is not in the app folder but it's in its own folder image image currency.jpg okay then let's add the markup for the text so if you look at the text item there is first an author section then there's a title of the blog post then there's a either a description or a summary um you know you can call this anything you want so let's write the markup this is going to be author title and then description so i'll say article author title description okay and then we'll just kind of copy those over as well there is an ellipsis at the end of that description just because it's a shortened blurb so we'll just copy over that ellipsis symbol as well okay now let me add a space here just to kind of differentiate the item from the grid itself there we go there we go and let's see you know there's one more thing that we probably want to do and that is when you have a grid like this if it's for blog posts or whatever it's usually going to be a link and there's no you know read more link in the design so what i'm going to do is make the entire item a an anchor link and that's usually i think the preferred way of doing it because even if you hover over the image you'd like you'd like to be able to click over to the blog post itself anywhere you click on this section so i think what i can do is article item i'm going to make that an anchor link and then we'll add href and of course it's not going anywhere so we'll just say pound okay so i think we got all the markup that we need i'm just going to do the styles just for this first article item just to make sure everything's correct then once everything's been kind of set and we know that it's correct then once we figure out all the styles for this we can copy it for the additional three items so to start off with the styles in our scss folder i'm going to create a new file i'll call it article.scss and of course since we created a new sas file we need to import it so we'll say import article all right so we should be adding the article sas file to the watch now let me scoot this over to the other side so the first thing i want to do is remember we made the section tag have a class of articles so i'll add some styles for that just in case we need it and then we'll add article so we'll add content grid item so i'm just you know i'm just copying all the classes i created in the next html file over to the sas file so image text uh oops author title and description all righty and i may delete this if we don't end up writing any styles for it but i think we'll be okay all right going back to the design we need to figure out what the background color of this is and it's very faint but it seems like the blog posts themselves are white and then this background is a very light gray so it's probably the same as what we had in the hero section so that's going to be a style rule for the articles section tag so background color and if we look in our variable sas file i'm going to be this very light gray color here so we'll do that and then see how that looks there we go so here's what we got so far we can see that because i did make the article item an anchor link it's has that purple link text and it's turning into the the hand when you hover over it but it does look like the background color is correct so i think that is just fine for now okay so the next thing we want to do is let's get the css grid stuff working so for article grid i want to set let's just say display grid for all widths even mobile just to just to do it that way okay now the first thing i'm going to do is i'm going to start writing the styles for css grid now even though mobile is just one column i think i'm still going to do display grid for mobile and then also tablet and desktop just to see if that's you know a good way of approaching this so we'll turn on grid with display grid now unlike flexbox if you write display grid just by itself with no other styles nothing is going to visibly happen and that is because for grid you need to not only set grid display grid but you also need to start creating your template this is one of the core differences between flexbox and grid flexbox is more of a content first approach so once you turn on flexbox for the flex parent it's going to just try to fit all the flex child items on the same row by default for grid you need to set the template meaning you need to set up the number and the size of the columns and or rows in in the layout so for our layout it's a four column layout for desktop two column tablet one column mobile so since mobile is just one column we'll say grid template columns and we just want one column so we'll say one fr and fr is a fractional unit it's kind of a general ratio unit um used for css grid meaning it will take up as much space as possible and if there's more than one child item in the column or the row it'll sort of divide the space up between those child items depending on the number so 104 is kind of the default like you know auto kind of width so mobile just has one column now let's add the grid template for tablet so we'll use our mixin that we wrote breakpoint dash up and for medium widths we're going to say grid and you can actually um abbreviate if you just type in gtc it has this really cool intellisense and it'll automatically detect so for tablet we want two columns so we're going to use the repeat function this is super handy for grid so repeat takes two parameters the first one is going to be how many columns you want to use we want two so you say two comma and then again we'll say one fr so this will basically create a layout that has two columns and they will each be the same with one fractional unit lastly we'll do desktop styles so break point up large and then again we'll say gtc and instead of two we'll say four so four comma one f r so this is just your sort of standard run-of-the-mill grid where you have a multi-column layout for different and the number of changes based on your device width so let's see what this looks like right now okay oh this is interesting so instead of taking up the full width you can see that this article is taking up only part of the width that's because we set four columns in that grid template so if we look at article grid i'm using firefox and they have a really helpful tool if you click on the layout tab and we expand grid so it detects the that this is a grid item because you know has display grid so if i check this box it's actually going to create lines it'll number the different columns and rows in the template that we made so remember we just created a four column layout in this grid thing so it's showing us the four columns in the grid template so if we added more items it would populate this grid so let's actually do that now i'm guessing the markup's probably okay so we'll take this we'll duplicate it one two three times save and go back to our browser so now we can see that the four columns are actually working which is pretty cool so let's let's see how this looks on tablet so we'll reduce the width and it went to two columns and then one column for mobile so yeah this is a pretty you know with just a few rules we've already sort of created our grid layout which is pretty cool so for css grid the approach that we used is a very sort of responsive design approach meaning we're using media queries to change the grid template and change the number of columns there are some there is another approach you can use with grid that is more intrinsic design meaning you don't have to use all these media queries because there are some built-in properties that can sort of figure out and adjust how the layout actually looks depending on the width of your browser so i'm going to show you one of those now and then i'll explain why i actually prefer this method with the media queries so let us let's just comment out everything except display grid so control k control c we'll comment that out in vs code and what you could do is for your grid template columns property we can use something called autofit and then also another function called min max and i'll explain what each of those is once we write out this rule so if you remembered we for the desktop oh wait i think i have an error here um no it should be okay i think okay so if you look down in the desktop rule we had previously it said grid template columns and then use the repeat function we're going to do something similar here so we're going to say repeat but instead of writing an actual number like 4 2 we're going to say auto fit and this is a property that sort of lets grid decide how many columns are going to actually be on the website which is pretty cool right you don't have to say two or four it'll sort of decide for you and then for the width of each column we're going to use min max so instead of saying you know i want this column to be 200 pixels wide or 1fr or 2frs we can sort of again give the grid itself the basically the control over how wide things will be as well as how many columns are going to be on the row so minmax as the name kind of sounds you give it a minimum and then you give it a maximum width in the parameters so the minimum width we're going to say let's go back to the design really quick and this square so this is about 200 pixels wide so we'll say that for the minimum we'll say about 200 pixels maybe a little wider let's say to 230 perhaps and usually i should convert that to rem so let's do that open the calculator and 230 divided by 16 is 14.375 so 14.375 rams and then the maximum we'll say 1fr right so this will basically give the grid column either a width of you know 230 pixels 14 rems minimum or it could be all the way up to 1fr so it could theoretically take up the entire space of the row and this is actually all you need so let's kind of see what that does to our grid in the browser so it looks the same on desktop there's four items and they're all in the same row and each item is currently 265 pixels so that is above that is between the min min width of 230 pixels and obviously one fr could be 100 percent let's see what happens when we take the browser with and we slowly reduce it okay still four okay so now you can see it broke to three columns and then there's three items on one row and then one item by itself on the second row we'll just kind of keep going here so now it's broken into two columns and then for mobile it is one column and this is actually really this is one of the i think this is one of the great parts of grid where with simply one rule in the in the grid parent grid template columns using repeat auto fit and min max it created this one column two column three column up to four column layout so you know this is pretty cool now you know why did i mention that i'm not going to use this approach well even though it is awesome that we can write this rule and create a multi-column layout without using any media queries i know that in real life if the design has four items and they want it in one row for desktop they may not be super happy when you have a layout like this where it looks uneven and let me show you let me kind of highlight that by hiding the grid lines so we'll just pretend that there's lines around each of them let's do that uh particle item border one pixel solid red so around each of these items now is the the um throughout each of these items there's a line now so you know this looks a bit uneven right so this looks a little bit uneven i think most people if they want to show four items they're not going to want it to look like this it looks better when it's even and there's just two two and two and of course it's fine when it's on mobile and it's just one column but this in-between state is not really desirable i would say and unfortunately that's just kind of the way that's kind of what happens when you let grid control you know the number of columns using autofit and then the width using the min max function so even though there's more rules for the sake of you know kind of maintaining control over that grid i'm going to go back to the media query thing um and for auto fit i don't know if i explained that fully but you go back to turning on the grid lines and then turning off the border so for autofit what happens is it will fit the items as well as it can in the template and the the other option instead of autofit is you could say auto fill and they're very similar but not quite the same let's see if we can see the difference here it doesn't seem to be different for us but let me just show you um there's a really good article on css tricks for auto fit auto phil okay yeah sarah sweden i'm sure this great article comparing what autofit and autofill look like so in this example you can see autofill will create the template but it's not going actually all the way across whereas auto fit will kind of try to fit the content to the row and then if you go down a little bit more i believe there's an animated example here so if you look at this the top one's auto fill so you can see there's actually a blank column when you keep extending it out whereas autofit will you know fit the existing content to the row so that's one difference between autofill and autofit again you know maybe it's you know not maybe it's best practice to use this kind of so that's autofill and autofit um again going back to our own website i'm going to go back to the media queries just because i like having that extra layer of control but this is also an option and it can definitely come in handy um in in other circumstances let's go back and we will delete this and then we will uncomment control k control u there we go we'll save go back to our site and we're back here there we go browser is a little slow sometimes so two columns on tablet and one column on mobile and it goes back to four columns for desktop so if that helps just kind of explaining sort of the basic this is a fairly basic css grid layout i'm using the grid template columns property and then you can designate how many columns you want with the repeat function and also how what size each of the columns are let's get started now actually styling the content in the articles themselves all right now let's start styling the cards themselves so we'll probably start with the image up here and then we'll move on to the text elements so using our little rectangle here see that it's about 200 pixels tall so let's go into our code editor and add those styles in so this is going to be for the article image element so down here article image we'll say height of 200 pixels and we do need to use our calculator for that so 200 divided by 16 is 12.5 rams and then since these are also background images let's add some of those background properties so background size cover so this will ensure that it will take up the entire div then background repeat and i pretty much always turn repeat off and then the other one light and then background position center center to make sure it's centered i think those should be good for now so let's check the site and see how that looks sweet so the images are loading up um looks like we forgot to add a gap in our grid parent properties let's do that so if we go back up to the article grid we'll add a gap of maybe 20 pixels and 20 divided by 16 and 1.25 grams so that looks pretty good um let's actually compare that with the design i think we got might be a little bit more than that just more like 30 pixels so 30 divided by 16 is 1.875 okay and i don't know if you notice but down here in the terminal for some reason it always throws an error when you start adding the gap property i think there's just maybe a bug in the live sas extension but if we re-watch it then everything's fine and there's no errors okay so that looks pretty good um let's see what else do we need to do here did i do the background i think i did do the background for the whole section let's just turn off the lines for now um okay so after the image we have the text here and i'm going to make that a white background color since you can see in the design this is what the text area has so let's do that and let's also add some padding so let's see here looks like it's about 30 so let's see if it's the same on the bottom looks like it's a bit less on the bottom but i might just make it 30 all the way around i don't see what the horizontal padding is looks like it's less it's about 25 on the sides and then 30 on top and bottom and let's see what we got on mobile as well looks like it might be a little bit more on mobile so the side padding on mobile is 30 i guess around 30. and then let's see what the bottom padding is 44 on the bottom and then it looks like it's less on the top 30. it looks like for i might just make them all the same 30 all the way around well i guess on mobile should have a little bit more space on the bottom let's see if it's the same yeah it looks like all these have much bigger bottom padding that's fine we'll do maybe 40. so 40 on the bottom and then the other sides will be 30 for mobile and then on desktop i believe it was 30 on top and bottom and then 25 on the sides is that right okay around 30 for the top and then 20 yeah we'll do 25 okay this is going to be the article item element we'll do the mobile padding first so padding oh caps lock padding so it's going to be 30 divided by 16 and 1.875 rems and then we'll do the same thing for everything except the bottom and then the bottom is going to be i think did i say 40 room or 40 pixels 2.5 grams there we go then we're going to do for i guess tablet medium and desktop we'll say padding and i think we said 30 on top and bottom and then 25 on the sides 25 divided by 16 1.5625 there we go okay let's see what we got um oh i know why the padding shouldn't be on the article item it should be on the article text so just for the text that's okay let's fix that move the padding down there there we go that's much better okay we also need to add a background color to the article text color and i think white made a variable for that yeah okay there we go so i mean it's a little hard to see since it's a very light gray in the background but that is what the styles are and i believe there's also a border radius around the whole card as you can see the the corners are slightly rounded all the way around so let's add a border radius um it doesn't look like it's very round so i might do something like 5 pixels so 5 divided by 16 0.3125 and we'll just do it all the way around and one thing you need to keep in mind with border radius is that sometimes in order for the border radius to actually show up and sort of cut those corners you need to add over um overflow yeah overflow hidden so that'll make sure that the actual rounded corners will show up cool that looks pretty good okay so let's do the text starting from the top just working our way down so the first part of this card text is the author section and this looks like it's quite small let's say yeah it's probably around 10 i would say 10 pixels tall so let's do that so here we go author font size it's going to be 10 divided by 16. 0.625 i'm assuming it's going to be the same for both mobile and tablet and desktop now let's move on to the title it looks like it's a darker gray and is bigger so about maybe 17 or 16. let's do 17. so font size 17 divided by 16 1.0625 and then for the description looks like it's bigger than 10 pixels since it's bigger than the author but not too much it's about 13. that's a bit small 13 divided by 16 is 0.8125 rims okay now let's see how that looks looks pretty good now of course we do need to do the colors right now since i made the whole article item and anchor tag it has that purple link color so we'll adjust those but size wise that looks fairly good we might need to tweak the line height a little bit but let's do those font colors so it looks like the author and the description are the regular gray that you know we saw kind of up here and the title is the same darker gray as the title up there let's do that so since we have both author and description the same color what i might do to make it slightly more efficient is in the article text i'm going to add the color property there and then i will make the different darker gray color for just the article title so if we go into our variables that sort of medium gray is probably this grayish blue and then the darker gray is probably this dark blue color or the title there we go okay okay looking much closer so let's now work with the spacing so we need to add some space between the elements and then we'll also adjust the line height on that title looks like it's a little bit too much but first spacing okay below the author is 16 pixels of spacing that's one room so we'll add a margin bottom of one rem to the author then to the title there's some space under that as well um looks like it's a bit less but honestly i'm just going to say 16 as well i think i'm being lazy and then let's see what else we need to do we need to adjust the line height of the title and also we'll check the line height of the description as well so right now seems like there's a little too much line height right here so let's try something like line height and i usually like to put the line height property under the font size property since they're kind of related so 1.15 maybe and i'm just kind of guessing here one like a line height of one means it's the same as the font size 1.15 means it's just just a little bit taller than what the font size is okay so that looks closer which is good um it seems pretty good maybe just tiny a little bit more so maybe 1.2 so 1.2 okay i think that's fairly close enough let's check out the line height for the description now i think that's actually pretty close yeah i think that's good enough and it looks like the spacing that we have between the elements is okay as well i feel like there's a bit less spacing here so maybe we should make that a little bit smaller so article title go to the rules tab and right now i think i had set a margin bottom of 16 pixels or one rim so let's adjust this so 16 pixels is a little too big so let's try 14 looks much closer on the design so maybe 10 pixels looks like it might be less than that actually maybe eight pixels okay let's do eight i feel like there's less spacing under the author as well i'll just copy this over first margin volume of 8 pixels article title 8 divided by 16 is 0.5 grams because i could have done the math because 16 divided by 2 is 8 anyway and the author well what happens if we just do the same thing 0.5 rooms it does look a bit better i think there's still a little bit more space under the author so we'll just tweak that a bit so instead of eight pixels let's say maybe 12 12 pixels 12 divided by 16.75 rams okay so i think that looks alright okay so i think our text is pretty good actually so now let's add the proper images and copy for each of these articles so in our next html file we will adjust that just copy these all over i guess we can just cut it since we're not don't really need to keep it this is already there okay so let's do the images so in the design it's the currency then it's like a restaurant then a plane with clouds and then confetti so restaurant plane confetti we look on our images folder image restaurant oh i had the name right restaurant and the second one was plain and then confetti all right let's see how this looks it looks pretty good so if we take it down comes two columns and then one column on mobile this is pretty good not too shabby so one extra thing that i'm going to add is some nice little hover states and i think i'm also going to add a box shadow just to make the card a little more separate from the background so let's add those in now so the box shadow i'm going to add to the article item itself since i want to go kind of all the way around so article item say box shadow and for box shadow it takes a bunch of different parameters so let me just type them in first and then explain what they are okay so in box shadow the first two numbers are the position of the shadow so the first zero pixels will control the horizontal position so i want it to be probably in the center so i'll leave that as zero pixels the second zero pixels is the vertical position and usually for shadows it's better to make it a little bit down from the object itself so it seems more like a real shadow so we'll maybe adjust that to be three pixels and i'll convert these two rams once we've kind of finalized everything and the last number parameter is the spread so it's kind of how diffuse versus how like hard line of a shadow it is so i tend to do at least 10 pixels maybe 12 pixels for the spread and we can of course tweak that as we see fit and then the last one is the color of the shadow and for shadows i usually like to use a semi um transparent shadow so what i've done is use rgba 0 0 0 which means black and then the last last number here is the alpha channel meaning the opacity and i've set that to 0.15 which means basically 15 opacity so it's it's pretty semi it's pretty transparent um okay so let's see how this looks oh there we go so we got a nice shadow here okay looks like we have some issues down here where the white doesn't go all the way down to the bottom so i think we need to figure that out um so let's see what's going on here article item goes all the way down there article image and then article text so it seems like because the text on the first two is shorter than the last two because you can see there's only four lines for the first two in the description but there's five lines for the description for the last two that's why they're taller so one thing i could do to fix that is maybe set the background color of article item white so now it's like that so let me try moving the background color to the article item instead of the article text see if that fixes the issue let's do here okay much better good let's make sure everything looks okay even when we're changing the width okay all right good now the next thing we want to do is i'm actually going to add a little hover state so it just looks nice you know when the these little i guess you can call micro interactions so the website kind of responds to the different actions you take so i want this to change in some way when i hover over each card and one thing i do a lot is scale it up slightly when you hover over it so let's try adding that and we'll do that to the entire article item as well so we'll add the hover selector and on hover we want to transform and we'll increase the size by using scale and then in the scale function we can set what we want to scale to scale of one means a hundred percent so it won't change at all so we want to be slightly more than 100 but not too much so maybe 1.05 so that would be 105 so we're only increasing by five percent so let's try that and see how it looks okay so it is just a bit larger and we also need to add a transition so smoother as well so transition we'll just say all um maybe 150 milliseconds and then ease in out that controls this the smoothness and speed of the animation let's try this now smooth like butter i like that i'm pretty happy with that okay so i think we can actually consider this section done it looks good on mobile obviously on actual mobile there's no real hover state but that's fine tablet two columns desktop four columns so yeah i think that looks pretty good all right so i think all right so i think we can consider this section complete before we get into actually building the footer i wanted to point out a mistake i'd made in a previous video that i just now noticed and the issue that some of you may have noticed already is that there's horizontal scroll bars appearing and this is caused because the hero content the images that we had sort of made offset have forced the container to be wider than the viewport width and that's what is causing these horizontal scroll bars to display all the content so the way to fix that is in our code if we go down in our global sas file to the body selector we can add overflow x hidden so what this is going to do is it's going to trim or cut off any extra content outside the viewport width so now let we go back to the website there's no more horizontal scroll bars which is good but we can still scroll vertically because we only did overflow x hidden not overflow hidden which would cut off anything extra and prevent you from scrolling vertically or horizontally so this is one way to fix issues when you do things like i did like moving things kind of offset from the viewport or if you have an off canvas menu you might need to add overflow hidden to some of the properties so i hope this helps any of you who may have noticed this if you're coding along with me and let's get back now to the rest of our website all right so first things first let's check out our design so we have here the mobile design and then the desktop design open in adobe xd let's take a bit closer look at the mobile version first so in the mobile version we have all the content stacked to one column looks like everything's also centered and the different parts of the footer are the easy bank logo there's some social media icon links then we have some text links a cta button and then at the bottom the copyright info for the desktop version if we go over to that it has the same content however instead of just being in one column the content is split out into four columns so the first column is going to have a logo and social media then we have two columns of the text links and the last column all the way on the right is the cta button and the copyright info all right so now how are we actually going to build out this footer well as in most things we can use multiple different approaches we could use flexbox if we wanted to i think that would be a perfectly fine solution to build out the footer i think i'm going to use css grid and the reason for that is i want to show you all different ways that you can use you know flexbox css grid to do layouts and we did use grid last time with the articles section but for the footer i'm going to try to use a feature of css grid called grid template areas and it's a really cool feature it is a little weird with the syntax until you get used to it but i promise it'll end up being more intuitive as you get along into it so how grid template areas works is you still sort of designate the template meaning the rows and columns in your grid layout but you can use named areas for each of the different areas in your layout and you can use those names to assign where in the grid you want those areas to take up but first let's just get the basic styles in place and i'm actually not even going to use css grid for the mobile design because everything is simply stacked in one column and then centered then when we do the desktop design we will use css grid as well as the grid template areas but the first thing we want to do is we want to create our html markup so i do want to keep in mind what i eventually want to be building for the desktop version so for example i can't just have you know individual social media icons or individual text links just in the footer tag itself i'm probably gonna have to group them together so we can lay out them a bit more easily when we do use grid later on so for example um i would probably have to group the logo or i would have to group these social media icons together in one div same thing with these text links i might group them into two different groups and then at the end i could group the cta button with the copyright info we'll see more as we get into it but we're sort of keeping that in mind as we're building out the layout even though we don't have to use grid for mobile let's go into our code editor vs code and in our index.html file i'm going to start creating the markup okay so i'm going to put everything in a footer tag so footer and i also need to create actually a new sas file so let's go into our app folder scss subfolder i'll create a new sas file called underscore footer.scss so that's open and then of course since we create a new sas file we need to add it in the main sas file so import footer save that and looks like yeah our live sas is working so we'll just close this up and then i'm going to just move the footer over to the right side so we can see both index.html as well as our styles so in our footer tag we're going to start adding the different content that we need so the first thing was the logo so the logo is usually going to be a link so i'll say anchor link i'm just going to make the href a pound and in the link it's actually an image because it's just loading that logo image so we'll add the image tag and we'll say source is images and let's see it's a logo probably this logo svg so that's going to be the logo and i guess we'll give it we'll start giving things a class as well um so first thing i'm going to do is give the footer tag a class of footer i know that seems kind of redundant but in our sas file over here it makes it easier to sort of follow the bem or block element modifier approach because the class of footer will be sort of the root and then everything else comes from that so for example for the logo we're going to give it a class of footer underscore underscore logo so then the same thing in the sas file will follow that pattern underscore underscore logo and the ampersand again just means that it inherits the root which is footer okay let's go on to the next section so under the footer was i believe some social media links so we'll create a div called footer i'll just say social so in this div we need to add all of our social media links so since they're links so again we'll add some more link elements and i'll just again do a pound for the href since there's they don't actually exist and then again each link is going to be i believe an image so image and the source should also be in the images folder and let's see which one was first so in our design so it's facebook youtube twitter pinterest instagram so facebook's first so images images and it looks like icon facebook and then i'll give it an alt of facebook so i'll do the same thing for the other links and i think there were six total yeah it's not a five so let's duplicate this by selecting it and then pressing ctrl d so there's five so i think the second one was youtube and then twitter so youtube i'm guessing it's just called yeah youtube then twitter and then change to alt i think pinterest was the next one and the last one was instagram there we go so we got the social links and then let's kind of go look back at the design so after the social links were the text links so as i mentioned earlier i'm going to create two groups of text links so let's say footer links then i'll add maybe another helper class and we'll just say uh link maybe column one there we go and then we'll add our links oops a link and the links was the text here so we'll just copy this over i think it was three per group and then we'll duplicate this so this will be footer links column two and i'll just replace the text okay about his contact blog career support privacy policy let's just double check and make sure yep that looks right okay and then last one is going to be the cta and i'm going to create one group to enclose the cta as well as the copyright so i'll say footer i'll just say cta even though the copyright's in there too and the first thing will be the button so i'll say a class of button and then the text was request invite this is basically the same button that we've had um earlier in the web website and below that is going to be the copyright info and i'm i'm going to make a separate div for that so footer copyright um easybank all rights reserved i may have deleted that somehow so i think the symbol is copy easy bank all rights reserved okay so now we have our markup and let's create the corresponding styles in our sas file and we're just going to kind of build out the skeleton so we got footer logo so the next thing is footer social and in the social we do have some links and images we'll just leave it like this for now and we'll add it as we need so next thing is going to be footer links and then footer links column one and column two so i'll just add those as well okay then after that is footer cta and then button we might need a button so i'll just say a button and then the last thing is going to be the footer copyright okay so save that okay looks good so we're not going to have too much on our website but let's just kind of see what we have here okay so we have a logo loading this may actually be a problem because this is the logo that we use up top with the sort of dark color but this is i believe yeah so the footer has this dark blue color in the background let's just add that now so we're going to have to i think modify the svg and i think we should be able to edit it we'll create a new svg for the dark um for the white on dark and then we should be able to edit that manually so footer we'll give it that background color of that dark blue and it should be in the variable satisfied so yeah dark blue and then i'll just say color white just to sort of give it a default um and maybe actually since everything is a link we also want to say a color white just to make sure that all the text links will get that white color okay so let's see what we got now yes you can see with that logo it is not visible so let's make the new svg file because i think we only had that one logo image yeah just that one logo so we opened the svg it's actually just like text just so you can um the cool thing about svg is that you can edit colors so you can see here these different colors this is probably the colors of the symbol in the back um so the you know this sort of diagonal stripes but we need to edit the text i'm guessing it's this thing pathfill um and this is just the letters of easy bank i'm guessing so let's create a copy of this logo svg file and then i'm going to rename it rename logo let's say dash dark because we're going to use that on a dark background so alt z to wrap the words and i believe this is the path fill and then we want to change that to white so we'll say f and we can't use sas variables in here because it's just it's an svg um it is not i can't use sas stuff okay so we'll change to logo dark in our index.html file um logo dark let's see if that worked e there we go and let's just double check it that does seem right yeah that seems right it's just white okay let's add some padding to this so it looks a bit better and i'm actually going to just turn on the responsive mode so we can see what it actually looks like so we want to add some padding on all the sides and we also want to center the text all the content let's see how much padding we need it's using my little rectangle that i created it's going to kind of estimate it's about maybe 40 pixels on top and i'm guessing on bottom um so about 40. yeah that's close enough and then maybe we'll just do 40 all the way around nothing's actually nothing is actually reaching out to that far but i think you know we'll just keep it at 40 just to have some padding all the way around okay so in the footer itself we'll say padding and 40 40 divided by 16 2.5 rims and again that's because to get from pixels to rams you divide it by 16 which is the base font size by default and rams are just a more accessible way that you can size things because it gives the user control if they change the zoom in the browser or even modify the base font size in their browser if you have measurements in rems it'll sort of scale up or scale down with the browser as opposed to pixels it would stay pixels no matter what so just better to use rems as opposed to pixels you can also use ems um but i like rams okay so now with the padding see we got okay good padding and text align center looks good now we need to start adding spacing so i just kind of go from top to bottom so i want to add spacing under the logo and on down and again i'm just kind of estimating here so it's about let's say 30 and then under the social okay so we'll give 30 pixels of space under the logo also under the social and then i'm assuming under the text links a little bit less but we'll just say 30 for everything just makes it easier okay so one add footer logo we'll say margin bottom and we'll say 30. so 30 divided by 16 1.875 grams and i guess we'll just add that margin bottom to all the elements that wanted them so footer social i believe needs it and then only the second footer link so footer links column two we'll have margin bottom as well and then i think under the button so in footer cta under the button we'll add margin bottom there we go okay um margin is not taking under the logo why is that it's there um maybe it needs to be display block or oops don't want to do it for footery footer logo because footage is every single link which is like pretty much everything in the footer so display block and the reason this worked is because before display block the element i'm assuming yeah anchor elements are displayed in line by default which means that they just kind of display however the default flow would be and you can't add things like margin and stuff it just won't take effect so you can say display block um or display inline block display block it'll take up 100 of the width that it can if i do display inline block it will only take up the width of the actual content so maybe displaying like inline block would be better for this so footer logo display inline block okay looks good so it looks like they were the margin did work for the other elements because those are divs and divs by nature they are by default display block elements now let me add some space between the social icons as well let's see how much space there is um 15 or maybe 16. it's a lot of one ram of space using margin margin right so okay so footer social which is this section here and then i'm going to add the space to the anchor links so again we probably need to do display blocks the margin actually like takes effect so display inline block actually um because the slave block can make them all 100 width which is not what we want we want them next to each other explain line block margin right one round oh and i don't want to do it for the last one so i think i could use the not last child so if it's not the last child it'll have this margin right okay and that looks like it worked let's just double check so margin and then they all have margin and then the last one does not have a margin which is great i think i do want display inline block for all of them so we'll just do this okay cool now the next thing for the text links the text links are they are each on their own row oh what i could do is i could create make footer social a flex parent let's try that so display flex and then i do need to set flex direction to be columns that will be one under the other instead of trying to fit them all in the same row so flex direction column oh not for social i want that for uh the links there we go okay so now they're very nicely in one column and centered i think i actually need to do is add some alignment to the flex parent so usually to control horizontal stuff that's justify content because it's vertical align items should control the width of the children so let's say align items and let's just say center just to see what happens okay so there we go so now we have centered them all and then it only makes the flex children take up the actual width of the content itself so let's add that in our style so align items center item center this looks pretty good and we also want to add some space between the text links themselves yeah let's just say 20 because there's usually a tiny bit of space from just like line height i wonder if i could just use line height to make that space let's let's experiment again line height 1.5 oh so i do two actually looks pretty good increasing the line height makes it take up a little bit more space which results in there being space between the links so then i don't have to do i don't have to add a margin to add space between them which is like sort of nice so that looks maybe a little bit more line height 2.25 for footer links a and i don't think this is actually necessary anymore since i fixed it with the align item center thing yeah that seems good okay so i think that this is basically the basic mobile styles let's move on to the desktop styles and in desktop the most important thing we need to figure out right now is what the grid template for css grid is going to be so i think initially i'd said we're going to make this a four column layout so the first column would be logo plus social then we'd have two columns of text links and then the last column would be the cta button and the copyright now i think that i'm going to also make it two rows because i want the logo to be on one row and the social media icons will be on the second row so that means the entire template is going to be two rows and four columns and i think the easiest way to demonstrate that is just to use adobe xd and to sort of draw squares around each of the cells so it's a little bit easier for you but also for me to see what the template's going to be and then i can write the code in the scss file so let's start with that now so we got two rows for this first column and then we'll just have the same you know going all the way down so that's the first column for text links and the second column for text links and you know this isn't super exact right now so there is going to be spaces between the cells but for just for illustrative purposes it's not going to be you know exactly correct so it's going to be something like this where we have four columns and two rows so this means that using the grid template areas this top one would be called logo and then this one would probably be called social this one i'll just call links one and then links to and then the last one will just be cta and we'll use those names to assign the locations in the template to each of these content blocks all right so in our code editor we need to figure out where we want to write the code for the footer layout for css grid kind of like flexbox you have a parent element and then you have the child grid elements so the parent element in this case is going to be the actual footer tag itself and then each of these areas are going to be the child elements in the grid so the first one would be logo second one would be social then the links one then links two then the cta these are all direct children of the parent footer element so in our sas file we want to add display grid for i think probably just desktop and up so we can do that with a breakpoint um our breakpoint mix in so include breakpoint up large and at this point we will add display grid so again this means that on mobile and tablet it's not going to have the grid layout it's going to have that stacked one column layout and we'll we'll do the same thing for the other properties as we add them so display grid and then grid template columns and we wanted four columns right so let's take a look at what we want the widths to be for those columns so it seems like these first three columns are probably roughly around the same width and then the last column is going to be wider i'd say maybe you know we can say these first three columns would be 1fr or fr meaning fractional unit and then the last one would probably be maybe 2fr maybe 3fr uh i'm not really sure yet and that will make that that will make this last column either twice or three times the width of the first columns so we'll just do 1fr1041fr and then 2fr for the last one and we can use the repeat function so the first three columns are one at far each so we can just say repeat 3 comma 1fr for the first three columns and then the last column will be 2fr then we want to add two rows so i'll say grid template rows and we want two rows probably the same height for each so again we'll use repeat two comma one fr which means the space each row will be given the same amount of space okay now the last thing is the grid template areas so this is a little bit um tricky it just has a bit different syntax and i know that when i sort of started using grid template areas it was a little bit confusing but basically going back to our design you write out the names of each of the areas sort of in the place where you want that block to be in in the grid so this one's going to be called logo it's going to be going across in the first row from column left to the right it'll be logo links one links two and then cta and then the second row is going to be social links one links to cta so using the same name for two different cells it tells the browser that that area is going to take up two cells so the first one's going to be logo so how this works is we just type in logo and it is in a string as you can see here and the second column is links one then links two and the last one will be cta so this is kind of the representation of the first row with each name taking up one column now we have two rows in our template so we're going to add a second one in a string again and instead of logo the social media icons will be the first column then links one links to and then cta again so this is our grid template now you also need to in addition to creating this in the elements themselves and i guess i should put this in a break point as well so include break point up large we tell it that the grid area name of this element is logo and this is part of the slightly confusing thing but this does not need to be in a string one one place that i look to a lot when i'm confused about grid or flexbox stuff is css tricks so a complete guide to grid and they also have one for flexbox so we're looking for grid areas this is kind of telling you how the grid temple areas work so you can see they have things in quotes and the actual element you just have the name and not in quotes again this grid area property of logo will tell the browser that the look the footer logo element subscribes to the logo grid template area so we have to do the same thing for each of these so i'm actually just going to copy this and then this is the footer social area and that's going to be called social and then for the links 1 we'll put it in the column 1 and then we'll do the same thing for column 2 which will be links 2. and the last area will be the cta and that's going to be the entire footer cta element which contains the button as well as the copyright info so that's going to be i think i just said cta these grid area properties they'll sort of match to what's in the grid template areas all right so this looks pretty good obviously it's not completely accurate at the moment but this is a really good start let's turn on in the layout tab the grid inspector so i want the footer to be highlighted this is a super helpful tool if you are working with flexboxer grid firefox has these special flexbox and grid inspectors and it just tells you a visual representation of what you have we actually have not only the lines to designate the rows and columns but it's also telling you the names of the grid areas that we just created it says logo social links one links one links two links to and then cta and it also tells us that with this dotted line it's sort of telling you that the area is taking up those two cells whereas for the logo and social there's a solid line between them indicating that they're separate i think that let me just uncheck the display area names so you can see a little bit better but we need to kind of align these correctly right so let's work on the horizontal alignment first and i think we want the logo and the social icons to be aligned to the left you can control alignment in two different ways one is sort of global alignment when you set properties on the grid parent you can also set properties in each grid child to just control the alignment of that cell so there's a lot of control you have using css grid and let's kind of figure out what we want to do here if you look at the design we do want the logo and social icons to be left aligned and we also want the text links to be left aligned as well and then the cta and the copyright are right aligned so everything's kind of like flush to the edge so i think we could try using justify content space between is that doing anything it doesn't look like it's doing anything this might be a flexbox thing let's go back into our handy css tricks guide let's justify items aligns grid items along the inline row as opposed to align items which aligns along the block so let's try justify items start so justify items start oh there we go i think what i was doing was justify content which i use a lot in flexbox but i think that just controls the child items as a whole you justify content yeah so it's the the total size of your grid so that seems okay um i also want to i think maybe set text align left for desktop because it was centered due to the mobile styles and then we can fix these as we go along now why are these not are these centered line item center i have a few different things going on here so i have the footer links it's a flexbox parent let's turn off the grid look at the flexbox i had done a line item center and i actually want to align items i believe start yeah start because this in this flexbox parent it's going vertically so line items will do the cross axis arrangement so i just need to remember to set footer links line items start for desktop and up so footer links and then for breakpoint up large we're adding a line item start and i'll make sure that the links themselves are aligned to the left the other thing we wanted to do was for the grid template justify items start let's go back to the grid inspector now we can see that the text links are aligned to the left the logo and social are aligned to the left as well and then for the cta we want to align that to the right i think we can say um justify items and oh this is not a grid thing so i can't do that i guess i could try text line right no that's not right oh it's because i did justify items to the left so i think for because this is an individual this is the grid child item i can't do justify items i have to do justify self because that applies to the individual child itself so i think if i do end there we go so if i do text align right and justify self end for the footer cta desktop styles so under the breakpoint area okay so it looks pretty good for the horizontal stuff right let's just double check and compare that with the design so yeah we got the logo and i social media icons on the left these are line left this is aligned to the right and that does seem like what we have so now we need to figure out the vertical alignment you know it looks like things are a little bit all over the place so we go back to the design let's just draw a box around the entire footer area just to see how things kind of line up with each other looks like things are kind of extending out to the top and the bottom they're like pretty much almost flush so if we go back to the footer parent itself i think what controls the vertical alignment is align justify content and align content just control the grid in like the greater parent so if i want to control the alignment inside the grid i have to use items so align items okay aligns grid items along the block axis so the values can be start and center and stretch so i think i want stretch so it goes all the way to the top and the bottom so we'll try that didn't seem to do anything something else is adding this extra space i wonder i might have some margins actually so let's look at the links oh there is margin in the social so let's just cancel that out so margin bottom zero and then i guess logo also there's a margin there okay i might just need to go back and move all the margins that i added from mobile into a breakpoint down media query because i only want it to take effect on mobile and tablet so let's see where here we go margin bottom so include break point down some of this apply to tablet and down oh medium i mean medium and down and then we'll add the margin bottom there let me just copy this media query so same thing here margin bottom here and i think there was one yeah for the button okay now that we've removed the margins from desktop let's see how the site looks did that help at all see the social icons are still like really they're too high i want them to be flushed to the bottom what happens if i do an align self for footer social i'll get rid of the height thing turn on the line self to the end does that seem right it seems a bit tall in any case we want them to be on the top and bottom anyway so let me add a line self to footer social for desktop okay the text links themselves look okay now i need to do this the aligning for the cta section so in the cta section we have this and then we have a copyright so i think if i do a line self miss stretch an option for this oh it is stretch not working this is kind of annoying okay i'm just kind of curious start have an end i think i may need to separate these out into different cells so i can sort of align them the same way i did with the logo and the social so footer cta i'll only have it have the button and i'll delete that extra div and then do that so then footer cta is in his own thing twitter copyrights is is in its own thing as well so let's go back and first i'll have to add a grid area for the copyright since that's a new thing so include breakpoint up large grid area and i'll call it copy right then i'll need to add the copyright name to the grid template so before we had the ctn copyright in one thing now we're going to have ct on top and then copyright on the bottom okay much better um so now we can sort of try to we'll add another rule for align self end and then justify self and okay okay that looks pretty good i do feel like things are a little bit taller than they should be you know i wonder if the font size should be smaller for the for the text links you see that this should be 15 or so pixels how big's the font size right now it is if we go to computed font size is 18 and where did that rule come from it's just from the body font size okay so for the footer links i need to set a font size of 15 pixels so that should help with making the content less tall i'm guessing it's going to be the same font size for mobile as well so font size 15 pixels divided by 16 is 0.9375 rems all right let's give that a shot okay looks shorter which is great maybe the easy bank text itself needs to be a bit smaller too it's probably about the same 15 pixels so we'll copy this property and add it to the copyright as well okay maybe there's just too much space because i initially added all that space using line height so if i reduce line height it's still a bit tall interesting let's just say line height one just to make it really short oh you know what it is it's because i set the row i set the rows to be 1fr which means the top row and the bottom row have to be the same height that's how i set it but obviously the bottom row the social media icons and the copyright doesn't need to be the same height as the top row and the top row looks like it's getting its height because of the button which is making everything be too tall let's fix this row problem first and then we'll figure out if we need to decrease the line height for these so instead of 1fr i think the second row should be something less where is it here grid template rows so the first top row should be 1fr if i do auto it'll just oh if i do auto it just sort of does that let's try that so in the parent we'll change grid template rows to 1fr and auto here we go so instead of this repeat thing for the rows we'll just do 1fr and auto okay so this is shorter now the line height is kind of what's limiting it so let's try one okay see now got really short which is great maybe 1.5 you know maybe i don't want to use line heights that's kind of like making it a static distance what if instead in the footer link since i know that is a flexbox parent i could say justify content space between and that will sort of auto stretch to fit that so i think that's a much better way of doing that at least for desktop we want the line height for mobile because we're not using grid for that so footer links for desktop here we go i think i personally just do justify stuff before the align properties okay so this looks closer which is great now i i'm guessing that this button might be a little bit tall i am kind of curious where this height is coming from now oh i still i forgot to take out the line height okay that's my problem so i'll just remove line height for the footer links a for desktop so i just want to use this on tablet and mobile so i'll use my break point down and i know that i usually use the break point up meaning i use min width media queries but i think in this case because we're adding styles for mobile i would prefer to use the breakpoint down using max with media queries otherwise i would have to cancel out all the margins and line heights for desktop that looks a lot better so i think maybe this button is now what's kind of making it a bit tall okay how big is this button oops it is 46 pixels tall or so and how big is it on the website okay so it is 46. you know i'm not going to split hairs here i think this looks pretty okay so even though it's taller than it is on the design i think it's okay and i just kind of added some space here so i'm not blocking it with a picture of myself for you all it's kind of weird it even looks like there's more space in the design i think the logo and the social media icons actually might be a little bit too tall so let's just tweak that and then we'll sort of consider this complete the logo should be 23 pixels tall and about the same for the social icons so let's see what we got um 20 and the icons look like they're 25 okay so yeah they are a little bit big the image itself says 20 which is good and then for some reason the thing is 25 the anchor link maybe i just need to set a height if i set a height of 20 pixels will that help oh yeah it does okay we'll just say hi 20 pixels for the footer social a social a here we go and i'm assuming the same height will be for mobile as well so we don't need to use a media query for that so 20 divided by 16 is 1.25 rems that seems all right okay now that i look at this again i think that there's a couple things i need to do the first one is i need to limit the footer content so it doesn't go all the way across i think i forgot to add the container class so let's do that first and then we might need to tweak some of the alignment okay so in footer i'm gonna have to add a container class container and i don't remember if i want to add the padding helper classes but let's just move these into the footer container and because originally the footer tag itself was a grid parent i'm going to have to move all the grid properties into the footer container so footer and then we'll just put it here at the top container so we'll move all the grid stuff into the container element okay hopefully that'll work let's take a look okay much better so now we can see it's not going all the way to the left and the right things just seem cramped even though the heights like so tall is that button really the right height yeah it's 46. and you make the copyright text smaller i think right now it is 15. i'm gonna make it i think 13. it needs to be a lot smaller 13 divided by 16.1 okay eight one two five not one eight there we go okay i think the color was darker too right it's not white it's kind of a light gray what color would that be maybe grayish blue so you know this is just kind of tweaking trying to double check the design and the site and just make sure everything looks correct yeah there's more space between the button and the copyright something is not right i wonder is it including the padding that i added no this is 70 oh okay so it's 76. okay so it is adding the padding so it's actually now it's too short which is the same as like what i was thinking it was so let's increase that line height again to um make it taller line height 1.5 oh wait wrong selector forgot a second underscore there we go maybe 1.75 2.25 2.25 line height is giving us the correct height of about 100. okay glad we figured that out so footer links a i knew something was off i just took me a while to figure out where it actually was there you go footer links a oh wait two point is that the same oh my gosh it's the same freaking line height so let's remove this media query there we go okay this looks much closer to the design okay so now we've gotten the height right i think we need to tweak this like horizontal spacing um there's it's too close here and there's too much space i think so yeah so it seems like there's more space between easy bank the logo and then the first text link let's see how do i want to do that i guess i could maybe increase the width of the first column so if we go into the grid parent instead of making all the columns the same i could just try to tweak these a little bit so i'll probably leave the text links as 1fr and so i'm just going to try this out in the browser but what if i said 2fr 1fr 1fr and then 3fr maybe 2far well maybe 3. okay let's see how close that is to the design hey that's not bad um there's a few things that look like they're off so there's just a tiny bit more space between these i think i also forgot to add a grid gap property so let's try that gap of maybe one rim two rims let's try one rim so that that gap property let me just show you how it looks so it's adding space of one rem or 16 pixels between all the cells in the template so i think that's probably good to keep so i need to add gap of one ram and then i need to change the template itself will be 2fr 1fr105r3fr okay so grid template columns place this i know i could use repeat to 1fr but i mean it's kind of the same at this point if you're only repeating if you're only repeating it once and then what else that i wanted to add oh yeah the gap of one i'll add the gap under areas i guess one rim okay that looks pretty good let's compare with the design again that looks fairly close and i'm actually okay with like i have a little more space between social icons but i think that's okay all right now moment of truth let's see how this looks on mobile because we decrease once it hits that break point for tablet it goes to one column and it is centered and stacked then for mobile i'll just turn on the emulator thing that looks pretty good so i think we have the basic styles down now let's get to some sort of let's kind of polish it up a little bit there's a few things i usually try to add main thing is hover states because these are all links and you want the style to change slightly when you hover over them so you know what's going on so for the socials let's check the design oh here we go so we did some if we hover it turns green on the social icons as well as the text links and then the request invite has the same thing where it like goes to white so let's do those the social icons that would be social icons the images um they're svgs and we want to change them from the white to the green color now since i loaded these svgs as image tags i might actually change that because what i want to do is change the fill and the svg itself let me show you what that looks like so icon facebook if we look at that so it tells you the fill is fff which is white and there is actually a way that you can alter that in css but only if you're loading the svg as an svg tag and not the image tag so i'm gonna have to change this so i'm gonna copy this so we're actually just using inline svgs at this point and then i think can i just move the alt no there's no alt for that that's interesting i'm just curious about this uh alt tag for svgs accessible it's purely decorative it doesn't need alternate decks i think we do because they're like social icons inside the svg add title oh must be the first child of its parent element it'll be used as a tool tip that's helpful okay so let's do that so say the first child um here so path is the first child originally but now we're adding titles and we'll add facebook that's pretty good and we'll have to do the same thing for the other one so youtube copy that place the image and then add the title youtube so now let's load it up everything's the same let's just double check yeah so it is actually loading the svgs which is good if we hover it tells us the title which is great so now to adjust the color to adjust the hover we want to in the svg alter the path fill and we can do that in css which is pretty awesome so if you go down to social a so in the a tag it's going to be svg path that's going to be the element social a cover i could nest it under the a element but okay maybe i'll do that under the a hover svg element and then the path element is going to have fill of the green color lime green and then we also want to add its transition so it's a little bit more nice looking hopefully this works phil and then how fast we want to be maybe 150 milliseconds he's in out oh hey very nice cool so we were able to add the transition and the hover fill color for these social icons we want to do the same thing for these text um links as well that's going to be in the footer links a so footer links a hover color lime green i think it was and then of course we're doing the same thing so transition color 150 milliseconds ease in out oops okay there we go nice and the last thing we want to do is this button hover state and you can see it's losing opacity when you hover over it and that's because when i first coded this button it was just on a white background so i could simply reduce the opacity and make it sort of look like there's a white overlay obviously it doesn't work with a dark background so i'm going to have to build a semi-transparent white overlay over this over the linear gradient color so i think i can do that with a pseudo element so let's just sort of try so in our global sas file going down to the button styles so right now the opacity thing i'm i'm just going to comment that out because it's not really working for us and i'm going to have to add a pseudo element so let's just try the before and content is blank so it shows up um you have to have a content property set for your before and after elements then i'll say background color i just do background since it's using a linear gradient um i think background is actually linear grains actually apply to the image if i'm not mistaken background image oh let me just see if that's correct really quick yeah so yeah background image and unfortunately background image does not transition nicely so we'll we might have some issues when we do this but okay going back here so we're making an overlay um i'm going to have to position this absolutely i think because we want it to be on top of the rest of the button right zero and this is just to make it go to you know all the different edges and because it's supposed to absolute i see to make sure the parent is positioned relative which it is that's good and i'll make sure the position absolute child will sort of remain inside the parent which is relative then background um color and because we want to eat rg we want it to be rgba so it will be semi-transparent so white is 255 255 255. and transparency let's just say 0.25 we don't want to go full white otherwise you won't be able to read the text okay now let's just see let's see how that looks and i'm not it's not attached to hover state right now i just kind of built it to sort of test and see how it'll look oh that looks it looks pretty close to what we had before actually um so let's set opacity so passing zero it won't show up and then it'll show up when we add when we get rid of the opacity zero so i'm going to use that for the hover state this actually was a pretty easy solution i thought it was going to be a bit harder than that so by default we'll set this opacity to zero and then on the hover state we'll set opacity to one so we want to transition that so it's nice and smooth we use 150 milliseconds like the other hover state speeds then on hover um hover on the parent we're going to make the before element opacity one hey not bad not too shabby okay so i think we got our hover states pretty good let's just double check and make sure the top one works too oh yeah nice sweet so let's just check one more time see how this looks on tablet and mobile good let's just use the emulator so it's easier to see so here's mobile looks pretty good and then ipad i think that's okay on tablet if you wanted to you could also make this like maybe two columns on tablet but i'm just going to stick with the one column because i think that's fine and it's at the bottom anyway so it's not like it's blocking it's like people have to scroll past it cool so i think we can actually consider this whole web page complete and that's it for building this landing page template if you made it all the way through congratulations and let us know down in the comments what you thought of this video and as always thanks for watching and keep on coding\n"