Build a Responsive Website with Animations | HTML 5 and CSS 3 Tutorial

hello world Hulya here in in today's video we're going to be building this awesome responsive website the really cool thing about it is that we will learn how to use keyframes animations to create an animation just like the one you see right here we will also be using an animate on scroll library called scroll reveal to trigger these animations you see here as soon as we get to each individual section also if this website looks familiar you feel like you've seen it before then you probably have it's what I based off my squeeze tutorial a while back which is a design by George ol arrow from dribble comm and if you ask me my build looks almost exactly the same if not the same as you can see right here except for the footer which looks different but other than that it looks practically the same if I go into the inspector and then responsive view you'll see that this website is fully responsive as you can see right here so if you guys want to see more videos like this one please consider subscribing and turning on bow notifications I post videos like this one every Sunday if you have any questions leave them in the comments down below and if you enjoyed the video and found it useful please give it a like and share with your friends also be sure to follow me on Instagram so that you can keep up with weekly channel updates I also have a patreon account which you can use to support the channel you can also get extra perks such as the source code just for being a patreon now let's get right into it [Music] so for this particular project we only need a couple things the first one is going to be the font awesome CDN because we will be using several icons and we also need the scroll reveal CDN which is the JavaScript library that we will use to trigger the animations on scroll on the sidebar I also have an images folder with several images but as usual if you guys want to follow along with me I will be placing a link to a github repo in the description below there you can find the starter files that will include everything you see here as well as the stylesheet and the main j/s which are empty except for the stylesheet which I have already done a few things here but for now don't worry about it we'll go over it once we start styling the website now what I'll do is just minimize this so that I can have more space to work with and now open up my file in the browser I'm also going to make this smaller just so that I can have them side-by-side what we want to do now is go into the body and the first thing we'll do is just open up the header tag the header is going to hold all the information for the navigation including the logo but before we do any of that what I want to do is open up a div with the class of container the container tip is basically just going to hold all of the elements throughout the site that will include the navigation each section and so on this way we can keep the site looking consistent once we create the container div we want to open up the nav tag and we will also assign it a class of nav then in here we want to create a div of the class of menu toggle inside of this div we will have two different icons from front awesome one of them is going to be for the hamburger menu and the other one is going to be an X so that we can close the menu later on with JavaScript so for the hamburger menu we just need to get the eye and apply the class of FAS as well as a secondary class of FA bars and as you can see now once the page loads the hamburger menu appears since the other icon is going to be almost the same we can just copy it and paste it down below and now we can just change bars two times and now we have the icons that we need we can go underneath of the menu toggle div and what we want to do here is open up an anchor tag with the class of logo this anchor tag is going to be for the logo as I mentioned so we also want to make it clickable and what happens when we click it well we want it to go back to the index that HTML then inside of the anchor tag I want to place an image this is going to be the local image so we're going to go into the images folder and we want to find the image with the name of logo - Rosa and as of right now you can't see it but that's because it's blending in with the background but it's right here as you can see now what we want to do is create the basic structure for the navigation that will be a ul with the class of nav list inside of this UL we will have several list items the list item will have the class of nav item then inside of it we're going to have another list of not a list item but an anchor tag with a class of nav link yeah for now I'll just say that it's not going anywhere we're going to keep reusing this over and over again so what we want to do now is just copy this li and now since this one is going to be for home I can just go back and again make sure that the H ref points to the index that HTML and then we can just say that the text inside of it is going to be home now that we have that we can go underneath of this ally right here and we can paste another one this one will be for the menu then we have to do the same thing several times after the menu you can say reservations after reservations we can say muse then shop and we need one more and this one will be for contact so this is basically the basic structure of our navigation what we want to do now is just go right here and make a comment that lets us know that this is where the header ends so now underneath of this comment we want to open up a section tag with the class of hero we also want to apply the ID of hero to this section as well and the reason for that is because at the footer we're going to have a little arrow that is going to be animated pointing up so that when we click it it's going to send us all the way back to the top of the page and we will use this ID right here to match that arrow with the section again what we want to do is just keep the site consistent so we will be placing another div in here with the class of container now inside of the container I want to open up in h2 with the class of sub-headline instead of this headline I'm going to also have a span and the span will have the class of first letter and that actually reminds me that there's a pseudo element that we can use called first letter but for the time being since our you did it this way we'll just keep it as it is so what we want to do here is just place the first letter inside of the span and it's going to say welcome now we want to go underneath of the h2 and we want to type in an h1 with the class of headline this headline will be the name of the restaurant which is the rosa then what we want to do now is just create a div with the class of headline description instead of this div we want to have another div with the class of separator and the reason why I'm doing this is because I'm going to be applying flexbox to this div so that I can align my lines that you saw from the demo as well as the asterisk right in the middle both of the x-axis and the y-axis so the next step is just to come have another div this time this one will have the class of line as well as a secondary class of line left what we want to do now is copy this because we will need it for the next line although before we do that I will open up a div with a class of asterisk and in here we want to have a foreign awesome icon with the class of FAS and then the secondary class of FA asterisk and as you can see now we get the icon so underneath of this did we want to paste this other line and as opposed to having another line left we want to say that it's lime right now we want to go underneath of the separator Dib and we want to open up another div and this one will have the class of single animation the reason for that is because the text that I'll be placing in here it's going to have the same animation as the button so as opposed to applying the animation on both of them I can just say that I can group them together in this inside of this div and then I can just apply the animation to this div instead and both of them will have it so the next step is that it's going to be nh5 and it's going to say ready to be opened and then underneath the ph5 we want to have a button in this case we will use an anchor tag to create it so the anchor tag will have the class of BTN as well as a secondary class of CTA BTN the reason for that is because since we have multiple buttons throughout the website we want to apply certain styles that they all share to this BTN class so that we can keep reusing them and then this one can just be a hash since it doesn't really go anywhere so now that we did the header as well as the hero let's not forget to add a comment hero ends now that we have that we're going to go into the CSS and we can style the hero section as well as the header so as you can see I'm importing some funds from google fonts and these are the ones that we will be using throughout the site then I'm doing a basic reset on the margin and padding and I'm setting the box sizing to border box and this is going to make our life a lot easier when it comes to calculating the padding's and all that stuff later on then if you've never seen this before this is basically how you declare CSS variables you usually column and then the root and refers to the document and then how people normally name their variables is that they use two dashes and then followed by whatever it is that you want to name it so for example right here I have a variable - - main font which is set to source Sam's Pro and has a fallback of sans-serif just in case that this font is not available then this will take over the same thing for my secondary font and my body font then I have a main font color so again right here I'm just using the hex value for that particular color as well as the rest of them you could sit with height and all that sort of stuff as well when it came to variables so why would you use them well let's say that you're using these fonts right here throughout the entire site and let's say that later on you decided that you want a different font so I supposed to basically going through all the CSS and replacing every single instance of whatever font it was that you used if you used a variable you can simply just change it right here and it will change everywhere that you used it so that's why you should use variables now we can go ahead and select the HTML document and here is a demonstration on how you use CSS variables so in this case I'll set my font family and - this is going to be for the body font so to use the variable you just say far and then percent parentheses and then inside of here you use the variable name in this case it's going to be body font then I'm setting my font size to 10 pixels and the reason for that is because I'm going to be using brems which is relative to the root of the document which is the HTML so it just scales a lot better when it comes to responsive design and again it makes everything manageable so next what I want to do is just set a color again I'm going to use a variable and this one will be the body font color finally what I want to do now is set my school behavior to smooth and what this is doing is basically that once we get to the footer and we click that little arrow that's going to send us all the way back up I'm supposed to jump into that spot it's going to animate it and make it smooth so it saves us a lot of time because normally people would do this with JavaScript so now we can just do it with one simple line of CSS and let me just scroll this down a bit so that we have some more room the next step is to select each section and what I want to do is just apply some padding so the padding top and bottom is going to be set to 3.9 RAM and this is going to be on the top and bottom and then 0 left and right underneath of the section what I want to do is target all of my images so I'll use the image tags and then I'll say that the width is going to be 100% and then I'll also set a max width to 100% this will make sure that even if the image is too big for the section it's not going to overflow its parent then I want to select all of my anchor tags and I'll say that the text decoration will be set to none finally I'll select my P tags and I'll give it a font size of 1.6 R M what I want to do now is style my container so the container is going to have a width of 100% but it's also going to have a max width of 100 in 22.5 rank this means that the the container is only going to be it's only going to be two hundred one thousand two 25 pixels as far as the width but once we get under this particular pixel rate this will take over so it's going to be taking 100% of the available width something else that we want to do here is make sure that we Center the container right in the middle so for that we can do a margin of zero top and bottom and then Auto for left and right and what we can do now is go ahead and say that we want to do a padding left and right and that will be one point actually two point four Ram and that's going to be pretty much it for the container what we want to do next is select I believe the header so what we want to do now again is just create another comment and we will say that the header styles will be here and it's a good practice to use comments because that way if you want to come back to a specific part you can find it a lot easier so what we want to do now is just select the header and we want to give it a width of 100% we also want to give it a position of absolute the reason for that is because I'm going to be using a transparent navigation so I want my header to sit on top of my hero so it's just going to be floating there I also want to make sure that it starts at zero from the top and then zero from the left I'm also going to use AC index of one just to make sure that it stays on top of everything right here next I'm going to be applying a background image which is going to be a linear gradient and it's going to be going to the bottom and then it's going to have an RGB a color of zero zero zero which is black and then a transparency of 0.5 then the second color is just going to be transparent so now we can see everything underneath it or actually on top of it I should say a lot better so now we want to go underneath of the header and we want to select the NAB what we want to do here is just give it a fixed height of 7.2 ramp then we want to say that it will be a display of flex this is just going to help with alignment then align items will set it to Center and we also want to set the justify content to center so this way we can have it perfectly centered in on the X and y-axis as you can see right here now underneath of the nav what we want to do is select the icons so before we do that we just want to style the container for the icons which we named menu toggle we simply just want to give it a color of white then we want to increase the font size and we also want to give it a position of absolute then we want to say that it will be positioned 50 percent from the top and then we want to translate transform translate Y of negative 50% this is just going to make sure that's going to be perfectly centered right here in the header but now what we want to do is set it to a right of let's say 2.5 Bream as you can see right here this is the perfect spot once we do that we want to give it a cursor of pointer so now when we hover over it it gives it the illusion that it's clickable kind of like how an anchor tag works then I'll give I'll give this a C index of a high value such as 1500 just to make sure that it stays on top of everything this will be handy later on when we do the navigation then what I want to do is just hide this X because we don't need it we only want to see these dog this icon right here for now so we can just use the font awesome class for that which is FAA x and then we can just simply say display will be set to none now what we can do is just style the nav list so as far as the nav list what we want to do here is just have a navigation for the mobile style since this is going to be mobile first so first of all we'll get rid of the list style by setting it to none so this just gets rid of the bullet marks once we do that we want to set it to a position of fixed so now it's going to be floating then we're going to give it a type of zero and we want to move it zero to the left what we want to do now is give it a width of 80% and I think I also gave it a height of 100 of the viewport height what I want to do now is just set a background color again I will be using a variable and here I will be using the main font color dark although it assesses for your font I figured it would fit perfectly with the color we needed right here so I'm just using this as the background then I want to give it some padding all around and what I want to say is that the padding will be 4.4 gram then I want to make sure that I make this nav list a flexed container so all the weight display of Flex just so that I can better better aligned all of my content right here since the default behavior reflects is going to be to set them into a column we'll set it back to a row Oh actually to a row is the default behavior we want to set it back down to a column so we can do a flex direction of column and as you can see it's all nice and neat now we want to align it so for that we can just say that we want to justify justified the content space around and this is just going to divide all the space around each individual list item so it's going to be like some space around here some space around here and so on what we want to do now is just give it another C index of a high value but in this case I want this to be behind this hamburger menu all the time so instead I'll just say that the C index will be 1,000 and 250 what's next well we have to hide this but we still have to style the links and we still want to be able to see it so for now what we'll do is just say that the transform translate X and the reason for this is because as opposed to using the left position I will be using translate X which is more efficient when it comes to doing the animations so what I want to do here is just translate X to the negative one hundred percent and as you can see now we can know see it we also want to apply a transition on the transform and a toy to be over 4.5 seconds but remember that we still need to see it so that we can see the styles for the nav items and the links so for now we can just comment this out we'll go underneath of the nav Lisp and what we want to do next is style D actually if you remember from the demo I had a a color right here as a some sort of overlay or underlay I guess you should say which when this is opened the navigation it's going to be a darker color over here so for that we can just simply say that we'll use a pseudo element on the nav the reason for that is because if I do it on the nav list I'm not going to be able to place it behind it so I'm going to do it on the nav instead so for that we can say nav before we want to make sure that we set the content to an empty string because if we don't then it's not going to show up and the position is going to be fixed as well as well then the top will be zero the left will be zero and what we want to do now is again set the width this time to 100 the pupil height actually a viewport width then we want to set the B height to 100 of the viewport height what we want to do now is set a background color this background color is going to be in RGB a that's going to be black and the transparency it's going to be 0.8 and as you can see now we get the nice background here what we want to do now is make sure that we also get a C index so that stays on top of everything else but we still want it to be behind this nav list so we'll just simply do a thousand now we can do an opacity of zero and this is just going to hide it later on we will use JavaScript so that when we open the menu everything will be show will be showing again and even though we can't see it it is still there so that means that we have to scale it down to zero so that it hides a it completely so we can do a transform scale of zero and we will be using an animation here on the opacity so we can say transition opacity and then it's going to be 0.5 seconds the next step will be to actually decide what happens once we click on this hamburger icon so for that we want to create an open class and we will apply this open class through JavaScript to the body element and then once the body element has it it means that the items inside of it it's going to have a specific style so in this case I will select the FAA times and what I want to do is say that I want to show it so I'll do a display of block remember that we initially hit it then I'm going to have another one for the bars and what I want to do is just hide them by setting the display to none so basically when the class of open is applied the X will be shown and then the hamburger menu will be hidden now what I want to do is just make sure that we can reset back the navigation to its initial State so again we can just to open and then we can select the nav list and what we want to do here is just transform translate X by setting it back to zero so again we want to also apply this under before pseudo-element for the nav so we can say open and then nav before and we want to set the opacity right back to one and then the transform scale back to one so now if we scroll up back to the nav list where we commented this out if we go into the HTML and we scroll up to the body and we apply the class of open you'll see that now we get the navigation as well as the overlay for the body right here and then the X is also going to come in and then if I remove it everything is going to go back to normal so now we can just use JavaScript to basically basically create the click event so that's going to be pretty simple what I'll do is basically create a select element function so let me just make a comment and what I want to do here is just say Const select element and we want to set it to a function and this function will take an argument of element actually image make sure use the semicolon so what I want to do here is just return document and then I can say query selector and then I just want to pass in element so basically I will call this function right here and then whatever class or element or ID that I pass in is going to be returned to me so what I'll do now is just create some variables so I'll say Mannie toggler and I guess we could use constant where actually I'll just leave it as - this doesn't really matter at this point so what I want to do here now is select it she is called the Select element function it kind of works like jQuery a little bit how you just select each element that you want so it works in a similar way and in here I just pass in the class of what I want to select which is going to be the menu toggle and then I'll do the same by copying and pasting it down below and now this is going to be for the body and what I want to do here is just grab the body element and now that I have them stored in two variables I can just go ahead and add an event listener to the menu toddler variable and then this is going to be listening for you click event and then in here what we want to say is that I want to select the body and I want to toggle the class list of open so now if I go ahead and refresh this you'll see that once I click on the actually I'll have to actually reload this as well so now when I click on my button all the open classes are being applied so if I make this bigger and I open up the inspector take a look at the body right here so once I click it you'll see that the class of open is going to be applied and if I click it again it's going to be removed which is exactly what we wanted so again since we want to be showing the navigation just for the sake of seeing the styles that we're applying we'll keep it open so the next step is to be going under the open class for the nav before and what we want to do is just style the rest of the navigation in its items so that's going to be pretty simple as well what I want to do is just apply a border bottom to the nav item so I'll select the nav item and I'll say that the border bottom will be two pixels solid and then rgba of white but it's going to be 30% transparent so it's not going to be looking white at all now I'll select the nav link should be linked actually and I want to say that they will be set to display of black then the color is going to be set to white should be color not content then we can say that the text transform is going to be set to uppercase I also want to increase the font size to 1.6 for M then what I want to do is give it some letter spacing of two pixels and usually what will happen is that when you use a letter spacing if it's noticeable enough the item will actually be moved a little bit to the left so what we can do is just give it a margin right of negative two pixels and it's going to move it back and then I'm going to be doing a basic hover effect so I want to do a transition on the color over point five seconds so now I'll do the hover effect and then what we want to do here is just set the color we will be using a variable and the color will be the secondary font color so now when we hover over the item you can see it turns yellow or gold so what we want to do now that we styled the navigation is styled the hero so for now we can just close this again let's make a comment so that we know where we are and let me just make up some more space so that we have more room to work with and the hero is going to be pretty simple so what I want to do is select the hero and I'll give it a width of 100% then I'll give it a height of 100 of the pupil height now I want to select the background and what I want to do is supply a background image so we're going to go into the images folder and then we want to select hero that JPEG or in this case jpg I want to make sure that the position is Center and that it doesn't repeat then I'll do a background size of cover and now I will be using flexbox to align my text right in the middle both on the X and y axis so I'll say that display will be set to flex the line items to Center and as you can see now it's moving and then just the fight content to Center as well so even though it didn't change the reason for that is because it's actually in the middle right here but what we have to do is just text align it to the center so actually we don't even need this all we have to do since it's already display of black is taking all the available width so we can just replace this with text align to Center as you can see right there what we want to do now is style the headline actually before we do the headline we have to do the sub headline so for the font size I will say that it's going to be 0.5 ramp then I want to say that the font family again it's going to be a variable this one is going to be the secondary font and then for the color variable again it's going to be the secondary font color so as you can see it's already looking a lot better what I want to do now is give it a lighter font weight so in this case I'll say 100 even though if you if you did like 300 or 400 it's still the same even 500 because I think it starts at 600 but for the for sake up for the sake of this tutorial we'll just do 100 so what we want to do after that is set a line height of 0.4 and this is just going to bring everything closer as you can see then I also want to have some letter spacing two pixels and then again I'll using margin right or in this case it's not even necessary so what I'll do is just say that actually we will wait until we finished the entire layout before we start animating this right here so for now we'll just keep these styles and then we'll revisit this right here so for the time being let's just go underneath up the sub headline and target the headline what we want to say actually before we do the headline we want to target the first letter because we wanted to make it a little bit bigger than the text right here so a first letter will say that the tech transform will be set to uppercase and we want to make it slightly bigger so the font size here is going to be ten point three Ram so that's a lot better now we can go ahead and style the headline so the headline is going to have a color of white and a font size of three point seven ramp now we want to select actually what we want to do is set a font family and this is going to be a variable for the main font as you can see it looks a lot better now the next step is to text France form to uppercase I want to give it a really bold font wait saw set it to 900 and then the letter spacing can be 0.5 Ram and then I'll give it a margin right look negative 0.5 Ram and as you can see it just moves it back slightly again we will be doing the animations towards the end of the video so we will just revisit everything later on we're going to be using keyframes to create the animations from scratch so make sure you stay till the end of the video so that you can learn a really cool way of animating things on your own now underneath of the headline what we want to do is just die the separator so let's select a separator and remember I mentioned we were going to do to use flexbox twine everything so now everything is right here but actually for a reference what I'll do is just leave it empty for now I'll create the lines so that you can see better how this is working later on so let's just select the line underneath of the key separator and for this we want to set a max width of 8.4 M we want to make sure that it has two height so this is going to be point 25 ram now we want to make sure that we also give it a background color so that we can see it and there it is now what I want to do is give it a position of relative because we will be using a pseudo element later on to create a little arrow right here at the end of each line and what I'll do now is actually go back to the separator and I'll do a display a flex for now you can't see it but once we do a align items of center and then a justify content of Center everything should be visible and I'm not exactly quite sure what it's white it's not showing up let me just make this bigger to see where they are max with position of relative not exactly sure what happened there let's just inspect the HTML document so inside of the separator then we have the asterisk display of flex so we'll just say so there it is the reason was because I said a max width but I also needed to set the width initially so now we can see how flexbox is helping align this a lot better and if I could only get this so now let's just go back down and if I comment these two lines out you'll see that now it's going to be at the starting position and then when I do a line item Center it's gonna make sure it's right in the center and the y-axis and then when I do justify content is going to Center it and the x-axis so now that we have that what we can do is go underneath of the line and we want to select the line left and line right to create a pseudo class actually pseudo-element so line right before line left before we want to set the content and we want to say that the position will be set to absolute we also want to make sure that it has a a border color well not exactly in this situation but the way I will be creating that little triangle at the end is by using borders so we can easily do that by saying border and then we can say it's going to be 0.6 ramp and then it's going to be solid and we want to make it transparent so we're not going to be able to see it but this is where we actually make sure that we can see it by just setting a border border right and put a bottom color so actually border border right color we can set it to white so as you can see now we can start seeing the triangle but since I'm actually applying colors to both of them right here I would rather do them individually since they will have different angles so for now I'll just delete this and actually I'll leave it as it is just so that you guys can see how I'm aligning things so for that we can just do a top actually I'll do it right here after the position:absolute and I'll say that the top will be 50% and now I want to translate it and b y- 50% and as you can see is right it in the middle now and now that we can see them or actually know where they are we can get rid of this right here now what we will do is just select each one of them individually so in this case I'll say in line right and I'll say that the border border right color it's going to be FFF so setting it to white and then what I want and let's make sure that's the pseudo element so what I want to do now is say that the right starting position will be zero so now it's at the end now we can just do the same thing for the left before let's make sure we change it and we can say that the border left color will be wait and then left of zero and now you can see that they're both sitting at the opposite ends and that's how we create those little triangles using borders as opposed to using a width and height and then just like messing around with the values so it makes it a lot easier when you want to create certain shapes now we'll go ahead and select the asterisk we want to increase the font size by setting it to 1.2 mm we want to make sure that the color is going to be consistent with the same color we have right here so we can say it's going to be the secondary font color then I want to apply some margin left and right so it's going to be 1.6 REM and it's just going to create some separation between the lines and the asterisk what I want to do next is go ahead and select actually all of these elements right here are going to have animations but remember that I mentioned that we will be doing them towards the end of the video so for now we'll just worry about styling the rest of the website and then we'll replace it those they need the animations so what we want to do now is select the headline description Phi of h5 so a headline description h5 and what we want to do here is just say that the color is holes are going to be white the font size will be set to 1.4 wrap the font we is going to be really light should be weekd then we want to text transform to uppercase we also want to give it a margin bottom just so that we can separate the button that we will be creating later so margin bottom we can just set it to let's do one point two wrap and then the letter spacing will be set to three pixels and then we can do a margin right of negative three pixels to bring it right back so now we will style the BTN since we will be reusing this class we want to make sure that we place all the styles that this like the particular buttons will share so in this case they will share a display of inline block and a text reuse form of uppercase and they will also share a letter spacing of two pixels and then again let's bring back the text by saying a margin-right of negative two pixels so now what we can do and something that we forgot was to actually place some text inside of the button so here we can just say explore as you can see now the button shown up now we can style this specific button so we can say CTA button or BTN in this case let me make some more room underneath so what we want to do now is just give it a font size of 1.1 Ram I'm also going to give it a background color of white and then some padding top and bottom I'll say point nine Ram and then I'll say 1.8 mm left and right and for the color I'll just use a variable which is going to be body or actually it's already no it's actually not being applied because it's an anchor tag so here I can just see me mean um what's it the body color or the body font color I believe it was the body font color so yeah it actually looks a lot better so what we want to do after that is just give it a border radius of something really subtle so we'll do point for Ram and then we also want to do a hover effect on the background color so we want to do a transition of the background color over point five seconds so CTA BTN and then hover and we'll also do the focus and what we want to do here is just change the color to white and the background color for this we can use a variable again and this one is going to be the secondary font color so now when we hover over it you can see we get the over animation and it's being transitioned so this is going to be pretty much it for this particular hero section as you can see everything is working as it should although it's not responsive yet we'll get to that once we build the mobile version first so what we will do next is go back into well before we do that this is going to be the comment for the discover our story so we will be placing our CSS for that particular section right here so what we will be doing now is going back into the HTML so that we can build out the next section which is going to be discover our story so underneath of the hero ends what we want to do is open up another section and this one will have the class of discover our story again we want to keep this consistent so we want to apply the same container class and what we want to do now is create another div inside of it and they will say restaurant info and the really cool thing is that we will be able to reuse a lot of these classes throughout the site which means that most of the times we can just copy and paste it down below for another particular section and it's going to be exactly the same no additional CSS will be required unless we do something different which is usually not going to be the case now inside of this restaurant info div I want to have another div with the class of restaurant description now I also want to apply some additional classes since we will be needing some space in between certain sections to separate images from text and text from images I'll create a class called padding right and then I will be also applying a class of enemy left in this class we will be using later on to select with JavaScript when we use the scrolling animations so once in here what I want to do is create another div and this is going to hold the basically the headline that we will keep reusing throughout the site so in this case it's going to have a class of global headline and here what we want to do is have another each two actually since we already did something similar we can just go ahead and grab this right here and we can go ahead and paste it down below right here inside of the global headline so this right here the only thing we have to do is just change what it says so in this case we want to say discover and actually it should only be one letter inside of the span Discoverer and then for the h1 we can say that it's going to say our story so something else that we want to do here since we're going to be having a back from a white background and for this and um particular class we used a font color of white so we're not going to be able to see it so what we want to do is apply an additional class and it's going to have the the name of headline dark this way we can make sure that it's dark whenever we are inside of a white background as you see here because right now we can't see it so once we have the headline in place what we can do is just go underneath of the global headline div and which is this one right here and we want to open up a pit tag and we'll just use some dummy text so we'll use lorem ipsum and then underneath of the P tag what we want to do is just have an anchor tag and remember that we want to reuse the BTN class but we won't we also want to apply another BTN class which is going to be for the body so we can say body can BTN and this one will simply just say about us now we want to go underneath of this div right here for the restaurant description as you can see right here and then we want to open up another div and this one will have class of restaurant info IMG and then we want to use an image the image will be in the images folder and it will be our Story one we also want to apply another additional class because we remember that we mentioned that we want to animate these so in this case I'll say that the class the additional class will be the enemy right so we got left and we got right I remember this is just the restaurant info div is just a wrapper for these right here since we will be using flexbox for the alignments so now that we got that section out of the way we can go ahead well before we do that let's create a comment again and say that the discover just cover our story and here what we can say ends so now that we have done that we can go ahead and style this particular section so this is going to be pretty simple as well what we want to do is just select the global headline and apply some styles to it so we'll do that by saying go headline and we want to text-align:center so you can see right here we also want to give it a margin top to create some separation right here marks on top and it's going to be of the same amount of the padding that we used for each section which is 3.9 REM what we want to do now is select the discover our story head of global headline and the reason for that discover sweet global headline is because this one is going to have an even bigger margin top because we want to create more separation between this right here as you can see from the original design so what we want to do is just say that the margin top will be set to 6.9 Ram as you can see it already looks a lot better and let's just make some room the next step is that we want to select the asterisk and actually now that I mentioned it we didn't put it in so let's do that really quick so let's go back to the the section right here and what we want to do is just select the asterisk that we used right here and we just simply want to place it right here underneath of the h1 and now we can see it so remember that I mentioned that we want to select it now let's just say that we want to select the global headline and then we want to select that specific asterisk inside of it and what we want to do here is just change the color to the body color so we can say body font color and we also want to do a margin top and bottom of let's say 2.4 m and then 0 left and right so that's just going to create some separation and then it should be the margin not just margin top right now so now we get some space in between them so remember that I mentioned the headline dark so now we just want to make this one right here dark so let's select the headline dark and the color for this will just be the I believe it was the me font color dark so again let's use that variable as you can see it looks a lot better now and then I want to do a letter spacing of 0.7 remm and then we want to do a margin right of negative point seven wrap and it just moves it back slightly what we want to do now is select the sub headline inside of the global headline and what we want to do here is just apply a smaller letter spacing because I believe the other one was slightly bigger so in this case we just want to do actually we just want to move it slightly a little bit so we'll we're going to do a negative one ram we're actually this should be 0.1 room or in this case it's a really small value so we can just use pixels it's not going to make that much of a difference anyways and then we can just say again that the line height here is going to be point 42 the next step will be to select the restaurant info and we just want to text in line to the center then we want to select the restaurant description and we want to give it a margin bottom to create some separation here between this in the image and it's going to be three run again let me just scroll down to make some more room so now what we want to do is select a paragraph inside of the restaurant description and in here we just want to make sure we give it a line height of 1.6 and then a margin bottom to create some separation between the P tag and the button of let's say 2.4 m now I'll select the body BTN and this one will just have a font size of 1.5 mm then a color will be again a variable and it's going to be the secondary font color and I'll give it a position of relative because I will be creating a pseudo element that will be kind of like a border bottom for it so I also want to give it a hover effect on the color so I'll transition the color and it's going to be over 0.5 seconds and now I'll create the pseudo element for the body BTN so I'll say body BTN before we want to set the content again so that we can see it and we'll do a position of absolute the top will be zero actually we don't want to do it top we want to do it bottom but before we do that we'll do a left of zero and what we want to do after that is saved at the bottom bottom will be negative three pixels and then we want to do a background color just so that we can see it I should have done that from the start and the background color is just going to be the secondary font color what we want to do after that is just do a transition and the transition is going to be on the background color and again it's going to be over 0.5 seconds and it seems like I've messed up somewhere because I can't see it oh that's because we still haven't given it a width or height so width will be 100% and the height will be 2 pixels so now we can actually see it and this is what I meant by the bottom position so initially is going to be on top but if I'd give it a bottom of negative 3 it's just going to push it down a little bit and it's gonna push it even more depending on the value but I find out that 3 looks a lot closer to the original design and now all we have to do is just create a hover effect for them so body BTN hover and I'll say body BTN focus what I want to do here let's just simply change the color and this one will be the mean font color I mean font color dark and then we want to do the same for the before pseudo-element we want to say hover before and what we want to do here oh we also want to do it on focus so body BTN focus before what we want to do here is just change the background color which is going to be the main font dark color we have right here so again let's create a variable well not create but use the variable and now if we hover over it we should see the changes so now we can just go ahead and create a comment for the next section so the next session is going to be called tasteful recipes and what we want to do here well for now we're not gonna do anything because we have to go back into the HTML and this one is going to be pretty simple there's really not much to it so let's scroll back down to the comment we made for the discover our story ends and we want to open up another section and this one will have the class of tasteful recipes and I also want to apply another additional class of between should be in between not between the reason for that is because we're going to have two similar sections and I want to apply the same styles to that particular section and the other one so I have an additional class of between again we want to have a container and here we can just reuse the global headline that we created before so right here we can just go ahead and grab all of this and we want to go ahead and paste it over here but before we do that there's going to be some issues with the animations that we will apply later on so in this case what we want to do is just wrap them up in individual divs so we don't need the asterisk so for now let's just get rid of it and right here on top of the sub headline but still inside of the global headline what we want to do is just create a div with a class of animate top and now we want to grab the h2 and place it in there now underneath of enemy top we want to create another div with the class of animate bottom and what we can do now is just grab this h1 right here and we can paste it in here and this is going to be pretty much it for this between section so again let's comment let's make a comment that says tasteful recipe recipes ends and we can go ahead and go back into the CSS and actually before we go and do that let's make sure we change the text so here it's going to be a tea and then it's going to say taste full recipes and now we can just go ahead go ahead and go back to the CSS again this is also going to be pretty simple not that much CSS so what we want to do is set a background image right here so let's select D tasteful recipes section we want to apply a background again we have to use go in into the images folder and what we want to grab is the tasteful recipes jpg and then position will be Center set to no-repeat and then the background size will be set to cover now remember that the between section is going to have similar properties what I want to do is just select be between and I want to give it a min height and it's going to be 65 of the viewport height so now you can see that it's bigger but we still have to Center this text right in the middle so for that we can just go ahead and use flexbox and then we can just do aligned items of center and that's pretty much all there is to it now we can go ahead and make a comment for the next section which is going to be called discover our menu now that we have that comment we can go ahead and go back to the HTML so that we can continue to to layout the mark-up for the next section so underneath of this comment let's just make some room right down here what I want to do is open up another section and this one will have the class of discover our menu again we want to reuse the container to keep the consistency going and what we want to do here is just reuse some of the classes that we used before so in this case I'll say that the restaurant we want to grab the restaurant info and while we what you're doing here is just create a div with the class of image group and here we also want to play some images but before we do that we also want to reuse the padding right and then we also want to use the enemy classes so animate left and now one here we want to have four images even though we still haven't created this class right here or the styles for it but we will later on and the reason for that is because right now it doesn't matter since this is mobile first but once we get into the responsive view and we make it from I look better for larger screens we will be creating the styles for this padding right class now back to the images we go into the images folder and we want to grab menu group one now we can just go ahead and copy this one and paste it three more times and shouldn't be short copied the whole thing this one will be too this one will be three and this one will be four now underneath of the images what I want to do right here is say that I want to reuse my restaurant description class again so let's open up a div with the class of restaurant description and we also want to apply an additional class which is going to be for the animations of enemy right and then here we just want to use again the global headline so let's make sure that we grab that from the first section since this one uses the asterisk we can just grab the whole thing and we don't have to cut it out like we did before so we're gonna place it in there and what we have to do now is just modify the text inside of it so what we can say here is discover menu let's just scroll back down so that we can see what's going on everything looks good and then underneath of the headline what we want to do is just open up ap tag although now I realize that we could have copied the whole thing but I guess it doesn't matter we can just do some lorem again and then underneath of the P tag we can just say again we want an anchor tag for the button and then it's going to be a body BTN as well and it's not gonna go anywhere and it will say view the full menu and that's going to be pretty much it for this particular section so again let's go back down here and let's say discover our menu ends and now we can go ahead and style this particular section so let's go back into the CSS and the first thing we have to do here is actually yeah the first thing I'll do is just style the t's images right here so for that that's going to be pretty simple we're going to be using CSS grid to align them so we'll give it a display of grid and what we want to do here is just use a grid template columns and we want to use the repeat function so we want two columns one fraction each so we can say two so now we're going to have two and then they're going to take up one fraction of the available space so now you can see that they're all side-by-side now I want to make sure that I also give it some space in between so for that we can just use a grid gap and for that we can do 1.5 ramp as you can see it looks a lot better the next step for us is going to be to actually select the discover our menu restaurant description because we want to select it to give us some specific styles so what we want to do is say discover our menu and then we want to find the restaurant description inside of it and we want to give it a padding top of let's say 3 Bream and then a margin bottom of 0 what we want to do next is select the actually I think that's going to be pretty much it for this section what we want to do next is actually create a comment for the next section which is going to be the perfect blend so what we can do here see the perfect everything is looking really good so the next section is going to be the perfect blend as I mentioned and it's going to be an in-between section which means that we can just grab this entire section right here and just slightly modify the text so underneath of the comment we can say that this one will be the perfect blend and I believe that's what I called it so actually not the perfect line I called it perfect blend and what I want to do here again is going to be just modifying this the perfect and then this one can say blend so now should be perfect now we can go go back to the CSS and what we can do is say that we want to make sure we give it the background image so let's just select the perfect blend and we're going to go set the background again inside the images folder and then perfect blend set it to no-repeat Center and then the background size is going to be set to cover since we already did a lot of the styles for the other section initially we don't really need to do anything else right here except that we forgot to change this will not actually change it but remove the dark class which is going to make this light again so let's go back into the HTML really quick and let's find the class right here we assessed on the dark right here headline dark and we want to remove it and we also want to remove it from the other between section and now you see that the text is visible let's go back down and before we forget let's say that this is where the perfect planet ends now let's go back to the styles that's the SS and what we want to do here is basically actually the great thing is that we don't have to do anything else the only thing we have to do is just basically style well not style but create the mark-up for the final section which is going to be for the I believe I called it I'm not exactly sure to be honest let me see yeah I think I called it Oh killing their culinary delight so let's go back to the HTML well I'm already there so we're going to have a section with the class of culinary culinary delight and the cool thing again is that we can basically just reuse the first initial section that we had before so for that we can just go ahead and scroll all the way back up to this the first one that we created and yeah this one looks fine let's just grab it and what we can do is just paste it down below and in here should be culinary so now what we have to do is just modify this so here for the discover I can say culinary andreen let's remember that it's actually only the first letter and then this can say delight what we can say now is that the button will read make a reservation and then here we can have two images so in this case we actually want to get rid of this animate right class because we don't need it we're going to be applying different animations to the images we're going to replace it in here so image one is going to be inside the images folder the light one and what we want to do here is just apply a class of animate top now we can just go ahead and copy this paste it down below and we can change top to bottom and then this one to two and that's basically all there is for the main sections now what we can do is just go ahead and style the footer actually before we style the footer we actually have to work with the footer to be honest and image group oh now it makes sense why this wasn't working right it's because the we need the styles for the grid so remember that we have to change this particular class to image group and now you see that everything works beautifully so now let's create the comment that says culinary the light ends and we can start working on the footer itself the footer is going to be pretty similar to the rest of the sections with some changes so let's just open up the footer tag and in here we want to have a container again let's make sure we keep everything consistent so inside of this container I want to have a back to the top arrow pointing up so what I'll say is that I want a div with a class of back to top and in here I will just have an anchor tag and remember that we use the ID of hero and then I just want to use an icon which is going to be FAs and the secondary class of FA a chevron and we made a mistake there and now we should see our little icon at the bottom now we'll go underneath of the div for the icon and we want to create a div with a class of footer content inside of the footer content what we want to have is another div with the class of footer content about and we also want to apply a secondary class of animate up and here we can just have an h4 and it will read about Rosa and then here we can also reuse the asterisk let's see how that's looking looks right and then we can just create some dummy text again what we want to do now is go underneath of the footer content about right here let's just give ourselves some more room and we want to create a div with the class of footer content divider and we will use flexbox for alignment here and let's not forget to add a class of animate bottom as well and this one is going to be pretty simple we just want to place the social media icons and deform so inside of this I'll have a div with a class of social media and then it's just going to say it's going to have an h4 that says follow long and then I'll have a ul with the class of social icons so it's going to have an ally and then an anchor tag the first icon is going to have the class of FA B and the additional class of FA Twitter unless you can see down here we get the little bird now we can just go ahead and paste it down below four more times and now we can just slightly modify the icon names so the second one is going to be FA a Facebook square the third one will be Pinterest and the fourth one will be LinkedIn - in and finally this one will be TripAdvisor so let's see if all the icons are shown up in the art now we want to go under the social media social menu where actually it would make a lot more sense if I just call this social media to be honest I think that's initially what I thought and then for some reason I named it social menu so underneath of the social media div what we want to do now is create another div with the class of newsletter container this one will have an H for as well and it will say news letter then in here we can just have a forum with the class of newsletter forum this should be same form not from inside of this forum we're just going to have an input with the class of newsletter input and then we can just have a placeholder here as well placeholder' can say your email address and then underneath of the input we want to have a button the button will have the class of newsletter BTN and then it will be of type submit' and inside of a button I want to have an icon so it's going to be an envelope so it's going to have the class of FA yes in the class of FA envelope and this is going to be pretty much it for the HTML markup now the only thing left is to style this footer then make everything responsive and finally do the animations so let's jump right back into the CSS and what we want to do here is select the footer before we do that let's create a comment the footer is going to have a patty 7.9 a background color of 12/12/12 a color of white for the text text some line to the center and a position of relative this will come in handy when we create the arrow pointing up well it's already there but the background for it next step I want to select the back to top div and I'll give it a width of 7 Ram a height of 7 rim and then the background color the same as the footer then a position of absolute once you give the top of negative 3 ramp what I want to do now is say left of 50% and then a transform translate X of negative 50% and now I want to give it a border radius of 50% to make it round what I want to do now is select the icon inside of it and this will just have a display of black it color of white so that we can see it we also want to increase the font size and now we want to give it some padding all around of to ram so I played around with these values and that's why it's lining up almost right in the middle which is where I want it so now we can go ahead and select the footer' content and this will come in handy for now I'll leave it as it is just so that I can show you guys what I'm referring to but I'll just give it an overflow of hidden for now and now comment this out welcome back to it later when we do the animations the next step is to select the footer content h4 and I'll give it a font size of 1.9 write the text transform to uppercase then the font weight to 100 letter spacing of 3 pixels and then we'll bring it right back put the margin actually we'll just leave it as it is we'll just do a margin bottom instead to create some separation now we want to select the footer content asterisk and we want to give it a margin top and bottom of 2.5 mm and 0 left and right what we want to do now is select the footer' content about and here we just want to give us so much and bottom and that's going to be five point for rent and that's just going to create some additional separation right here what we want to do next is style the P tag inside of the footer content up out and here we can just do a line height of two just to create some separation now I want to select the social social icons and I'll just say that the list style will be none to get rid of those bullet points I also want to give it a margin bottom of let's say I'll do five point four M create some more separation right here and keep it consistent with the separation we have right here which is the same amount what I want to do now is make it a flexed container so do a display a flex and then I want to justify my content to the center to align it in the middle in the wire in the x-axis so now I want to select the icons inside of it so social icons I and I'll increase the font size to 2 R M then the color I'll set it to white and then I'll say that the padding is going to be it's two point eight round top and bottom and then to R M left and right the opacity is going to be toned down to half so let's do point five and I want to do a hover effect here so I'll do a transition under color over point five seconds and then social icons I hover let's also do a focus and what we can do here is just basically use a variable for the color and that's just going to be the main the secondary font color actually and now if you hover over the icons we get the nice hover effect so the next thing we have to do now is select the newsletter form and we'll just give it a width of 100% in a position of relative since we're going to be positioning some stuff absolutely inside of it and I want to give it a display of flex and now I want to justified my content to the center then I'll select the input newsletter input that's going to have you with 100% as well but it's going to have a max width of 25 RAM and then I'll give it some padding all around of one room followed by a small border radius of 0.4 Ram then I'll select the newsletter BTN and this one is just going to have a background color of transparent then a border of none and the color will be dummy font color dark so for that we can just use the variable cursor I'm going to set it to pointer then a font size of 1.6 for M and then I'll do a padding top and bottom of one pixel and then point six Ram left and right and now I can position it absolutely it's going to be 50% from the top then transform translate Y negative 50% to make sure it stays red in the middle and what I want to do now is just move it away so that's going to be pretty simple we can just do a transform translate actually we don't even have to do that we can just simply use margins here so let's do a margin of left of 10.5 wrap as you can see the button is now where we want it and that's going to be pretty much it as far as the mobile version goes so as you can see everything is looking nice the next step now is for us to make it responsive so for that we'll just create some media queries so let's create another comment and the breakpoint that I chose we're only going to have one breakpoint it's going to be 900 pixels so we can say at media screen and since this is a mobile first approach we use min with I supposed to using max with and then 900 pixels we want to do some some extra padding on the section so what we had to do here is just increase it to 7.9 ram and let's let me actually make this bigger since we are only doing CSS we don't really need a lot of room so that looks a lot better and now I'll select the menu toddler because we're going to be working on the header again so menu toddler or toggle I should say will have a display of none so that we can hide it next I want to select the nav and now reset the center position for the justified content - space between because I want some separation between my logo and the nav items that I'm going to have here now I want to do a lot of resets on my nav list so the first one being the position remember we had it at fixed we want to set it back to initial so now we see it floating right here then the width we want to set that to initial as well the height will be set to initial as well because we don't want one then we want to set the background color to transparent and we want to get rid of the padding so let's set it back to zero justify content will be set to initial as well and then the Flex direction remember we set it back to a column we want to set it back to row and then we can do a transform of initial as well remember we want to set reset all those values and then we don't really have a transition here anymore so we can just set the transition to initial as well and that's basically it as far as the navigation and well the nav list I should say because now we have to target the nav items so underneath of the nav list we can say that the nav items is going to have a margin while we can say see right here and then left to right we can do two point for rent and then a border bottom will be set to zero well we can just say to none for the bar out of the boil shouldn't be bottom it should be border what we can do now is select the last child for the nav item so that we can get rid of the extra margin that we applied right here so this should be like for the margin in general not margin left so there's like if we inspect the element right here let me just make this smaller you'll see that we have some extra bit of margin right right here so we want to get rid of it so for that we can just select again the last child for the nav item nav item last child and we want to say margin right and set it to zero so as you can see now it moved over the next step will be for us to control the font size of the nav link so nav link you want to say that the font size will be in 1.2 actually 1.3 mm and now we want to create a class for the underline we had right here for the active state of whichever linked or page was active at the time so for that will create a class with the class will create a class of active and it's going to have a position of relative so now what we have to do is just go back to the HTML and we want to find the net so what we want to do here is select the first anchor tag right here that says home and we want to apply a class of active now let's go back into the style sheet and we want to say that the active before and then it's going to have a position of absolute a width of 100% a height of 2 pixels and then a background color of white now all we have to do is just move it down so let's make sure first that it stays always at the left or it starts from 0 to the left and then bottom we can do negative 3 pixels and it's right where we want it so that's going to be pretty much it for that the next step will be for us to make the sub-headline bigger and we can just increase the font size to 10 ramp we have to do the same thing for the first letter this one will be 12.2 ram then the headline and the font size here will be 4.7 ram and then the letter spacing we can do pointy now we have to make the lines bigger so line the max width will be set to 11 point for ram now as far as the restaurant info for this section right here we want to make sure it reflects it so that our items are side-by-side so here we can just simply say restaurant info we can give it a display of flex and now they're side by side what we want to do now is some line items to the center so now you can see that they're being centered on the y-axis now I want to better control all the divs inside of it so that they're equal um sighs so what I can do here is just select again my restaurant info and then say that I want to select all the dips directly inside of it and I want to say that they're going to flex to have a flex of one and as you can see now they both are the same size and if you remembered that padding right class this is where I'll create it so padding right what I want to do here is just apply some padding right and it's going to be seven ramp as you can see we get some nice separation what we have to do next is select the footer content and this right here is going to have a max width of seventy seven point five REM let me actually scroll all the way back down so that you guys can see what's going on and see that's the nice thing of reusing classes because I changed it for one and then since I'm reusing it throughout the site you see that it changes everywhere so what I want to do now is just make sure that I Center this container in the middle so I'll do a margin of auto and you'll see it move over after selecting the footer content what I want to do now is select the footer content about and in here I want to set another maxed with and what I want to say here is that it's going to be 50 1.3 gram and since we had some margins before that I don't want to mess up I'll say that the margin here up top will be zero the margin left and right will stay Auto but I want to apply some margin bottom well I want the margin bottom to stay the same as we had it before so let's make sure we still keep the 5.4 gram and now we can just go ahead and select the divider so further content divider we want to make it a flexed container so that we can have the follow along a newsletter side-by-side so we can say display of flex and then justify content center to have them right here actually I don't want Center I want space between this way we can have some separation between them as you can see right here then I'll select the social media as well as the newsletter form they will have similar styles or in this case the same ones so might as well apply them both at the same time the max width will be set to points up to twenty seven point three REM and then I'll do a margin top and bottom of zero and one left and right just so that I can create some separation between them if they ever get too close right here although that shouldn't be the case because it's going back to one column as you can see right here so let's make this bigger again what I want to do now is basically turn on the opacity to one on these social icons so social icons I I'll see the opacity will be set to one and now we want to move over the button so that it still stays inside of the input so newsletter BTN March and left won't be set to seven point five ramp and as you can see it's back inside of it and yeah guys that's going to be pretty much it for the website itself as far as making it responsive so if we go back into the inspector you'll see that all the content is nice on a mobile device and then it's going to adjust once we make it bigger as you can see right here so the only thing left is to create the animations and that's going to be the really cool part because the animations for the hero we're going to be doing done from scratch so let me just make this bigger right here and then we'll just make a comment underneath of a media queries animations so the first animation we're going to be creating is going to be for this feeding up so we can do add keyframes and we can name this feed up and we want to say that from 0% we want to transform translate why for RAM and then at 100% we want to give it an opacity of let's say 1 because we want to turn off the opacity later on once we revisit these elements and then we want to make sure that the value goes back to zero so let's go back to the subheading right here and let's test it out see if we can find it so we have right here sub-headline what we can do now is set the opacity to zero we can't see it and now we want to do animation and then feed up and we want to do it let's say over point five seconds and we want to save warts and let me see where I messed up so the animation see so bad line fade up before its opacity animation delay so oh it's because we never reset it dis to zero so now if we go back up right here to the zero and we refresh it you'll see that I'll feed in what we want to do now is set a delay so here for the sub sub-headline we say animation delay again it's going to be over point five seconds and now you'll see some slight delay and then it comes in now we have to move up to the second animation which is going to be for the main headline so that's going to be pretty simple as well let's just find it so what we what we want to do here is say scaling animation so let's just copy this and then we just want to switch in the name we want to say scale let's just say actually let's just cause scale leave it as it is and what we want to do here is just say that we want to target the transform scale here we want to say the initial is going to be 2 and then we want to set it back to 1 and we want to keep this opacity the same because later on when we go back up now we will hide this right here so headline again we can just copy this since it's going to be exactly the same I don't think this one this one doesn't have a delay because it's going to be the first one and then the link is going to be scale so let's see it's looking a lot better but as you can see now we get some issue here with overflow so we get those horizontal scroll lines and the reason for that is because it's display:block so it's already taking 100% of the available width and when we scale it it gets even bigger so that's why we get that flickering right there so an easy fix for that is just to go up and let's make a rule that targets the body so body we want to say overflow X and we want to set it to hidden so now once we refresh you'll see that we no longer get those horizontal bars the next step will be to the enemy the bars and the asterisks so let's go all the way back now let's see and in here let's just copy this what we want to do here let's just say that can't remember what I called this one but for the sake let's just say grow and what we want to do here is say that from 0% the width will be 0 and then the width will be 100% so as far as the grow we can say that that's going to be applied to the lines see if we can find them right here and that's going to be pretty simple we can just say again that the animation it's going to be grow and let's say it's going to last two seconds forwards and then I want to set a delay right here and it's going to be 0.9 seconds so let's see how that looks and we forgot to hide it so that's at the opacity to zero and that looks a lot better now as you can see here we have an issue with the arrows they don't look as natural so what I want them to do is that the lines will enemy in and then the arrows will appear so again let's go all the way back down and what oh actually now that I mentioned now that I mentioned that I think I can just apply the same animation right here since it's going to be pretty similar what I can do though is just only make it last point five seconds and then I can just increase the delay let's say to one point two seconds and let's see how that looks also let's make sure that we hide it by sending the opacity to zero and that works a lot better as you can see the lines will animate then followed by the triangles so what we have to do now is create the fading down animation that will animate this text right here as well as the button so let's scroll all the way back down and we can just simply call that one I think I went down too far we can just simply call that one feed down and actually it would have been more practical just to copy the first one since it's going to be pretty similar so feed up we want to copy it and say it's going to be called fade down and what I want this to do is basically from 0% transform translate y- since it's feeding down 1 and then it's going to end up at the zero position and let's go back up oops and what we want to do now is just grab the animation we had before right here and then we want to apply it to the C separator lines or is it actually I called it right here so if we go back into the HTML and we find it single animation so now we will target this particular div I'm not exactly sure if I target it before or if I left it as it was but it doesn't seem like I did so right here I'll say single animation I'll create a rule for it and I went to make sure I hide it opacity did it 2-0 no feed now and I believe that I had a different delay for it yeah cuz right now it's like everything is just loading way too quickly so as far as the delay we can just do something like I don't know let's do 1.5 seconds I think that works a lot better so we'll just go with that yeah it looks pretty good so we'll keep it as it is the final animation that I still haven't done is the spinning for the asterisk so that's going to be pretty simple to be honest we can just create a keyframe animation called spin so let's go all the way back down again to the animations and actually this one was done for the this area right here so we'll just keep it simple and now place it under it so I'll call this one spin in what I want to do here let's see your percent is transform rotate and then I just want to say that I want to rotate it at 0% well zero and then I want to transform rotate at 100% let's make sure that we keep the opacity at one because it's really important and then we want to do a whole 360 so we'll do negative 360 decrease and then to apply it we just go back to the asterisk and then we can just copy this and just modify it let's say that the opacity here will be zero remember that we want to hide it paste it here and we can say spin it's going to be over point five seconds and then the delay will do point seven as you can see spins and everything else right here enemies so that already looks pretty damn good the one final animation here that I want to do with the keyframes is going to be here for this arrow pointing up and that's going to be pretty simple let me just go back down and I'll create one more rule and let me just call this up and this will basically just be an opacity of zero then here we can just add another one at 50% and this one will be an opacity of one and then finally at 100% we want to set it back down to zero and we want to translate the y- one ramp and then we have to apply this to the div with the class of I believe it was like back to the top I'm not exactly sure should be right here the footer so yeah back to the top and what we want to do here actually not back to the top but back to the top icon so let's go down a little bit more maybe we want to say animation up it's going to be over point well it's going to last two seconds and this time I want it to be infinite so as you can see it goes up face out face back in and it goes up I remember if I click it it's gonna take us back to the hero section so that's everything there is to it as far as the keyframes animations now we have to do the animation on scroll which is going to be pretty cool so let's go right back into the main J s and what we want to do here is just create an instance on the window of the scroll reveal so let's create a comment so the first thing we have to do is say that we want to attach to it attach it to the window on scroll so we want to say window that s our and then we want to set it equal to scroll reveal and let's make sure that this is also in uppercase s scroll reveal and now that we have that we can access the scroll reveal by just simply using s R so what we want to do here is say s r and we want to say reveal and then what we want to do next is in here we want to select the element that we want to animate so in this case on we also should use a comma here so in here we want to select the item with the class or items with the classes of you animate left and I'll be placing a link to the documentation for scroll reveal just so that you guys can have it as a reference and it's not in here that I should be placing the comma it's actually after this right here and this let me just get rid of it actually I probably confused you guys so let me just do it right over remember once we get the we attach PSR we want to grab it and say reveal and then we want to say that we want to grab the elements with the classes of enemy left and now I can do a comma and then some open up some curly braces that's a lot better and we have several things we could do the origin so the origin just means where the animation is coming from so in this case I wanted to come from the left and then I use a comma and then I can say the duration the duration is set in milliseconds so that means that I'm going to be setting it to a thousand milliseconds which equals to one second then the distance so distance just means how far it's traveling from so in this case I'll use 25 ramp finally we have a delay well if the delay is pretty self-explanatory it just means it's like how long should it take before the animation is triggered so in this case I'll do 300 milliseconds and now if i refresh this once I scroll down so right here the enemy left seems like I messed up somewhere let's see window F equals scroll scroll Beale function then scroll review animate left actually I think that the reason for that is because I have to refresh my browser as usual so let's see this time it's still not working calm what's it because I didn't apply the class let me just enemy left to make sure we go back and double-check so for this one headline DeRosa and meat left I'm gonna jazz mage is scrappy sitting here again maybe I messed it up somehow see if the origin is left milli seconds duration distance delay should be working out not exactly surely me actually just double-check right here let's just do another one just to make sure so this one should be for let's say right scroll reveal and then the origin should rate again thousand twenty-five and the late for this one should be so let's now say that I want to be fresh it oh so there it is I guess it wasn't really anything wrong with it I guess it's just like sometimes my browser be acting up when it comes to my local host in the JavaScript takes a while so as you can see now everything is the anime turn on scroll except for the elements that I'm still going to be animating so the next step is going to be targeting the anime top and anime bottom so again let's just base it down as like let's say that animate top and this I can say from top and then this can stay all the same except for the delay which I'll set to 600 and then this will be the exact same thing for bottom and then the origin we said we going we have to switch it to bottom and then the delay and everything else is still going to stay the same so now if we go here and we refresh you know meet bottom so this is not getting the animation maybe I just didn't add it in enemy top so let's go back to the HTML document let's find the footer so animate oh it's because I said animate up when it should have been anime top so now if i refresh it everything is working but as you see this is overflowing the content right here so what we can do is go back to the sections actually the footer content where is it right here remember that I said we wouldn't eat this now you'll see that since the overflow for the content I'm gonna see for the content now you see that since the overflow is being hidden it's it doesn't come into view until later on we also have to apply the overflow of hidden to these sections so let's go back up to the roles right here let's say overflow will be set to pin it so yeah guys that's going to be pretty much it for this particular tutorial I know it was a really long one but I hope you guys found it useful and that you learned tons of new stuff and as you can see everything is working smoothly and then finally we're going to demo it one more time but in responsive view so for example this would be a really small device like an iPhone 5 5 s II so you can see everything is working let me just refresh that so we can see the animations and then right here again everything just looks perfect no matter the size of the screen so yeah guys like I said if you guys found it useful and learned something new make sure you smash that like button and if you're still thinking about subscribing hit the subscribe button so I can't wait to bring you guys more tutorials like this one I'll catch you guys in the next one

Channel: Julio Codes

Views: 288,820

Keywords: responsive website, html tutorial, css tutorial, html css, how to make a website, responsive website using html5 and css3, responsive website tutorial, responsive website html css, build website, build website from scratch, html5, css3, html5 tutorial, css3 tutorial, mobile website, responsive css, media queries, website tutorial, keyframe animation, css keyframes, how to create a website, responsive web design, javascript scroll animation, responsive navigation bar

Id: FZQxPTV3cFk

Length: 150min 43sec (9043 seconds)

Published: Sun Dec 08 2019