Build 30+ Web Projects with HTML, CSS, and JavaScript

1. Introduction: Welcome to the brand new course, where you can learn about how to create modern and beautiful web projects and templates. If you want to develop and customize your portfolio, become an experienced developer and get hired, then this is the right course for you. We'll build together more than 30 different and creative web projects with three core technologies, HTML, CSS, and JavaScript. If you have some basic knowledge of these technologies. And still we have some trouble creating your own web projects. Or if you want to level up your developer and designers close, then you've come to the right place. We created this course in order to give students the best experience in three core technologies and allow them to create the best modern and creative projects. We will build more than 30 different web projects. And they will be full of modern, nice and beautiful effects and decides. We will start with relatively simple projects and we'll go through some advanced ones as well. We can guarantee you that you will master the front end web development. After completing this course. Using this course, you can get the inspirations that will help you to enhance your projects and customize your portfolio. Mastering just these core technologies of trunk and web development. You can create awesome and modern themes and simply get hired. Also, you will have enough knowledge to move on and learn other technologies like sub-problem frameworks and libraries, which nowadays are really popular and highly demanded. The course will be interesting and useful. So I would recommend you to try to get the most out of this course without just copying and pasting the code. If I were in your shoes, I would definitely dream of a course like this. So join us 2. Welcome to the Class: Hello and welcome to the course. I hope that this will be your right course and you will enjoy the projects that we will be building throughout this course. So as you already know, we're going to create more than 30 different, modern and creative where projects are those projects will be built based on three core technologies of front-end web development, HTML, CSS, and JavaScript. I would like to mention one thing. As I said, the projects will be created based on HTML, CSS, and JavaScript. So you should have a basic understanding of those technologies in order to follow the lectures and not to get confused. The projects will be full of different modern techniques and tricks. You will be able to learn about how to create nice and beautiful effects and animations, which then you can use as the inspiration to develop and customize your own portfolio. As I mentioned, we will be building more than 30 projects. They are independent templates, so you don't have to go through them in order. You can build any of the projects you want from the list. It's absolutely up to you. Some of the projects are simple ones, but also you will meet some advanced projects as well. So we included all the levels that the developer needs. Throughout the course, we will build projects like navigations, slideshows, custom checkboxes, 3D cards, and other interesting and creative projects. So I'm sure you will enjoy them. I think you will get a huge practice and experience in front-end web development in which HTML, CSS, and JavaScript are a must. Alright, so let's move on and get started. 3. Setup: Hello and welcome to the course. We're glad that you're here and we hope that you will enjoy the course before we dive deeper and start to create our projects. First of all, we have to prepare our working environment. I'm sure that most of you are already prepared to write the code. If so, then you can feel free to skip this video and jump into the projects right away. But if not, then that's not the problem. Let's go ahead and set up some tools. Throughout this course, we will need two main tools, which are modern web browser and a text editor. As the web browser, I'm going to use mostly Google Chrome. And also in some cases we'll need the help of Mozilla Firefox as well. I'm sure that you already know how to install this web browsers, and I think you all already have them. But anyway, let's see how to download them. In order to get the Google Chrome, we have to go to this URL here and download the web browser. The installation process is quite simple, so I'm not going to go through it. As for the Mozilla Firefox, you have to use this URL and download the web browser from here. Both links will be attached to this lecture. Alright, let's move on and talk about the text editor. We're going to use Visual Studio Code because right now it's one of the best texts editors in the world. Of course, you can feel free and use your favorite text editor. It's up to you, but I recommend to use the VS code. In order to download the VS code, you have to visit this website and get the text editor either for Windows or Mac or Linux. This link will be attached to this lecture as well. The installation process of the visual Studio Code is very simple too, so I'm sure that it won't have any trouble with it. Alright, so once you install both tools that you will be good to go. So let's jump right into the projects 4. Project 1 - 3D Forms: Alright, so it's time to create a new project. In this project we are going to be creating a 3D sign in and sign up forms. And the project is going to be created based on HTML, CSS, and JavaScript. In this video, I'm going to go through the project and describe it. So as you can see, we have here a sign-in form displayed by default with a full-screen background image. At the top left corner of the form, we have the Batson, which is displaying the text. Sign up. If I click it. And then the form will rotate in a 3D environment. And the sign-up form will be displayed. If I click the Sign In button, we will get back the sign-in form here. So you can switch forms with those buttons in 3D space. Okay, so that's it about this project. I hope it will be interesting and you will enjoy it. So let's get started. Alright, so we're ready to start to build the project. I have created a new folder on the desktop called 3D forms, in which I have another folder called images. It includes the background image. Let's go ahead and open this folder in VS Code and then create our working files for HTML, CSS, and JavaScript. I'm going to call the files index.html, then style.css and script.js. Then open the index.html file and create a basic HTML document. For that, I'm going to use amides. We have to place an exclamation mark and then press Tab or answer. So here we have the basic HTML tags. First of all, let's change the title. I'm going to call it 3D forms. And then I'm going to link the CSS and JavaScript files. Let's open the link tag and specify here in the atria first attribute the part of the file. As for the JavaScript file, I'm going to open script tag right above the closing body tag. And then we need to specify the name of the file in the source attribute. Alright, lastly, I'm going to run the project to the browser using one of the VS code package is called Live Server. It allows us to run the project life and make the updates and changes without refreshing the page. Each time. Before we start to write the code, I'm going to place the editor and the browser side-by-side. Alright, let's go ahead and start to create the HTML markup. I'm going to open a div tag, which is going to be the container. Next we need another div tag. It will wrap both forms. So I'm going to assign to the class forms wrapper. This element will consist of two different elements. I mean two different formed elements. The first one is going to be signing form. So let's open the form tag with the class sign-in form. So each form element will include a button, heading and the inputs. Let's open the link tag is going to be the button. Lets you assign to the class Signup, BTN. I used here, sign up because this person will help us navigate to the sign-up form. Alright, Next we need heading. Let's open H2 heading tag with the content sign in. After that, I'm going to insert your input elements. Let's open the div tag, which will be the wrapper, is designed to eat class input wrapper. So overall we will have three different input elements for email, password and submit button. Let's open input tag with a type text and with placeholder attributes, your email. Then I'm going to duplicate this line of code. These input fields will be for the password. So let's change the type attribute, make it password, and also change the value of the placeholder attribute. We need again password. The next input element will be for the submit button. So the type is going to be submitted. We don't need here placeholder attributes. Instead of that, we need value. Sign in. Again, That's it about the first form elements. Let's go ahead and duplicate the entire form and then make some changes. We need here the class name, sign-up form than the button is going to be signing. Also, let's change the content of the heading. We need to sign up. In the case of the sign-up form, we will have five different inputs. The first one is going to be for the name. So we need here your name. And also we will have one input for password confirmation. Let's change here the placeholder Institute confirm password. Then lastly, let's change the value of the Submit button. Use here, sign up. Alright, let's sit regarding HTML markup. Now it's time to customize the project Open the CSS file and first of all, create some defaults and reset styles. I'm going to select every albums using an asterisk. First of all, I'm going to get rid of default margin and padding. Let's go ahead and set both properties to zero. Then I'm going to make box-sizing border-box. Also, I'm going to get rid of default underlying form the link elements. Let's set text, decoration none. And then change the font family. I'm going to use your phone called Arial font group sensory. Throughout this project, we're going to use RAM as measurement unit. Right now, 1 g equals 16 pixels because the font size of the HTML element is equal to 16 pixels. I'm going to convert 1 g to ten pixels. And for that, we have to decrease the font size of the HTML elements. Let's make it 62.5 per cent. Alright, So the elements became smaller. Next I'm going to take care of the container. Let's select it and define its width and height. I'm going to set width to 100%. As for the height, I'm going to make it 100% of the viewport. Therefore, we need here 100 pH. I'm going to set the image as the full-screen background. Before that, I'm going to use linear gradient function because I want to make the background image a little bit darker. Let's use here RGBA value 3177 and the opacity 0.7. As for the second RGBA value is going to be the black color with the opacity 0.7. Next, I'm going to specify the URL of the image. We have the folder called images in which we store image called p2 dot PNG. The position is going to be centered. And also we need to know repeat. Finally, I'm going to set the background size to cover. Alright, so here we have the full screen background image and actually that's it regarding the container. Now we have to start to customize the forms. I think would be better if we hide one of the forms for awhile and style just one form. So let's go ahead and hide the second sign-up form. Then select Forms wrapper. I'm going to send to the wrapper on the page. So let's set its position to absolute. Then we have to define top and left properties. Let's make both of them 50%. Then in order to center the elements perfectly on the page, we have to use transform translate. We have to move elements by -50% on both directions. I'm in x and y axis. So it's considered a form is placed in the center of the page. Next, I'm going to customize the form itself. So let's select Forms wrapper, followed by the tag name form. First of all, as defined within heights, I'm going to set width to 50 run. The height is going to be 35 RAM. And also change the background color. I'm going to use here RGBA value 4114108. And then the opacity 0.9 to five. Alright, next, I'm going to align the elements inside of the form using flexbox. We need to display flex. Then we have to change the direction because we need to place the elements vertically. So we need to flex direction to be column. Then in order to create some space around the elements we need, justify content space around. And also in order to center the elements horizontally, align items center. Lastly, let's create a little shadow effect. I'm going to create a shadow on all four sides. So I'm going to use the following values. We need to 0.1 RAM three times than the collar C, C, C. And also I'm going to use here value called inset. It allows us to create the shadow inside of the elements. Next, we need -0.1 gram twice. Then 0.1 run with the same color CCC and with the same value in set. Alright, Let's say regarding form elements for now, next, I'm going to start the individual elements. Let's start with the sign up button. I'm going to select it using tag names form and a. Let's define this position as absolute. And then set the top and left properties, both of them to ram. Can see the button is positioned correctly. Let's go ahead and style it. First of all, I'm going to change the background color. Let's make it white Also I'm going to make the text bold or using font weight with a value 600. Then let's transform text into uppercase. Also, I'm going to change the color. Let's use RGBA value 4114108. So create some space between the letters. Make it point to run. Right after that, I'm going to create some space inside of the button using padding. Let's set padding to 0.5 rem at the top than one rem on the right side, 0.5 rem at the bottom, and three rem on the left side. Then finally, we need to change the shape of the button using border-radius. It will take four different values. For the radius at the top left corner is going to be 100%. Then we will have 0.5 rem at the top right corner. Bottom right corner is going to be 0.5 RAM as probably bottom left corner, it's going to be 100%. Okay, That's it about the button. Let's move on and customize the heading. Select form H2. First of all, let's set the font size, make it 2.3 run. Make the text uppercase. Also create some space between the letters, make it point to RAM, and then change the color, make it white. So the heading is customized and now we have to take care of the inputs. Let's go ahead and select input wrapper. We need to place the inputs vertically on top of each other. So to use display flex and flex direction column. Next, I'm going to select the input itself. Let's define the width and height. I'm going to set with 225 RAM. As for the height, it's going to be three ramp. And after that, I'm going to create some space inside and also outside of the inputs. Let's use padding with the values 0.5 rem at the top and bottom and one rem on the left and right sides. As for the margin is going to be 0.5 rem at the top and bottom and zero on the left and right sides. Next, let's change the background color. I'm going to make it transparent. Also. Let's create border with values 0.1 round, solid, the color white. And also make the inputs rounded using border-radius with value five ran the inputs all or they look good, but we need to add a couple of more styles to them. Let's change the color. Make it white. Also create some space between the letters, make it a point to one RAM, and then get rid of default. Outline. Set it to none. Alright, so that's it about the inputs. Next, I'm going to change the color of the placeholder. We need to select first rapper, followed by the input and the pseudo elements placeholder. Let's set color to white and also change the font weight. Make it 300. Alright, lastly, I'm going to customize the submit button. Let's select input with a type attribute. At first, let's change the background color, make it white. Then the color is going to be RGBA value 4114108. Let's increase the font weight. Make detect bolder. Set font way to 900. Also transform text into uppercase. M Finally changed the type of the coarser making pointer. Alright, that's it. Regarding sign-in form, it is customized. Now we have to display the sign-up form and make both forms work. So let's go to the index.html file and display it back the second form. As for the first form, I'm going to hide it for a while. So the only thing that we have to do about the sign-up form is to customize the Sign In button. We have to move it to the top right corner of the form. And also we have to change the shape of the Bateson. The direction should be to the right side. Right now we have common styles for both buttons. So I'm going to select both buttons separately and define their individual styles. First of all, I'm going to select Sign Up UTM Then let's grab left property from the common styles. Also, I'm going to grab padding and border radius. Then I'm going to duplicate this code. Let's change the class name we need here, sign-in, btn. Also we need to change, lapsed into right. Then we need different padding. It's going to be 0.5 ran 3.5 rem, and one RAM. And also we need different border radius. The values are going to be the following. 0.5 rhyme. Then 100% twice. And again 0.5 ramp. Alright, so both forms are customized. Let's go ahead and display both of them. So it's can see we have here both forms. The position of the button is not correct right now. It's because it is positioned according to the forms wrapper and we need to position it according to the form element. In order to do that, we have to assign to the form element position absolute. So right now the forms are no longer centered on the page. Let's go ahead and fix that. First of all, I'm going to get rid of transform translate from here. And then we have to adjust the top and left positions. The top position is going to be 50% minus the half of the height of the form. As for the left position is going to be 50% minus the half of the width of the form. So we need the following calculations. Let's use calc function. The top position is going to be 50 per cent -17.5 ran, because the height is equal to 35 ran. As for the last position, it's going to be 50% -25 RAM because the width of the form is 50 ran. Alright, so as you can see, the form elements are centered. Now we have two position forms in the 3D space. I mean, I'm going to rotate this sign up for, as I said, we need to position elements in 3D space in order to create a 3D environment, we have to use one of these CSS properties called prospective. And I'm going to assign it to the container as the value. Let's assign 200 ramp. The form elements are grandchildren of the container. And in order to apply a 3D environment to deforms, we have to use another property called transform style with value preserve 3D, and we have to assign it to the parent elements of the forms, which is a forms wrapper. Alright, now it is time to rotate the sign-up form. I'm going to select it separately. And then use Transform with the rotate y function. And as the value I'm going to pass you 270 degrees. Okay, So right now, the sign-up form is not visible because the sign-up form is rotated. And in order to see better why it's not visible, I can change the value, set it to 250 degrees. So now we can see that form is rotated. You may think that we could use here just 90 degrees. But in that case the contents of the form would be rotated in the opposite direction. So that's why we use 270 degrees. Alright, next we have to move the sign-up form to the left side and also straight deeply in 3D space. In order to move the elements to the left side, I'm going to use Translate Z function with value 25 RAM. And now we have to move the elements according to the x-axis with the value -25 ramp. Okay, lastly, let's get back here 270 degrees. The only thing that had to do before we programmed the buttons is to rotate the entire forms rappers likely. So that's assigned to it. Transform rotate y with the value minus ten degrees. Alright, that's it. Now we have to start to write some JavaScript. We have to attach a click event listeners to do both buttons. But first of all, I'm going to select both buttons. Let's create a new variable. I'm going to call it sign up btn, and then select the element using querySelector method. Let's specify here the class name, sign up btn. Then I'm going to duplicate this line of code. Let's change the name of the variable. It's going to be signing btn. As for the class name, we need sign in between them. Right after that, let's attach event listeners to both of them. Let's start with the sign-up btn add event listener method with a click event. And the callback function, which will be executed once we click the Sign Up button Let's duplicate this code and change sign of butane into sign BTN. Alright, once we clicked it, but since we have to rotate the fonts wrapper, in order to do that, I'm going to add a new class deforms wrapper. Then we will select Forms wrapper with this newly created class in CSS. And we will define the rotation of the element. First of all, I'm going to prevent default actions of the sewing buttons. If we don't do that, then the page will scroll up if we have some additional content. So we need to pass your event objects in both cases. And then we need e dot prevent default. Alright, so as we said, we have to add a new class to deforms wrapper. First of all, let's go ahead and select these elements, create new variable, call it forms wrapper. Then select the elements using querySelector method. We need here className forms wrapper. Then let's add a new class to this elements. We need forms wrapper, followed by the property called class list, which includes all the classes that the element has. Then we need a method called add. And we have to specify here the name of the class. Let's say change. Alright, let's go to the CSS file and select foams wrapper with class change. So once we click the button, we had to rotate the forms wrapper. So I'm going to pass you transform rotate y with a value of 100 degrees. So if we click the button, then the form will rotate. But as you can see, it has changed its position. So we need to define the lag position. Let's use again called function. In this case we need 50 per cent plus the half of the width 25 ramp. Now everything looks fine. We have to make the effect smoother. For that, we have to use transition with the values transform 0.5 s, which is the duration. And then left again with 0.5 s. Now if I click, then the form will rotate smoothly. Right now just the Sign Up button is working. So let's go ahead and take care of the second button as well. In the case of the second button, we just need to remove the class change from the forms wrapper. So let's go ahead and grab this line of code. Paste it down here, and change, add in to remove. So now everything was perfectly and actually with this project we are done. If you think that the forms are smaller on extra large size, then you can simply increase the font size of the HTML elements. Let's change it and make it, let's say 72.5 per cent. So now I think it's better. And actually we are done. We have finished working on this project. Hopefully it was interesting and useful. So let's move on to the next project. 5. Project 2 - House: Alright, it's time to create our next projects. In this video, we're going to be building this house with HTML, CSS, and JavaScript. Let's go ahead and describe the projects. We have here a house with a couple of different windows. Also, there is a blue roof and a door. If I click the door, then it will open. And also if I hover over the window at the top of the door, it will open as well. So that's it regarding this project, Let's go ahead and start to build it. I have created a new folder on the desktop called a house. Let's go ahead and open it in VS Code and create our working files for HTML, CSS, and JavaScript. I'm going to call them index.html, style.css and scripts dot js. Then open the index.html file and create a basic HTML document. For that, Let's use an image. We need to place urine exclamation mark and then hit Tab or Enter. So here we go. First of all, I'm going to change the title. Let's insert your house. Then link CSS and JavaScript files. I'm going to open link tag. And then let's specify here the name of the file. As for the jobs that file, I'm going to open script tag right above the closing body tag. And then in source attribute, I'm going to specify the file name, script.js. Alright, so all files are linked. Let's go ahead and run the project to the browser. I'm going to use Live Server. And then let's place the editor and the browser. Like so. We are ready to start to build a project. At first, I'm going to create the HTML markup. Let's go ahead and open a div tag with a class container. Then I'm going to open another div tag which will wrap the content. Let's assign to it className house. So the house will consist of a couple of different parts. We'll have a roof, windows than the room and also the door. Let's go ahead and create those parts. I'm going to start with the roof. Let's open div tag with the class main roof. Then I'm going to create four different windows. Let's open div tag. It will have two different classes. The first one is going to be window. It's going to be the common class name. And then also we need top left window. Let's duplicate this line of code three times. So the second window is going to be top right. Then we will have bottom left window. And the last one is going to be bottom right window. Alright, that's it about the Windows. Next I'm going to create the room that's open VB tag with the classroom. So the room will consist of three different parts. We will have a roof of the room than the window and also the door. Let's open a div tag with a class room roof. Next, I'm going to create a window. Let's open another div tag with a class top window. This window will have two different parts, the left side and the right side. So let's open div tag with a class top window left. Then I'm going to duplicate this line of code and change the class name we need here, top window, right? Okay, Finally, let's create a door. I'm going to open div tag, which is going to be the wrapper, Let's call it door frame. Then inside that div element, I'm going to open another div tag with the class door. And finally, we need door handle. So it's open, div tag with the class door handle. Alright, that's it. Regarding the HTML markup, Let's go ahead and start to write the CSS. First of all, I'm going to define some common and reset styles. Let's select every elements using an asterisk. I'm going to get rid off default, margin and padding. So let's set both properties to zero. And also I'm going to set box-sizing border-box. So throughout this project, I'm going to use RAM as the measurement units. Right now one rem is equal to 16 pixels because the font size of the HTML element equals 16 pixels. I want to convert one RAM into ten pixels And for that, we have to decrease the font size of the HTML element. And we have to make it 62.5%. Alright, let's go ahead and take care of the container. I'm going to extend it to the entire page. So let's select it and define this width. I'm going to make it 100%. As for the height, it's going to be 100% of the viewport. So we need to set it to 100 vh and then change the background color. I'm going to use here RGB value 103150. And then one, all three again. Right? After that, Let's select the house. I'm going to make this element visible. So let's define its width and height. I'm going to set its width to 110 RAM. As for the height is going to be seven to RAM. And also change the background color. Let's use U, E F, E, F, E F. So here we have the house. I'm going to place it in the center of the page. And for that, Let's use a CSS grid. We have to set display to grid. And then in order to place the element in the center, we need to use place items with the value center. Alright, so as you can see, the element is placed in the center right now That's it about the house. Next, I'm going to take care of the main roof. So let's go ahead and select these elements. First of all, let's define its width and height. I'm going to set width to 110%. That's pretty high, is going to be thorough to RAM. And then change the background color. Let's use again RGB value. Once you pass your 867145. Okay? So the roof is feasible, but it's can see we have to take care of its position. For that, I'm going to assign to it a position absolute, that in order to position it according to the House, which is the parent element, I'm going to assign to the house, position relative. And after that, let's define the top and left properties. I'm going to set top two minus ten RAM. As for the left position is going to be minus five per cent. So it's considered, the roof is positioned, but right now it doesn't look quite good. We have to rotate it in a 3D environment. So we have to create a 3D space. And for that we have to use one of these CSS properties called prospective. Let's set it 200 RAM. And that's it. Let's rotate the roof according to the x-axis. Use Transform with the rotate x function. I'm going to rotate the element by 20 degrees. Okay? So now it's considered the roof looks much better. The only thing that I'm going to do is to make its corners slightly rounded. And also I'm going to add to it a little shadow effect. So let's use border radius. It will take four values. The top-left corner is going to be one RAM than the top right corner will be one rem as well. As for the bottom right and bottom left corners. I'm going to make them 0.5 ramp. And also use box shadow with the values 0.5 gram than one rem. Rem. And the color too. Alright, so the main roof is ready and now we have to take care of the windows. As you know, all four windows will have some common styles. So I'm going to select them using common className window. At first, let's define the width and height. I'm going to set width to 12 RAM. The height is going to be 15 RAM. As for the background color, I'm going to use a AAA. Next, I'm going to add to the Windows a border. Let's assign two values point for RAM than the border is going to be solid. The color. Let's use 333. After that, we need to take care of the positions of the windows. Let's set position to absolute. And after that, we have to define positions for each window separately. Let's go ahead and start with the top of that window. Let's select it. I'm going to set up position to 20 to ram. As for the left position is going to be ten RAM Next I'm going to take you off the top right window. So let's duplicate this code. Change the class name we need here, top right window, and also change the left position into right. Next comes a bottom left window. Let's duplicate again in the code. The class name is going to be bottom left window than the two position will be 43 RAM. We need here left position with the same value. And finally, we have bottom right window. Let's duplicate this code. Change the class name we need right here. And also change the lag position. Let's use right. Okay, So all four windows are positioned and the next thing that we have to do is to take care of the shape of the top left and top right windows. If we take a look at the finished project, you will see that the top sides of those two windows around it. So let's go ahead and do that using border-radius. We need the same border radius for both Windows. The top left corner is going to be 50 per cent. Then we need the same value for the top right corner as for the bottom left and bottom right corners, they will be zero. So we have the rounded windows. Next, I'm going to create those frames. And I will do that using the after and before pseudo elements. First of all, let's create the horizontal lines. Let's select the before pseudo elements. Define the content, make it empty. After that, let's define width and height. Width is going to be 100%. As for the height, I'm going to make it point for RAM. And also change the background color, make it a 333. So right now the lines are not visible because we have to define this position. So let's set position to absolute. And then I'm going to define top and left properties. The top position is going to be five RAM. As for the left position, Let's set it to zero. Okay, So as you can see, we have here the horizontal lines. Let's go ahead and create the vertical lines. I'm going to do that using the after pseudo elements. Let's copy this code and change before into, after. The width is going to be zero point for RAM. As for the height, I'm going to make it hundred percent, then the position is going to be zero. Let's change the left position. I'm going to make it 50 per cent. Actually, we need to place the vertical lines in the center of the window. So we need to use here transform, translate x with value -50%. Alright, so as you can see, all four windows are customized and now we have to move on and take care of the room. Let's go ahead and select these elements and define its width and height. I'm going to set width to four to ram. As for the height, it's going to be eight per cent. And then change the background color, make it white. The room is going to be placed in the center of the house. So let's take care of its position. Let's set position to absolute. Then we need left position to be 50%. Next, let's set the position to zero. And also in order to place the element in the center when you transform, translate X with the value -50 per cent. Okay, So that's it regarding the room for now. Next, I'm going to take care of a roof. Let's go ahead and select room roof. First of all, I'm going to define its width and height. Width is going to be 110%. Then the height will be 20 RAM. And also I'm going to change the background color. Let's use here RGB value 867145. So as you can see, the roof is visible, but we have to customize it because right now it's not looking good. First of all, let's take care of its position. I'm going to set position to absolute, and then I'm going to define top and left positions. The top property is going to be minus ten rhyme As for the left position, it should be minus five per cent. After that, we have to create the 3D environment for this roof as well. I mean, a 3D environment which we created for the main roof of the house. For them, we have to use property called perspective. Let's set it to 100 RAM. And then I'm going to rotate the roof. We should rotate it according to the x-axis by 40 degrees. Okay. So the roof is rotated but it's not quite visible. In order to fix that, I'm going to use box shadow. Let's assign 2D values points to ram 0.5 rem, 1.5 rem, and as the color I'm going to use black. Okay, Finally, let's make the corners of the roof rounded using border-radius. I'm going to set border radius at the top left corner as 0.5 RAM than the top right corner should be 0.5 prime as well. As for the bottom right and bottom left corners. Let's set them, both of them 2.3 ramp. Alright, so finally, we're done with the roof. Next, I'm going to take care of the top window of the room. Let's go ahead and select it. First of all, let's define the width, height, and background color. I'm going to set width to 16 RAM than the height is going to be 17. Run as part the background color. Let's set it to RGB 112, then 22.22. So we have here the window, it is not placed correctly right now. So let's take care of its position. Let's set position to absolute. And then define top and lapped properties. The top position is going to be 15 RAM. As for the lab position, I'm going to set it to 50 per cent. And then in order to place the window perfectly in the center, Let's use Transform, Translate X with the value -50%. Okay, next, we have to make the top side around it. And also I'm going to add to it a border. So let's set border-radius to 50%. Then again, if 50 per cent than zero, again zero. That's what the border. Let's make it 0.5 RAM solid. And as the color, Let's use 555. Alright, next to have to customize to parts of those windows. We have all already created two div elements for that. So let's select top window left. At first. Let's set width and height. The width is going to be 49.5%, then the height will be 100%. As for the background color, I'm going to use RGBA value. The color is going to be white. I mean, we need to 5053 times. And then let's decrease the opacity, make it 0.4. After that, Let's define position. Let's set position to absolute and make top and left properties, both of them zero. Alright, so as you can see, we have to change the shape of these elements. We have to make it rounded on the top left side. So let's use border, top-left radius and set it to 50 ran. Lastly, let's add a border to this elements. Let's set border 2.5 gram solid. And as the color, Let's use 555. All right, That's it about the left side. Next, I'm going to create the same on the right side. For that, let's just duplicate this code and change left into rights everywhere. Okay, so both parts are created like the other windows. We need the horizontal lines here as well. I'm going to create them again using the before pseudo elements. So let's go ahead and select top window left, followed by the before pseudo element. First of all, let's define the content. It's going to be empty. Then I'm going to define the width and height. Let's set width to 100% Then I'm going to set high 2.5 rem and also change the background color. Make it 555. That in order to make the element of visible, I'm going to define the position. Let's set position to absolute. And then define top property. It's going to be 35 per cent. As for the lag position, I'm going to set it to zero. Alright, so that's it about the left side. I'm going to create the same line on the right side as well. Let's copy this code. Paste it down here, change the class name we need to write. And then change the position we need, right? As well. So that's it. The entire window is customized and the only thing that we have to do is to create a hover effect. So once we hover over the elements than the window should open, we need to add a hover effect of the window and we have to rotate both sides. Let's go ahead and start with the left side. I'm going to select Top window with hover. And then let's select top window left. So we need to rotate the element according to the y-axis. So we need to transform rotate y. And as the value I'm going to use here -50 degrees. Also to make the effect smoother. Let's use transition with transform 1 s. Okay? So let's consider the element is rotating, but that's not what we want here. It should rotate from the left side. Right now it is rotating from the center because the origin of the transformation is centered by default, we need to change it and make it left. So I'm going to use the properties called transform origin. And I'm going to set it to left. Now as you can see, it's rotating correctly, but we need to add here one more thing. We need to rotate it in a 3D environment. And for that, Let's use again perspective. We need to assign it to the window itself. In this case, I'm going to set perspective to 150 ramp. It's can see now we have a better result. Let's go ahead and do the same for the right side. I'm going to copy this code. Then change left into right. Also, we need to get rid of the minus sign from here. Then we need to change the origin of the transformation. In this case, we need to transform origin to be right. And finally, let's use transition with transform 1 s. So as you can see, everything works perfectly and with the window we are done. The only thing that we have to do in this project is to create the door. First of all, we need to create the frame. So let's select it and define width and height. The width is going to be 14 brand. As for the height, let's set it to 18 RAM. And also change the background color. Make it for four. Next, we need to change its position. It should be placed in the center of the room. So let's set position to absolute. Then defined Watson property, it's going to be zero. Then we need lag position. It should be 50 per cent. And in order to center them perfectly, we have to use transform translate x with value -50%. After that, I'm going to add to the frame a border that's assigned to it values 0.6 round, solid, and the color two to two. And finally, let's get rid of the border at the bottom. Let's set border bottom to none. Alright, so that's it regarding the door frame. Next, I'm going to take care of the door itself. So let's select these elements. Define width and height. I'm going to set both of them to 100% and also change the background color. Let's use here RGB value 856824. Okay, so it's considered we have the door. The next thing that we have to do is to create a door handle. So let's go ahead and select these elements. Let's define width and height I'm going to set with 23 RAM than the height is going to be 0.7 ramp. And also change the background color. In this case, I'm going to use 999. So here we have the door handle and now we have to change its position. Let's set position to absolute. Then I'm going to move it down. So let's set top property to 45% than the left position is going to be one round. So it's considered a door handle is positioned correctly. And the only thing that had to do is to change its shape slightly. I'm going to make it rounded on the left side. So let's use border-radius with the values 100%, 0.5 around 0.5 brown, and then hundred per cent. So on, That's it. About the door. Everything is ready to create the effect. I meant to open this door. Once we click the door. For that, I'm going to use a little bit of JavaScript. Let's go to the script.js file. We need to add a click event to the door. But first of all, let's select these elements. I'm going to create new variable. Let's call it door, and then select the div elements using query selector method. Let's specify here the class name dot. After that, I'm going to add an event listener to these elements. So let's use add event listener method, which takes two parameters. The first one is the type of the event we need here clique. As for the second argument, is going to be a callback function, which will be executed once we click the door. So once we click, I'm going to add a new class to the door. Then using this new class, we will define new styles and CSS, which we want to be applied to the elements onclick. And then on the next click, we need to get rid of this newly edit class. For that, I'm going to use one of the methods called toggle. So we need dor dot class list. This property gives us all the classes that the element has. And then I'm going to use method called Toggle. Let's call the class name change. That's it about the JavaScript. Next we have to write some CSS. So we need to select a door with class change. I'm going to rotate the elements. So we need to transform, rotate according to the y-axis with the value 30 degree. So if we click the door, then it will be rotating. But we need to add a couple of things to this effect. The door should be rotated from the right side. Also, we need to create the 3D environment and we have to make the effects model. So we need to change the origin of the transformation. Let's set it to write that in order to create 3D space, I'm going to use perspective with value hundred Ren. Finally, let's use transition with transform. 1 s came. So if we click the door, then it will open nicely. Now we have to do the same for the door handle. I'm going to use the same technique. So let's select all with the class change, followed by the door handle. We need to rotate door handle according to the z axis. So we need to transform, rotate Z with a value 20 degrees. So like the door, we have to change the origin of the transformation. Let's make it left. And also we need to transition with value transform 0.5 s. So as you can see, everything works fine. I just want to add here one more thing. Let's add a little delay time to the transition of the door because first of all, I want to rotate the door handle and then open the door. So let's add here 0.5 s. Okay, so now everything goes perfectly. And actually with this project we are done. I hope you enjoyed it. So let's move on and start to work on the next one. 6. Project 3 - Search Bar: Okay, so let's go ahead and start to work on our next project. In this section, we're going to be creating a search bar with some nice animation effects. Let's go ahead and describe the projects. As you can see, we have here a search icon at the top right corner of the page. If I click it, then it will start to move and animate. It will move to the top of the page. So the input field will appear with the closing x, but if I click it, the input field will hide and the search icon, we'll go back to its default place. So that's it about this project. It's going to be a little project, but I hope it will be interesting. I've created a new folder on the desktop called search bar, which right now is empty. Let's go ahead and open it in VS code and create our working files for HTML, CSS, and JavaScript. I'm going to call them index.html style dot css and script.js. Alright, let's open the index.html file and create a basic HTML document. For that, I'm going to use an exclamation mark. So here we have a basic HTML tags. First of all, I'm going to change the title. Let's insert your search bar. And then I'm going to link CSS and JavaScript files. Let's open link tag and specify here the path of the file. As for the JavaScript file, I'm going to open script tag right above the closing body tag. And then we need script.js and the source attribute. Actually, besides that, I'm going to bring in one more link for Font, Awesome icons. Let's go ahead and search for Font Awesome, CDN, GIS. Then let's copy the first link. Then we need to open link tag and paste the link in the h reference attribute. So everything is ready. Lastly, I'm going to run the project to the browser using a live server. This VS code package allows us to run the project life to the browser. And you can make changes and updates without refreshing the page. Each time. Before we start to write the code, I'm going to organize our working environments. Let's place the editor and browser side-by-side. Alright, so finally, we can start to write the code. First of all, I'm going to create HTML markup. Let's open div tag Class Search input wrapper. It will include search input field. So let's open another div tag with the class search input. I'm going to pass two different elements. The first one is going to be the input with the type text and with the placeholder attribute with a value, such as for the second element, it's going to be closing X button. I'm going to use here Font, Awesome icon. Let's open I elements. And assigned to the classes have a S, f, k times. Right? After that, we need to create a search icon. So it's open div tag with the class search icon. Then let's insert your Font Awesome icon for the classes FAS, a search. Alright, that's it about the HTML markup. Now, it's time to customize those elements and start to write some CSS. First of all, I'm going to create some default and reset styles. I'm going to select every elements using an asterisk. First of all, I'm going to get rid of default margin and padding. Let's set both properties to zero. Then I'm going to set box-sizing border-box. Throughout this project. I'm going to use RAM as the measurement unit. Right now, 1 g is equal to 16 pixels because by default the font size of the HTML element is equal to 16 pixels. I want to convert 1 g into ten pixels. And for that, we have to decrease the font size of the HTML elements and set it to 62.5 per cent. Now, as you can see, all the elements became smaller. Alright, first of all, I'm going to customize the project like so. I mean, I will style and place the elements here at the top of the page. And then we will take here of the animations. So let's go ahead and select wrapper div elements and define its width and height. I'm going to set with 200 per cent. Then the height is going to be five rem. And also change the background color. I'm going to use here RGBA value to 55, 69 69.5. Next, I'm going to place the elements in the center of the wrapper for that. Let's use flexbox. We need display flex. Then for the horizontal centering, I'm going to use justify-content center. As for the vertical centering, we need to align items center. Alright, so the elements are placed in the center perfectly. Let's move on and start to customize the search input. At first, I'm going to select these wrapper and define width. Let's make it 30 ran. After that, I'm going to select the input element itself. First of all, let's define its width, make it 27 run. And also I'm going to make the background color transparent. Next, I'm going to get rid of the default border and leave it at the bottom only. So we need a border none. And then border bottom with the values 0.1 RAM solid. And as the color I'm going to use 999. Alright, after that, let's take care of the font size. I'm going to set it to 1.5 g. Also create some space between the letters. Let's set it to 0.15 round. Also am going to get rid of defaults. Outline. Let's set it to none. Then change the color. You see here, 555. And finally, I'm going to create some space on the right side. Let's set margin right to one ramp. Okay, so that's it regarding the input fields. Let's go ahead and start the X button. Let's select it. First of all, I'm going to set font size to 1.5 gram. Then I'm going to change the color. Let's make it 999. And make the cursor pointer. Alright, Before we move on and customize the search icon, I want to align both elements of vertically in the center. And for that, Let's use flexbox. We need display flex and then align items center. Okay, let's move on and customize the search icon. Let's select its wrapper developments. At first, I'm going to define the font size. Let's make it 1.5 RAM. And then I'm going to set position to absolute. We're going to place the search icon in front of the input fields. I'm going to define the tip position as 1.7 rem. As for the right position, I'm going to make a little calculation. As you know, the width of the search input is 30 ran. In order to place the search icon in front of the search inputs, we need to add half of the width of the search input to 50 per cent. So I'm going to use one of the functions called calc. And then we need 50 per cent plus 15 run. So now as you can see, the icon is placed in front of the search input. But I think we need some space between them. So instead of 15 RAM, let's use 16 rent. Alright, Finally, let's change the color of the icon. Let's select ions. Set its color to 999, and also change the cursor. Make a point. Alright, so everything is ready to create the animations. As you sold. By default, we have to hide the input field and the X button. And also we have to move the search icon to the top right corner of the page. So let's go ahead and do that. I'm going to hide this search input wrapper. For that, Let's use opacity with value zero. And also visibility hidden. Then changed the right position of this search icon. Let's set right, property to three Ran. Okay, now it's time to create animation. Let's take a look at the finished project. So once I click the icon, it will start to move and also increase the size. We will have a couple of different steps during the animation. Let's go ahead and create CSS keyframes. I'm going to call it search icon anime. So from 0% to 40%, the element will change its top position and also the font size. So at 0%, we will have Position 1.7 run. As for the 40 per cent, we will have two position with value 40%. And also the font size with a value 25 ramp. Then from 40% to 60%, the element will keep its top position. But we will change the right position. So at 60% we will have, again top with 40 per cent. That's probably right position. We will have the calculation 50 per cent plus 16 ramp. Finally, from 60% to 100%, the elements will change its position, but we will keep the right position. So at 100%, we will have top property with value 1.7 rem and the right position with the previous value. So the CSS keyframes are ready. Now we have t applied this animation to the element. For that, I'm going to use the animation property. We have to specify here the name of the keyframes, and then the duration of the animation. It's going to be 1 s. So as you can see that the icon is moving and the animation works fine. We have here a tiny issue. Once the animation ends than the icon goes back to its default position. We don't need that. We have to maintain the position that we have at the 100 per cent. So in order to do that, we have to use one of the values called forwards came. So now it's can see everything works fine. Actually, we need to run this animation once we click the icon. So now it's time to start to write some JavaScript. We need to attach a click event listener to the search icon. So first of all, I'm going to select this icon. Let's create a new variable and call it search icon. I'm going to select this element using query selector method. Let's specify here class name, search icon, followed by the tag name. After that, I'm going to add an event listener to the search icon. We have to specify here the click event. And also we have to pass you a callback function, which will be executed once we click the Search icon. So as you know, we have to apply animation property to this search icon. In order to do that, I'm going to add a new class to the search icon, I mean to the parent element. Then we will select that element using newly created class in CSS. And we will apply animation properties of the element. So we need you search icon, then we have to get access to its parent elements. So I'm going to use here property called parent elements. Next we need another property called class list. It includes all the classes that the element has. And then I'm going to use method called add. Specify. Here the class, let's say change. Alright, that's it regarding JavaScript right now, let's go back to the CSS file. So as I said, now we need to select Search icon with a class change. Then we need to move this line of code here. So now if I click the search icon than the animation will run. Okay, next we have to display the search input wrapper. Right now it is hidden. So in the same way, I'm going to use class change. First of all, let's select a rapper, create new variable and call it search input wrapper. I'm going to select this element using again querySelector method. Let's specify here the class name, search input wrapper. Then let's add class change to this elements. So we need search input, wrapper, dot, class list, dot, add with a class change. Then go back to the CSS file and select wrapper with the class change. So in order to display the search input wrapper, we need opacity one and visibility visible. So now if I click the search icon, then the search input will appear. Right now it appears without any effect. So we need to use transition with the values All than the duration is going to be 0.5 s Besides that, I'm going to use here little delay time 1 s. Okay, So now as you can see, we have here much nicer and cool effect. Before we move on and start to program the closing button, I want to add one more thing here. Once the search input is displayed, I want it to be focused automatically. For that, I'm going to use one of the methods called focus. But in this case we need to wait 1 s in order to appear the elements. So at first, let's select the input elements, create a new variable. And colleagues search inputs. I'm going to select element again with querySelector method. Let's specify here the class name search inputs, followed by the tag name input. So I'm going to use a method called set time out. It takes two parameters. The first one is a callback function. Let's insert your search input dot focus. As for the second argument is going to be the amount of time. In this case. As we said, we need one seconds, so I'm going to pass here 1,000 milliseconds. So now if we display the search input, then it will be focused automatically. Now we have to move on and make the X button work. Once we click it, we have to hide the search input wrapper. And also we have to move the search icon back to its default position. First of all, let's select X button. I'm going to create new variable. Let's call it close icon. And then select the elements using querySelector method. I want to specify here the class name, search inputs, followed by the tag name I. After that, we have to attach click event listener to the icon. Let's specify here the event type click. And also we need a callback function. So once we click the button that we have to remove class change from the search input wrapper and the search icon as well. So I'm going to grab those two lines, paste them here, and then change at in to remove. So now if I click the X button, then the elements will hide and also the search icon, we'll go back to its initial place. Actually, everything works fine, but we need to add some effects here. First, I'm going to hide elements with some transition. So let's use transition with search input wrapper. Let's assign truth values all and 0.5 s. Now as you can see, the elements are hiding smoothly. Next, I'm going to take care of this search icon. We're going to create a separate animation in which we will define the movement of the icon to the right side. Let's create new CSS keyframes. I'm going to call them search, icon and M2. We will have two different steps, 0% and 100%. At 0%, we need to define right position. And we have to institute the calculation, 50 per cent plus 16 RAM. That's for the 100%. We need to define right position as three round. Finally, let's apply this animation to the search icon. Use animation property with the value is search icon and m2. Then 0.5 s. And also we need forwards. Alright, so as you can see, everything works perfectly. And actually with this project we are done. I hope you enjoyed this video and learn some new stuff. Let's move on and take care of the next project. 7. Project 4 - Clock: Alright, so it's time to move on and start to build our next project. In this video, we're going to create a clock with HTML, CSS, and JavaScript. It's going to be a standard clock, which you probably have at home on the wall. We have here numbers for hours and also three different arrows which indicate the hours, minutes, and seconds. Alright, let's go ahead and start to create a project. I have a new folder on the desktop called clock, which right now is empty. Let's open it in VS code and create our working files for HTML, CSS, and JavaScript. I'm going to call them index.html, style.css and scripts dot js. Then open the index.html file and create a basic HTML document. For that, we need to place here an exclamation mark and then hit Tab or Enter. So here we have the basic HTML tags. The first thing that I'm going to do is to change the title. Let's insert your clock. And then I'm going to link CSS and JavaScript files. Let's open link tag in the head element and specify here the part of the CSS file. As for the JavaScript, I'm going to open script tag right above the closing body tag. And then we need to specify the path of the file in the source attributes. Okay, so we're ready to start. The last thing that I'm going to do is to run the project to the browser. For that, I'm going to use one of the VS code packages called a live server. It allows us to run the project live in the browser and make changes and updates without refreshing the page each time. Okay, Finally, let's place browser and the editor side by side, like so. And get started. I'm going to create the HTML markup. Then we will style it. I mean, we'll make the elements look like the clock. And then we will make it work using JavaScript. So let's go ahead and start to create the HTML markup. Let's open the deep tag, which is going to be the container. It will include the entire content. Then I'm going to open another div tag inside of the container that's assigned to class clock. The clock will consist of two different parts, but we'll have the numbers and the arrows. It's open div tag with the class numbers. We will have four different numbers. Let's open div tag with the class 12. And as the content, Let's Institute your 12th. Then I'm going to duplicate this line of code three times and then change the class names and also the content. We need three. Then 6.9. That's it about the numbers. Let's open div tag, which is going to be the wrapper of the arrows. We will have three different arrows. Let's open div tag with the class hour. Then I'm going to duplicate it twice and change the class names. We need here, minutes and seconds. Alright, that's it regarding the HTML markup. Right now we have here just the numbers. So let's go ahead and start to customize the clock. First of all, I'm going to bring in the link for the Google fonts. I'm going to use one of the Google fonts throughout this project. So let's go ahead and visit the Google Fonts website. Then search for one of the fonts called concert one. So right now we have here a text as the example, but we are interested in numbers. So we can simply change the sentence into numerals and see how the font looks like. Let's select the style. In order to link the pons, we have two different options. You can either grab this link and paste it in the head element, or you can click Import, grab this URL and paste it in the CSS file. Alright, so once the font is selected, next, I'm going to reset some default styles. Let's select all the elements using an asterisk and get rid of default, margin and padding. I'm going to set both of them to zero and also change the font family for every elements Let's use here are Cuckoo font concept one course. Alright, so as you can see, now the numbers look in a different way. So I'll this project, I'm going to use the RAM as the measurement unit. Right now, 1 g equals 16 pixels because the font size of the HTML element is equal to 16 pixels. I want to convert one RAM into ten pixels. Therefore, we have to decrease the font size of the HTML elements And make it 62.5 per cent. So as you can see, the numbers became smaller. Next, I'm going to take care of the container. Let's select it. And first of all, let's define its width and height. I'm going to set width to 100 per cent. As for the height, I'm going to make it 100% of the viewport. So we need 100 vh. Next, I'm going to place the content of the container in the center. And for that, Let's use flexbox. We need to set display to flex. And then for horizontal and vertical centering, we need to justify contents center and also align items center. Alright, so now the content is placed in the center and we can customize the clock itself. Let's go ahead and select Clock and define its width and height. I'm going to set both of them to 45. Run. Also change the background color. I'm going to make it gray using color ACA, CAC. Next, I'm going to make the clock rounded. For that, we have to use border-radius with value 50%. Then let's create a little border. Let's set its width to 0.5 RAM, then make it solid. As for the color, Let's use 777. And lastly, let's create a little shadow effect. On all four sides. Use box-shadow with the values 0.5 gram twice than one RAM. And as the color, Let's use 555. And then I'm going to place here -0.5 rem twice one room. And the same color. Alright, let's see it regarding the clock. Next, I'm going to take care of the numbers. Let's select the wrapper div element and defined within height. In this case, we need to inherit the same width and height from the parent element, which is a clock. So we need to set width and height, both of them to inherit. Alright? After that, I'm going to select all div elements inside of the numbers. So at first we're going to position the numbers. Let's set the position to absolute. Then in order to position the numbers according to the parent element, we need to set the position of the numbers to a relative. And after that, let's increase the font size of the numbers. Make it 2.5 rem. Alright, so now I'm going to position each separately. Let's go ahead and start with the 12th. It's going to be placed at the top of the clock. So let's select it and set is to position 21 run. Then we need to center it horizontally. For that, I'm going to set left position to 50 per cent. And then for perfect centering, have to use Transform with the translate x function. And we have to translate the elements by -50%. Alright? Next we have three. Let's select it. In case of three, we need right position to be one RAM. And then we have to censor elements vertically. So we need to set the position to 50 per cent. And in this case we need to transform, translate y -50%. Let's go ahead and take care of the rest of the numbers. The next one is six. In this case, we need to put some position to be one run. Then let's grab those two lines from here. As for the last number, which is nine, we need left position to be one RAM. And then we need those two lines here as well. Alright, so all four numbers are positioned. Next, I'm going to change the color. Let's make it white. And also create a little shadow effect. Use text shadow with the values point to RAM three times. And the color too. That's it regarding numbers. Let's move on and take care of the arrows. First of all, let's define this width and height like numbers. I'm going to inherit width and height from the clock. Let's set both of them to inherit. Next, I'm going to define the position. Let's make it absolute. In this case, the element will jump out of the normal flow of the page. And in order to position it according to the parent element, we need to position relative for the clock. Next, let's define the top and lag properties I'm going to set both of them to zero. The arrows should we place in the center of the clock? And in order to achieve that, I'm going to use again flexbox. We need display flex and then justify content center and align items center. Alright, that's it about the wrapper. Next, I'm going to create this little circle. It's going to be created using the before pseudo element. So let's select arrows followed by the before pseudo element. Let's make the content empty. Then defined width and height and also the background color. I'm going to set width and height to 2.5 RAM. As for the background color, it's going to be white. So here we have the elements, right now it has the shape of the square. So let's make it a circle. And also let's make a little shadow effect. Let's set border radius to 50 per cent as well, the shadow. Let's use box shadow with the values point to RAM twice. Then 0.5 RAM. And as the color, Let's use 777. Alright, let's say about a circle. Let's go ahead and take care of the arrows. Right now they are not visible because we have just the empty div elements. Let's go ahead and select all div elements inside of the arrows. First of all, as defined width and height, and also the background color. I'm going to set with 2.7 rem. Then the height is going to be 12. Run as part the background color, I'm going to use color f, f, f 0, f phi. So now the elements are visible. Next, I'm going to take care of their positions. I'm going to place them in the center of this circle. So let's set position to absolute. And then define bottom position, making 50%. After that, I'm going to add a little shadow effect to the arrows. Let's use box-shadow. Value is point to ran twice, then 0.5 RAM, and the color 777. Okay, Lastly, let's change the shape of the elements in order to make them look like the arrows. I'm going to do that using border-radius. So the border-radius takes four different values. The top-left, top-right corners will be 100%. S4, the bottom right and bottom left corners, I'm going to make them zeros. So as you can see, now, the elements look like the arrows. Right now we see here just one arrow, but all three arrows are displayed. They are placed on top of each other. The next thing that I'm going to do is to place the arrows behind this circle. And for that we can use the z-index property with some higher value than zero, let's say ten. Right? After that, I'm going to customize the arrows separately. Let's start with the seconds, because it is placed on top of the rest of the arrows. I'm going to change the background color. Let's set it to for C, F, E six. Right now, nothing is changed. And it happens because we have already changed the background color of the arrows when we selected them using the div tag. And it has a higher precedence. In order to overwrite this style, we need to select the element using the parent's elements. I mean arrows. So now the background color is changed. Besides that, I'm going to rotate the arrow. Let's use Transform with the rotate function. And I'm going to rotate the arrow. Bye, Let's say 270 degrees. Right now, the arrow is rotated from the center because by default the origin of the transformation is set to center. In this case, we need to make the origin of the transformation bottom center. Now as you can see, the problem is fixed. Next, let's take care of the hour likely. Second, we need to select it using the parent element because we are going to decrease its height. Let's set its height to ten RAM. And also I'm going to rotate the arrow. Let's rotate it by 90 degrees. Alright, so finally, the clock is customized and everything is ready to make the work. As we said, we're going to do that using JavaScript. So let's go ahead and open the script.js file. The first thing that I'm going to do is to select all three arrows. So let's go ahead and create a new variable. I'm going to call it Our. Then select the arrow using query selector method. Let's specify here the class name hour. Then I'm going to duplicate this line of code twice. Let's change the name of the variable we need minutes. And also we need here class minute And then we need here second and the class name. Let's see, institute a second as well. Alright, after that, I'm going to create a function. Let's call it set date. Inside that function, we will manage to work the arrows properly. And then we will call this function after every second using the set interval method. First of all, I'm going to create a variable which will give us the current state. I'm going to call it. Now. It should be equal to new date. Let's see in the console or this variable gives us, I'm going to run console.log. Now. Next I'm going to call this function. But with the set interval method. Actually, this method allows us to execute the function with some integrals. It takes two arguments. The first one is the name of the function. In our case, it's set date. As far as the second argument is the amount of the interval expressed in milliseconds. In our case, it's going to be thousand milliseconds. Let's inspect the page and switch to the Console tab. So as you can see, we are getting here the current date and time and also the time zone after each second. Alright, next we need to define the seconds, minutes, and hours separately. So let's create a new variable. I'm going to call it get second. In order to get the seconds from the current time, we have to use one of the built-in date methods called get seconds. So we need now dot get seconds. If we check this variable in the console, then we will get seconds. In the same way, we have to define minutes and hours. So let's duplicate this line of code twice and then change the names of the variables and also the names of the methods. We need. Get minutes and get hours. Alright, so all three variables are created. As you can see, our clock has the shape of the circle and the size of the circle is equal to 360 degrees. We need to convert seconds, minutes, and hours into degrees in order to define the portions of the moment of each arrow. Let's go ahead and start with this seconds. I'm going to create a new variable. Let's call it, let's say second degree. So in order to convert seconds into degrees, we need to use the following formula. We need to divide the current amount of seconds, Bye 60, because we have 60 s. And then we have to multiply it by 360. Alright, so now we all or they can make the second arrow move. For that we have to rotate it by second-degree. So we need a second dot style dot transform equal to rotate function. And as the value, we have to pass here. Second degree followed by the degrees. So as you can see, now, if the arrow is moving after each second and it shows us the current seconds. In the same way we have to convert minutes and hours. Let's duplicate this line of code twice. So we need minutes. Degree. Then gets minute. Next we need our degree. And get our in this case, we have to divide it by 12 because overall we have 12 h. All right, finally, we need to define the values of the rotate function for the minutes and the hours. Let's duplicate this line of code twice. We need here minute style. And also we have to pass your minute degree. That's for the hour. We have two paths here, our degree. Alright, so it's can see we have here a current time and the clock is working perfectly 8. Project 5 - Navbar: Alright, so it's time to move on and start to build our next project. In this video, we're going to be creating a navbar. At a glance, the project looks like a simple one, but it will be really interesting and hopefully you will learn some new stuff. Okay, Let's go ahead and describe the project. As you can see, we have here a couple of different navigation items. They are represented by the Font Awesome icons. By default, the first item has a different color with different background and also with different shape. Once I click other items than they will change those colors and shape with nice effects. Let's go ahead and start to build the project. I've created a new folder on the desktop called navbar, which right now is empty. Let's go ahead and open it in VS Code and then create our working files. The first one is going to be index.html. Then we need style.css and script.js. Then open the index.html file and create a basic HTML document. For that I'm going to use amides. Let's place here an exclamation mark and then press Tab or enter. Here we have the basic HTML tags. First of all, let's change the title. I'm going to pass your navbar. Then I'm going to link CSS and JavaScript files. Let's open link tag and specify here the name of this user's file. As for the JavaScript, I'm going to open script tag right above the closing body tag. And then we have to specify the path of the file in the source attribute. Alright, besides that, I'm going to bring in one more link for Font Awesome icons. Let's go ahead and search for Font Awesome. Cdn JS. Then copy the first link from here. Open the link tag in the head element, and paste the CDN link in the h reference attribute. Alright, we're almost ready to start to write the code. Let's run the project to the browser. For that I'm going to use one of the VS code package is called Live Server. It allows us to run the project live to the browser and make changes and updates without refreshing the page each time. Finally, let's place the editor and the browser side-by-side. Like so. And get started. I'm going to start to create the HTML markup. Let's open the HTML5 nav tag with a class. Now for inside that element, we will have seven different navigation items. Let's open the link tag with the class now per link. So the each link element will include Font, Awesome icon. Let's open I element with the classes FAS at a home. Then duplicate this line of code six times and change the class names of the Font, Awesome icons. The second one is going to be camera. Then we will have calendar out. The next one is going to be campus. Then we will have book. The next icon is going to be camera retro. And finally we will have headphones. Alright, so that's it regarding the HTML markup for now, let's go to the CSS file and customize the elements principle. I'm going to create some default and reset styles. Let's go ahead and select every element using an asterisk. First of all, I'm going to get rid of default margin and padding. Let's set both properties too. Zero. Then we need box-sizing, border-box. Also, I'm going to get rid of default styles from the link elements using text decoration, none. So throughout this project, we're going to use RAM as the measurement unit. Right now, 1 g is equal to 16 pixels because the font size of the HTML element is equal to 16 pixels. By default, I'm going to convert 1 g into ten pixels. And for that, we need to decrease the font size of the HTML element. Let's set it to 62.5 per cent. Alright, after that, I'm going to select a body elements and define its width and height. I'm going to set width to 100%. The height is going to be 100% of the viewport, I mean 100 vh. And also change the background color. I'm going to use RGB value 19124826. Next, I'm going to place the nap or in the center of the page. We can do that in a couple of different ways. In this case, I'm going to use a CSS grid. We need display grid And then place items center. So as you can see, the items are centered both horizontally and vertically. So let's see about the body elements. Next, I'm going to customize the napa. First of all, it's defined its width and height. I'm going to set width to 70, ran. For the height, it's going to be ten RAM. Besides that, I'm going to assign to it a temporary background color in order to see how the navbar looks like. So at setback on color to light gray CCC. Right now the navigation items ended up at the top left corner of the navbar. We have to send to them. And for that, Let's use flexbox. We need display flex. Then for horizontal centering, we need justify-content center. Let's put the vertical direction. We need align items center. Alright, that's it about the navbar. Next I'm going to customizing now per link. At first, let's define the width and height. Width is going to be tan RAM as by the height, I'm going to set it to 100%. Also, let's change the background color. I'm going to use again RGB value 222-23-3181 and get rid of the temporary background color from the Napa. Okay, next we have to position navigation items. I'm going to place them horizontally in the center and down below at the bottom of the napa. For that, Let's use again flexbox. We need to display flex and then align items with a value flex and also justify content center. Besides that, I'm going to create some space at the bottom using padding. Let's set padding bottom to one ramp. Right? That's it about the napa link. Let's move on and customers, the Font, Awesome icons. Let's select elements. First of all, I'm going to increase the font size. Let's set it to 2.5 brand and then change the color, make it 333. Alright, so the number is almost customized and now we have to make it work. Let's take a look at the finished projects. The half circle, which you see with the actin navigation item created using before pseudo element. So now I'm going to create this element. Let's select now pulling with before pseudo elements. First of all, we need to define the content. It's going to be empty. Then define width and height. Width is going to be ten. Run. As for the height, I'm going to make it a Tran. And I also am going to assign to it some temporary background color. Let's say red. Alright, so here we have before pseudo elements. Next, I'm going to change its position. Let's set its position to absolute. Actually, we need to position this element according to the Navajo link. So let's assign to each position relative. Next, we need to define the top and left positions. The top position is going to be -100%. That's probably left position. I'm going to set it to zero. And finally, let's change the shape of the before pseudo element using border-radius. It will take four values. The first one is going to be the top left corner. Let's set it to zero. Then the top right corner is going to be zero. Bottom right corner will be five RAM, while the bottom-left corner, it's going to be five-prime as well. Alright, so now we are ready to make an app will work. For that. I'm going to use some JavaScript we have to attach now buildings click event. First of all, let's select all know Berlin's. I'm going to create a new variable. Let's call it blinks and select all links using query selector. All methods. We need to specify here the class name now per link. Next we have to look through the links, actually the query selector all method returns an array-like object called node list. We have to look through this list and attach an event listener to each link. In order to look through the list, I'm going to use one of the array helper methods called forEach. This method works fine with node list. We don't have to transform it to the array. Otherwise, if you use another array helper method or if you want to look through the HTMLCollection than at first, where you have to transform it into an array. Okay, Let's use forEach method. We have to pass a callback function which will take one parameter. It's going to be the current item in the loop Next, we need to attach an event listener to each link. Let's specify here the type of event click and also pass you a callback function which will be executed once we click the link. So once we click the item, we have to move before pseudo element down. I'm going to add a new class to the link. Then we will select before see the island with this class and define the movement of the element with CSS. So let's add a new class to the link. We need here class list property, which includes all the classes that the animal has. Then it should be followed by the add method. And we have to specify here the name of the class. Let's say change. Alright, let's go to the CSS file and select before pseudo element with the class change and define top position. And it's -30%. Okay, so now if I click the navigation item then before pseudo element will move down, actually we have here a tiny issue. If we click and other navigation item than the before, so the arms will move down, but the previous one will keep its position. So we have to fix that. We need to replace the class name of the link element with Napa link. Again onClick. For that we have to look through the links and define the class name as napa link. So we need, again for each method with a callback function with one parameter link. So we have to define className. And it should be equal to NOPAT link. Alright, so as you can see, now the problem is fixed. Next, I'm going to change the color of the icons and also the background color. So we need to select an Albert link with class change. Let's define the background color. I'm going to use here RGB value 185-19-7147. Next, I'm going to select ions again with class change. Let's define color. It's going to be white. And also increase the font size, make it 3.5 rem. So as you can see, the navigation items change their colors and size. Once we click them, Let's take a look at the finished project. So once we click the navigation item than their siblings, change the border radius. So now we have to take care of that. Like the class change. I'm going to add a new class to the sibling elements of the ring. And then we will define styles and CSS. So we need to link them the property called previous elements sibling. Then again, we have to use class lease property. Well, the method add, and I'm going to specify here the class name. Let's say prev, EL change. I mean previous element change. Let's duplicate this line of code. Instead of previous sibling, we need next element sibling. And also change the name of the class. We need next element change. Alright, let's go to the CSS file and select eNobe or link with those newly added classes. So we have to set here border, top right, radius to 1.3 rem. Let's duplicate this code. Change class name, we need next element change. And in this case we need to pour the top left radius with the same value. Okay? So in order to see better if the border-radius works fine, Let's get rid of this temporary red background color and use the color which is the same as the background color of the body element. Okay, So now the border radius is visible, but as you can see, we need to adjust the position of the before pseudo elements lightly because the corners of the item don't look quite good. In order to do that at first, I'm going to increase the width of the before pseudo elements lightly. Let's set it to ten point for RAM. And then we need to move the elements to the left side. So let's change the position I'm in the left property. We need minus point to run. Okay, So now as you can see, we have a much better result. Actually, there is a tiny issue here. If we click the first item, then the border-radius of the next element on work. Because we have an error here. If I inspect the page and then switch to the console tab, you will see the error saying that cannot read property class list of null. It happens because the first item doesn't have the previous sibling. And the same problem we have with the last item. It doesn't have the next element sibling. In order to fix that, I'm going to create new elements in HTML. I mean, those elements which we have in front of the first item and the end of the number. So let's open the div tag with a class now per link Then copy this line of code and paste it down below. So now we have to do a couple of things because the navigation items don't look good at first, increase the width of the Navbar. Let's set it to 90 RAM. And then we need to disable pointer events for those newly-created the elements. Because once we click them, then we have the same effects as navigation items. Let's select developments using first-child, last-child pseudo-classes, and then assign to them pointer events, none. Okay, so now everything works fine. We just need to add a couple of different effects to the nav bar. First of all, let's make the effects smoother within a couple of transitions. That first, let's add a transition to the Font Awesome icons. We need the following values. Color 0.4 s, and then font size with the same duration. Next, let's add the transition to before pseudo elements with the class change. In this case, we need top 0.2 s. Besides that, we need to transition for the before pseudo element by default. In this case, we need top with a duration 0.4 s, and then background color with a duration 0.4 s. And also we need here a little delay time, 0.4 s. Okay, next we need to transition for the previous and next element siblings. In this case, we need border-radius with a duration 0.45 s. Now, as you can see, we have much better results. Next, I'm going to use transition for nap or link. We need here border-radius, 0.2 s. Besides that, we need here overflow hidden because if we clicked it before pseudo element at the top of the navigation item, then it will move down. We don't need that. So let's use overflow hidden. Alright, so now the problem is fixed. Next, I'm going to add a little shadow effect to the navbar. Let's use box-shadow with values 0.3 RAM three times, and the color AAA. Next, we need a border radius for the developments. I mean, start and the end of the novel. Right now they are selected together. So I'm going to select them separately. Then add to them. The radius for the first one is going to be 0.5 rem 00.5 Rome. As for the second one is going to be 0.5 rem, 0.5 gram. And then again zero. The border-radius is applied. But now the corners of the Napa are visible because of the shadow effect. So we need a border-radius for the Navajo as well. Let's set it to 0.5 ramp. Alright, the last thing that I'm going to do is to make the first navigation item active by default. Because if I reload the page, then we won't have any active items. In order to do that, we have to assign to the first development class, previous element change. And besides that we have to assign to the first link element class, change to the second link element class. Next element change. Now it's considered if I reload the page than the first navigation item will be active by default. All right, so finally we are done, we have finished to work on that project. Let's move on and start to build the next one. 9. Project 6 - Website Loaders: Okay, it's time to move on and create our next project. In this section, we're going to be creating a couple of different css loaders. Such loaders are used before the web page is loaded. And nowadays you may come across them on every modern website. Alright, let's go ahead and dive deeper into our project. So overall we have three different loaders. Let's describe them quickly. The first loader consists of nine dots. They are placed on three different lines, and each dot has an animation. There are scales and the opacities are increasing with some intervals. I mean that the duration of the animation for each dot is different. Second loader, we have five different lines during the animation. Their sizes are increasing with different delay times. As for the third loader, it consists of five different circles. Each circle has a nice animation. Those lighter things are created using the pseudo elements. Alright, so that's what we're going to create in this video. We will use HTML and CSS. So let's get started. I've created a new folder on the desktop called css loaders. Right now it is empty. Let's go ahead and open it in VS code and create our working files for HTML and CSS. The first one is going to be index.html. As for the second one is going to be style.css. Next, I'm going to open the index.html file and create a basic HTML document. For that, we need to place here an exclamation mark and then hit Enter or tab. Alright, so here we have the basic HTML tags. At first, let's change the title. We need to use css loaders. Then I'm going to link the CSS file. For that. Let's open link tag and specify here the path of the file. Alright, so now we have to run the project to the browser and then start to write the code. In order to open the project in the browser, I'm going to use one of the VS code packages called a live server. It allows us to run the project live to the browser. Okay, Finally, let's place the editor and the browser side-by-side. Like so, and get started. So I'm going to start with the first loader, I mean, those brown dots. So let's go ahead and first of all, create the HTML markup. I'm going to open the div tag with a class container. It will include the entire contents. Then I'm going to open another div tag with the class loader one. So overall we will have nine dots. And I'm going to create them using div elements with the class dots. Alright, so that's it about the HTML markup. Right now, nothing is visible on the page because we have just the empty div tags. Now we can start to write the CSS. First of all, I'm going to create some reset styles. Let's select all the elements using an asterisk. I'm going to get rid of default margin and padding from every element. So let's set both of them to zero. Throughout this tutorial, I'm going to use the RAM as the measurement unit. Right? Now one RAM equals 16 pixels because by default, the font size of the HTML elements is equal to 16 pixels. I want to convert one RAM into ten pixels. And for that, we have to decrease the font size of the HTML elements. Let's set it to 62.5 per cent. Alright, next I'm going to take here of the container. Let's select it and define its width and height. I'm going to set width to 100%. As for the height, it's going to be 100% of the viewport. And also let's set display to flex. Right now, I'm going to place the first loader in the center. But then once we create the rest of the loaders, I will change the flex layout slightly in order to center the elements we need to justify conference center and align items. Center. Okay, so that's it about the container. Next I'm going to select and customize the loader itself. So let's select it and set its width to 20 ran. Alright, next, let's go ahead and customize the adults. Set width and height, both of them 23 RAM. Then I'm going to make them rounded using border-radius with a value of 50 per cent. Also change the background color. Make it a five to a, to a. Next. I'm going to create some space around the dots using margin. Let's set it to 1.6 RAM on all four sides. And finally, change the opacity, make it 0.6. So now the dots are visible, but we have to align them in the right way. For that, Let's use the flexbox. I'm going to set display to flex Then in order to align elements are three lines. We have to wrap them. So we need to flex wrap with the value rap. And then I'm going to center them using justify-content center. So as you can see, the dots are aligned. So now it's time to create the animation. We will do that using CSS keyframes. Let's take a look at the finished project. As you can see during the animation, the adults are getting bigger and also the opacity in quizzes. Let's go ahead and create the CSS keyframes. I'm going to call it animate loader one. So during the animation, we need to increase the scale of the elements. So at 0%, I'm going to set transform scale to one. Then at 50 per cent, I'm going to increase the scale and also increase the opacity. So we need to transform scale with a value of 1.5. And the opacity is going to be 100%. I mean, at the end of the animation, we need to decrease the scale. And also we need to decrease the opacity. Alright, so the keyframes are created and now we have to apply these rules to the elements. For that, we have to use an animation property. As we said, we need different animation durations for the adults. So I'm going to select them using the nth child selector. Let's select the first one. Then use animation. We have to pass here a couple of different values. The first one is going to be the name of the keyframes animate load. The one that we need to duration is going to be 1.5 s. And also we need infinite because the animation should run infinitely. So as considered, the first dot is already animating. Let's duplicate this code eight times because overall we have nine dots. And then change the numbers of the nth child selectors and also the durations. For the second one we need 1.3 s. Then the next one is going to be 1.7 s. Next we have the fourth element. The duration is going to be 1.1 s. Then the next one is going to be 0.9, then 0.7. The next one should be 0.5 s. For the eighth item, I'm going to use 1.3 s. And for the last dot, the duration is going to be 1.5 s. Alright, so finally, we have here a nice animating load. Let's see about the first loader. Let's move on and take care of the next one. Like the previous loader. At first, I'm going to create the HTML markup. So overall we will have five lines. At first, Let's open div tag with the class loader to it's going to be the wrapper. And after that, create five lines using again div tags. So the markup is created. Let's go ahead and start to write the CSS. Let's select wrapper load or two and set its width to 25 ramp. Next I'm going to style the lines as first. Let's define width and height. The width is going to be 1.5 RAM. As for the height, it's going to be five rem. Next, let's change the background color. Make it 41, 69e1. And also make the lines slightly rounded using border-radius with value one RAM. So it's can see the lines are visible. Right now the loaders are placed too close to each other. I want to create some space between them. So let's go ahead and change the value of the justify content property for the container. Let's make it spaced evenly. So now it's better. Next, I'm going to place the lines side-by-side. For that. Let's use display flex. Also. I'm going to create space between them using justify content space evenly. And also I want to center them vertically. For that, we need to align items center. Alright, so the lines are aligned in the right way. And now we have to create the animation. So during the animation, I'm going to increase the height of the lines. And the animations for each line will have a different delay time. First of all, we need to create a CSS keyframes. I'm going to call it animate load or two So zero per cent, the height is going to be five RAM, which is the default one. Then at the 50 per cent, the height is going to be 18 RAM. And then at the end of the animation, I mean, at 100 per cent, the height is going to be again five. Alright, so the keyframes are created. Now we need to apply those rules to the lines. Let's select alliance with the nth child selectors. Select the first one. Then I'm going to duplicate it four times and change the numbers 1-5. So we need to run the animation for the middle line without delay time. I mean, for the third line. So we need animation with a name of the keyframes animate load or two than the duration is going to be 0.5 s. And again we need infinity. Then we need similar delay time for the second and fourth lines. So let's copy this line of code and assign it to the second and fourth lines. And also add delay time, which is going to be 0.3 s. As for the first and fifth lines, we need the delay time to be equal to 0.6 s. Alright, so it's considered a loader, works fine with a nice animation. In fact, with a second loader, we are done. Let's move on and create a third one. As usual, I'm going to start with the HTML markup. We need to open div tag with the class loader three. And then I'm going to pass here five div tags with the class circle. Okay, so that's it about the HTML markup. Let's move on and start to write CSS. I'm going to select your wrapper. Loads are three. Let's set its width to four to run. Then select and customize the circles. First of all, as defined within height, I'm going to set both of them to fall RAM than we need to make the element rounded. Let's use border-radius, 50 per cent. And also, I'm going to change the background color. It's going to be the temporary background color. Let's make it light gray. So here we have these circles. Let's align them using flexbox. We need display flex. And then we have to create some space between the circles using justify content space evenly. Alright, so the animation effects will be created using CSS keyframes, and before pseudo elements. So those animating elements will be before pseudo elements, before we create them, I'm going to add to each circle its own color. So let's select them using nth child selector. The first background color is going to be 9o6d. Let's duplicate this code four times and change the numbers and the colors. The second background color is going to be F9, C7 for f. Then we will have f8961 in. The fourth background color is going to be f37 22c. And the last one is going to be F9 for 346. Alright, now we have to create the before pseudo elements. So let's select circle, followed by before. First of all, we need to define the content. It's going to be empty. Then let's define width and height. I'm going to set both of them to 100%. And also we need to define position. Let's make it absolute. Position relative for the parent element, because the circle should align according to the parent element. After that, Let's make the elements rounding using border-radius with value 50 per cent And also set the opacity, make it 0.5. So right now the elements are not visible because they don't have the background colors. If we assign to them some temporary background color, let's say light gray, then you will see them clearly. Okay, So now I'm going to assign to each pseudo element the proper background color. Actually, we can grab this entire code from here. And then we need to add to them just the selector before. So now everything is ready and we can create the animation. First of all, let's define the CSS keyframes. The name is going to be animate loader three. So we have to increase the scale of the pseudo elements and then we need to hide them. The steps should be following. At zero per cent, we need scale to be one. Then add 50 per cent. The scale is going to be 2.5. The next step is going to be 75%. And again, we need scale to be 2.5. And after that, we need to hide the elements. So at eight per cent, I'm going to set opacity to zero. And also at the end of the animation, at 100%, opacity is going to be zero. Alright, so that's it about this CSS keyframes. Now we have to use the animation property. Let's assign it to the before pseudo elements. We need here the name animate loader three. The duration is going to be 2 s. Also, I'm going to use here one of the animation timing functions is out, and then again infinite. So it's considered the animation works. The only thing that we need to do is to add different delay times to the elements. So for the second before pseudo elements, we need animation delay to be 0.2 s. Let's copy this line of code. For the next element, we need 0.4 s, then 0.6 s. And for the last element we need 0.8 s. Alright, so that's it about the third loader. And actually we are done. All three loaders are created 10. Project 7 - Ripple Button: Alright, so let's go ahead and start to work on our next project. In this section, we're going to create a button with nice and cool hover effects. Once we hover over the button, then the yellow circle will expand to the entire bottom. It doesn't matter which side you hover over. The button from. This yellow element will appear from every side. Alright, so we're ready to start to create the button. I've created a new folder on the desktop called repo button, which right now is empty. Let's open it in VS Code and create our working files for HTML, CSS and JavaScript. Then open index.html file and create the basic HTML document. We need to place urine exclamation mark and then hit Tab or Enter. So here we have the basic HTML tags. At first, let's change the title. I'm going to place your report button and then link the CSS and JavaScript files. I'm going to open link tag in the head elements. And then we have to specify the path of the file. As for the JavaScript, I'm going to open script tag right above the closing body tag. And we have to specify here the path of the JavaScript file. Alright, so we're ready to start to write the code. Before that, I'm going to run the project to the browser. For that, I'm going to use one of the VS code packages called a live server. It allows us to run the project live to the browser and make the changes and updates without refreshing the page. Each time. Let's place the editor and the browser side-by-side, like so, and get started. So I'm going to start with the HTML markup. Let's open div tag with a class container. This element will contain the entire content. I mean the button. The button will be created using the link elements. Let's open it with the class btn and then pass year span element with a content. Explore. Alright, so that's it about the HTML markup. Let's start to write the CSS. First of all, I'm going to define some common and reset styles. Let's select every element using an asterisk. First of all, I'm going to get rid of default margin and padding from all the elements. Let's set both of them to zero. Also, I'm going to make box-sizing, border-box. Then let's get rid off default underlined from the link element using text decoration none. And also, I'm going to change the font family. Let's set it to Courier New monospace. Alright, so these styles are applied to the elements throughout this project, I'm going to use RAM as the measurement unit. By default, 1 g equals 16 pixels because the font size of the HTML element is equal to 16 pixels. I want to convert 1 g to ten pixels. And for that, we have to decrease the font size of the HTML element. Let's set it to 62.5%. So as you can see, the font size of the link element became smaller. Let's go ahead and start to work on the container. First of all, I'm going to define its width and height. Let's set with 200 per cent. As for the height, I'm going to make it 100% of the viewport. So we need hundred vh and also change the background color. Make it dark gray using 262626. Alright, next, I'm going to place the button in the center. And for that, I'm going to use flexbox. We need display flex. Then for horizontal centering, I'm going to set justify content to center. That's for the vertical centering. We need to align items center. So it's considered button is placed in the center and now it's time to customize it. Let's select BTN. And first of all, let's define this position. I'm going to make it absolute. Then I'm going to define the width and height for the Bateson. Let's make both of them 18 RAM. Then I'm going to change the background color. Let's use 90 E 0 E. And also make the button rounded using border-radius, 50 per cent. Okay, So the next thing that I'm going to do regarding the button is to create a border. Let's set its width to point to RAM than the style is going to be dotted As for the color, I'm going to make it white. Alright, that's it. Regarding the button. Next, I'm going to take here of this span element. First of all, I'm going to place it in the center for that. Let's use again Flexbox. I'm going to grab those three lines and paste them here. So this panel is centered. Let's go ahead and style it. Select btn span. At first, I'm going to set its position to relative. Then change the color, make it white. Also am going to increase the font size, make it 1.8 round. Then I'm going to make the phone bolder. Let's set font weight to 600. Also transform text into uppercase. And lastly, create some space between the letters. Let's set the spacing to point to run. Alright. So this span element is customized and I will have to create a hover effect. Let's take a look at the finished project. So once we hover over the button, then the yellow circle will cover the content. It appears from the exact side where we enter the mouse will create this effect using JavaScript and CSS animations. Let's go to the script.js file and start to write the code. The first thing that we have to do is to get the coordinates of the cursor inside of the button. I mean, we need to get the top and left position of the cursor measured from the top and left edges of the button. Before we do that, we need to select a button itself. So let's create a new variable. I'm going to call it btn. And then select button using query selector method. We need to specify here the class name BTN. After that, we have to attach to it an event listener with a mouse enter events. Also, we have to pass here the callback function, which will be executed once we hover over the button. Actually the mouse enter metal, fires only once when we hover over the element. So as we said, we have to get the left-hand top positions of the cursor inside of the button. In order to get these positions, we need to use decline x and client. Why properties? They give us the top and left positions of the cursor measured from the top and left edges of the viewport. In order to get the position of the cursor inside the button, we need to find the difference between decline x and y properties and the left-hand top position of the cursor. So to make it more understandable, Let's go ahead and write the code. At first, I'm going to pass urine event object. Next, I'm going to show you how to get the information about the elements. For that, we can use one of the methods called get bounding client rect. Let's run through the console and see what this method gives us. I'm going to pass here e dot, target dot, get bounding client. Right. Then I'm going to inspect the page and switch to the console tab. So if I hover over the button, then we will get an object called dumb racked. If I dropped down it, you will find here a couple of different properties. We have the positions I'm in, bottom, left to right and top. Also we have here the width and height of the element. Besides that, you can see here x and y properties. And actually they are the same as the left and top properties. We can use those values to calculate the left into positions of the cursor. Inside the button. For that, I'm going to create a new variable. Let's call it left. So we need here e dot client X, and we have to subtract to it. You don't target dot, get bounding client rect dots left. Let's check in the console what the left variable gives us. When we hover over the button, we will get the left position of the cursor. But now inside of the button. I mean it is measured from the left edge of the box. Alright? In the same way, we need to define the two position. We can simply duplicate this code, then change the name of the variable we need top. And also we need here client y instead of x, and we need your top again. Alright? So both positions are defined and now we need to create a new elements on those positions. We will do that using one of the methods called create elements. I'm going to declare a new variable. Let's call it ripple Then down below, we need to create a new div elements. As I said, I'm going to use create elements method. We need to specify here the tag name div. After that, we need to define left-hand top positions of the ripple. And we will use the values that we define here. So we need here ripple dot, style dot, left. And it should be equal to the value of the left variable. The same way I'm going to define the top position. Let's duplicate this line of code and change lacked into top. Okay, so the element is created, but we need to append it to the button. For that, we have to use one of the methods called prepend. We need btn dot prepend. And we have to pass here the variable Ripple. Ok, so in order to prove the element is creating on hover, Let's switch to the Elements tab, and then hover over the button. So as you can see, Dede Allen is created inside the button. So we have here left and top positions. Alright, Next we need to customize this element in the CSS file. Let's create a new class and call it ripple. In order to make a left and two positions work when it's defined the position of the whirlpool. Let's make it absolute. Then defined width and height. I'm going to set both of them to 100%. And also change the background color. Make it E7 be E 08. Alright, let's see about the styles of the ripple right now. In order to apply them to the elements, we have to add this class to the elements class list. So we need re-put dot class list followed by the add method. And we have to specify here repo. Okay? So if I hover over the button, then the new element will appear. If I hover over the button multiple times, then the multiple elements will be created. But we will fix that soon. First of all, let's make this a rounded. Let's use border-radius 50 per cent. And also we have to move it to the left hand upwards by -50 per cent. Let's use transform. Translate with -50%. Twice. Okay, so now we have a better results and it's time to create an animation. So by default, width and height of this element will be zero. Once we hover over the button, then the size of the republic should increase with animation. So let's create CSS keyframes. I'm going to call it a ripple anime. Overall, we will have two different steps. At zero per cent, we need within height to be zero. For the 100%, we should increase width and height to 100%. Alright, so the keyframes already know how to apply these styles to the elements using an animation property. Let's pause here, ripple anime as well. The duration is going to be 0.5 s. So now if I hover over the button, then the elements will appear smoothly. But as you see we have here a couple of issues. Once the element appears and its size is increased, then in heights. So we need to maintain the styles which we have at 100%. For that we need to use a value called forwards. So now this problem is fixed element no longer height. The next issue is that the size of the element is not enough to cover the bottom, so we have to increase it. Let's make it 200 per cent. So now the size is twice bigger, but still it's not enough because if I enter the mouse and stop it at the edge of the button, then the ripple won't cover. So let's increase within height slightly. I'm going to make them 210%. Alright, so now the problem is fixed. The next thing that I'm going to take you off is to hide the outer parts of the repo. For that we have to use overflow hidden. Alright, so now we have a much better result. The next thing that I want to do is to get rid off the repo. Once the mouse leaves the button, we have to use one of the events called mouse leave. Let's attach to the button event listener. With mouse live event. Also, we need here a callback function. Next, we need to remove the repo. For that, I'm going to use removed child method. We have to specify here. Okay, so finally, we are done. The button works perfectly. It has nice effects and animations. I think it was interesting and different, and I hope you liked it. Now, it's time to move on and start to work on the next project. 11. Project 8 - Rounded Progress Bar: In this video, we're going to create a progress bar with the shape of a circle with a percentage value. So the progress bar works on a scroll event. By default, we have here zero per cent. And once we start to scroll down the page, then this white line around the circle will be filled with the red color smoothly. And also the person's value will increase accordingly. Then if we scroll up, the percentage value will decrease and we will get back the white border. This project is a part of our upcoming Udemy course, in which we will build an advanced complete website with HTML, CSS, and JavaScript from scratch. It will be released soon, so stay tuned. Alright, so that's it, what we're going to create in this video. Let's go ahead and get started. I've created a new folder on the desktop called circle progress bar, which right now is empty. Let's go ahead and open it in VS code. I'm going to create our working files. The first one is going to be index.html. Then we will have style.css and script.js. Then open the index.html file and create a basic HTML document. We need to use Ahmed, let's place here an exclamation mark and then hit Tab or Enter. Okay. First of all, I'm going to change the title. Let's make it circle progress bar. And then link CSS and JavaScript files. I'm going to open link tag in the head element. Let's specify here the path of the file. As for the JavaScript file, I'm going to open script tag right above the closing body tag. And then in the source attribute we have to specify the path of the file. Right? After that, I'm going to run the project to the browser using a live server. Then place the editor and browser side-by-side. Alright, so at first we are going to create a progress bar using HTML and CSS. I mean, we will style it like so. And then we will make it work using JavaScript. Let's start with the HTML markup. I'm going to open a div tag, which is going to be container. Next we need another div tag which will wrap the entire content that's assigned to the class progress bar. Inside the div tag will need four different elements. Right now let's just create them and then we will explain and show why do we need those elements. So let's open a div tag with a class half circle. Then duplicate it three times. Actually, we don't need to touch the second development. The third one is going to be a half circle top. That's probably the last development. It's going to be a progress bar circle. As the content. Let's insert here zero per cent by default. Alright, so that's it about the HTML markup. Let's go ahead and start to write some CSS. I'm going to create some common styles. Let's select every element for that. We need to use an asterisk. So first of all, I'm going to get rid of default margin and padding from every element. Let's set both of them to zero. So I'm going to make box-sizing, border-box, and then change the font family. Let's use here aerial Helvetica sans-serif. So the common styles are applied to the elements. Next, I'm going to change the font size of the HTML. Because throughout this project, I'm going to use the RAM as the measurement unit. Right now, 1 g equals 16 pixels because the font size of the HTML element is equal to 16 pixels. I want to convert 1 g into ten pixels. And for that, we have to decrease the font size of the HTML. Let's make it 62.5%. So I can see the text became smaller. Okay, Next, let's take care of the container. Let's select it. First of all, define its width and height. I'm going to set its width to 100%. As for the height, I'm going to make it 200 per cent of the viewports because we need to scroll down the page. I can also change the background color, make it gray using 555. All right. After that, I'm going to take care of the progress bar itself. I mean the wrapper, define its width and height. I'm going to make both of them 40 ran. Also change the background color. Make it white And then make the progress bar rounded using border-radius with the value 50 per cent. So the progress bar should be placed in the center and it has to be fixed because once we scroll down the page, it shouldn't move. So let's set its position to fix than we need top and left properties, both of them to be 50 per cent. Then in order to censor the element perfectly, we had to use Transform with the translate function. We have two paths here, -50 per cent twice. All right, That's it about the wrapper. Let's move on and take care of the progress bar circle. Let's select it. And first of all, let's define its width and height. I'm going to set both of them 239.4 RAM. Then change the background color, it's going to be black. Also make the elements around it using border-radius, 50 per cent. Then change the color, make it white, and increase the font size. Make it forum. Okay, so this element installed, but we have to take care of its position. It should be placed in the center of the wrapper. And also we have to send to the person at each value inside the circle. In both cases, I'm going to use flexbox and in order to avoid to write the same code over and over again, I'm going to create a new class. Let's call it center and assign to it a couple of different flexbox properties and values. First one is going to be display flex that we need. Justify contents center for horizontal centering and align items center for the vertical centering. After that, we have to assign this class to be progress bar and the progress bar circle. Okay, so now it's can see the problem is fixed. So the progress bar is prepared. It has the default look. And now we have to make your work. As you remember, we created a couple of different developments. The first two developments which have a class half circle, will manage to fill the progress bar with the red color. So the first thing that I'm going to do is to hide the black circle for a while in order to explain and demonstrate things better that's assigned to display none. So the black circle is hidden, and now we have to take care of the three div elements, which will help us to make the progress bar work. Let's select all three elements simultaneously. I mean, we need half circle and half circle top. First of all, let's take care of their positions. We need position to be absolute. Also, let's set top and left properties, both of them to zero. And after that as defined width and height, I'm going to set width to 40%. As for the height, let's make it 100%. So right now they are not feasible. And in order to fix that, I'm going to assign to each of them a different temporary background color. Let's select the first half circle using nth child selector and set its background color to green. Then I'm going to duplicate this code, change the number we need here to S4, the background color, it's going to be blue. And finally, let's select half circle top and set its background color to, let's say orange. Alright, so all three developments are placed on top of each other. At first, I'm going to make the progress bar work on the hover in order to make it simpler to understand. And then we'll change the hover and use scroll event using JavaScript. So we need to rotate the first half circle by 180 degrees. As for the second half circle, we have to rotate it by 360 degrees because we have to fill the entire circle. As for the half circle top, I mean this orange elements, we have to make it hidden. So let's go ahead and select progress bar with hover, followed by the first half circle. Let's use again nth child selector that we need to transform with the rotate function. And as we said, the value is going to be 180 degrees. Let's duplicate this code. Change the nth child number, make it too. As for the value of the rotate function, it's going to be 360 degrees. Besides that, we need to use the transition to make the rotation smoother. So let's use transition with the values transform. The duration for the first half circle is going to be 1 s And also we need to use here linear. Then let's grab this code, paste it down for the second half circle. The only thing that we need to change is duration. Let's make it 2 s. So now if we hover than the elements will rotate, right now we see here just blue element because the green one is unmarried. If I pause the blue background here, then you will see the green elements. So the elements are rotating, but in a wrong way. I mean the origin of the transformation is set to censor by default. But in our case, we need to make it right center. So let's use the transform origin and make it right center. So in this case, the origin of the transformation is going to be the center of the element. But on the right side, once we hover over the progress bar, we have to hide this orange elements. So let's select progress bar with hover, followed by the circle top, and set its opacity to zero. So now the element heights once we hover over the progress bar. But actually it hides too early. We need to hide it. Wants the green element finishes rotating. So we need to hide it after 1 s. Let's use transition. With opacity. Duration is going to be 0 s. As for the delay, It's going to be 1 s. Alright, so now everything works fine. Now we have to change the colors and also we need to make those elements around it. The first two development should have a red color. I mean, the color B6 with four zeros. As for the third element is going to be white because the progress bar itself has the white background came. So now we need to hide those outer parts of the elements. For that, Let's use overflow hidden. Now it's concealed. We have a much better result. Finally, we have to make the black circle visible. So let's remove display none. Right now. They part of the circle is visible because it ended up behind the div elements. In order to fix that, Let's use the index property. We have to assign to it some higher value than zero, let's say ten. Okay, now, if I hover over the progress bar, then it will be filled with the red color nicely. Alright, so now we have shown you how to create a progress bar using CSS. And now we're going to show you how to make your work on scroll using JavaScript. Let's take a look at the finished project. So if I scroll down than the progress bar will be filled. And also the person that you value will change accordingly, that it will decrease once we scroll up back to the top. First, let's comment those styles out. I mean, this towels on hover. Then go to the JavaScript file. First of all, I'm going to select the div elements. I mean, for div elements, which are placed inside the progress bar. Let's go ahead and start with the half circles. Create new variable and call it half circles. In this case, we are selecting two elements, so we need to use query selector all method. Let's specify here the class name, half circle. The next element is going to be half circle top. So let's duplicate this line of code. Change the name of the variable. We need half circle top. Also we need to query selector. Instead of query selector, all method for the class name is going to be half so-called top. Let's duplicate this line of code. Once again, change the name of the variable. It's going to be progress bar circle. And also change the class name. We need progress bar circle. Alright, so all developments are selected. Next I'm going to attach a scroll event to the document. Let's use add event listener method. We need to specify here the event is going to be Scroll. And also we need here a callback function which will be executed once we scroll the page. So as you know, the one complete rotation is equal to 360 degrees. We have to convert the scrolled portion of the height into degrees. Before we do that, we have to define a couple of different variables. The first one is going to be the viewport, height of the page. Let's create new variable and call it page viewport, height It's going to be window in your height. The next variable is going to be the entire height of the page. So let's create page height. It should be equal to documents dot document elements. And then we need scroll height. So again, we defined here the entire height of the page. And the last variable is going to be this crawled portion of the page. So let's create new variable. I'm going to call it scrawled portion. And it should be equal to Window dot page Y offset. Alright, so now everything is prepared to convert the height of this growth portion into the degrees. Let's create a new variable. I'm going to call it the scroll portion degree. And now we have to use the following formula. We need to divide scrolled portion to the difference of the page height and page viewport height. And we have to multiply the result by 360. So we need to you scrolled portion divided by the difference of page height and page viewport height. We have to multiply it by 360 degrees. Let's go ahead and see in the console what this variable gives us. Let's run through the console is called portion degree. So let's inspect the page and switch to the console tab. Once we scroll down the page and go to the end of it, we will get the proper values 0-360 degrees. Alright, so now using this variable, we will rotate half circles. So we need to loop through them and rotate each half circle. I'm in the first and the second developments inside the progress bar. So in order to loop through them, we have to use one of the array helper methods called for-each. It takes one parameter, which is going to be the callback function. It will be executed for each element. The callback function itself takes one parameter and it's the current item in the list. Let's call it E L elements. Now we have to transform each element. We need style transform. Then open back ticks. We need here rotate function. And as the value, we have to pass you scroll portion degree. So now if we scroll down, then this scroll bar will start to feel. Once we reach half of it, then we need to stop the first half circle. And also we need to hide the third div element. I'm in the half so-called top. So we need to use the if statement where we have to define if Scott portion degree is greater than or equal to 180. So let's insert you mentioned condition. If this condition is true, then we have to give the first half circle the fixed value equal to 180 degrees. In order to select the first half circle, we have to use the index number zero. And then we need style transform. It should be equal to rotate 180 degrees. So we need to hide the half circle top. Let's use style, build opacity, and make it equal to zero. So now, once we scroll down, the entire progress bar will be filled. What do we have here? A tiny issue once we scroll up and is called portion degree becomes less than 180 degrees. We have to display back half circle top. So we need to create else statement. Then let's grab this line of code, paste it here, and change this value, make it one. So now it's can see everything works perfectly. The only thing that have to do is to make the percentage value work. In this case, we have to convert degrees into a percentage value. Let's create a new variable. I'm going to call it scroll portion percent. So in this case we have to divide scrolled portion degree by 360 degrees, and then we have to multiply it by 100. Okay? Now we have to display this value as the contents of the progress bar a circle. So let's use progress bar a circle with text content. Then open backticks. Insert here, scrolled portion present, followed by the percentage sign. So right now the percentage value works, but we have here the decimals. In order to get rid of them, we have to use one of the methods called Math.floor. So now as you can see, everything works perfectly. And actually with the project, we are done 12. Project 9 - Slideshow of Social Media Icons: In this video, we're going to be building a slideshow of the social media icons. It's going to be a small one, but I think it will be interesting before we start to create the project, I'm going to describe it. So we have here a full-screen background image and a couple of pretty nice social media icons. They are moving with some integrals. And the icon in the center is becoming lighter. For the rest of the icons, they are darker by default. So as we said, we're going to build this project with HTML, CSS, and JavaScript. So I expect that you all already know the basics of those three technologies. I've created a new folder on the desktop called slideshow, in which I have another folder for the images. Let's go ahead and open this folder and VS code. I'm going to create our working files. The first one is going to be index.html. Then we will have style.css and script.js. Let's open the index.html file and create a basic HTML document. For that, I'm going to use Emmet. We need to place here an exclamation mark and then hit Tab or Enter. Alright, after that, Let's change the title. That seems a few social media icons. Then I'm going to link CSS and JavaScript files. Let's open the link tag in the head element and specify the path of the CSS file. As for the JavaScript, I'm going to open the script tag down below, right above the closing body tag. Specify here the path of the JavaScript file. After that, let's run the project to the browser. For that, I'm going to use a live server, which allows us to run the project live in the browser using a local server. And finally, let's place the text editor and the browser side-by-side. Like so, and get started. So we're ready to create an HTML markup. Let's open the div tag, which is going to be the wrapper of the content. Let's assign to the class slideshow. Overall, we will have five different social media icons. They will be represented by the images, and also they will be wrapped by the link elements. So it's open link tag with a class slideshow link that institute here and image. I'm going to select image called slideshow IMG one. Let's duplicate link element four times and then quickly change the numbers of the image names. Okay, so that's it about the HTML markup. Everything is prepared and now we can write some CSS. First of all, I'm going to customize and airline the icons. And after that, we will make the slideshow work using JavaScript. At first, let's create some common and reset styles. Let's select all the elements using an asterisk. First of all, I'm going to get rid of default margin and padding from every element. So let's set both of them to zero. Also, we need box-sizing, border-box. And I'm going to get rid of default styles from the links. Let's use text-decoration, none. So throughout this project, I'm going to use a ramp as the measurement unit. By default, 1 g equals to 16 pixels, because the font size of the HTML element is equal to 16 pixels. I'm going to convert one ran into ten pixels. And for that I'm going to decrease the font size of the HTML elements. Let's make it 62.5%. Okay, so that's it about the common styles. Let's select a wrapper div elements. First of all, I'm going to define, we can hide, let's make with 100%. As for the height, I'm going to set it to 100% of the viewport. Next, I'm going to set the image as the full-screen background. But before that, let's use function called radial gradient. Radial gradient function sets the color transition from the center. So I'm going to specify here two different colors. The first one is going to be 483 times and the opacity, 0.9 to five. That's for the second color. I'm going to insert here black color with the opacity 0.9 to five. After that, let's define the URL. I'm going to select image called bg dot PNG. Also we need here centered at the position and no repeat. Lastly, let's define the size of the background. Let's make it cover So as you can see, we have here a full-screen background image. Next, I'm going to place the icon side-by-side for that. Let's use flexbox. We need display flex. And after that, let's align icons and center vertically. Use align items. Center. Also, let's create some space on the left and right sides using padding. I'm going to set it to zero and then to run. Alright, let's see about the wrapper. Let's take care of the icons. I'm going to decrease their size. Let's select it first slideshow link and make its width 20%. After that, we have to define the width of the image itself. So let's select IMG elements and set width to 100 per cent. So in this case, the image will take up 100% of the width of the parent element. Right? That's it about the CSS. For now. We have to make the slideshow work using JavaScript. So it's open this script.js file. First of all, I'm going to select your wrapper div elements. I mean the slideshow, let's create a new variable and call it slideshow. Then select the element using query selector method. We have to specify here the class name. Slideshow. Alright, let me tell you how we're going to make this slideshow work. We will remove the first icon from the list, and we will add it back to the list as the last one. We will do that with some intervals and also with some smooth transitions. That's all about the process of the slideshow. As we said, we need some intervals. And for that I'm going to use one of the built-in methods called Set Interval. It takes two arguments. The first one is a callback function, which is executed after each interval. As for the second argument, it's going to be the amount of the interval itself. We're going to change the images after 3 s. So I'm going to pass here 3,000, 3,000 milliseconds, which is equal to 3 s. Okay, so as we said, we have to remove the first icon and then add it to the list as the last one. So first of all, let's select the first icon. I'm going to create new variable. Let's call it first icon. I'm going to select first icon using one of the properties called first element child. I mean, it's going to be the child of this slideshow. So now the first icon is selected, and in order to remove it from the wrapper div elements, I'm going to use one of the dome methods called remove child. So we need slideshow. Then remove child. And as the argument, we have to pass your first icon. As you can see after every 3 s, the icon. So removing, as we said, we have to add them back to the list. And for that, I'm going to use another dome method called append child. By default, it adds an element as the last child. So we need slideshow followed by the append child method. And as the argument, we have to pass here again for a second. Okay, So as you can see, the slide show all the works. But we need to add to it a couple of different effects. The first thing that I'm going to do is to remove the first icon smoothly with a fade effect. In order to do that, I'm going to create a new class in CSS. Let's call it faded out. So this class will include two styles. In order to fade the elements out, we need to make the opacity and the width, both of them zero. So let's set opacity and width to zero. And besides that, we have to use transition for the first icon. In order to select first icon, I'm going to use f child selector. We need to specify here one. And then let's insert your transition with with a duration of 0.5 s opacity with the same duration. That's it about the CSS. Let's go back to the JavaScript file. Now, we need to add class faded out to the first icon. So we need here first icon, followed by the property called class list, which gives us all the classes of the element. Then we need to use method called add. And we have to specify here class name faded out. Now the icon is removing but without any fade effect because transition effect needs some time. Actually half of the second We need to wait for half of this second before we remove the element from the list. In order to do that, I'm going to use one of the methods called setTimeout. It allows us to execute the function once with some delay time. So this method takes two arguments. The first one is a callback function. Let's interfere those two lines. As for the second argument, it's going to be a delay time. In this case, we need half of the second 500 milliseconds. So now the icon is removing with a nice fade effect. Now we have to add it back to the list again with a fade effect. In order to do that, we have to remove class fade out from the elements. We need first icon, followed by the class list property. And then we have to use method called remove. Let's specify here the class name fade out. Now the icon is added to the list, but without any fade effect. Because again, we have to wait for half of the second. So we need to use again set timeout function that insert this line of code inside of the function and also specify the delay time, 500 milliseconds. So now, still we don't have here the fade effect because we need to define the transition for the last icon. Let's go to the CSS file. Actually, we need the same transition that we used for the first icon. So I'm going to add here just the selector for the fifth icon. So right now, everything works fine and we can move on and take care of the second effect. I mean, we have to make the icons darker by default. And then we have to make them lighter once they take third place, in the least, like it is in the finished project. First of all, let's make all the icons darker. For that, I'm going to use one of the CSS properties called filter with a function called brightness. Let's insert your 0.1. So this value means that the element keeps only ten per cent of its default brightness. After that, I'm going to create a new class and CSS, which will include the higher brightness. And we'll add this class to the element using JavaScript. Let's call this class light than use again filter, where the function brightness as the value of interest to you, 1.5. Okay, let's go back to the JavaScript file. Now we need to select the third icon and we have to add to it a newly created class light. Let's create a variable and call it third icon. In order to get access to the third icon, I'm going to use property called children. And then in square brackets, we have to specify the number of the elements. In this case we need three. So now we have selected the element and we need to add to it class light. So we need here foot icon, dot, class list, dot add. And we have to specify here the class name light. Now as you can see, the icon is becoming lighter, but it keeps the brightness. So we don't need that. We have to remove back the class light. We need to remove it from the previous sibling of the third icon. Because once it moves, then it's no longer the third icon in the list, but the second one we need here through the icon dot, previous elements sibling, followed by the class list property. Then we need a method called remove. And again, class like Okay, so now everything works fine. We just need to add a transition to this effect. Let's go to the CSS file. Select the third icon. Use again nth child selector than Institute transition with filter 0.5 s. Okay, so now we have much better results. I can, it's becoming darker smoothly. But as you can see, we need transition once the icon becomes lighter as well. So let's add a transition to the class light filter as the duration. Let's specify here 1.5 s. Okay, so now everything was fine. And before we finish this tutorial, I'm going to do one more thing. If I reload the page than all five icons will be darker. We don't need that. We need to make your third icon lighter by default. And to do that, I'm going to add class lights to the third icon and the HTML file. Okay, that's it. Finally we are done. We have finished working on the projects. Again, it was a small one, but I hope it was interesting. And you enjoyed it. See you next time. 13. Project 10 - Forms with Validation: Alright, so it's time to start to work on our next project. In this video, we're going to be building a sign-in and sign-up forms. Nowadays, we made sign in and sign up forms on almost every website. So this kind of project is going to be interesting and helpful for you because when you work on your projects, you should know how to deal with these things. Before we start to write the code, let's go ahead and describe the project. So here we have two different buttons, sign in and sign up at the top left corner of the page. Then we have here the heading. By default it displays sign in but will program it using JavaScript. Then down below, we had a couple of input fields and a submit button. By default, there are displayed input fields for signing in. But if I click the Sign Up button, then we will get here the input fields for registration. Besides that, the project includes a form validation. For example, if I live the input fields empty and click the submit button, then we will get the error messages saying that email and password are required. If I feel, for example, one of the inputs, let's say the password and click the submit button. Then the input field will get a green border, which means that we have entered the valid data and the inputField. Okay, So the project is going to be responsive to different screen sizes. If I inspect the page and switch to the responsive mode, you will find that the project is responsive. We built this project for extra large screen size. I'm in the screen size with 1920 pieces of width and 1080 pixels of height. So if you're using a relatively smaller screen size than the project, might not look quite good during the tutorial, but do not worry at the end of the day, we will make it responsive. In the meantime, you can switch to the responsive mode, set the width and height for the extra large screen size. And follow me. As we said, the project is going to be built based on HTML, CSS, and JavaScript. So I hope that you already know some basics of those three technologies. I think we're ready to start. I have created a new folder on the desktop called sign-in, sign-up form, which right now is empty. Let's go ahead and open it in VS code and create the working files for HTML, CSS, and JavaScript. We need index.html, then style.css, and script.js. Then open index.html file and insert here the basic HTML document. For that, I'm going to use an animate. Let's place here an exclamation mark and hit Tab or answer. Okay. Let's go ahead and change the title. I'm going to insert you sign in, sign up form. And then after that, let's link the CSS and JavaScript files. I'm going to open link tag, specify the path of the CSS file. Then in order to link the JavaScript file, I'm going to open script tag right, about the body and the source attribute. Let's specify the path of the file. Lastly, I'm going to run the project to the browser. For that, let's use one of the VS code package is called Live Server. It allows us to run the project lied to the browser and make updates without refreshing the page each time. So you can install and use this package. Alright, let's place the editor and browsers side-by-side, like so. And get started. As usual, I'm going to start to create HTML markup. So let's open div tag, which is going to be the container. Then I'm going to insert your H1 heading element with a class heading. The heading will consist of two different span elements. Let's open it with the class heading, span one, institute the text sign, and then create a second span element with a class headings on to insert here. That's it about the heading. Next, I'm going to create buttons. So let's open div tag, which is going to be the wrapper of the buttons. I'm going to assign to it class buttons. Then insert ear buds and elements with the class sign in BTN. Let's insert you sign in. Then I'm going to duplicate this line of code and change the class name. We need to sign up and sign up. Next, I'm going to create a form, but before that, let's insert here a div tag which is going to be the background of the form. I mean the triangle as the scientific class for g. Then I'm going to open form tag. It will have two different classes. The first one is going to be formed. As for the second one, Let's insert your sign in Overall, we will have a single form element with four different input fields. And we will manage to display, sign in and sign up parts using JavaScript as open div tag, which will be the wrapper of the input field and paragraph. Let's assign to it class form input wrapper. We will use the paragraph to display an error message. Let's insert here input element with type texts. Besides that, I'm going to add to it a couple of attributes assigned to the cluster form inputs. Then we need the id, which is going to be username. Now lastly, let's use a placeholder attribute will devalue your name. Okay, That's it about the input element. Let's create the paragraph with the class message. By default, I'm going to insert here error message. But eventually we will define the error messages from JavaScript. So the first input field is created. Let's go ahead and duplicate the element three times and then make some changes. For the second input, we need ID email. Also change the placeholder attribute, enter your email address. Next, we will have input for the password. So let's change the type, make it a password, and also change ID and placeholder attributes. We need a password for both of them. Okay? The last input is going to be for password confirmation. So I'm going to make the type of the input again, password. As for the ID is going to be passport to. Finally change the placeholder attribute, I'm going to make it confirm password. Alright? The last element that we're going to create in the HTML document is going to be a submit button. So let's open input element with type submit. Also add here the value submit. And finally, use your class form btn. Alright, so that's it regarding the HTML markup. Now we have to start to write the CSS. First of all, let's create some reset and common styles. Let's select every element using an asterisk and gets rid of default margin and padding. I'm going to set both of them to zero. Besides that, Let's set box-sizing border-box, and also gets rid of default outline from every element. Let's set outline to none. Next, I'm going to change the font family. Throughout this tutorial, we're going to use one of the Google fonts. So let's go to the Google Fonts website and search for a font called in console ladder. Then select all different styles here. Grab the link and paste it in the head element. Let's change the font family. That's insecure in console ladder and monospace. That's silly about the common and reset styles. I'm going to use RAM as the measurement unit in this project. Right now, one rem equals 16 pixels because the font size of the HTML element is equal to 16 pixels. By default, I want to convert one RAM into ten pixels. And for that, we have to decrease the font size of the HTML elements. Let's make it 62.5%. So as you can see, the elements became smaller. Let's go ahead and take care of the container. Let's select it. And at first defined width and height, I'm going to set with 200 per cent. As for the height, I'm going to set it to 100% of the viewport. Then I'm going to center the content. And for that, Let's use flexbox. We need to change the direction. Let's make it column. And then in order to place the content in the center, we need justify-content center and align items center. Okay? So the elements are placed in the center and with the container we are done. Let's move on and customize the heading. First of all, let's take care of its position. I'm going to move it up. So let's assign to a position absolute. And then define top position, make it five ramp is considered, the heading is positioned, and now I'm going to style it at first. Let's change the font size, make it seven RAM. Then I'm going to make the font lighter using font weight 300. Also change the color, make it Three-five, three-five. Next, I'm going to create some space between the letters using letter spacing one room. Also create some shadow effect. Using text shadow. Let's assign truth values 0.2, 0.2, 0.5 RAM, and the color AAA. Right now, That's it about the heading. Let's move on and customize the buttons. At first, I'm going to define their positions. So let's select wrapper div elements, which has the class name buttons, and set its position to absolute. And then define top and left properties. I'm going to set both of them to five ramp. So the boxes are placed at the top-left corner of the page. And next, I'm going to place them vertically in a column. For that, Let's use flexbox. We need display flex and flex direction column. Okay, let's move on and select buttons. I'm in the button element itself. First of all, I'm going to define the width and height. Let's make with ten RAM. As for the height, I'm going to set it to for RAM. And also change the background color, make it white. After that, Let's change the font size. I'm going to make it to Ram. Also change the color. Let's use again color F zero, three-five, three-five. Then I'm going to get rid of the default border. Let's set it to none. Also, I'm going to make the corners of the boxes around them using border-radius with a value of five rem. Next, let's create some space between the letters using letter spacing 0.1 RAM. So I'm going to create a little shadow effect. So let's use both shadow with the values 0.3, 0.3 RAM than 0.8 rem, and the color E. Then we need some space at the top and the bottom of the buttons. So let's use margin with the values one, RAM and zero. And finally, let's change the type of the course will make it point. Alright? So the buttons are styled and now we have to take care of the form. Let's go ahead and select it. I'm going to make form element flex container. So we need display flex. And also I'm going to change the direction. Let's set the flex direction to call. Next, let's take care of the form input wrapper. But before that I want to hide those paragraphs for awhile. So let's go ahead and select them and assign to them display none. After that, Let's select form input wrapper. I'm going to create some space at the top and bottom using margin. Let's set it to 1.5 rem and zero. Alright, let's go ahead and select input element itself. And define for the fall width and height. I'm going to set width to 50 RAM as fully height. Let's make it five RAM. Also change the background color, make it white. Then I'm going to increase font size. Let's make it 1.7 rem. Then create some space on the right and left sides inside of the inputs using padding, Let's make it 0.2 ram. And lastly, let's create some space between the letters using less spacing points to ramp. So those were the common styles of the inputs. The inputs and the submit button. Now I'm going to select form input itself. Let's create some shadow using box shadow with the values point we ran. We ran 0.5 rem. Next we need to call or E. And also I'm going to add here one more value. I want to create shadow inside of the input. And for that we have to use value called inset. Next, let's change the color. You see your color 888. Alright, after that, Let's get rid of the default border for all input elements. So I'm going to set the border to none. And also I'm going to make corners rounded using border-radius be the value of five rem. Okay? So right now, input elements have a box-shadow inside of the fields, and I'm going to create it outside of the element as well. For that, let's assign the box shadow property to the form input wrapper. It's the same truth values, 0.5 RAM three times. And the color ie And besides that, we need for the radius with the value five ramp. Now, each input field has a box-shadow inside and outside, which makes them look good. Let's go ahead and take care of this submit button we see here just the text submit. So let's go ahead and select this element. And at first, create shadow using box shadow. I'm going to pass you values 0.5 rem, 0.5 RAM, one RAM, and the color D, D, D. Also, let's change the color of the text. Let's use again red color at 03535. Next I'm going to create some space at the top and bottom using margin. Let's set it to two ram and zero. So let's create some space between the letters. Use lateral spacing points to run. And then make the font bold are using font-weight bold. The submit button looks good. Next, I want to create a little hover effect. I'm going to increase the bulk shadows slightly once we hover over the button. So let's select Form btn with hover. And assigned tooth box shadow, where the values 0.5 RAM, 0.5 RAM to RAM, and the color d, d, d. Okay? So the last thing that we have to do before we add the functionality to our project is to create a background. As you know, we have an empty div element in the HTML document with the class form PG. So let's go ahead and select this element. And at first, let's set its position to absolute. Then I'm going to set width and height, both of them to 65 RAM. Also use here box shadow with 1.5 round three times and the color ddd. Finally, I want to rotate this element by 45 degrees and it will create a triangle effect. So let's use Transform with the rotate function and inserting here 45 degrees. So as you can see it, we're done with the background. Actually. Right now we have a little issue here. I can't focus on the inputs. So in order to fix that, let's assign to the form element Z index property with some higher value, let's say 100. Alright, so now the problem is fixed and actually with this Thailand, we are done for now. We need to add some functionality to the project. Before we start to write some JavaScript, I want to do a couple of things and CSS. Once we focus the inputs, then I want to increase the box-shadow inside of the inputField. So I'm going to select form input with a focus pseudo-class. And then insert your box shadow with the following values. Five ramp, 0.5, rem one RAM than the color E. And also we need here the value in set. Then use transition. I want to assign transition property to all input elements including the submit button because it also has a box shadow effect on however, it's defined transition with the values box shadow and 0.3 s. Okay, so now we have a much better effect. I'm going to change the course of type for the submit button. So let's make it pointer. Alright, now it's time to add some functionality to the project. Let's take a look at the finished version. By the way, we don't have here the triangle background because the finished project is all our responsive. I'm going to program those two buttons. As you can see by default, the sign-in button has a different background color. And once we click the Sign Up button, then the background colors will change. Besides that, the second part of the heading is changing accordingly. And also the proper input fields of displaying onClick. We're going to do those three things. At first, let's get rid of default, white background color from those buttons. Then select the sign-in button and change the background color. I'm going to use your color E7, E7, E7. Then select Sign Up button and make it's background color white. Alright, now I'm going to change the background colors onclick. Let's go to the script.js file. So we need to attach to both buttons event listeners with the click event. Then once we click the Sign Up button, we need to add to the container a new class which will be used in CSS We will define new styles with the help of this class. So first of all, let's go ahead and select container. I'm going to create a new variable container. And then select container using query selector method. We need to specify here the class container. After that, I'm going to select the sign-up button and attached to it and event listener. So let's go ahead and use again query, select a method and specify here the class name, sign up btn. Then attach to it at event listener with a click event. And also we have to pass here the callback function, which will be executed once we click the button. When we click the Sign Up button, then we have to add to the container a new class. So we need here container, followed by the class list property, which stores all the classes that the element has. So in order to add the class to the container, I'm going to use a method called add. Inside the parentheses. We have to specify the name of the class. Let's call it change. Alright, let's go to the CSS file and select the sign-up button, but with the class change. And then set background color to E7, E7, E7. So now if I click the Sign Up button, then its background color will change. But actually it's not enough. As you see, Sign In button still has the gray background color. So let's go back to the JavaScript file. Now we have to attach to the Sign In button and event listener. And we need to remove class change from the container. So let's go ahead and select Sign In button using querySelector method and then attached to it event listener. Let's pause here, click event, and also the callback function. So as we said, we have to remove class changed on the container. Let's go ahead and grab this line of code. And instead of method called add, let's use remove. Then go to the CSS file. Unlike the Sign Up button, select sign-in button with the class, change, and set its background color to white. Now, as you can see, everything looks fine. The background colors are changing. The only thing that had to do is to add a transition effect to the buttons. So let's use transition with background color and with the duration 0.3 s. Alright, so now we have a much better effect. Next, I'm going to take care of the heading. Once we could do buttons, we should change the second part of the heading accordingly. At first, I'm going to change it without any effects. And then once we managed to change the content, then we will add some nice effects. Let's go to the JavaScript file. And if first, let's select the second span element in the heading. I'm going to create new variable. Let's call it Headings Part two. And then select span elements using querySelector method. Let's pause here. Classname heading span two. So in order to change the content of the elements, I'm going to use one of the properties called text content. So we need herring spawn two, followed by the textContent property, and we have to assign to it up. Let's copy this code. Paste it down below and change up into E. So if I click the buttons, then the content will change accordingly. Everything works fine. And now as I said, I'm going to add some nice effects to this change. Let's take a look at the finished project once again. So when I click the buttons, then the white box is moving from right to left and creates a nice effect. This white box is going to be the after pseudo elements are. First of all, let's create these elements. We need hiding spot two, followed by the F2 pseudo elements. At first, let's define a content. I'm going to make it empty. And then set position to absolute. I'm going to define the position of this element according to its parent, which is span element itself. So I'm going to assign to the span element position relative. Then define the width and height of the box. I'm going to set both of them to 100% and also give it some temporary backgrounds different from the white color because I want to make the box visible. Let's use here color light gray. So now the box is visible. And next I'm going to define its position By default, I'm going to place it on the right side. Let's set right position to -100%. Alright, so when I click the Sign Up button, this box should move to the left side. And in order to achieve then I'm going to use again class change. Followed by the headings span two with after pseudo elements. In order to move the elements, I'm going to set right position 200 per cent. Now, if I click the buttons than the box will move. Let's add to it a little transition. Let's assign to it, right? And 0.6 s. Now the box is moving with a smooth transition. It's can see when the box moves to the left side, then it ends up on top of the heading. I'm in the first span element. So we need to fix that and we can manipulate with the z-index property. Let's select the first span element, which has class heading spine one, and set the index property to ten. Okay, so now the problem is fixed and the only thing that have to do is to add some delay time before the continent is changed. Because right now at first the content is changing and then the box is moving. And actually doesn't look good. I'm going to create delay using one of the built-in functions called setTimeout. Let's go to the script.js file and insert here. Set time out. This function takes two arguments. The first one is the callback function, which is executed after some time. And the amount of these time is going to be the second argument. Let's execute this line of code. As for the timeout, you need to specify it in milliseconds. So let's insert a year, 200. Let's copy this code and paste it down here. I'm going to change up into E. So now if I click the buttons, then the effect will work fine. The only thing that had to do it to get rid of this temporary color and interview white color. Okay, so now we have a nice and cool effect. Alright, so with the heading we are done and now have to take care of the input fields. By default, we need to display email and password inputs n. Once we could be Sign Up button, then we have to display back the first and the last name plus. So let's go ahead and hide the first and the last input fields. I'm going to select them using f child selector. Actually going to select form input wrapper. We need here F child one. Then duplicate this selector and changing number. Insert here for. So in order to hide those elements, I'm going to use visibility hidden and opacity zero. So as you can see, the inputs are hidden, but now the submit button is too far from those inputs. So let's take care of that. I'm going to set position to relative. And then in order to move the element up top position with a value minus six. Now, when we click the Sign Up button, but we have to do a couple of things. We need to display it back. The first and the last inputs. I'm going to duplicate this code. Then let's add to both selectors class change. Then we need to change the values. Instead of visibility hidden, we need visibility visible and opacity one. Besides that, we need to move this submit button back to its default position. So let's select Submit button with class change and setup positioned to one ramp. So if we click the Sign Up button, then everything will work fine. Now to make this change nicer, we have to use transition. At first. Let's add a transition to the input rappers. We need your values all and 0.3 s. Then we need to transition with class change. And also we need you to use some delay time. So when we click the Sign Up button, then this transition will work. And once we click the Sign-in button, then this transition will work. Alright, so with input fields, we are done. Let's add a transition to the submit button. By default, I'm going to set transition to top. Then the duration 0.3 s, and also the delay time 0.3 s. And also we need transition here with the value is top and 0.3 s. So if I click the Sign Up button, then we submit button will move smoothly. But once I click the Sign In button, then we won't have any transition effect. The reason is that we used transition with input elements. And actually this selector has the higher precedence So I'm going to get rid of transition from here and add box-shadow down below in both cases. So now if I test, then everything will work perfectly. Okay. So the next thing that we have to do is to validate all those input fields. First of all, I'm going to select all four input elements and store them into the variables. Let's go ahead and create the first variable, which is going to be username. As it remember, input elements have the IDs. So I'm going to select username using get element by ID method. We have to pass the ID username. Let's duplicate this line of code three times and change the names of the variables and also the IDs. The second one is going to be e-mail. Then we will have password and password too. Alright, at first let's check if the input fields are empty or not. I'm going to create a function. Let's go ahead and call it check required fields. I'm going to use here arrow function. This function will take one parameter which is going to be an array, and it will include all the amplitudes. So as the parameter, I'm going to insert your inputs array. So in order to check if input fields are empty or not, at first we need to loop through the array. And for that, I'm going to use one of the array helper methods called for H. It takes one argument which is going to be the callback function. This function itself takes one parameter and I'm going to pass your input. It's going to be the current input element During the loop. Alright, so now we need to check if the value of the input is empty or not. So we need to use if else statements. And as the condition, I'm going to pass here, input dot value triple equals to empty string. Actually, input value is not quite enough here because if we enter something in the input fields with a whitespace, then this whitespace will be recognized as the part of the value which we don't need. So to avoid this kind of thing, I mean, in order to ignore the whitespace, we can use one of the methods called trim. Okay? So if this condition is true, then we have to display an error message. Let's just put here the comment. And if it is false, then we need an else statements in which we have to change the color of the border of the inputs into green. So let's institute a success for awhile. So in order to do those two things, I'm going to create two different functions. Let's start with the error message. I'm going to create a new function. Let's call it error. It will take two parameters. The first one is going to be the input elements. As for the second one, it's going to be a message. So now we need to get access to the form input wrapper, which is a parent element of the input. We will add a new class to the wrapper. And with the help of this new class, who will manage to display an error message. Okay, let's go ahead and create a variable. I'm going to call it input wrapper. So in order to get access to the input wrapper, we need input followed by the property called parent element. Now we have to add a new class to the input wrapper. And for that, I'm going to use one of the properties called className. Let's insert your class. Let's say error. Actually, this element has its own class, which is a form input wrapper. If we live here just an error, then it will overwrite the existing class. So in order to avoid it, Let's insert here form able to rapper as well. Alright, next I'm going to select the paragraph. We can do it using document, but in this case, under the first found paragraph will be selected. So instead of documents, I'm going to use a input wrapper followed by the query selector method. Inside the parenthesis, we have to specify the class of the paragraph message. Alright, now we need to change the contents of the error message. For that, Let's use textContent property and it should be equal to the message. The function for the error message is ready. We can call it down below inside of the if statement. It should take two arguments. The first one is going to be the input as well. The second one is going to be the message. So let's open back ticks because I'm going to use template literals. So I'm going to pass you The ID of the input. As you know, all four inputs have the IDs. Then it should be followed by the text is required. Alright? In order to execute this code, we have to call this function. And it should happen once we submit the form. So we need to attach to the form elements event listener with a submit event. At first, let's select the form element. Let's create new variable and select the form elements using query selector method. Then attached to it and event listener. I'm going to pass your submit event. And also the callback function, which will be executed once we submit the form. At first, Let's run something to the console, let's say submitted. So if I click the submit button, then we will get submitted in the console. But as you can see, it's flashing. And it happens because by default, Submit button reload the page. In order to prevent this behavior, we have to use a method called prevent default, and we have to attach it to the event object. So let's pass you even objects, and then use prevent default method, which would be attached to the event object. Now, if I click the submit button, then the problem will be fixed. So now we can call the function check required fields. It should take one argument which is going to be an array of input fields. So let's pass all four inputs. Username, email, password, and password too. Okay, So at this time we won't see the error messages because we have to write some CSS. Right now, the paragraphs are hidden, so I'm going to make them visible. Let's get rid of display none. So we see here hard-coded error messages. And if I click the submit button, then we will get the error messages, which we have just defined from the JavaScript. If I enter some characters in one of the inputs, then we will get an error message from the empty input field. Let's go ahead and customize the paragraph. First of all, I'm going to set its position to absolute. Then in order to position paragraph according to the input wrapper, Let's assign to it position relative. And then add some more styles to the paragraph. I'm going to define left position and make it to RAM. Then change the font size, make it one point to RAM. Also, I'm going to make the font folder using font-weight 700. Then create some space between the letters using letter spacing. 0.1 RAM. Also transform text into uppercase. Then create some space at the top of the element using margin top one rank. And lastly, change the color, make it F5, F5, E5. Alright, so the paragraph is customized. By default, it should be hidden and we need to display error messages on Submit. So let's hide the paragraphs using visibility hidden and opacity to zero. So now by default, error messages are hidden and in order to display them, we have to use class error. Followed by the message. We have to pass here, visibility visible, and also opacity one. Lastly, let's use Transition Institute opacity and the duration 0.3 s. So if I click the submit button, then we will get our messages with nice transition. Actually, we have here a tiny issue as I see it for the last input element, we have an error message saying that password is required. And actually it doesn't make sense. I want to change this message. For that, we need to use another if statement in which we have to check if the ID of the input is equal to password too. So let's put this condition here. So if this is true, then we have to call function called error. We have to pass your inputs and the error message. Password confirmation is required. Next, we need to use L statement. And we have to pass this line of code here. Now, if we test than everything Will work fine. Right now with the error messages we are done. Let's move on and take care of the success. If we enter some data in the input fields, then we have to make the border of the input green. For that, I'm going to use the similar technique. Let's create a new function called success. It will take a one parameter which is going to be the input. So again, we had to access the input wrapper and add to it a new class. Let's create a variable input wrapper, which should be equal to input node parent element. Then we have to add a new class of the input wrapper. We need input wrapper dot class name. And again, we have to pass here two classes. The first one is the class of the input wrapper, I mean form input wrapper. And then we have to pass your success. Okay, let's go to the CSS file and select input element with a class success and give it a green border. Let's pause here. 0.1 ran solid, the color for 675. Okay, so let's go to the JavaScript file and call the function inside the else statement. This function will take one argument which is going to be input. If I feel the input and click the submit button, then we will get a green border without any error message. Alright? Actually we have to fix you a couple of issues. If I click the Submit button and then display the sign-up form, then all input fields will have the error messages. Actually we don't need them when we check one of the forums and then switch to another one, error messages should be gone. For the sign-in form, we need a different array as the argument of the check required fields function. We need just two inputs, email and password. As for the sign-up form, we need all four input elements. Right now the form element has two classes, form and sign in. So when we click the Sign Up button, we have to change sign in into sign up. And we need the opposite when we click the Sign Up button. So I'm going to pass your form dot class name. And we need to assign to it to different classes. Form and sign up. And we need the similar to the sign in form. So let's pause here form the className equal to fall, sign in. Now I'm going to use the if else statements in which we have to check if the form thus have sign-up class. So as the condition we need here, form dot class list. This property stores all the classes that the element has that in order to access the second class of the element, we have to pass year one in square brackets. It should be equal to sign up. So it is true than the array should include all four input elements. And if it is false, then we need l statements in which we will just check email and password inputs. So let's call the function check required fields. Insert here an array with two input fields, email and password. Now, if I click the Submit button and we will get error messages. And if I switch to sign up form than the first and the last inputs will display without error messages. As for the second and third inputs, they will still have the arrows. Okay, So it works, but I want to remove those error messages as well. Once we switched to the sign-up form. In order to achieve that, we have to remove classes, error, and success from the input wrappers. And it should happen when we click those buttons. Besides that, I'm going to manage to clear the input fields. So let's go ahead and create a new function. I'm going to call it clear form. Then in order to select all the input wrappers, Let's use a method called query selector. All we have to specify here the class name for input wrapper. So this method returns an array-like object called node list. And we can look through this list using for each method. So let's use it. Pass your callback function, which will take one parameter, it's going to be the current item in the list. Then Item dot class name equal to form input wrapper. So in this case, if the input wrapper has either error or success classes, then they will be removed because again, the className property overwrites the old classes within new ones. 14. Project 11 - Calendar: Alright, so let's go ahead and take care of our next projects. In this section, we're going to be creating the calendar. So we have here a full-screen dark background and in the center of the page, we see the calendar. It shows us the current month with the current date. Down below, we have the weekdays followed by the entire month. You can see that the current day of the month is highlighted. Also, we have here two arrows. If we click down, then we will navigate to the next and previous maths. So you can check out any of the dates in the future or in the past. Alright, so that's what we're going to create. I have created a new folder on the desktop called calendar. Let's go ahead and open it in VS code. I'm going to create the starter files for HTML, CSS and JavaScript. Let's call them index.html. Then style.css and script.js. Then open index.html file and create the basic HTML document. I'm going to use animate. Let's place here the exclamation mark and hit Enter or tab. Here we go. Let's go ahead and change the title. I'm going to insert your calendar. Then I'm going to link the CSS and JavaScript files to the HTML. Let's open link tag and specify the path of the file. As for the JavaScript, I'm going to open script tag right above the closing body tag. And then we need to indicate path of the file in source attribute. Finally, I'm going to launch the project to the browser. For that, I'm going to use one of the CSS packages called a live server. It allows us to run the project to the browser life and make the changes and updates without refreshing the page each time, I recommend to download and install this package. Alright, lastly, I'm going to place the editor and the browser side-by-side, like so. And get started. First, I'm going to create the HTML markup. We will use some static data, but finally, we will create that data from JavaScript dynamically. Let's open div tag, which is going to be the container. Then we need another default, the calendar itself. So the calendar will consist of three main parts. We have a current month with that green background. Then we will have the weekdays and finally the days of the month. So let's open div tag. I'm going to assign to it class mouth. At first I'm going to institute the left arrow. It should be represented by the Font Awesome icon. So we need to bring in the Font Awesome CDN. So let's go ahead and search for Font Awesome CDN JS. Go to the first link, then select CSS and grab the link from here. We need to open link tag in the head element and paste the link as the value of the h reference attribute. Okay, so let's open I element with the following classes. We need F a, S, F a angle left. Besides that, I'm going to assign to it another class for JavaScript. Let's call it prep. I mean previous. Next we need the div element, which will include the month name and also the date it's assigned to the class date. Then I'm going to pass your H1 heading element with the content may it will be followed by the paragraph where we will have weekday, Friday, then it should be followed by the month May 29, and then we need year 2020. So again, right now those are the hard-coded dates, but we'll make them dynamic later on. Next, we need to insert here another arrow. I'm in the right arrow for the future months. So I'm going to open I element with the class is FAS, FAA angle, right? And also we need to hear class next. Alright, so the first part of the calendar is ready. Let's move on to the next part. We have to create the weekdays. So let's open div tag, which is going to be the wrapper. Let's assign two weekdays and then insert you all seven weekdays. I'm going to insert your div tag with a content. Sun Sunday Then duplicate it six times and change the weekdays. We need Monday, Tuesday. Then we will have Wednesday, Thursday, Friday, and finally Saturday. Alright, so with the second part, we are done. Let's move on and create the third part in which we will have the days of the current model. Let's open div tag with the class days. So first of all, I'm going to insert here a couple of days from the previous month. Let's open div tag with a class prep, date and posterior 26. Then duplicate this div element four times and change the dates. We need 27. Next we will have 28, then 29.30. Okay. Next one is the days from one through 31. I'm not going to write each date separately. So to make this process simple, I'm going to use m it, we need div tag, then an asterisk, and 31. And then we have to insert dollar sign inside of the curly braces. So here we go. We have the numbers from one through 31. Besides that, I'm going to institute a couple of days from the next month. So let's create developments with the class next date, institute one, then duplicate it five times and change the numbers from two through six. Okay, Actually, with the HTML markup, we are done. Now we have to start to customize the calendar. First of all, let's create some reset and common styles. I'm going to select every element using an asterisk. Then let's get rid off default margin and padding from the elements. I'm going to set both of them to zero. Besides that, I'm going to set box-sizing border-box. Next, I'm going to define the font family. Throughout this project, we will use one of the Google fonts. So let's go to the Google Fonts website. Then search for quicksand. I'm going to select those different styles. Then grab the link and paste it in the head element. Next, let's define font-family for every elements. I'm going to set it to quicksand. San-serif. Alright, so that's it about the reset and common styles. As you can see, they are applied to all the elements on the page. Throughout this project, I'm going to use a RAM as the measurement unit. Right now, one rem is equal to 16 pixels because the font size of the HTML element equals 16 pixels. I want to convert 1 g into ten pixels. And for that, we have to decrease the font size of the HTML elements. Let's make it 62.5%. So as you can see, the elements became a little bit smaller. Okay, so now it's time to work on the container. I want to expand it to the entire page. So let's select it and define the width and height. I'm going to set with 200 per cent. As for the height, let's make it 100% of the viewport. Then I'm going to change the background color. Let's use your color 12121. And also change the color of the text, make it light using color E. Next, I'm going to place the calendar in the center of the page. And for that, Let's use flexbox. We need display flex. Then for horizontal centering, I'm going to use justify-content center. As for the vertical centering, we need align items center. Alright, that's it about the container. Next I'm going to customize the calendar. I'm in the tube elements that wraps the content of the calendar. First of all, I'm going to define width and height. Let's set with 245 RAM. As for the height. Let's make it 50 to ramp. Also am going to change the background color. Let's make it to five times and then seven, it's going to be the dark color. And then let's set box shadow to 0.5 ramp three rem and the RGBA value with a black color and with opacity 0.4. Alright, so with the calendar div element, we are done. Let's move on and customize the individual parts of it. I'm going to start with the mouth Let's select it and at first, define width, make it 100%. Then I'm going to set height to 12 RAM and change the background color. Make it 16756. Okay, next I'm going to use flexbox in order to place the elements horizontal in a row and also to central them vertically. Let's use display flex. Then in order to create some space between the items, Let's use justify content space between. And also we need align items center. Alright, after that, I'm going to create some space on the right and left sides inside of the elements. For that, Let's use padding and set it to zero at the top and bottom and to run on the left and right sides. Also, we need to align text in the center. And finally use tax shadow with the values 0.3, 0.5 RAM, and the RGBA value with black color and with the opacity 0.5. Alright, so next I'm going to style the individual elements of the mouth div element. Let's go ahead and start with the arrows. Select I element. Set its font size to 2.5 rem. And also make cursor pointer. Next we have the H1 heading garment, which shows us the current month. So let's go ahead and select this element. I'm going to change its font size. Let's make it three RAM. Also, let's make the font slightly lighter, set font way to 400 than transform text into uppercase. Next, I'm going to create the space between the letters. Let's make it point to ramp. And finally create some space at the bottom using margin bottom with the value one ramp. Let's go ahead and lastly, style the paragraph. The only thing then I'm going to do is to increase the font size. So let's select it and set the font size to 1.6 ramp. Alright, so that's it about the first part of the calendar. Let's move on to the weekdays. I'm going to set with 200 per cent. Then increase height, make it five rem. And also let's create some space using padding. I'm going to set it to zero at the top and bottom end. Point for ran on the right and left sides. Next, I'm going to place the weekdays horizontally in a row and also to central them vertically. So we need display flex and align items center. Okay, So with the wrapper div element, we are done. Next, let's customize the weekdays themselves. I'm going to select div elements. At first, let's change the font size. I'm going to set it to 1.5 RAM. Then let's make fun, slightly lighter using font-weight 400. And create some space between the letters using letter spacing 0.1 ramp. Right? Now I'm going to define the width of each div elements. As you know, the width of the calendar is equal to 45 rem. We created a little padding inside of the weekdays div id equals 2.4 RAM on both sides. I mean, on the right and left sides, I want to make the width of each div elements one-seventh of the entire width. So I'm going to use the calc function. And we need to divide 44 points to ram by 744.2. Rem is the difference between the width and the padding. Hopefully it makes sense to you. Okay, so next we need to center the content of each div elements. And for that, Let's use flexbox. I'm going to set display to flex. Then we need to justify contents center and align items center. Finally, let's create a little shadow effect. Use text shadow with the values 0.3, 0.5 rem, RGBA value with a black color and with the opacity 0.5. Alright, so that's it about the weekdays. Let's move on and take care of the days of the month. First of all, let's select the wrapper div element, which has class days. Let's set with 200 per cent. Then I'm going to set display to flex Because I want to wrap the days. So let's use flex wrap with the value rap. And finally, let's create some space using padding. Let's make it point to RAM on all four sides. Next, I'm going to customize the day itself. So let's select div elements. First of all, let's set the font size to 1.4 ramp. Then use margin, make it 0.3 RAM on all four sides. After that, let's define the width of HTML elements. I'm going to use the same technique that we used on weekdays. So I want to place seven days on each line. Let's use again the calc function. We need to divide the width of the calendar by seven, but we have to exclude the margin and the padding. If we subtract two, the width, the margin and padding, we will get 40 points for ramp. The margin on each side is equal to 0.3 ramp. So the amount of margin is going to be 0.3 multiplied by 14, because overall we will have seven days. It equals to 4.2 RAM. And then we have to add to the value point for rent, the amount of the padding. We need to divide 40 point for RAM by seven. Then I'm going to set the height to five rem. Then I'm going to center the content. So let's set the display property to flex and use justify-content center and align items center. Also, I'm going to create a little shadow effect. Let's use text shadow with the values 0.3 ran 0.5 RAM and RGBA with a black color and with the opacity 0.5. Alright, so the days are customized and next I'm going to style the previous and next dates. The only thing that I'm going to do is to decrease the opacity of them. So let's go ahead and select both of them. And set opacity to 0.5. Okay, so the next thing that I'm going to do is to highlight the current day of the month. At first, Let's go to the HTML file and assign to the current date class today. Then select it and change the background color. I'm going to make it 16756. Okay, so the last thing that I'm going to do is to create a little hover effect. Once we hover over the days, I'm going to change the background color. Also display the border and make the cursor pointer. I want to do that for all the days of the month except for the current one. So let's select div elements with hover. Then it should be followed by the note selector. It is the function. And we have to pass here div with the class today. Okay, let's make the background color to 62626. Then defined border with the values point to run solid and the column 777. And finally make the cursor point. Also, let's use transition just for the background color. We need here, background color and the duration 0.2 s. Alright, with the CSS, we are done. And now it's time to add some JavaScript to our calendar and make it work. Throughout this part, we will be working with the date object quite frequently. We will use a couple of different methods to manipulate the date. First of all, I want to display the current month dynamically using JavaScript. Right now, it is May we specified it from the HTML file? At first I'm going to create a date object. So in order to do that, we have to use the date object constructor function. In general, the date object returns the current date and time. Also it specifies the browsers time zone and returns this data as a full text string. Let's go ahead and create the date objects. I'm going to create a new variable, date, which should be equal to new date constructor function. Then run into the console. So if I inspect the page and check the console, we will get the current date and time followed by the browsers time zone. So as we said, the first thing that we're going to do is to display the current month using JavaScript. In order to get the current month, you need to use one of the date objects methods called get month. So let's create a new variable. I'm going to call it math. It should be equal to date dot. Get, mom. Then run the math to the console As you can see, we've got here a number value for actually this is the index number of the current mouth. Now it's May, which is the fifth month of the year. But because of that, the moths have zero-based index numbers. Get math method return four, which is the index number of the fifth month. Alright, so in order to display the current month on the page, we have to use the get method and we have to manipulate with those index numbers. First of all, I'm going to create a new array in which I will store all 12 months of the year. So let's create a new variable, which is going to be an array. And then pass here math names. The first one is going to be January. Then I'm going to duplicate it 11 times. And then change names. We need February, March, April, then we have May, June, July, August. The next one is going to be September, October, November, December. So the array is created, as you know, the items in arrays have the zero-based index numbers. Here. Each month has the proper index numbers from zero through 11. Now I'm going to select the H1 heading garments, which should display the current month. So let's select it using querySelector method. We need to specify here the class name, date, and then the H1 tag. So the heading is selected and now we need to change its content. In order to do that, I'm going to use one of the DOM properties called innerHTML. Now we have to use our array maths and specify the index number. If I put here the index number manually, let's say four. And then get rid of the content of the heading element from HTML. We will see again may on the page. If I change the index number and write five, then we will get June. So in order to display the proper mouth, we have to use the get method. We need date dot, get more. So as you can see, we have here, again May, but now it is displayed dynamically using JavaScript. Alright, let's move on and display the date. As far as I'm going to select the paragraph which displays the date, let's select it using querySelector method. Then, in order to change the content of the element, we need innerHTML property. So now I'm going to use one of the methods called to date string, which returns the current date in a readable format. So we need here date dot to date string. If I remove the content from HTML, then we will get the exact same result on the page. Alright, so with the first part of the calendar we are done. We have successfully display the mouth and the date dynamically with the help of JavaScript. Now it's time to move on display the days. We won't touch the weekdays, they will be displayed from HTML because I think it's enough in order to display the days I'm going to use for loop. First of all, let's create a variable. Days. I'm going to use let keyword. And let's make it an empty string. So I'm going to loop through the numbers from one through 31 and display them as the content of the days div element. Let's use for-loop. We need to create here I variable, which is going to be the counter. Then we need a condition. I should be less than or equal to one. Then we need I plus plus the increment operator. As the contents. I'm going to institute days followed by the plus equals operator. Actually, this operator does the exact same as the following expression. For example, x plus equals ten means x equals x plus ten So now we have to create a div element and pass the I variable as the content of it. Let's open backticks and insert u div tag. Its contents is going to be the I variable. Finally, we have to change the content of the wrapper div element. I'm going to create a new variable, let's call it Mark days. Then select days div element using querySelector method. And then down below, change the content of this variable using innerHTML property. So we need mouth tes dot inner HTML, which should be equal to days. So as you can see, we have here the numbers from one through 31. If I go to the index.html file and remove the entire content from here, then nothing will change, will get again numbers from one through 321. So from now the content of the days div element is displayed from JavaScript. Actually, we have to do here a couple of things. We no longer see the previous next days, and also the numbers do not match the weekdays. Besides that, here we define the number of days in a month as 31. But as you know, some of the mass have today's and some of them though to one. So instead of using here just 321, we need to define the ending date for each month. Let's create a new variable. I'm going to call it last day. Next, let's create a date object and define the current year and month. So we need to use here get full year method. We need dates dot get full year, followed by the date dot get method. The first method will give us the current year. As for the second method, it will give us current mount. As for the day, I'm going to set it to, let's say one. Now let's run this variable to the browser and see what we got. So as you can see, we have here the 1st of May 2020s. Now let's change one into zero and check the result. In this case, we've got here the 30th of April 2020. So when you specify the day as zero, then you get the last day of the previous month. In our case, we need to get the last day of the current month. Therefore, we just need to add one to the get function. Now, as you can see, we have here the last day of the current month. So instead of using here the hard-coded number, we can simply insert last day. But right now we can't do that because the last day variable returns the whole date and time. In order to get the number of the day, we need to use Get date method. So now it returns just one instead of other data. And now we can change 31 into last day in for loop. So nothing is changed here. We have the same result. In order to prove that it works correctly, I'm going to set the current month to, let's say June, where we have 30 days to change the current month, we have to use one of the methods called set mouth. So we need date dot set mouth with a value of five. Now we see here June and the number of days is it means that everything works fine so far. Let's get rid of this line of code. So once we displayed the days of the mouth, now I'm going to take care of the days from the previous month. If we take a look at the finished project, you will see that we display a couple of days from the previous month. So in order to achieve that, first of all, we have to guess how many days we should display from the previous mouth. I'm going to use a little trick. Let's go ahead and change the current date, make it the first day of the month. So we need date, dot set date. We have to make it one. After that, I'm going to use one of the methods called get day. It returns the index. Now bursts of the days of the week, those index numbers are zero-based. For example, Sunday has the index number of zero, Monday has one, and so on. So let's run through the console. Date, dot get day. As you see, we've got here five. So the first day of May should be Friday, because Friday has index number five. It means that the first day of May should be placed underneath the Friday. So now we can easily get how many days should we display from the previous month? It's going to be five. Alright, so we have to create another for loop Let's insert here variable x, which is going to be the counter. Now we need to define the number of iterations. As we said in this case, we have to display five days from the previous month. So overall we will have five iterations. And on each iteration we will create a new div, which will be the content of today's div element. So the initial value of the x counter is going to be the index of the first day of the month. Let's create a new variable where we will store the index number of the first of the month. That's called variable first day index. It should be equal to date, dot get date. Then assign this variable to the x counter. So now we have to define the condition x should be greater than zero. And on each iteration, x should decrease by one. So we need x minus minus. So let me explain again. In this case, the index number of the first day of this month is five because it is Friday. Initial value of the x variable is going to be five. On each iteration, it will decrease by one until it becomes zero. So overall, we will have five iterations. On each iteration, we will create a new div element for the previous month dates. We need here this plus equals. Then we need to open back ticks and insert a div tag with a class previous date, I'm in prep date. Then insert your dollar sign with curly braces. Now we have to define the content of the development. First of all, let's define the last day of the previous month. I'm going to use the same technique that we used in the previous case as create a new variable. I'm going to call it prep last day, I'm in previous, last day. Then I'm going to grab this value from here. So in order to get the last day of the previous month, we just need to get rid of plus one because it gives us the last day of the current month. So if I check to the console previous last day, then we will get third t, which is the last day of April. Alright, so to create the content for each div element, we have to subtract x to the previous last day variable. So as you see, we've got days from the previous mouth, but that's not quite correct because we've got here 29 as the last day of the month. It should be 30. So we need simply plus one inside of here. So the problem is fixed. Alright, so with the previous days we're done, let's move on and take care of the days of the next month. In the case of the next days, we need to define the index number of the last day of the current mouth. So let's create a new variable and call it last day index. Then grab this code because it gives us the last day of the current month. In this case, instead of the GetState method, we have to use GetState because it will return the index number. So let's run through the console whilst they index. We've got zero. And it means that the last day is Sunday. And we have to display six days from the next month. So to define the number of the days of the next month, we have to subtract 27, which is the number of days in a week, the last day index. And also we need to subtract one because the weekdays index numbers are zero-based. So let's create a new variable. I'm going to call it next days. And it should be equal to seven minus last day index minus one. Next, we need again a for-loop. In this case, I'm going to use j as the counter, which should be equal to one, because each month starts with one valid condition is going to be j is less than or equal to next days than we need j plus plus. So on each iteration we have to create a new div elements and pass them as the content of today's div element. We need days plus equals. Then open back ticks and pass here div tag with a class. Next date As the content of the div tag, we have to insert variable J. Finally, let's change the content of mouth days. So here we go. We have here days from the next month, right? So the next thing that I'm going to do is to highlight the current date. Right now. It's no longer highlighted. In order to do that, we have to use an if statement as the condition. We have to compare counter one to the current state. Once they match, then we have to add to the debarment class today. We need I triple equals to new date dot get date. Besides that, we have to compare the mouth to the current month. So we need here logical and operator. And we have to insert data dot get mount, triple equals to new date, dot get marr. If this condition is true, then I'm going to copy this line of code and add to the development class today. As for this div element, it should be placed in the else statement. So as you see, the current date is highlight. Alright, so the next thing that I'm going to do is to make the arrows work. Once we click the left arrow, we should navigate to the previous mouth. As for the right arrow, we should move to the next map. I'm going to attach to both arrows, event listeners with click events. So I'm going to select the left arrow with querySelector method than attached to it event listener, where we have to specify the type of the events. It's going to be click. And also we need to pass your callback function. Let's duplicate it and change the class name we need here. Next. In order to move to the previous month, we need date dot set mouth. Then we need to subtract one to current mouth. So we need data dot get Mouth minus one. That's for the next month. We need the same expression, but with plus one. So if we click the arrows, then they won't work. The reason is that we need to render the calendar with a proper mouth onClick. So we have to create a function where we pass the entire code. Then we have to call it once on the global scope. And also we need to call it when we click the arrows. So let's go ahead and create a function. I'm going to call it random calendar. Let's grab the entire code except for this line of code. And paste it inside of the function that I'm going to call it on the global scope. And also inside of those callback functions. Alright, so if I click the arrows, then they will work fine. As you see, we move to the previous and the next month. Okay, So we're almost done. Actually, I see here that we have a little issue. The current date is not correct because as you remember, we set the date to one and we need to change here dates into new date. So now the problem is fixed. And finally, we are done 15. Project 12 - Countdown: Alright, so now it's time to start to create our next project. In this video, we will create a countdown application. Before we start to build the project, I'm going to go through eight and describe. So as you can see, we have here a full-screen dark background. In the center of the page. We have a couple of elements. I'm in the heading which says that something is coming soon. Next, it is followed by the countdown, which works automatically. It updates after every second. We have here for different sections. These sections four days, hours, minutes and seconds. Then down below we have a reset button. If I click it, then the count down we'll reset and all values will become zero. Alright, so that's it. What we're going to build. The project is going to be a simple one, but hopefully you will have some fun. I have created a new folder on desktop called count down, which right now is empty. Let's go ahead and open it in VS code and set up our working files. So overall we will have three different files for HTML, CSS, and JavaScript. Let's go ahead and create them. Let's call the HTML file index.html. Then we will have style.css and scripts dot js. After that, I'm going to go to the index.html file and create the basic HTML document. For that, I'm going to use m. And let's place here an exclamation mark and hit Enter or tab. So here we go. I'm going to change the title. Let's insert you count down. After that. Let's link CSS and JavaScript files to the HTML. Let's open link tag. Specify here the path of the CSS file. As for the JavaScript, I'm going to open script tag right above the closing body tag, and then specify the part of the JavaScript file and the source attributes. Alright, so all three files are connected and now I'm going to run the project to the browser. For that, let's use one of the VS code package is called a live server, which allows it to run the project live to the browser and make the changes and updates without refreshing the page. Each time, I recommend you to use these packages. Alright, so the project is up and running. Finally, I'm going to place the editor and the browser side-by-side, like so. And get started. First of all, let's create the HTML markup, which is going to be the simple one. I'm going to open div tag, which is going to be the container than it should be followed by the count down wrapper. It will include all three elements, I mean, heading elements, with the texts coming soon. After that we will have an empty div with the class count down, in which we will insert the content from JavaScript. And finally, we will have button with the class reset and with the text reset. Alright, so here we have the heading and the button. Right now, the count down div element is not shown here because it's empty. So now I'm going to move on and start to write. Javascript will create a count down and make it work. And then I will take care of the design. Let's go to the script.js file. And first of all, let's select the count down and store it in the variable. Let's create a variable called count down and select div element. Using query selector method. In order to create the countdown, we have to manipulate the JavaScript date objects. By default, JavaScript uses the browsers time zone and displays a date as a text string. Let's go ahead and create a date object and check what it looks like. I'm going to create a variable. Let's call it date. So in order to create a date object, we have to use the new date constructor function. Let's run the date to the console. So if I inspect the page and check the console tab, then you will find here the current date and time followed by the time zone. Alright, so in general, the date object has a couple of different methods which allow us to get the current day, mouth, hour and so on. I'm not going to go through them. We will use just the new date constructor function. So besides getting the current date, you can Specify the future or past date manually. For example, we can pass here the year, let's say 2020 than a month. But you need to remember that you have to specify a month by using index numbers. Months have zero-based index numbers. So if I want to pass year, let's say August, which is the eighth month of the year than I have to insert here. Seven. Next comes the day of the month. Let's pass you 15. And then you can specify the time. I mean, hours, minutes and seconds. Let's pass here. 12 and zeros as the minutes and the seconds. Alright? So if we check the console, then we'll get the date that we have just specified here. Alright, so suppose that this date is the deadline and we have to count down from that date. Actually, I want to note that if you watch this video in the future, this date is although the past, then you need to enter the date from the future. I'm going to change the name of the variable. Let's make it deadline and also get rid of the console.log. Besides that, we have to define the current time. So let's create a new variable. I'm going to call it current, and then assign to it new date constructor. Alright, so the time that should display on the page is going to be the difference between the deadline and the current time. So let's add first, check the difference in the console. I'm going to create a variable, let's call it div. I made a difference. It should be equal to deadline minus current. And then around the variable to the console. So as you can see, we have here some strange and a huge number. Actually, this is the amount of time, the difference between the deadline and the current time shown in milliseconds. We're going to use this amount of milliseconds to define separately the remaining days, hours, minutes, and seconds. So let's go ahead and create a variable and call it days. So in order to get the number of the remaining days, we have to divide the amount of difference by the number of milliseconds, which we have in 24 h. So we need difference divided by then open parenthesis. And we have to multiply thousand milliseconds to 60 s. Then we need 60 min and finally 24 h. Then I'm going to run this variable to the console. So as you can see, we got here the number of the days, but with some decimals. We don't need those decimals because we just need to display the number of days. So we have to round the number down. And for that we can use one of the JavaScript methods called Math.floor. Now as you can see, we have here just the number of the days without decimals. So next we need to define the hours, minutes, and seconds in the same way. Let's move on to the hours. I'm going to use again Math.floor method. So in case of ours, we have to divide the difference by the product of the milliseconds, seconds and minutes. And then we have to grab the remaining amount from that operation. So we have to use one of the arithmetic operators called modulus, or sometimes it's called the remainder. So the modulus operator returns a division remainder and it is expressed by the percentage sign. We need here. Difference divided by the product of thousand milliseconds, 60 s and 60 min. Then we have to use modulus followed by the 24, which is the number of hours. So again, this operation will give us the remaining hours. In other words, after this operation, the number of hours always will be less than 24. If I check hours to the console, then we will get the number of remaining hours. Alright, let's move on to the minutes. Create new variable. Call it minutes, then use again Math.floor method. So in case of minutes, we have to divide the difference by the product of the milliseconds and the seconds And then we need modulus 60, which is the number of minutes. So we need difference divided by the product of thousand milliseconds and seconds. Modulus 60. Okay, let's go ahead and define the seconds in the same way. Create new variable, use than Math.floor. So in case of seconds, we need to divide the difference by thousand milliseconds. And then we need modulus 60, which is seconds. So if I check the seconds in the console, then start to refresh the page. You will see here how the number of seconds is update. Alright, all four amounts of defined. And now we need to display them on the page to be more precise and account down div, which we have created in the HTML file and then selected here. So I'm going to pass a couple of div elements inside the count down div. And then attached to each div elements, the proper variable from those four variables. So we need to change the contents of the count down deep. For that, I'm going to use one of the dome properties called innerHTML. It allows us to set the HTML content of an element. So let's attach to count down the inner HTML property. Then open back ticks because we need to interpolate the variables to the HTML tags. So we need here for div elements. Then in the first one, I'm going to pass days. We need dollar sign, curly braces and the variable name days. Then we will have ours. Minutes and seconds. Alright? So as you can see, we have here all four values, days, hours, minutes, and seconds. Right now they are in a static mode. They are not updating automatically. If I reload the page than the number of seconds will be updated. So we have to make the countdown dynamic. It should update automatically in every second. In order to do that, we have to use one of the JavaScript methods called set interval. The set interval method executes the function at specified intervals in milliseconds. Alright, let's create a variable and call it interval. Then assign to it a set interval method. This method takes two arguments. The first one is going to be the callback function, which will be executed with some intervals. So now we have to pass you inside the function, this entire code. Let's grab it and paste it inside the function. The second argument is going to be the amount of time we need to execute the function after each second. So I'm going to pass here thousand milliseconds. So as you can see, the countdown is working and it's updating after each segment. Alright, so we have managed to create the main part of the projects. We have to customize the functionality a little bit. But in order to make the work-in-process more interesting, Let's take care of the design. Once we start the project, then we will add a couple of things to the count down from JavaScript. Okay, Let's open style.css file. And first of all, create some reset and common styles. I'm going to select every element using an asterisk. And then let's get rid of default margin and padding. I'm going to set both of them to zero. And also use box-sizing border-box. Besides that, I want to change the font family for all the elements. I'm going to use one of the Google fonts. So let's go to the Google Fonts website and search for font called bellow the A2. Let's select those styles. Then, grab the link and paste it in the head element. After that, I'm going to set font-family for every elements to bellow dA2 course. Alright, so as you can see, these styles are applied. Actually, I'm going to use RAM as the measurement unit throughout this project. We do that in almost every tutorial because I think it's very convenient and easy to use. Right now. One rem equals 16 pixels, because the font size of HTML is equal to 16 pixels. By default, I want to convert one RAM into ten pixels That we have to decrease the font size of the HTML elements. Let's set it to 62.5 per cent. So let's consider the sizes of the elements have decreased. And now 1 g equals ten pixels. Let's move on and take off the container. I'm going to expand it to the entire page. So let's select it and define width and height. I'm going to set with 200 per cent for the height. Let's make it 100% of the viewport. And finally, let's change background color. I'm going to use your color 17181. Okay, next, let's select the count down wrapper. I'm going to place it in the center of the page. I mean, to center it vertically. So first of all, as defined width make it harder to present. Then I'm going to set its position to absolute. After that, I'm going to assign to the container position relative because I want to position the countdown wrapper according to the container. Then define the top property. Let's set it to 15%. Then place texts in the center using text-align center and change the color. Make it the D. Alright, so the position of the countdown wrapper is changed and now I'm going to customize the individual elements. Let's start with a heading. First of all, I'm going to increase font size. Let's make it eight RAM. Than change font weight, make it lighter, assigned to it 400. Next I'm going to transform text into uppercase. Then create some space at the bottom using margin bottom eight Ran. And finally, I'm going to use text shadow in order to create some shadow effect. Let's pass here 0.5 around 0.8 RAM. And the RGBA value with black color and with opacity 0.5. Alright, so the heading looks good. Let's move on and take care of the countdown. I'm going to place those numbers horizontally in a row using Flexbox. And also place them in the center are using justify-content center. Okay, That's it about the countdown. Now I'm going to customize a div elements which we have created in JavaScript. I mean the child do elements of the count down. So first of all, let's define width and height. I'm going to set both of them to 13 ramps. Next I'm going to define the background. Actually, I want to use a linear gradient because with the linear gradient, we will be able to divide the background into two different parts. So first of all, I'm going to change the direction. Let's make it suit bottom. It means that the transition will go from top to bottom. Then use RGBA value. Let's pause here, 601-50-8508 and the opacity 0.9. And also we need here 50%. Next, we need another RGBA value within numbers 909-90-3903 and the opacity 0.9. And we have to place you zero. So as you see now, the background is divided into two different parts. After that, I'm going to create some space using margin. Let's set it to zero at the top. Then for RAM on the right side, 12 ran at the bottom, and four on the left side. After that, let's increase the font size, make it seven RAM. And also change the font weight, make it 400. Okay, next I'm going to center the numbers inside of boxes. And for that, Let's use flexbox. We need display flex, justify content center, and align items center. And finally, I'm going to create some shadow effect. Let's use box shadow with the values 0.8 RAM 2.5 RAM. And then the RGBA value with a black color and with opacity 0.5. Right? So step-by-step, the project is getting pretty nicer. The next thing that I want to do is to display a little line in the center of each box or card, whatever it is. I'm going to create a line using before pseudo elements. So let's select count down def, followed by the before pseudo elements. First of all, let's define content, make it empty. Then set position to absolute. I'm going to position the element according to its parent element. So let's assign to the count down deep position relative. Next, let's define width and height. I'm going to set with 200 per cent. As for the height, let's make it 0.24 ran. And also define background color. Make it 17181. Okay, It can see we have here the line in the center of the boxes. Let's go ahead and move on to the next thing. Let's take a look at the finished project. As you can see, underneath of each box, we can see the proper text. I'm in days, hours, minutes, and seconds. I'm going to add them using after pseudo-class. So we can either select each div element with the F child selector separately and define the content. But I'm not going to do that. I will use a little trick. Let's go to the script.js file and assign to each development the attribute called data contents. Then as the values, Let's insert here days, hours. Then we have minutes and seconds. Then go back to the CSS file and select count down div with the after pseudo elements. Let's define content. So as the value of the content property, I'm going to pass here the function called attribute, which is expressed as a TTR. And we have to pass here the data content attributes. So as you can see, the text values appear on the page. Right now they are two bigger. So let's take care of that. Let's change font size, make it to point to RAM than set font weight to 400. Then set position to absolute and define bottom property. Make it minus six round. Alright, so the last element that I want to customize is a button. So let's select it. First of all, let's define width and height. I'm going to set with 220 to run. As for the height, let's make it six round. Then gets rid off default border, using border none. And change the background color. I'm going to use your color A5 to A12. Next, let's take care of the fonts. I'm going to set font size to 2.2 RAM than make font-weight 400. Create some space between the letters. Make it point to RAM. Also transform text into uppercase. Then change the color of the text, make it light using color ie. After that, I'm going to create some shadow for the text and for the button itself. So let's use text shadow, where the value is 0.3, 0.5 RAM. And the RGBA value with a black color and the opacity 0.5. Let's duplicate this line of code. Change text into Box. Also, instead of 0.5 ramp, I'm going to use 0.6 wrap. Finally, let's get rid off default outline. Make it none. Alright, so that's it about the design. The project looks pretty nice. And now I'm going to go back to the script.js file and add a couple of more things to the functionality of the count down. So once the number on the countdown becomes less than ten, then only one digit will be displayed That's not quite nice. So I'm going to manage to display always two digits no matter what. So I'm going to use the conditional statements. We have to check if the length of days is equal to one. If this is true, then we have to display days with zero. And if it is false, then we have to display just days. Actually, I have used here the property length within number, but it's not correct. Length property will work fine with this string values. So we have to convert those numbers into string values. There are a couple of ways to do that. I'm going to add to each number and empty string. So in this case, values will be concatenated and we would get the string values. Alright, let's use this conditional for the rest of the numbers. I'm going to copy it and paste it. We need here hours than we need minutes. Finally, we need seconds. Alright, so now the problem is fixed. We will no longer have one digit numbers on the countdown. The next thing that I want to do is that once the time is expired, we have to change the content of the count down from those numbers into some texts. So we need IF statement as a condition, we have to check if the difference is less than zero. So if it is true, then it means that the time is expired and we have to change the content of the countdown. First of all, we need to clear the interval. I mean, to stop the set interval function. For that, we have to use one of the methods called clear interval. And we have to pass yield variable interval. After that, I'm going to change the contents of the count down. So we need countdown dot inner HTML. Let's use your H1 heading elements with some texts. Let's say. Here we go. Okay, so in order to check how it works, I'm going to set the date to the current time. So here we go. Eight works. Fine. Alright, so we're almost done. The only thing that I'm going to do is to make the reset button work. Once I click it, it should reset the count down and make those numbers zeros. So I'm going to select reset button using querySelector method. Then I'm going to attach to an event listener using add event listener method. It takes two arguments. The first one is going to be the click event. As for the second one, I'm going to pass here an arrow function, which will be executed once we click the reset button. First of all, we have to stop set interval function. I mean we have to use clear interval method. Let's pass here interval. So now I'm going to select all div elements that we need to look through them and change the content. We need to make it zeros. So I'm going to create a variable, let's call it divs. Then select all div elements inside of the count down. So we need a query selector all method. And we have to specify here class countdown followed by the div. So as we said, we have to look through those div elements and change their content. So I'm going to use one of the array helper methods called for each. For each method takes one argument. It's going to be the callback function, which will take one parameter and it's going to be the current item in the list. Let's call it div. So we need to change the contents of each div. Let's use innerHTML and set content to zeros. So if I click the button, then it will reset the countdown 16. Project 13 - Profile Card: Okay, it's time to start to build our next project. In this video, we're going to be creating a profile card. The project is going to be a simple one with a modern design and some nice effects. So I think you will enjoy building it. Alright, before we start to build the project, let's have a brief look at it. As you can see, we have a little card in the center of the page. It has some info about the person. I'm in, the image, file name and some description. And down below we have a button. If I click it, then the button will change its shape, position, and content. And also three different boxes will appear with some social media contact details of the person. If I click again the button, then we will get back to previous state of the car. So let's see what we're going to build. I hope it's going to be interesting because you will learn about how to create such effects. Okay, So I have created a new folder on the desktop called card. There is a folder in it for the images. I'm going to open this folder in VS Code and then create three different files for HTML, CSS, and JavaScript. First one is going to be index.html. Then we will have style.css and scripts dot js. Let's go ahead and create the basic HTML document. For that. I'm going to use m it, if I put here an exclamation mark and then press Enter or tab, we'll get the basic structure of the HTML document. Let's go ahead and change the title. I'm going to put here contact card. Then after that, let's link all three files. I'm going to open link tag in the head element for the CSS file. Let's put here the name of the file. Then we need to open the script tag right above the closing body tag. And in the source attribute, we have to specify the path of the file. Alright, lets it, all three files are connected. Next, I'm going to bring in a couple of additional links. Throughout the project. I'm going to use the Font Awesome icons and Google Forms. So let's go ahead and search for Font Awesome, CDN, js. Then go to the first link, select CSS, and grab the first link from here. Then I need to open the link tag and put the link as the value of the h reference attribute. Alright, that's it regarding the Font Awesome icons. Let's go ahead and bring in the link for the Google fonts. I'm going to search for Google fonts. So throughout this tutorial, I'm going to use a font called doses. Let's customize it because we will use different font weights. Then grab the link and paste it in the head element. Alright, so now it's time to run the project to the browser. For that, I'm going to use one of the VS code package is called Live Server. It allows us to run the project life to the browser and make updates without refreshing the page. So you can go ahead and install this package. Okay, Lastly, let's place the editor and the browser side-by-side. Like so, and get started. So at first I'm going to start with HTML markup. We will prepare the entire HTML structure of the project, and then we will add to it CSS and JavaScript. Let's go ahead and open div tag, which is going to be the container of the entire content. Then inside the container I'm going to create the card itself. So the car will consist of a couple of different parts. We will have card, bio card conduct some social media contacts and so on. Let's go ahead and start with card bio. It will include the image of the person description and button. It's an open div tag and assigned to the class card bio. Then insert in it in other div, which is going to be the wrapper of the image. I'm going to call it IMG rapper. And I'm going to put here an image tag and the source attribute. We have to specify the path of the image. And also I'm going to put here person as the value of alt attribute. And besides that, I'm going to define the width of the image from here for awhile. Let's make it hundred pixels. Actually, we will do that from CSS at the end of the day. Alright, next minute, personal information. So let's open the div tag with the class person info and insert you h3 heading element for the full name of the person. I'm going to institute Jane Brown. And also we need to paragraph for some description. Let's add here some dummy text. Alright, Finally, we need to create the button, I mean the black button that will move and change the shape once we click it. Let's assigned to a class called btn. So inside that button we will have two parts. The first one is going to be the span element with the text. Contact me. As for the second one, it's going to be the icon. So let's assign to this panel element called btn contacts. And then institute taxed contact me. And next I'm going to put here Font Awesome icon, which should have class names, FAS, FA dash, angle, dash up. Okay, so that's it about the card bile. That's move on to the next part. Next, we have to create the heading, contact me, which then will hide and appear on click. So let's open the div tag with the class card contact and inserting it H4 heading elements with the text. Contact me. Alright, so half of the markup is created. Next, we have to take care of the three different white boxes that will be used for some social media contact information. So let's open div tag and assigned to the class called Social. This is going to be the common class for common styling. But we need also the individual class for the individual styling. The first box is going to be for the e-mail. So let's assign to it a class e-mail. Actually, each box will consist of a Font Awesome icon, and some contact details. Let's open the deep tag, which is going to be the wrapper for the Font Awesome icon. Let's assign to it class I can wrapper. And then insert your Ireland with classes FAS, FA dash, envelope. After that, we need to put here some contact details. So let's open another div tag with the class contact details. I'm going to put here h f4 heading element with the text email. Next we need a paragraph which will include the actual e-mail address of the person. And also I'm going to insert your little arrow, which will be expressed by the angle bracket. Let's open span element and put it here. Alright, that's it about the first social media contacts. Overall, we will have three of them. So let's duplicate this code twice and then make some changes. I'm going to change the class name, FB as the Facebook. Then I'm going to change the class of the ions when f, a, b, f dash, Facebook, dash square. Then we need here facebook. And the full name of the person, Jane Brown. Okay, Next is going to be linked in. Change the classes of the island, FAB, FA dash, LinkedIn. Also, we need here LinkedIn and then the username at Jane Brown. Alright, so finally we are done with the HTML markup of the elements are created and prepared. It's time to move on and start to write the CSS. First of all, I'm going to create some reset styles. I want to get rid of the default margin and padding from every element. In order to select them, we have to use an asterisk. Then I'm going to set both margin and padding to zero. Alright, so throughout this project, I'm going to use a ramp as the measurement unit. By default, one RAM is equal to 16 pixels because right now the font size of the HTML element equals to 16 pixels. I want to convert one RAM into pixels because it's going to be more convenient and easy to calculate. So to do that, we have to decrease the font size of the HTML element from 100% to 62.5 per cent So now one RAM is equal to ten pixels. As you can see, the size of the elements decreased. Okay, let's move on and take care of the container. I want the container to take up the entire page. So let's select it and define the width and height. I'm going to set width to 100%. As for the height, I'm going to assign to it 100 viewport height. So here we say that the container should take up 100 per cent of the height of the viewport. Next, I'm going to change the background color. Let's use your color 051321. So after that, I want to place the card in the center of the page. For that, Let's use CSS flexbox. We need to use three different properties. Display flex. Then in order to center element horizontally, we need justify content center. For vertical centering. We have to use align items center. That's it regarding the container. Next, we have to take care of the car. Right now, the content of the card is not quite visible, so let's fix it using some temporary background. First of all, let's set the width of the card, make it for to run, and then change the background color. Use your color D, D, D. Alright, so now the content is visible actually with a cord itself. We're done. We have to customize its parts separately. I'm going to start with the first part, which is going to be the card bio. So let's select it and at first let's define the background color. I'm going to use here color 458564. After that, let's create some space inside of the box using padding. I'm going to set padding at the top 23 RAM. Then again three rem on the right side to M at the bottom, and three rem on the left side. Next, I'm going to place the items horizontally in a row. For that, I'm going to use display flex. And also I'm going to make the top-left and top-right corners rounded. For that, Let's use border radius. In this case, it should take four different values. The first one is going to be for the top-left corner. Let's make it 0.5 ramp. Then I'm going to use again points by Ram for the top right corner. And it should be followed by two zeros for the bottom left and bottom right columns. Alright, that's it, right now regarding the card bio, we have to style the content. I'm going to start with a button. Contact me because I think it will make the styling process slightly easier. So let's select it. First of all, I'm going to take care of its position. I want to place it here at the bottom of the card bio. So let's make its position absolute. Then I'm going to set bought some property to -2.5 rem. Then we need right position. I'm going to set it to ten ramp. So as you see right now the button has ended up at the end of the page. It happens because the position is not working according to the parent elements, which is called bio. We have to make its position relative and then the button will work according to the parent elements position. Alright, so now it's placed correctly. Let's define its width and height. I'm going to set it to 20 RAM. As for the height, let's make it six ramp. And also change the background color. Make it to be 3038. Okay, let's move on and add some more styles to the bottom. I'm going to change the text color. Let's make it white. Then make the button rounded using border-radius with the value of five rem. And also gets rid of the default border is important. So step-by-step, the button is getting nicer. Let's take care of the font. I'm going to change font-family. Let's make it Dole says serif. Then increase the font size, make it two point for RAM. And to transform text into uppercase. Alright? Actually, there are a couple of styles that I want to add here. I'm going to create some shadow using box shadow with the values 0.3 around 0.8 RAM. And then the RGBA value, I'm going to use black color with the opacity 0.3. Next, let's get rid of the default outline Set outline to none, and finally, change the type of the cursor. Make it point to the button. Looks pretty nice right now, we are done with it. As I see both contents of the box in this traceable I mean, the text contact me and the angle bracket. Let's leave it as it is right now because we will take care of that later on. Alright, once we are done with the button and now we can customize the image and the personal info. Let's go ahead and start with the image. I'm going to select a wrapper div elements. First of all as defined width and height. I'm going to set both of them to nine ramp. And also create the space on the right side using margin right, with a value of three rounds. After that, I'm going to select the image itself. Let's make width and height, both of them hundred per cent. In this case a which will inherit width and height from the parent development. I mean the IMG wrapper. Besides that, we have to use your object fit cover. It will allow us to maintain the quality of the image. And finally, let's make it rounded using border-radius with a value of 50 per cent. So now the image looks pretty nice. As you remember, we define the width of the image from the HTML document. So let's go ahead and get rid of it because we don't need it anymore. Alright, that's it. Regarding image, Let's move on and customize the personal info. I'm going to select the Rapper. First of all, let's define its width, make it 60%. Then I'm going to add to it a couple of common styles for the heading and for the paragraph. Doing that in order to avoid typing the same stuff over and over again. So let's go ahead and define font-family. Use again ptosis serif. Then change the color, make it white. And also I'm going to use text shadow with the values 0.1 rem point to RAM, and the black color RGBA with the opacity 0.3. Okay, so after that, we need to add some individual styles to both of the elements. Start with the heading elements. I'm going to make the font size 2.5 rem. Then change the font weight. Make it 500. Also, I'm going to create some space between letters. Make it 0.1 RAM, and then create some space at the bottom using margin bottom with the value one run. Okay, That's it about the heading. Let's go ahead and select a paragraph. In case of paragraph, I just want to make the font size 1.8 rem. Alright. So as you can see, the first part of the card, the card bio looks nice and actually we are done with it. Now it's time to take care of the next part. I want to customize a little section underneath the car bio. I mean the heading. Contact me at first, let's select its wrapper called contact. Change the background color. I'm going to use here, called or 2814d. Then make the text white. So I'm going to create some space inside of the elements. Let's use padding. I'm going to set it to 1.5 rem at the top and bottom. S4, the left and right sides. Let's make the padding to rant. And also I'm going to use border radius. In case of card contexts, I want to make bottom left and bottom right corners rounded. So we need the following values, 00 and then 0.5 rem, and again 0.5 rem. Okay? Now let's take care of the heading itself. Let's select it and add to it a couple of styles. First of all, I'm going to change the font family. Let's use again ptosis serif. Then change the font size, make it 1.8 RAM. Then I'm going to set the font-weight to 500. Also make the text uppercase. Then create space between the letters. Make it 0.1 rem. Finally use Shadow with the values 0.1 rem point to RAM, and the black color with the opacity 0.3. Okay, so that's it regarding this section. I know that it doesn't look quite well. I mean, it is ended up behind the button partially, but actually it's not the problem. We will take care of that. Alright, so step-by-step, we move forward. Next, I'm going to style the social media contact details. I mean, these three boxes. Actually, we can get rid of this temporary background because we no longer needed. Then let's go ahead and select the development with a class called Social. First of all, I'm going to make the background color white. Then creates some space inside of the box using padding. Let's make it 1.5 rem on all four sides. Also, we need to create some space between the boxes using margin. Let's set it to two rem at the top and bottom and zero on the left and right sides. Then let's make the corners rounded using border-radius with a value of 0.3 RAM. Also, I'm going to make the elements flex container because I want to place elements horizontally in a row. So use display flex. And then in order to center the elements vertically, Let's use align items center. Finally, we need cursor pointer. Alright, so right now with wrapper, we are done. Let's customize the individual elements in those boxes. I'm going to start with the Font Awesome icons. Let's select the rapid development. It has class I can wrapper. I'm going to set width and height, both of them to fall ran. Next, I'm going to give the wrapper background color. But as you remember, all three Font Awesome icons have different background colors. So we have to select them individually. Let's go ahead and start with the e-mail. E-mail followed by the class icon wrapper. So in case of email, and we're going to use background color with the value d, d for B39. Then let's duplicate this code twice. The second box is for Facebook. So let's change the class. Use here FB, and also change the color. I'm going to use here 359 98s for the LinkedIn. Let's use the background color 007, BB six. Alright, so all three icons have the proper background colors. Let's go ahead and add some more common styles to the wrapper. We need here border-radius with a value of 50 per cent. Because we need to make it rounded. Then use flexbox. I'm going to center the icons perfectly. So let's use display flex. Then justify content center. For horizontal centering. As for the vertical centering, we need to use align items center, and then create some space on the right side using margin right value to run. Okay, so the wrapper is prepared, everything looks good, and I'll have to add some stars to the icons. So let's select them. I'm going to increase the font size. Let's make it to run. And also change the color, make it white. Alright, let's move on to the contact details. We have to customize the heading and the paragraph. I'm going to start with the heading. Let's select it. First of all, let's change the font family. I'm going to use again doses serif. Then change the font size, make it 1.6 RAM. Create some space between the letters. I mean 0.1 RAM. And also create some space at the bottom using margin bottom with value 0.5 ran. That's the way how the headings look right now. We need to give them different colors. Therefore, I'm going to select them separately. Let's start with the e-mail. Let's set the color to d. D for B39 Then duplicate this code twice, change the class name to FB, and also change the color, make it 359 98s for the LinkedIn. I'm going to use color zeros 076. Okay, so once we're done with the headings, Let's move on and take care of the paragraphs. Let's go ahead and select them. First of all, let's change the font family. Use doses serif. Then I'm going to set the font size to one point for RAM. Change the color, make it 444, and then create some space between the letters. Make it 0.1 ran. Alright, So actually with this tiling, We are almost done. The only element that we have to customize as this little arrow here. So let's go ahead and select it as it's the span elements. First of all, I want to place it on the right side of the box. For that, we can use margin left. And we have to set it to auto. Actually, it's not working. The span elements should be placed on the right side. I think we have a little mistake in HTML file. So let's check it out. So the span elements should be outside of contact details. Let's fix it quickly. And also change here the selector. We need cart social, followed by the span. Then I'm going to increase the font size, make it to Ram, change the font weight, make it bold. And also I'm going to set the color to 999. Finally, with the styling, we are done. Now we have to move on and take care of the functionality of the card. I'm going to remind you what we're going to do. So let's look at the finished project. So by default, we will hide the Contact Me section and the social media contact details. Then once we click the button, it will change its shape, position, and contents. And the elements will appear down here. Alright, let's go ahead and take care of that. First of all, I'm going to add a click event listener to the button. So let's go to the script.js file and select the button I'm going to use here query selector method. We need to specify the class name inside of the parenthesis. We need here called btn. Then we need to attach to each event listener. Let's use a method called add event listener. This method takes two parameters. The first one is the type of the event. As we said, we're going to use click. Next. We need to pass the year, the arrow function, which actually will be executed once we click the element. Alright, so let me explain what we are going to do. Actually, we will create a new class and CSS called change. We will add this class to the container. Then using eight, we will apply new styles to the elements. So let's go ahead and select a container using a game query selector method. Specify here the class container. Next we have to use the property called class list. This property gives us all the classes that the element has Enter now we have to use the method called toggle. The toggle method allows us to add the class to the element if it doesn't include it, and remove the class. If the element includes eight inside the parenthesis, we need to put here a class change. Alright, so that's it regarding JavaScript. Now we have to use the class change in CSS. Before I do that, I'm going to hide here a couple of elements. As you know the heading, contact me and those three boxes should be hidden by default. So we have to assign two card contact transform. With the translate y function. It will allow us to move the elements up. Let's pass here -100 per cent. So as you can see, the element has moved up, but it ended up at the top of the card bio. Actually, we don't need it. I want to place it behind the car bio. In order to do that, I'm going to use the Z index property Let's set it to, let's say 100. So now the problem is fixed. The element has ended up behind the car bio. Let's go ahead and take care of the social media contexts. We have to hide them, and also we have to move them up slightly. So let's use again transform with the translate y function. And in this case, let's pause here -50 per cent. So the boxes are moved up and now we have to hide them. In order to hide the elements. I'm going to use opacity zero and also visibility hidden. Alright, so everything is ready. Let's go ahead and make the click event at work. When we click the button, then those hidden elements should appear. Let's start with the heading contact me. We have to use class change, followed by the class card contact. Then we need to transform with the translate y function. And in this case, we need to pass here zero. Besides that, Let's use transition values, all 0.5 s. If I click the button than the element will appear nicely. I want to add here a little effect. I'm going to decrease the scale of the text to zero and then make it 100% once we click the button. So we need to transform with the scale function. It allows us to change the size of the elements. Let's make it zero. Then select the heading elements. But in this case with change class. Then use Transform. With the scale function. We have to make the value of scale one. Then again use transition. Insert here 0.5 s. Okay? Now once we click the button, then the scale of the heading will increase. Right? Now at a glance, it seems that the direction of the transform is from right to left. I think it would be better to change it and make a left to right. For that, we have to use the property called transform origin and we have to make it left. Now I think it looks better. Let's go ahead and display the rest of the elements. I'm in the social media contacts. So we need to use again class change, followed by the social class. So in order to move elements down, we had to transform with the translate y function and with a value of zero. And then in order to display the elements, we need opacity one and visibility visible. After that, we had to use transition, but with different delay time for each box. Let's select e-mail assigned to transition with the values 0.5 s and with the delay time 0.3 s, Let's duplicate this code twice. The second one is going to be F B with a delay time 0.5 s. And then for LinkedIn, we need delay time 0.7 s. Alright, so as you can see, everything works fine so far. The only thing that have to do is to take care of the button. We have to do a couple of things. By default, we need to display the text, contact me. Once we click the button, then it should switch to the angle bracket. Also, we need to change the width of the button and the border radius. So first of all, let's center the content. I mean, both elements perfectly inside the button. We need to select a card, btn conduct. And then the Font Awesome icon, we need card VT and I. First of all, let's make the width hundred per cent. Then change the position, make an absolute max. We need to set top and left properties, both of them to 50 per cent. And finally, we need to use Transform Translate function. We have two parts here, -50% twice. So this technique is used to send to the element perfectly. Okay, so the content is centered. Now we have to hide the angle bracket by default. Let's select element and assigned to it opacity zero and visibility hidden. So once we click the button, we need to hide the tax contact me and display the angle bracket. So in this case we have to use class change followed by the class card btn contact than we need opacity zero. Visibility hidden. In order to display the brackets. We need again class change, followed by the I element. And in this case we need opacity with the value one and then visibility visible. Alright, so as you can see, everything works fine. Now we have to take care of the shape of the button. When we click it, we need to decrease the width of the button. So let's select a button with the class change. I'm going to make with six RAM. Then change the right position. Let's make it as three RAM. Also, I'm going to change slightly bottom position, make it minus three RAM. And finally, use border-radius with the value 50 per cent. So if we click the button, then it will change its shape. Alright, everything works fine as a gas. The only thing that we need to do is to add the transition effects. Let's go ahead and start with the button. I'm going to assign to transition with the value 0 and the duration 0.5 s. Next, we need to add transition to the card btn conduct. Let's insert here all 0.5 s and little delay time, 0.1 s. Next we need to transition to, again card written contract, but with the change class, Let's pass you all 0.1 s. And finally, use transition with the I element. I mean I element with the class change direction 2.5 s. Alright, so as you can see, everything works perfectly and actually we're done with this little project 17. Project 14 - CSS Grid Menu: In this video, we're going to be building a simple landing page with a CSS Grid menu. The project will be built based on technologists. We will use HTML, CSS, and a little bit of JavaScript. Alright, let's go ahead and first describe the project. It consists of two main parts. The first one is going to be a simple landing page. I didn't put here lots of elements because the main focus of the project will be CSS grid layout. We have here the banner with some texts and the full-screen background image. At the top left corner, there is placed a menu icon. If I click it, those lines will move to the right side in order. The grid menu will appear with some nice effects. We have here a couple of menu items aligned nicely. Also at the top left corner we see the x closing button. If I click it, then the menu will close. The project is going to be responsive to different screen sizes. If I inspect the page and check it on smaller screen sizes, you will see that it's responsive and looks good. One thing to note here, we're going to use the desktop first approach. We will build the project for larger screen size I'm in. This coincides with the width of 1920 pixels, height of 1080 pixels. If you're going to use this smaller screen size during building this project, then it might not look good. But don't worry, at the end of the day, we will make it responsive to different screen sizes. In the meantime, you can use developer tools. I'm in the responsive mode and specify the width as 1920 pixels and the height as 108 weeks. I think we're ready to go. I have created a new folder on the desktop called CSS Grid menu, in which you can find another folder for the images. You can download the source parts from the link in the description. I'm going to open this folder in VS Code. Then let's go ahead and create three different files for HTML. I'm going to call it index.html. Then we need style.css. And they fall for JavaScript, script.js. Right after that, let's go ahead and create the basic HTML document in the index.html file. For that, I'm going to use Emmet. We need to place an exclamation mark and then press Enter or tab. So here we go. Let's go ahead and change the title. I'm going to put here CSS Grid menu. Then I'm going to create links for the CSS and JavaScript files. Let's open link tag and specify here the path of the file. We need the name of the file style.css as public JavaScript file. I'm going to open script tag. Then in source attribute, let's specify the name of the file. Alright, so all three files are connected. Next, I'm going to bring in a couple of Google fonts. Throughout this tutorial, we're going to use two different fonts. Let's go ahead and visit the Google Fonts website. I'm going to type here Google Fonts. So here's the website of Google fonts. I'm going to search for dancing script. So here it is. After that, let's search for Josephine slab. I'm going to customize this font because we will use this phone with different font weight. So let's check here. Couple of boxes. Okay, Finally, let's grab the link and paste it in the head element. Alright, so we're almost ready to start coding. Lastly, I want to run the project to the browser. For that, let's use one of the views code package is called Live Server. It allows us to run the project life to the browser and make updates without refreshing the page each time. So I recommend to install and use this package. Okay, let's place the editor and the browser. Like so. And get started. So at first I'm going to create the HTML markup for the entire project, and then we will start to write CSS and JavaScript. Let's go ahead and create the markup For the first part of the project, which is going to be the landing. Let's open div tag. It will wrap the entire content of the projects. I'm going to give it class container. Then inside the container I'm going to insert the hamburger menu icon. It will be built using the developments. So let's open development and assigned to class hamburger menu. The menu icon will consist of two parts. The first one is going to be the hamburger icon. As for the second part, it's going to be the x closing button. First of all, let's open a div element with class lines It will wrap all three lines. I'm in the first part of the icon. So let's insert here three div elements with a couple of classes. I mean line and line one. Then I'm going to duplicate this line of code twice and change the class names with line two and line three. Next, I'm going to open another div, which will be a wrapper of the X closing buttons lines. I want to give it a class X btn. After that, Let's insert here div element with classes x line and x line one. Then duplicate it and change the class name. Alright, so that's it about the hamburger menu. Next, I'm going to take care of the header. Let's open it and assigned to the class header. Next we need the banner. So let's insert here a new development with the class banner. The banner will consist of two different elements. The first one is going to be the heading. As for the second one, it should be the paragraph as first. Let's insert here H1, and insert here some text. This is a landing page. Next we need a paragraph with a text with a, actually I'm going to insert here the text with a CSS Grid menu, but I want to use some different styles for the CSS grid. Therefore, let's wrap those two words with span elements and then write menu. Alright, let's see about the first part of the markup. Let's go ahead and create the navigation menu. I'm going to open the nav elements that's assigned to class navigation. So the navigation menu will be represented by a list. I'm going to give it a class nav menu. In that list elements, I'm going to put a couple of list items. Let's open LI elements. It should have class nav menu item. Then the list item will include a link element with the class nav menu link. So as the first navigation item I'm going to insert your home. Overall will have 11 items. Therefore, I'm going to duplicate a light element ten times. And then I'm going to change quickly the items. The second one is going to be about. Then we will have projects. Blog. Next one is going to be Gallery. Also will have portfolio pricing than events. Costumers. Next one will be offers. And lastly, I'm going to put here contacts. Okay, so that's it about the HTML markup. All the elements are created and now we're ready to start to style them. Let's go to the style.css file. First of all, I'm going to create some reset styles. I want to get rid of the default margin and padding from every element. In order to select every element, we need to use an asterisk. And then to get rid of the default margin and padding, I'm going to set both of them to zero. Alright? So throughout this tutorial, I'm going to use RAM as the measurement unit. Default, 1 g equals to 16 pixels because the font size of the HTML element equals to 16 pixels. I want to convert one RAM into ten pixels because I think it would be more convenient to use and calculate. So we have to decrease the font size of the HTML element and we have to make it 62.5 per cent. In this case, one ramp should be equal to ten pixels. So right now, the size of the elements have decreased and they became smaller. Alright, let's go ahead and take care of the header. I want it to take up the entire viewport. So let's select it and define its width and height. The following way. I'm going to make with 100%. As for the height, I'm going to make it hundred viewport height. It means that it takes up hundred percent of the entire viewport. After that, Let's set the image as the full-screen background. First of all, I'm going to use linear gradient. And I'm going to put here three different RGBA values. The first one is going to be 884,170.7. The opacity. Next, I'm going to use 1887190 and opacity 0.5. As for the third color, Let's use here black color. We need 03 times and opacity 0.2. After that, let's specify the URL. I mean the part of the image. We have folder called images and we need to select PG dot JPG. Next we need Center and also no repeat. And finally, let's make the background size cover. Okay, so the background is ready for the header and next comes the banner. I want to place it in the center of the lending. For that, we can use a couple of ways. But for me, the best one is flexbox. We need to assign a couple of flexbox properties to the header element. The first one is going to be display flex, because we need to make header Flex container. Next we have to change the direction. We need to make it column. Then in order to center the items inside the container, we need justify content center, and also align items center. Alright, so the banner is centered. Now we need to customize the heading and the paragraph. Let's go ahead and start with the heading. Let's select it. First of all, I'm going to change the font family. Let's use here one of the Google Fonts dancing script. Next we need coercive. Then I'm going to increase the font size. Let's make it eight RAM. Also change the font weight. Make it 400. After that, I'm going to change the color. Let's make it e. E. Create some space between the letters using letter spacing, 0.5 rem. Besides that, I'm going to create some space at the bottom of the element using margin, bottom three rem. Finally, let's use text shadow with the values 0.2, 0.4 RAM. And the black color RGB a, three zeros, and the opacity 0.3. Alright, so the heading looks pretty good. Let's move on to the paragraph. Let's go ahead and select this element. I'm going to make its font-family. Again, dancing script, cursive. Next, increase the font size, make it for RAM. Also change the color. Make it e. I'm going to create space between the letters. But in this case, let's make it point to RAM. And finally, use again text shadow. Actually I'm going to grab this line of code from here and paste it for the paragraph. Alright, Next, I want to place the paragraph on the right side. For that, we can use text-align, right? Remember, we have wrapped the words CSS grid with a span element because we need different style for those two words. So let's go ahead and apply it. I'm going to select span element. Let's set the font family to Josephine slab serif. Then increase the font size, make it five rem. Change the font weight, make it 700. And finally, transform text into uppercase. Alright, so finally we're done with the paragraph and actually we have finished working on the banner. Next, it's time to customize the Menu icon. I'm in the first part of it, which consists of three white lines. Let's go ahead and select the rapid developments, which has class hamburger menu. First of all, I'm going to make it visible. So we need to define the width and height. Let's make both of them 3.5 ramp. And also I'm going to assign to it a temporary background color. Let's make it red. Right now the icon is placed at the top left corner of the lending. This is not quite a correct position. So let's define the position of the icon and making it fixed. And also, I'm going to specify the top and left positions. I'm going to make both of them 3.5 rem Alright, so right now the icon is position correctly. Lastly, I want to change the type of the cursor and make it point. Okay, so next I'm going to display the lines. First of all, let's select the wrapper development, which has the class name lines, and give it a couple of tiles. I'm going to set width and height, both of them to 100%. In this case, the element will inherit the width and height of its parent element, the hamburger menu. And now let's take care of the lines. Select them with a common class name line. I'm going to set with as hundred percent. As for the height. Let's make it point for RAM. Also change the background color. Make it white. And also I'm going to make the corners of the lines slightly rounded. For that, Let's use border-radius with the value point to run. Alright, so now the lines are visible, but as you guessed, we need to take care of their position. For that, I'm going to use again flex books. So let's assign to the lines. Display flex. Next. We need to change the direction. I'm going to make it column. Next, we have to create some space between the lines. And for that we need to use justify content with the value space evenly. And finally, we need align items, center. Okay? So right now the lines are positioned correctly. If we get rid of the red background, you will see them better. Alright, actually with the first part of the project we're done. The header is styled, it looks pretty nice. Now we have to move on to the navigation. I'm going to design the navigation menu, and then after that, I will make it work. So in order to proceed, I'm going to hide the header for awhile and the lines, and then start to work on the navigation. Let's go ahead and assign to the header and the lines display. Not. Alright, so here we have just a navigation list. Let's go ahead and start to customize the navigation. I'm going to select enough elements. First of all, let's set its width and height. Both of them 200 per cent. And I'm going to change the background color. Let's use your color d, d, d. So right now the navigation starts from the top left corner. It happens because the header is hidden for awhile. So I want to define the current position manually as well. For that, we need position absolute. And then set top and left properties, both of them to zero. So now the navigation takes up the entire width and height of the page. I think it's time to customize the items a little bit. First of all, let's select the LI elements and gets rid of the default bullets. Right now, those bullets are not visible because we set the padding to zero. Actually, if I turn it on back, then you will see the bullets. Let's get rid of them. I'm going to select LI elements and that's assigned to it, or at least style none. Next, I'm going to select the link elements. First of all, let's get rid of the default underlying using text decoration, none. Then I'm going to set font family to Josephine slab serif. Also increase the font size, make it 2.5 RAM. Then change the font weight. I'm going to make it slightly bolder. Use 700. Then transform text into uppercase. And after that, I'm going to create some space between the letters. Let's make it point to rent. Okay. So the items look much better, but I'm going to add to them some more styles. Let's change the background color. In this case, I'm going to use color to five. See C7. Then let's make the text white. And also make the corners of the elements around it using border-radius with the value 0.5 rent. Alright, so that's it for now regarding the link elements. Next, we have to start to use the CSS grid Actually, I'm going to run the project to the Mozilla Firefox because right now it has the best developer tools for CSS grid. I mean, it's much easier to work in the Mozilla Firefox when you deal with the CSS grid layout. If we don't have the Mozilla Firefox, then I recommend to download and install it. Let's grab the URL. Then open the browser and paste it here. So we have here our project up and running. I'm going to inspect the page. So you see here the developer tools. It's kind of similar to the Google Chrome developer tools, but you will see some differences when we start to use the CSS grid, right? So first of all, I'm going to make the null element greet container. For that we have to assign to it display grid. Next we have to define the columns and rows. In the case of the nav elements, we are going to have three columns and three rows. So we need to use grid template columns. The first column size should be to RAM than we need one fractional unit. And then again to ramp. As for the rows, as we said, we need three of them. Size of the first row should be ten RAM. Then again one fractional unit. And then to run. So we have defined the columns and the rows. And in order to see them better, I'm going to check this little box. And also I'm going to display the line numbers. So here we go. Now our grid is visible. Unfortunately in Google Chrome. Right now we don't have such an opportunity. Alright, let me explain what those columns and rows mean. Those little columns will be this pace. Then in the first row, there's going to be the x closing button. As folding menu itself. It's going to be placed here in the middle. Let's go ahead and define the position of the nut menu. Let's select it. And then define grid column with the line numbers 2.3 and grid row. The line numbers 2.3. Again. As you see, the menu is placed correctly in the second column, and now it's time to place the items for that. First of all, we have to make enough menu, a grid container, it display grid. And after that we have to define the columns and the rows. So let's use grid template columns. Overall, I'm going to create 12 columns. Let's use the repeat function. Then specify the number of the columns 12 and this size, one fractional unit. After that, Let's define grid template rows. Use the repeat function. We will have four rows, each of them equal to one fractional unit. And besides that, I'm going to create also the space between the grid cells using grid gap equal to ramp. Alright, so first of all, let's display the grid lines of the nav menu. As you see, we have 12 columns and four rows. Right now the layout is a little bit messed up, but we will take care of that soon. Before we start to position the individual items I want to use, again, Flexbox. Using a couple of flexbox properties, we will make the items stretched in the cells and also the content of each item will be centered. So we have to use display flex. Then justify contents center. Also, we need to align items center. And I'm going to make height equal to 100%. Okay, So now the items look better and in standard position then separately. In order to select it, I'm going to use the nth child selector. So we need nav menu item followed by the nth child selector. And we have to specify here the number of the item. And we won. The first items should be placed in the first two rows, and it should take up the first three columns. So we need grid column where the line numbers 1.4 and quit role with the line numbers 1.3. So the first item is position. Let's move on to the second one. Actually, I'm going to copy this code and then change the number we need to. The second item is going to be placed in the first two rows as well, the columns. It's going to be placed between fourth and seventh line numbers. So we need grid column 4.7 and grid row The line numbers 1.3. So let's leave it as it is. That's it about the second item. Let's go ahead and move on to the next item, which is going to be three. So the third item will be positioned in the first row. As for the columns, it's going to be placed from the seventh line number all the way to the end of the grid container. So we need grid column with a line number seven and minus one. As per the grid row is going to be 1.2. So as you see, the third item is placed correctly as well. Next comes the fourth item. I'm going to place it in the second row. And it will take up two columns, the columns between the seventh and the ninth line numbers. So we need grid column 79. As for the grid row is going to be 2.3. Alright? Next we have the fifth item. It's going to be placed in the second row. As for the columns, I'm going to place it between the ninth and the 11th line numbers. So let's change here the values we need here, grid column 911 and grid row 2.3. Okay, so step-by-step, we are moving forward and creating the grid layout. Let's move on to the next item, which is going to be sixth one. So it should be placed again in the second row. As for the columns, it will take up two columns at the end of the grid container. So we need quit column are the line numbers 11, n minus one. N grid row. Again with line numbers 2.3. Alright, that's it. About the sixth item. Next comes the same at one. So the seventh item is going to be placed in the third row, and it will take up six columns from the beginning of the liquid container. We need grid column with a line numbers 1.7. As for the grid row, it should be 3.4. Okay, so that's it about the seventh item. Let's move on to the next one, which is item. So it will be placed again in the third row. As for the columns, I want to place it from the line number seven all the way to the end of the container. So we need grid column with a line number seven minus one, and grid row three minus one. Okay? So there are left only three items. Let's go ahead and define their positions quickly. I know that this process is a little bit boring, but that's the way how CSS grid works. Let's move on to the ninth item. So the ninth item is going to be placed in the last row and then the fourth one. As for the columns, I'm going to place it between the first and third line numbers so that it will take up the first two columns. We need grid column 1.3. As for the grid row, we need four and minus one. Alright, next we have the 10th item. It's going to be placed again in the fourth row. And it should take up two columns from the line number three to the line number five. So we need grid column 3.5 and quit role again, four and minus one. Alright, Finally, the last items term. I'm going to place it in the last row as well as for the columns. It's going to be placed between the line number five and line number seven. So we need grid column 5.7. Grid row again for n minus one. Alright, so that's it about the navigation menu. It is positioned nicely, it looks pretty good. And now it's time to move on and take care of the other things. I think we can switch back to Google Chrome because we no longer need the help of the grid line numbers. So once we're done with the layout of the navigation menu, I'm going to move on and take care of the x closing. But first of all, let's display the lines. For that we need to select x line. Let's define width and height. I'm going to set width to 3.5 ran As for the height, let's make it point for RAM. Then change the background color. Let's use your color, 307bd F. And also I'm going to use border radius with a value point to rent. So right now the lines are not visible because they ended up behind the navigation. In order to display them, we have to use one of these CSS properties called Z index. And we have to assign it to the hamburger menu itself because the bottom is the part of it. So let's set the index to, let's say 100. So as you can see, the lines are displayed right now. They don't have the shape of x and we have to take care of that. So in order to make them look like x, I'm going to use CSS transforms, and then they rotate and translate functions. So let's go ahead and select x line one. Then use Transform with the rotate function. I'm going to rotate line by -45 degrees. Then let's duplicate this code, change the class name. We need x line two, and also get rid of the minus sign from here. Okay? So right now we don't have the perfect x. We need to use Translate function. Additionally, it allows us to move the element either horizontally or vertically according to the x and y-axis. So in this case, we need to translate y with the value 0.3 RAM S4. The second line, we need again translate Y, but with negative points, three ramp. So now we have the perfect x. The only thing that I'm going to do is to move the button slightly down. We can do that using a couple of different ways. In this case, I'm going to use positions. I want to center it perfectly inside of the hamburger menu. So let's go ahead and select x btn. Then define its position, absolute, set, top and left properties, both of them to 50%. Then use transform translate. -50 per cent. Then again -50 per cent. Actually, this technique is used to center the element inside the container perfectly. Alright. So that's it regarding the x closing button. Now it's time to make the hamburger menu work. First of all, I'm going to display it back the lending and hide the navigation menu. So let's go ahead and get rid of display, none from here. Also, I'm going to display the menu icon. Then let's go ahead and hide the navigation. In this case, I'm going to do that using opacity with value zero and visibility hidden. Besides that, we need the same properties for the X button as well, because we have to hide it. So let's use them for X BTN. Alright, so everything is ready to make the hamburger menu work. The first thing that we have to do is to create the click event. For that I'm going to use JavaScript. Let's open the script.js file and then select the hamburger menu. I'm going to do that using query selector method. We have to attach it to the document, and then inside the parentheses, we have to specify the class name, in this case hamburger menu. Next we have to attach to it an event listener. For that, we have to use a method called add event listener. It takes two arguments. The first one is going to be the type of the event. As we said, we're going to use click event. So let's pass it here as partly second argument. It should be the function which then will be executed once we click the element. In this case, I'm going to use an arrow function. Alright, so now we have to pass here the block of code which we need to be executed once we click the icons and the event fires. Let me explain what we're going to do. I'm going to create a new class and CSS called change. We will add this class to the container onclick. To be more precise, we will use the toggle method, which means that we will add the class to the container if it doesn't have it. And we'll remove the class. If the container does habit The toggle method will allow us to avoid using two different methods at and remote. You may ask why do we add the class to the container and not the hamburger menu? The reason is that once the container has the class, we will be able to use it for all its descendants. Alright, let's go ahead and select the container. I'm going to use again query selector method. Then specify here className container. Next I'm going to use one of the properties called class list. It actually gives us all the classes the element has. After that we have to add to this property, they toggle method. And inside the parenthesis, Let's specify the class name, which we're going to create. Change. Okay, so that's it regarding the JavaScript. Now we have to create a class change in the CSS file. So once we click the icon, we have to hide the header, displays the navigation, and also display the x closing, but that's probably the lines of the menu icon. I'm not going to hide them simply because we will create a different effect. Alright, so let's hide the header. We need class change, followed by the class header. So if this selection is valid, then we need to apply the following styles. We need opacity zero and visibility hidden. Next, let's display the navigation. Use again change with navigation. And in this case we need opacity with the value one and visibility visible. Besides that, we have to display the X button as well. So let's use change, followed by the x BTN class. And use here opacity one and visibility visible. Alright, so if I click the icon, then the header will hide and the knock menu and the X button will appear. Everything works fine so far. Now I'm going to add some nice effects to our project. I want to hide the header and display the navigation with some fade effects. We will create them using CSS transitions. So I'm going to assign to the header transition values all and 0.5 s, which is a duration. We need the same for the navigation, but we have to use the transition property with the class change. So if I click the icon that the navigation will display with a fade effect, and the same will happen on the next click, the lending will appear with fake. Right? Next I'm going to take care of the navigation items. Let's take a look at the finished project. As I said, the items appear from left to right. So we have to move and place them on the left side. And then we need to move the items to the right side onClick. So I'm going to use Transform with the translate function. In this case, we need to translate x because we have to move the item so according to the x-axis, Let's insert here minus hundred per cent. So right now the layout has messed up, but that's not a problem because by default, we will hide the items. For that. I'm going to use one of these CSS properties called overflow hidden. And we have to assign it to the LI element. As you see, the items are not completely hidden. We see the edges of them. Let's increase the value of the translate function. I'm going to make it 105 per cent. Alright, Now it's better. We need to display the items once we click the menu icon. But in order to make this effect nicer, we have to define some delay times as well. So to display back the navigation items we need class change, followed by the link, I mean nav menu link. Then we need to transform with the translate x function. And in this case we have to pass here zero. Besides that, I'm going to use transition transform than the duration 0.7 s. Delay time 1 s. Alright, so as you see, we have here nice cool effect. For now, everything works quite well. Now I'm going to take here of the icons. I mean the Menu icon on the landing and the acts closing. But what I'm going to do is that I will move the lines of the icon from left to right in order starting with the top one. So to do that, I'm going to use again transform with Translate function and then transitions. So we have to use class change followed by the class line that we need to transform Again translate x function and I'm going to pass here 120 per cent. Okay? Now we need transition for all three lines separately because we have to assign to them different delay time. Let's start with line one. Use transition transform with a duration of 0.5 s and the delay time point 1 s. Let's duplicate it twice, then change the class names. And also the delay times. We need 0.3 s for this second line and 0.5 s for the third line. Alright, if I click the icon, then the lines will move from left to right in order. But actually, that's not what we want. I want to keep the lending displaying until the lines finished the move. We need to use some delay time for the header and the navigation as well. For the header, I'm going to use 0.7 s. That's probably navigation. Let's use the same amount of time. Now as you can see, the problem is fixed. Okay, that's fine. But you have to take care of other things as well. We need to hide the lines once they move to the right side. Let's go ahead and use overflow. Hidden. Alright, that's it about the Menu icon. Let's move on and work on the X closing button. We need to use transitions with this element as well. So we need here transition all 0.5 s. And then we have to use transition with class change. Because we have to specify here the delay time, 1.3 s. So if I click the icon, then everything will work perfectly. So we can say that we have finished building our projects. Everything looks good. And the only thing that have to do is to make the project responsive to different screen sizes. Throughout this part of the tutorial, we will be using CSS media queries. Let's go ahead and inspect the page and turn on the responsive mode. So as we already set, the project is built on larger screen size I'm in. This coincides with the width of 1920 pixels and a height of 1080 pixels. Let's go ahead and find the first breakpoint. I'm in the screen size on which we need to make some changes. I think we have to work on 1,300 pixels. So let's go ahead and create a CSS media query with a max width of 1,300 pixels on the screen size, I'm going to change the entire grid layout. So let's go ahead and select enough menu. Then define grid template columns. In this case, I'm going to create six columns. So use repeat function and specify the number of columns, six and the size, one fractional unit. Then we need to take care of the rose. I'm going to create six roles as well. So let's use the repeat function with value 6.1 fractional unit. So right now the layout is messed up. That's obvious. So let's go ahead and fix that. We need to define grid line numbers for all the items again. And actually I'm going to copy this code. Then let's paste here. And then quickly comment the line numbers. Out. After that, let's take a look at the finished version of the project. Let's inspect the page and switch the responsive mode and decrease the width of the window. So that is what we want to get in our working project version. I'm going to start with the first item. So I'm going to change the line numbers for grid column as 1.4. As for the grid row, we need one too. That's the way how the first item looks like. Let's go ahead and change the line numbers for the rest of the items. For the second one, we need grid column four minus one. And grid row 1.2. For the third item, I'm going to set a quit column 21 minus one and quit row 2.3. Actually, throughout the process of changing the line numbers, we may get some unexpected results. So please bear with me. At the end of the day we will get the result. Next. We have fourth item. We need grid column, the line numbers 1.3 and quit row 3.4. Then we have fifth item. Let's make its grid column 3.5, and we'd row 3.4. Then we have six item. It should have grid column with the line numbers five and minus one. As for liquid rho, we need again 3.4. Alright, next comes seventh item. When in grid column with a line numbers one and minus one, and quit row 4.5. In case of the eighth item, we need the same line numbers for grid column. As for the grid row. It's going to be six n minus one. Then we have ninth item. It should have grid column with line numbers 1.3 and grid row 5.6. Alright, so there are two items left, only, 10th and 11th. Let's make grid column for 10th item 3.5. As for the grid row, we need 5.6. And for the last 11th item we need grid column equal to five and minus one. And grid row 5.6. Alright? So as you can see, everything looks quite nice and actually we are done on a breakpoint. Let's go ahead and find the next one. I think we have to make some changes on 800 pixels. So let's go ahead and create new media and specify the max width as 800 pixels. Actually, I'm not going to make here lots of challenges because I think we just need to decrease the font size of the HTML element and everything will look nice. Right now, the font size of the HTML element equals to 62.5%. And I'm going to make it 50 per cent. Alright, let's sit on 800 pixels. Let's move on and find the next break point. I think it's going to be 650 pixels. So let's go ahead and duplicate this code, change the max-width, make it 650 pixels, and also decrease the font size of the HTML elements, making 40 per cent. Okay, let's move on to the next break points. It's going to be, I think, 550 pixels. So let's create new media. Specify the max width as 550 pixels. So first of all, I'm going to decrease again the font size of the HTML element. Let's make it 35 per cent. And besides that, I'm going to add here a couple of styles. I think we 18. Project 15 - CSS Navigation: In this video, we're going to be building a navigation menu with HTML and CSS. This is going to be able to project, but you will be able to learn about some cool transition effects made by CSS. So I think the project will be interesting. Before we start to build the menu, Let's go ahead and describe it. As you can see, we have a text. Follow us in the center of the page. If I hover over, the menu will appear with some nice transitions. We have a horizontal line on the right side of the text, which increases from left to right. Also the menu items appear in order after some delay. And if we hover over them, then we will get colored backgrounds with a smooth transition. Actually, this is a social media list and each item has its own original background color. Alright, so that's it, what we're going to build. Let's get started. I have created a new folder on the desktop in which I have prepared two different files for HTML and CSS. Let's go ahead and open the folder in the VS Code. Right now, the CSS file is empty. As for the HTML, I have prepared the basic structure of the HTML document. I have two different links in the head element, one for Google fonts and the second one for the CSS file. You can download the source files from the link in the description. Let's go ahead and run the project in the browser. For that, I'm going to use one of the packages called Live Server. This package allows us to run the project in the browser and make the updates without refreshing the page each time. This is a great package, so I recommend to download it from the Extension Manager in style and use it. Okay, Finally, let's place the editor and the browser, like so and start to build the HTML markup. I'm going to open a development which will be the wrapper of the menu. Next, we need another development with the class menu. This element will include all the items of the menu. So we will have a text follow us, followed by the line. And then we will have five different menu items. So let's open a development with the class name. Follow an insert, you the content. Follow us. Next, we need another div for the line. After that, I'm going to create enough menu. So let's open development with the class nav menu and insert here a couple of navigation items. They should be represented by the link elements. So it's opening with the class menu link. So the first item is going to be Facebook. Then duplicate the link four times and change the names of the social media. The second one is going to be Instagram. Then we will have Twitter, LinkedIn. And the last one is going to be YouTube. Okay, so that's it about the HTML markup. Now we have to start to write some CSS. First of all, I'm going to create some reset and common styles for every element. In order to select every element, we have to use an asterisk. Let's get rid of default margin and padding. I'm going to set both of them to zero. And then change the font family. Let's make it quicksand. Okay, so throughout the project, I'm going to use RAM as a measurement unit. Right now, one ramp equals to 16 pixels, because the font size of the HTML is equal to 16 pixels. I want to change and convert one round to ten pixels because I think it's much more convenient to calculate and use to convert one ramp to ten pixels, we need to decrease the font size of the HTML and we have to make it 62.5%. So as you can see, the elements have changed their size and they became smaller. Okay, let's move on and start to work on the wrapper. First of all, I'm going to define the width and height. Let's set with 200 per cent. As for the height, I'm going to make it 100% of the viewport. Therefore, we have to use 100 vh and also change the background color. Let's use here color or 262626. Alright. Now I'm going to place the menu in the center of the page. And for that, Let's use a flexbox. We need here, display flex. Then in order to center the menu horizontally, Let's use justify content center For the vertical centering, we need to use align items center. Alright? So right now the menu is placed in the center, but the items are not quite visible. Let's go ahead and fix that. I'm going to select items. Both follow us and the menu items. Because we need the similar styles for them. Let's increase font size, make it to RAM. Then change the font weight. Make it 600. Also, I'm going to make then white. Then transform text into uppercase. Create some space between letters using letter spacing, 0.1 rem. And finally, I'm going to create some space on the right side of the items using margin-right for rats. So right now the items look much better. They are visible and I'm going to move on and take care of the menu. I'm going to place the items side-by-side horizontally that I want to use. The flexbox. Again, we need display flex. And then for the vertical centering, we need align items center. And finally change the type of the coarser, make it pointer. Alright, that's it for the items for now. I'm going to move on and customize the line. So let's go ahead and select the developments which has the class name line. First of all, let's define width and height. I'm going to make the width ten ramps. As for the height, let's make it 0.1 rem. Finally, create space on the right side using margin right? With value five rounds. Right now, nothing is happening here. The line is not visible, and I'm going to display it using the after pseudo elements. So let's select line with after. Then make the content empty. And also define the position making absolute. Now in order to position the line according to its parent element, we have to assign to the developments position relative. Then define the width and height. We need to make both of them hundred percent. And finally, let's change the background color, make it white. So now the line is visible and now it's time to make the menu work. We need to select not Menu assigned to display flex. Then select the link. Get rid of the default styles using text decoration. None. Maybe it's positioned relative. Then I'm going to place items down below. For that we need top with value five rounds. So now the items are positioned on their default places. Next, we need to hide them and display them on hover. So in order to hide the items, Let's use opacity zero. Then select the menu with hover, followed by the menu link. So here we needed to select the menu because we have to make the hover on the menu. If we select the follow us texts, then we would have some issues in the future. Because eventually we need to hover over the items as well to change the background colors. So let's make the items visible and get them back to their positions. Therefore, we need here top zero and opacity one. Now the items are hidden by default, and if we hover over the follow us, then they will appear. But here we have the problem. If I hover over the entire menu, then the items will appear. Anyway. Actually, we don't need that. We need to display the items once we hover over the follow us. In order to achieve that, we need to disable the pointer events for the menu. I mean, when we hover over the menu, items should not appear. So I'm going to use one of these CSS properties called pointer events. And I'm going to set it to none Now, if I hover over the entire menu, items won't display. Actually, this still is not the result we want it to get. The next step is to enable the pointer events for the menu back. But we have to do that on hover. So let's select menu with hover and make pointer events. And besides that, we need to enable the pointer events for the follow us as well. Otherwise, it won't work. So let's select div elements with the class follow and make its pointer events. So now when I hover over the follow us, the items will display. If I mouse over them, then they will still display. But if I mouse over the items while they are hidden, they won't display because right now the pointer events property is disabled. So we definitely need to hover over the followers. Hopefully it makes sense to you. Now once we managed to display the items, it's time to take care of the transition effects. Also, we have to make the line work. So I'm going to use transition for the items but with a different delay time. Let's go ahead and select the item separately using nth child pseudo-class. So we need menu link followed by the nth child function. We have to specify here the number of the items. We have to start from one and go through five. Because overall we have five items. Now we need to transition with the following values. We need first top with a duration of 0.5 s and with the delay time 0.1 s. Next we need opacity 0.5 s. And again with the delay time 0.1 s. Let's duplicate this code four times and then change the numbers of the items and also the amount of the delay time. For the second item, we need 0.2 s. I mean the delay time. For the next one we need 0.3 s, then 0.4 s. Finally, for the last item, we need 0.5 s. So if I hover over the text than the items will appear nicely with some delay time. Okay? Now I'm going to make this line work. By default. It should be hidden. And when we hover over the text, it has to display from left to right. I'm going to make its width zero by default. Then I'm going to select the menu with hover, followed by the line with after pseudo elements. And we have to make the width hundred per cent. Lastly, let's use again transition. We need here with, with a duration of 0.5 s. Alright, so as you can see, the line is working fine and actually we are almost done with our project. The last thing that I'm going to do is to change the background colors when we hover over the items. Let's go ahead and select again the items separately using nth child pseudo-class. But now with over. So we need menu link. Then we need to use nth-child one. Then followed by the hover. The first item is Facebook. So let's change the background color. Use here the original Facebook color. It's 35998. Then duplicate this code four times and change the numbers and the colors. The second one is going to be three F, seven to nine. Next one should be 55 ACE. Then we have 0077, B5. Finally, we need cd to 01. And after that, let's add the transitions to the items. I'm going to use here, the multi coarser. Then insert background color, the duration point or the second. So as you can see, when we hover over the item state, change the background color smoothly. The only thing that I don't like here is the shape of the backgrounds. I'm going to make it slightly rounded and also I want to create some space inside of them. So we need padding. We value 0.5 rem and border-radius with the value 0.5 gram as well. Alright, so now everything works perfectly and actually we're done with our project 19. Project 16 - Dropdown Menu: In this video, we're going to build a drop-down menu with the HTML, CSS, and JavaScript. The Dropdown will have some cool hover effects. The project is going to be a little one, but you will learn about how to create some nice effects using HTML, CSS, and JavaScript. Alright, let's go ahead and take a look at the projects. We have here, a full-screen background image with a heading in the center. Also you can see three different navigation items at the top of the page. If we hover over them than a Dropdown menu will display with some nice transition effects. Okay, So that's it, what we're going to build. I have created a new folder on the desktop called Dropdown Menu. Let's go ahead and open this folder in VS code. As you can see, I have here a couple of different files. I mean files for HTML, CSS, and JavaScript. And also I have prepared the text file in which I store some confidence for the Dropdown means. Besides that I have a folder for the background image. Alright, let's go ahead and run the project in the browser. For that, I'm going to use a package called Live Server, which allows us to open a project in the browser and make updates without refreshing the page each time. So you can download and install this package. And also you can download the starter source files from the link in description. Okay, Finally, let's place the editor in the browser. Like so. And start to create the HTML markup. I have already prepared to basic HTML document here. I have two different links and had elements. One for the Google font and the second one for the CSS file. Also, I have a script tag for the JavaScript file down below. Let's go ahead and open the developments, which will be the container of the entire contents. Next, I'm going to open a section element with the Class wrapper. This section will consist of two different parts. The first one is going to be a banner with a heading. As for the second one, it should be the Navigation. So let's insert here at development with the class name binary. Then inside the development, Let's open H1 heading with the class banner text with the contents drop-down menu. Alright, Next I'm going to open a null elements, but the Class Name Navbar. So we will have one main least with three different list items inside the Navbar. And each of them will have its own Dropdown Menu. Let's open the URL elements with a class name. Now at least. Next we need LI element, which should have class nav item. It will be followed by the link with the class nav link and put the text web development. So as we said, each Navigation item should have its own Dropdown Menu. Therefore, let's insert here a new list where the Class Name Dropdown. In the first Dropdown menu, we will have six different list items. Let's open the first one. The Class Dropdown item that insert here the link with class name Dropdown link. So we will insert here some technology names with the descriptions. The first one is going to be HTML. Then open the P element. And now I'm going to grab the description from the text file. We need here, the description of the HTML. Let's paste it here. As I said, overall, we will have six items. So let's duplicate lie on five times. The second one is going to be CSS. Let's grab its description from the text file. Next one should be react. Then we will have node followed by the express. The last one is going to be mongodb Alright, let's see about the first Dropdown Menu. Let's duplicate the entire first novel item with its Dropdown twice. The second item is going to be Front-end. In this case, overall, we will have four different items. I'm going to leave here HTML and CSS than duplicate CSS. And insert here JavaScript with its description. I'm going to leave here, react and also gets rid of the rest of the atoms. Alright, that's it about the second item. The third item is going to be back-end. And I'm going to leave here just the last three items. Okay? So the last thing that have to do in HTML file is to create development, which will be used for the background of the Dropdown Menu. Let's insert it right above the closing nav tag and assigned to it class name, Dropdown PG. Alright, so that's it about the HTML of the elements are created and prepare. Next we have to start to write some CSS. First of all, I'm going to create some reset styles for all the elements. In order to select them, we need to use an asterisk. Let's get rid of default margin and padding. Let's set both of them to zero. Also, I'm going to remove default underlined from viewings and the default bullets from the list items so that we need to use text decoration with the value none and also list style. Finally, change the font family. Throughout this project, we're going to use font called EB, Garamond, font group serif. Alright, so let's can see now the content looks differently. Throughout this project, we're going to use RAM as the measurement unit. By default, 1 g equals to 16 pixels because the font size of the HTML is equal to 16 pixels. I want to convert one RAM into ten pixels. And for that, we need to decrease the font size of HTML. And we have to make it 62.5 per cent. Okay, let's go ahead and start to work on the wrapper. I'm going to expand wrapper to the entire page. For that, let's set its width as hundred per cent. As for the height, I'm going to make it 100 per cent of the viewport. Therefore, we need here 100 pH. After that, Let's set the image as the full-screen background. First of all, let's use linear gradient with white colors, but with different opacity. The first case, I'm going to use opacity point for. As for the second case, let's use opacity point to. After that. We have to specify the URL of the image. As you know, we have folder called images in which I store image called BG dot JPG. Next we need Center and no repeat. And finally, we need to define background size with the value cover. Alright, so as you can see, we set full-screen image as the background. And next I'm going to take care of the panel. So let's go ahead and select it. I'm going to set its width 200 per cent. Also. We need to position it. And for that, Let's make its position absolute. Next, I'm going to move it down with the top position. Let's set it to 35%. Okay, so the position of the banner is changed and now we have to work on the heading itself. I'm going to place it in the center of the page, and also I'm going to make it look better. So let's go ahead and select banner text. Let's place it in the center using text-align center. Then increase its font size, make it seven RAM. Also change the color I'm going to make it white. After that, let's transform text into uppercase using text transform property. Also, I want to create some space between the letters using letter spacing with the value point to ramp. Finally, I'm going to use some shadow effect. Let's insert you the values 0.2, 0.5 RAM. And as the color, let's use 888. Alright, so actually with the first part, we are done. I'm in the banner. Now we have to take care of the Navigation. Let's go ahead and select the main list, which has the class. Not least. I'm going to place list items horizontally in a row. And for that, Let's use flexbox. We need display flex. And then in order to center them horizontally, Let's use justify contents center. Next I'm going to work on the LI element. So let's select it with the class nav item. First of all, let's create some space at the top of the elements using margin top with value to rams. Next, I'm going to place the text in the center using text align center. And finally, let's define the width. I'm going to set it to 26 viewport width. It means that we set the width as 26 per cent of the viewport. Finally, let's customize the links, select them, increase the font size, make it to rams. Also, I'm going to change the font weight. Let's set it to 600. Then transform text into uppercase. Change the color. In this case, I'm going to use color to four or five F9 FBI and create some space between letters. Let's set lateral spacing to 0.1 RAM. And finally, I'm going to use shadow with the values zero points to ram 0.5 RM. And the color be 888. Alright, so with the main list items we're done. Now have to take care of the dropdowns. Let's go ahead and select them is in class Dropdown. Let's create some space at the top using margin top one RAM. And also I'm going to change the background color for the list for a while. Let's make it white. Right? Next I'm going to move on and customize the dropdown item. So let's select it. Right now the text is placed in the center, but we need to place it on the left side. So let's use texts align with the value left. Also am going to create some space using padding. Let's set it to two rounds. At the top than two runs on the right side, zero at the bottom, and 2 g on the left side. Right. Actually we need the same amount of space at the end of the list as well. I mean, after the last item. For that, Let's use a pseudo-class called last-child and select the last item. We need Dropdown item, followed by the last child pseudo-class. In order to create some space at the bottom, Let's use padding-bottom the value two ramps. Alright. So that's it about the LI elements. Let's go ahead and customize the links. Select the drop-down link. I'm going to change the font size, make it 1.6 RAM. Also make the font-weight bolder. Transform text into uppercase. And finally change the color. I'm going to use again color 245, F9. Be okay with the links, we're done. Finally, I'm going to start the descriptions. They are represented by the P elements. So let's select them. I'm going to increase the font size. Let's make it 1.6 round and change the color. Let's use here F5, F6, 061, Alright, so right now, drop-downs look much better. And actually we're almost done with styling. As you can see, the heading, Dropdown Menu is placed on top of the menus. I want to place it behind them. And for that I'm going to use the z-index property. First of all, let's define the position for the Dropdown because otherwise the index won't work. Let's make position relative and then use the index value. Let's say 100. Alright, so let's consider heading is placed behind menus. And now I'm going to create a hover effect. We're going to hide menus by default and display them on hover. So in order to hide them, Let's use opacity zero and visibility hidden. Then select nav item with hover, followed by the Dropdown. So in order to display the menu spec, we need opacity one and visibility visible. So now if I hover over the item that the menus will display. But actually we have here a little problem. We don't need to hover over the item itself because if we hover down below than the menus will display anyway. So in order to fix that, we have to set the height to zero. By default. We need to make it auto on hover. So now the problem is fixed. Finally, let's add here some transition with values all and 0.1 s. Alright? So this is a simple standard Dropdown without any additional effects. Let's take a look once again at the finished version of our projects. When we hover over the items than the background appears from the different place. To be more precise from the place where we hovered over last time. Besides that, this background is a different element and not just the background color. As you remember, we created the development with a class name, Dropdown BG in HTML. So let's go ahead and select these elements and define its width and height. I'm going to set width to 40 runs. As for the height, I'm going to make it 60 g. Actually, we defined those properties and values just temporarily. Eventually, we will set them from the JavaScript. Now, in order to make the background visible, I'm going to define background color. I want the background to be slightly transparent. So let's use here RGBA value 243, again, 243243, with the opacity 0.93. And actually get rid of the white background from the drop-down. Alright, so it's considered background is feasible. Let's make it slightly rounded using border-radius with the value of 0.3 ran. And also create some shadow effects using box shadow with the value 0.5 RAM, one RAM, and the color 757575. Next, I'm going to create a little arrow. I mean the literal shape, which you see here. For that, let's use one of these pseudo elements called before. Select Dropdown VG with before pseudo elements. First of all, I'm going to make the contents empty. Then we need to make its position absolute in order to position it in the right way. And besides that, we need to define the position for its parent element. Let's make it absolute as well. After that, I'm going to give the shape to be before pseudo elements. I'm going to do that using a couple of border properties. I'm going to start with border left. Let's assign to it the values one RAM, solid and the color transparent. Then I'm going to duplicate it twice. The second property is going to be poor. The right with the same values as for the third one, is going to be border bottom as the color. Let's use red Alright, so the arrow is feasible and now we have to take care of it's position. I want to place it perfectly in the center of the background. And also it should be placed at the top of it. So I'm going to make it top position zero. Also, we need left to be 50 per cent. Besides that, we have to use Transform. With the translate function. We need to pass here the values -50 per cent and then -100%. Okay, The last thing that had to do is to change the color. Let's use here the same light color instead of the red one. Let's copy it and paste it here. As I said, we were setting width and height temporarily, and now I'm going to get rid of them. And also we have to hide the background by default. Therefore, we need here opacity zero and the visibility hidden. Alright, so with the CSS, we're almost done. Now it's time to write some JavaScript. Let's go to script.js file. First of all, I'm going to create a variable in which we will store a DIV element with the Dropdown PG class. So create new variable, call it Dropdown PG. Then select the element using query selector method. We need to specify here the class name, which is going to be Dropdown BG. Okay, so now we need to attach to each nav item a mouse over event handler. For that, we need to select all the items and loop through them. So let's go ahead and select nav items using query selector, all method. We need to specify here the Class Name now item, actually query selector all method returns and array-like object called node list. And we have to transform it into an array. For that, I'm going to use array dot from method. After that, let's use one of the array helper method called for each. It allows us to execute the function for each array item separately. We need to pass here an arrow function that takes the parameter which is going to be the current item during the looping through the array. Now we have to attach to the item mouse over event handler. So we need your own mouse over. Actually the mouse over event is similar to hover in CSS. So on hover we have to make the background visible. Therefore, we have to insert you Dropdown PG dots style dot opacity equal to one. Then I'm going to duplicate this line of code. We need here. Visibility. We devalue feasible. Right now, background is not visible because it doesn't have the width and height. As we said, we're going to define width and height from JavaScript. So let's go ahead and do that. Define a width for the Dropdown BG. I mean, we need Dropdown PG dot style dot width. So we're going to make the width of the background equal to the width of the Dropdown Menu itself. I mean the Dropdown which should display on hover. For then I'm going to use one of the JavaScript methods called get computed style. This method gives us all the actual computed CSS properties and values of the specified element. So let's use this method. Inside the parenthesis. We need to specify the element is going to be a Dropdown. And in order to reach two-dimension element, Let's pause here, item dot last elements child. Because if we look at the HTML file, we will find that Dropdown is the last child element of thing now, right? Okay, Finally, we need to choose with property. Next, we need the exact same for the height as well. So let's duplicate this line of code and change width into height. So if I hover over the items, then background will display. It, changed its width and height depending on the item we are hovering over. But the problem here is that background has a wrong position. So we need to take care of that. Before that, let's add a transition to the background, need CSS assigned to it, the values all end 0.3 s. Alright, now we have a smooth transition effect and it's time to take care of the position of the background. I'm going to define it from the JavaScript dynamically. Let's first define top position. Use Dropdown, be G dot style dot top. Now I'm going to use ES6 templates, strings. Let's open backticks. Then we need dollar sign with the curly braces. So we have to set the top position equal to the offset top of the Dropdown. Actually offset top property returns the top position relative to the top of the parent element. And it gives us the value in pixels. So we need to insert here item.name, last elements, child. Because we need to get access to the Dropdown, then it should be followed by the offset top. After that, we have to specify Px because we need pixels. Actually we need the exact same for the left position as well. So let's duplicate this line of code and change top into the left. Now if I hover over the items that background will display in the right positions. So everything works fine except the one thing. If I place mouse out of the item, then the contents of the Dropdown menu will hide. The background itself will keep this plane. So we have to hide it on mouse out event. So we need item.name on mouse out. Then let's grab those two lines from here, paste them, and change the values. For the opacity we need zero. As for the visibility, it should be heated. Okay? Now the problem is fixed. Everything works fine. But actually we have here a tiny issue. We need a little delay time until the dropdown items display. And also I'm going to display them from right to left. For that, Let's use Transform with the translate function. I mean translate according to the X axis as value. Let's insert here ten per cent. Then on hover we have to make the value of Translate X function zero. Finally, let's use here transition with some delay time. We need to assign to it all than duration 0.1 s and the delay time 0.2 s. Okay, so now everything works perfectly and actually weird done with this little project. I hope it was interesting because we used here some different techniques and hopefully you'll learn some new stuff. 20. Project 17 - Navigation: In this video, we're going to be building a creative now upper menu with HTML, CSS, and JavaScript. Alright, let's go ahead and describe the project. We have a button in the center of the page with three dots. If I click it, than those dots will transform into x with some smooth transition. And also navbar, we'll display with a couple of navigation items. If I click the X than the menu will close again with some transition effects. And also we will get back three dots instead of x. So that's it. This project is going to be a little one, but I hope it will be interesting. So let's get started. I have created a new folder on the desktop in which I have three different files for HTML, CSS, and JavaScript. Let's go ahead and open this problem in VS code. Actually the CSS and JavaScript files are empty right now. As for the index.html file, I have prepared the basic HTML document. I have two links in the head elements, one for Font Awesome icons, and another one for CSS. Also I have here script tag for the JavaScript file. You can go ahead and download the starter files from the link in the description. Alright, let's go ahead and run the file in the browser. For that, I'm going to use a package called Live Server. It actually allows us to run the project live in the browser and make updates without refreshing the page each time so you can install and use it. Finally, let's place editor and browser side-by-side and start to create HTML markup. I'm going to open a div element which will be the container. Next we need HTML5 nav elements. Let's assign to it a class name, navbar. It will wrap the entire navbar, I mean the button and the navigation items. Next I'm going to create a button. It will be represented by a development. Let's assign to it class BTN. So we will have three dots. Let's create them using developments. Let's assign to it to different classes. The first one is going to be four common styling dots. And the second one is going to be for the individual styles dot one. Then duplicate this line of code and change the class names. We need. Dot two, dots three. Alright? Right now the button is not visible because developments are empty and we don't have any style. Next, I'm going to create the menu itself. Let's open another development with class name, Nav Menu. So overall we will have four different items. Each of them will be created with the link and Font Awesome icons. So let's open link element with the class name nav menu link. Then insert your eye elements with classes. Fas, FA dash, whole. Then duplicate link element three times and change the class names. For the second one we need FAB, FA dash Blogger. The next one is going to be FAS dash, project dash diagram. And for the last one, let's use FAS, FA, dash actors, car. Alright, so here we have all four icons and actually with HTML, we are done. All the elements are created and prepared. Let's go ahead and open the CSS file and start to write some CSS. First of all, I'm going to create some reset styles. Let's get rid of default margin and padding for every element. In order to select all the elements we need to use asterisks and then set margin and padding both of them to zero. Throughout this project, I'm going to use a RAM as a measurement unit. By default, one rem equals to 16 pixels because the font size of the HTML element is equal to 16 pixels. I'm going to convert one RAM into ten pixels because I think it will be more comfortable and convenient. So in order to do that, we need to decrease font size of HTML. And we have to make it 62.5 per cent. So as you can see, the icons became smaller. Alright, let's move on and take care of the container. I'm going to expand it to the entire page. So let's go ahead and select it Set its width as 100%. As for the height, I'm going to make it 100% of the viewport. Therefore, we need here 100 vh. Then change the background color, make it light gray using E. Next, I'm going to send to the icons for that. I'm going to use flexbox. We need to make development flex container using display flex. Then in order to center the items horizontally, we have to use justify-content center. As for the vertical centering, we need a line items Center, right? That's it about the container. Next, I'm going to take care of the menu itself. Let's go ahead and select nav menu. First of all, let's define which make it 46 RAM. As for the height, I'm going to set it to 3.5 rem. Then change background color. In this case, I'm going to use color 2578. Then I'm going to create some space inside the menu using padding. Let's set it to two REM, top and bottom and three ramp on left and right sides. Also, I'm going to make the menu rounded. For that, we have to use border-radius with value five rem. Finally, let's create some shadow effect using box-shadow, which will have the following values. We need 01 rem, three ramps. As for the color, I'm going to use RGBA value 37172120, and the opacity 0.4. Alright, the background is ready for the icons. Next, I'm going to customize the icons. So let's select them. We need nav menu link, followed by the island. Let's increase the font size, make it 4M. As for the color, I'm going to make them white. So right now I can look much better and we have to take care of their positions. We need to define their positions individually, but before that we need to add to them some common styles. So let's select the link element and make its position absolute. I'm going to position, I can say according to the nav bar. And for that we have to make the position of the nanopore relative. So let's go ahead and select it and assign to it positioned relative. After that, I'm going to center items particularly for that. Let's set top position to 50 per cent. And also we need to use Transform with Translate function. I mean translate y with the value -50 per cent. And now we need to define left and the right positions for all the items individually. For that, I'm going to use one of these CSS pseudo classes. It's called f child. Let's select the first item. For that. You have to select link elements than it should be followed by the nth child pseudo-class. It is actually the function. And inside the parenthesis we have to specify the number. In this case, we need to first item, so we have to pass here one. Let's make the left position of the first item for RAM. Then I'm going to duplicate this code three times because we have four icons. For the second icon we need left position with the value 13 rents. Then let's define the position for the third item. In this case, we need to use the right property with the value 13 ramps. As for the fourth item, we need right position with value for n. Alright? So all the items are positioned. As you can see, we have some space in the center of the menu, and actually it belongs to the button. So let's go ahead and start to work on it. I'm going to select development which has class name dot btn. Then let's go ahead and make it feasible for that. I'm going to set width and height, both of them to ten rooms. And also change the background color. Make it to five ac 78. So the div element is visible, but right now it has messed up the entire layout. So we need to take care of that. I'm going to place it in the center of the menu. So let's define this position as absolute Then, in order to center it perfectly, I'm going to use the following properties and values. We have to set top and left positions, both of them to 50 per cent. And also we need to use Transform with the translate function. And we have to pass your -50 per cent twice. So as you can see now, it is placed in the center. Next, I'm going to make it rounded. And for that, as you know, we had to use border-radius with a value of 50 per cent. Also create some shadow effect. Use box-shadow with the values 01 RAM. Three rems. That's probably color. Let's use RGBA values, 13, 83, 57, and the opacity 0.4. Finally, let's change the type of the cursor, make it point to the button is prepared. Now I'm going to take care of the dots. Let's go ahead and select them using a common class name, dot. And assign to it width and height. I'm going to set both of them to one RAM. Also change the background color, make it white, and then make dots around it using border-radius with value 50 per cent. So as you can see right now, dots ended up outside of the button. We need to take care of their positions. I'm going to center them using flexbox. We need display flex. Then I'm going to use justify contents with the value spaced evenly. Actually spaced evenly allows us to create even space between the flex items. And finally, for vertical centering, I'm going to use align items center. Alright. So as you can see, everything is ready to make the navbar work. Again. Once I click the button, those dots, I mean first and the third one should transform into x. As for the second one, it should hide. And also the menu should hide and display on click. So first of all, I'm going to transform dots into x, and then we will make it work using JavaScript. Let's go ahead and select the first.it has class dots one. Let's make its width 0.8 RAM. As for the height, let's make it seven run. And also use border-radius, which value? One rent. After that, I'm going to duplicate this code and I will change the class name. We need here dot three. That's it about the third dot. Next, we need to take care of the second one. As we said, we need to hide this second dot. So let's go ahead and select it. And assign to it opacity zero. Alright, now I'm going to make the x using those two lines. For that, I'm going to use the rotate and translate functions. First of all, let's go ahead and rotate the lines by 45 degrees. Use Transform. With the rotate function. In case of the first dots, we need to use 45 degrees, but with minus sign. Then let's copy this line of code. Paste it for the third dot and gets rid of the minus sign. So as you can see, the lines are rotated, but we don't have here any x. So we have to use Translate function as well in order to fix that problem. Translate function actually moves the element according to the x or y-axis. I mean according to the horizontal and vertical directions. Let's use translate with values to RAM. And again to rent. Then copy and paste it for the third line. In case of the third line, we have to make the first value of negative. Okay? So right now we have a perfect x and now it's time to make it work. So I'm going to create a new class and CSS. Then using the toggle method, we will add and remove this class from the dots using JavaScript. So let's use a multicore and add to all three dots, cluster called change. Then open JavaScript file and select the button. Then I'm going to use Method called query selector. We have to specify here the class name. It's dots btn. Then let's attach to an event listener with a click event, followed by the arrow function. So we need to add and remove the class change from the container, which is the wrapper of the entire content. So let's go ahead and select it using again querySelector method. Let's insert here className container. Now we need to use class list property, which actually stores all the classes the container has. Finally, we need to use the toggle method, which in general eds class to the element if it doesn't exist, and remove it. If it exists. Right? Now if I click the icon, then dots will transform into x and vice versa. This transformation happens without any transition. So let's go ahead and add to the dots transition with the values all end 0.3 s, which is the duration. Now if I click, we will get a nice smooth transition effect. Okay? The last thing that have to do is to hide and display the menu itself. For that, first of all, make x with zero. Then I'm going to hide the items. For that. Let's use opacity zero and visibility hidden. Now, again, we need to use class change because we want to hide and display the items when we click the button. So let's go ahead and select change with Nav Menu and set with 246 Rams. And also use transition with value width. And with the duration 0.3 s. Then select again change with a link. Now we need to make the item feasible. For that, we have to set opacity to one and visibility to visible. And also use transition. With opacity 0.3 s. Alright, we're almost done. The only thing that had to do is to add some delay. When we display the icon. For that, we need to use again transition, but with the class change. So we need here All than the duration 0.3 s, and then the amount of delay, 0.3 s as well. Alright, now everything works perfectly and actually we are done with this pixel project 21. Project 18 - Rounded Navbar: In this video, we're going to create a navbar menu with HTML, CSS, and a little bit of JavaScript. This type of navbar is kind of different because I think it's more modern and creative than the other standard numbers. Let's go ahead and describe the project. We have a dark black background with the icon in the center. If I click it, then the navigation items will display with some nice rotation effect. Okay, let's go ahead and start to build it. I have created the folder on the desktop. So let's open it in VS Code. I'm going to create three different files. The first one is going to be index.html. Then we need style.css and scripts dot js. Then go to index.html file and insert here the basic HTML document. For that, I'm going to use an image. We need to place an exclamation mark and hit Enter. Alright, let's go ahead and change the title. I'm going to insert your navbar. Then also, I'm going to link CSS and JavaScript files. For that, we need to open the link tag and we need to indicate the path of the file, in this case the file name style.css. As for the JavaScript, Let's open script tag, right above the closing body tag. And in source attribute specify the name of the file. Besides that, we're going to use a couple of Font, Awesome icons. So we need to get CDN link for that. Let's go ahead and search for Font Awesome. Cdn, JS. Grab the first link and paste it in the head element. Alright, that's it about this setup. Finally, I'm going to run the file in the browser. For that, I'm going to use Live Server, which is a VS code package. It allows us to make the updates without refreshing the page each time. So you can go ahead and install it and you'll be able to run your projects like in the browser. Let's place the text editor and the browser side-by-side and start to build HTML markup. Let's open developments and assigned to it firstName Nakba wrapper. This element will wrap the entire number. Then open another div element with the class nav bar. Actually it will include all the links and the icons. So I'm going to open link tag with the class name navbar link. And here we have to insert the first Font, Awesome icon. It's going to be FAS, FA dash home. So overall we will have six items. Let's duplicate link element five times and then change the class names for the icons. The second one is going to be city than we need school. Landmark, hotel. And finally, we need here, store, dash out. Alright, that's it about the nav items. Finally, we need to create the button. It will be represented by the development and a Font Awesome icon. So let's go ahead and open div with the class name Nakba dash btn. And then insert your Font Awesome icon with the classes FAS, f, dash plus. Alright, that's it about the HTML markup or the elements are created and we are ready to start to write some CSS. First of all, let's create some reset styles. I'm going to get rid off margin and padding for every element. In order to select every element, we have to use an asterisk. And then let's go ahead and set margin and padding both of them to zero. Throughout this project, we're going to use RAM as a measurement units. Right now, by default, one ramp equals to 16 pixels because the font size of HTML is equal to 16. I'm going to make one rem equal to ten pixels because I think it's more convenient and easier to calculate. So in order to convert one RAM into ten pixels, we need to decrease the font size of HTML. So let's select it and make its font size 62.5%. Alright, so as you can see, the size of the icons decreased and now one RAM is equal to ten pixels. Let's go ahead and select wrapper div elements. Let's define its width and height I'm going to set width as 100% S for the height. Let's make it hundred percent of the viewport. We need 100 vh. Also change the background color. We're going to use here. Three b, three B39. Alright, let's can see right now the icons are not quite visible. So let's go ahead and fix that. I'm going to select navbar icons. Let's increase the font size, make it 2.5 rem, and change the color, make it white. Besides that, I'm going to select the plus sign as well. Let's increase its font size, make it to Ram, and also make the color white. Alright, so now the icons are visible. The next thing that I'm going to do is to place them in the center using flexbox. We need here display flex. Then to center the items horizontally, we have to use justify-content center. As for the vertical centering, we need to align items center. Okay, let's go ahead and start to work on the navbar. Let's select it and define its width and height. I'm going to set both of them to 20 reps. Also, change the background color. Let's use your color easy for, for, for, for. After that, I'm going to take care of the plus sign button. So let's go ahead and select navbar BTN. Actually, if we make its position absolute, then the icon we'll place in the center of the nanopore because it will jump out from the normal flow of the page. And the flexbox, we'll center it perfectly. Next, let's define its width and height. I'm going to set both of them to six rounds. Also, change the background color. I'm going to use your color one to c095. Alright, besides that, I'm going to send to the plus sign inside the box. For that, I'm going to use again flexbox. We need display flags, justify-content center, and align items center. Then make the box rounded using border-radius with the value 50 per cent. And finally, change the cursor, make it point. Alright, so that's it about the plus sign. Now we need to center all the items. At first. Let's change their position and make it absolute. As you can see, icons are placed on top of each other. Also, we need to change the position of its parent element, which is navbar. Let's make it relative. Once we make the position relative, then we will be able to position icons according to its parent element. Right? Now I'm going to send the icons. And for that, Let's use again Flexbox. Actually, I'm going to grab those three lines from here and paste them for the navbar. Now the icons are no longer visible because they ended up behind the button. So I'm going to comment it out for awhile. And then once we position the items, then we will display it back. Now finally, it's time to position each of the items separately. For that, I'm going to use a pseudo-class called nth child. So let's go ahead and start with the first item. Select navbar link, followed by the nth child pseudo-class. Actually it is a function and we have to specify the number of the item inside the parenthesis. So for the first item, we need to opposition to ramp. Then let's go ahead and duplicate this code five times. For the second item, we have to define top and right positions. For the top position, we need six ramps. As for the right position, we have to set it to 2 g. Next we have the third item we need here, bottom position. Let's set it to six runs. Right position with value two rems. Next we have fourth item For the first item, we need to use just the bottom position with the value two rams. Next we have fifth item. Let's set its bottom and left positions. I'm going to set bottom to six months. As for the left, we need to rent. And finally, for the last item, we need top and left positions. For the top position we need six ramps and for the left, we need to rent. Alright, so the icons are positioned. Let's display the button back and also make the number rounded. Let's use here border-radius with a value of 50 per cent. Next, I'm going to create a little hover effects. I'm going to change the color of the icons when we hover over them. So let's go ahead and select now per link with the hover. And then we need to select, I'll change the color. Use here color 12095. And also use transition with color property with the duration 0.3 s. Alright? Actually, everything is prepared to make the nap or work. By default. I'm going to hide the icons and also rotate them. I'm going to hide them using scale function. Once we click the plus sign icon should display, then on the next click they will hiding it. So we will use a toggle method. I'm going to create a new class in CSS. We will add and remove this class from the napa using JavaScript. First of all, let's hide and rotate items by default. When you transform. With scale function, we have to insert here zero. And then I'm going to rotate icons by hundred and 80 degrees, but with minus sign. Then create a new class and call it change. Then select navbar. We need to use Transform with again scale and rotate functions. So when we click the icon, then we have to give to the items. They are default size. So we need to use K value one. And also we need to rotate with zero. Right? Now we need to write some JavaScript. Let's go to script.js file Select button. Then I'm going to use querySelector method. We have to specify here the class name, which is navbar btn. Then attached to it event listener with the click event. And also we have to pass here the arrow function. So now we need to add a new class name change to the napa wrapper. So first of all, we need to select this element, use again querySelector method and specify the class name in the parenthesis Napa wrapper. Now we have to use class list property, which actually stores all the classes that the element has. And then we need toggle method with the class change. Now, if I click the icon, then the items will be displayed. But in this case, without any effect. So we need to transition with transform. And with the duration 0.5 s. Now, if I click again, the icons will display with a nice and cool transition. Alright, lastly, I'm going to add some effects to the plus sign itself. I want to rotate it onClick. So let's go ahead and select a gain to change class, followed by the nav bar p t n i. So I'm going to rotate the plus sign by 45 degrees. Let's use the rotate function. Also. For smooth effect. Let's use transition. We need here transform. And as duration that's indicate here 0.5 s. Alright, so now everything works perfectly and actually we're done with this project 22. Project 19 - Sidebar Menu: In this video, we're going to build a sidebar menu for admin dashboard. These kinds of sidebars a very popular today. So I think this little project will be interesting and helpful for you before we start to build our project. And I'm going to go through and describe it. So as you see, we have here a full-screen background image, and at the top left corner we have a menu icon. If I click it, then those lines will be changed to x with some nice transition. And also the sidebar, we'll display it from left to right. As you can see, the sidebar consists of a couple of different parts. At the top of it, we have an avatar for admin with a full name and the subtitle administrator. It is followed by the search bar. Then we have a list with Font, Awesome icons. Each of the list items has its own sub-menu. They are represented as the drop-down menus. And finally, at the bottom of the sidebar we have a couple of icons. If I click the X button, then the sidebar will close. Actually, the project will be responsive to all different screen sizes. We're going to build it for larger screen size. Screen size with 1920 pixels width and 1080 pixels of height. So if you're following us with a relatively smaller screen size, then I recommend to open up the developer tools. Switch to the responsive mode and set the width and height to 1920 pixels and 1080 pixels. But anyway, at the end of the day, we will make the project responses. Okay? That's what we're going to build in this video. So let's get started. I have created a folder on the desktop called sidebar, in which I have another folder for the images. Let's go ahead and open up the folder in VS Code. The first thing that I'm going to do is to create our working files. Overall, we will have three different files. Index.html, style.css, and also scripts dot js. Then open index.html file and insert you the basic HTML document. For that, I'm going to use amides. Let's place here an exclamation mark and hit Enter or maybe tab. Let's change the title. I'm going to insert your sidebar. Also. I'm going to link CSS and JavaScript files. For that. Let's open link tag. Indicate here the filename, style.css. Then down below we open up script tag. And in the source attribute specify the name of the file script.js. Besides that, we need two other links, one for the Font Awesome icons, and another one for the Google fonts. So let's go ahead and search for Font Awesome, CDN GIS. Then grab the first link from here and paste it in the head element. After that, I'm going to search for the Google Fonts. Actually, we will use two different phones. The first one is going to be Roboto Slab. I'm going to customize it because we're going to use a little bit bolder font weight. So let's check the semi bold font. As for the second one, we will use slab over 27. Let's grab the link and paste it in the head element as well. That's it about the setup. Lastly, I'm going to run the file in the browser. For that. I'm going to use Live Server. This is one of the VS code packages. Actually we use this package almost always, but anyway, I'm going to remind you that it allows us to run the project life in the browser and make updates without refreshing the page each time so you can download and install it. Finally, that's organized or working environments. I'm going to place text editor and a browser like so to make our working process more convenient. Okay, Let's go ahead and start to create the HTML markup. Let's open a div element, which is going to be a container. Next, we need to open nav elements, which will wrap the entire sidebar. So let's assign to it className sidebar. As we said, the sidebar will consist of a couple of different parts The first one is going to be a menu icon. So let's open the developments with the class name, hamburger menu. The menu icon will consist of three lines. So I'm going to pass here developments with classes. Wine, which will be the common class name for all three lines. And also we need to line one. For individuals tiling. Let's duplicate the line twice and change the class names. We need line two and line three. Alright, that's it about the Menu icon. Next, we need to create a card which will include the avatar of the abdomen, full name, and the subtitle administrator. So let's open a development with the class name card. Next we need another div, which will wrap the image of the admin. Let's assign to it a class name card, IMG. Then insert the image element. I'm going to write in the alt attribute admin image. Then let's specify the path of the image in the source attribute is going to be images, folder slash admin dot JPG. Finally, use here class attribute with a value admin image. So we have here the image. Let's go ahead and insert the full name and subtitle. And we're going to open another development with the class name card body. Then insert H2 heading elements in it with the class card title. As the content, write the full name. John Smith. Next we need a paragraph which should have a class name card, subtitle. And as the contents, Let's insert user administrative. Okay, That's it about the card. Next comes the search input fields. So let's open a form elements with the class name search form. So overall we will have two elements. The first one is going to be input with a type of texts. Also, we need a class search inputs and the placeholder attribute with value search. Besides the input element, we need also a button which will represent the search icon. So let's open the button element. It should have the type of button because when we button element is placed inside the form, then by default it will load the page on Africa. So in order to avoid it, we have to use the type of button. Also we need here class name search button. The search icon will be represented by the Font Awesome icon. So let's insert your eye element with classes. Fas, FA dash, search. Alright, so that's it about the formed elements. Next, we need to take care of the list. So let's go ahead and open the UL elements with the class name novelist. So this is going to be the main list on the sidewalk. It will have five different list items, each of them with its own drop-down menu. So let's open the LI elements with the class name. Now item. Then it should be followed by the link with the class nav link. So I'm going to insert here three different elements. The first one is going to be the Font Awesome icon. The class names, FAS, FA, dash, taco, meter, dash, Alt. Next we need a span element with the class nav link texts. Then as the contents, Let's Institute dashboard. Finally, we need again the Font Awesome icon to display the arrow. So it should have classes, FAS, f, dash, dash, right? Alright, that's it about the first list item. As we said, overall, we need five of them. So I'm going to duplicate it four times and then change the class names and also the content of the items. The second one is going to be Fas, a shopping cart, e-commerce. Next one will be F, F h, m with the item Components. Next we have FASFA chart line charts. And finally, we need FASFA map, marker out with the item marks. Alright, so that's it about the main list. Now we need to create a drop-down menu for each list item. So I'm going to insert a new list right before the closing LI tag. It should have class sub novelist. The first drop-down menu will consist of three different list items. Let's open the first LI element with the class name sub nav item. Next we need a link elements with the class subnet link. So each list item will link for the Font Awesome icon, and the content represented by a span element. Let's insert your eye element with the classes FAR F dashed circle. It shouldn't be followed by this pan. With the text dashboard one. Let's go ahead and duplicate LI elements twice and just change the contents. We need dashboard to dashboard three. So here we have the first drop-down menu. We need it for the rest of the items as well. So let's go ahead and grab it and paste it before the closing LI tags. Then go ahead and change the contents for all of the menu items. We need here, products, orders, and credit card. Next we need general icons and tables. Next, we need a pie chart, a line chart, and bar chart. For the last drop-down menu, we just need two items. So I'm going to leave here just two items with a following consonant. We need Google Maps and open street map. So as you can see, we are done with the main list. Next, we have to take care of the bottom list. So let's open again. List elements with the class. Bottom list. The list will include four different icons. Therefore we need four list items. Let's open LI element, which should have class name, bottom list item. Then we need to link elements with a class name, bottom list link. Each of the list items will have an icon and also some notifications. Therefore, I'm going to insert you the span elements with some number, let's say five. And also we need a Font, Awesome icon. It should be FAS. Belle. Let's duplicate list item three times. Then change the number of the notifications and also the class names. For the second one, I'm going to insert here seven. As for the class name, we need FASFA envelope. For the next one, we need one. The class name, FASFA Coke. For the last item, I'm going to get rid of the notification at all. Just leave here Font Awesome icon With classes, FAS, FA, dash, dash off. Alright, so that's it about the sidebar. We are almost done with the HTML markup. The only thing that have to do is to take care of the main section in which actually we will have just the heading with the full-screen background image. So right after the nav elements, Let's open this section and assigned to the cluster name main section. Then inside it we need a header elements with the class header. So inside the header we will have just a single heading with the class name, heading with the text dashboard. Alright, so finally, we are done with the HTML markup of the needed elements are created and now it's time to write some CSS. Let's open style.css file. First of all, create some reset and actually common styles. Let's select all the elements using an asterisk. So I'm going to reset margin and padding. Let's set both of them to zero. Also, we have lots of list items and links. So I'm going to get rid of their default styles with list-style none and text decoration, none. After that, let's define the font-family for every element. I'm going to use font called slideshow 27 pixels serif. Finally, let's get rid of the default outline. Alright, that's it about the common styles. Throughout the project, we're going to use a ROM as the measurement unit. By default, one ramp equals to 16 pixels because the font size of HTML equals to 16 pixels. Actually, I want to convert one RAM into ten pixels because I think it's more convenient and easier to calculate. In order to achieve that, we have to decrease the font size of the HTML and make it 62.5%. Now the font size of HTML equals to ten pixels. Therefore, one ramp is equal to ten pixels as well. Alright? Throughout this project we're going to use different colors for several times. And actually in order to make this process more dynamic, I'm going to use CSS variables. We will store the color values in CSS variables. And we will use those variable names. In order to create the variables for global scope, we need to select a route. Then we need to define variable names with the proper values. The first one is going to be made peachy color, background color. So it should be tui, tui, tui. Then I'm going to duplicate this line of code for a couple of times and change the names and the values. Second one is going to be primary color. With the color value five to four, the four t. Next one is going to be secondary color with values 777171. Then we will have text color 99393. Also, we need hover text color with the value p db88. And the last one is going to be active icon color with a value to a 77. Alright? Now I'm going to show you how to use those colors. Suppose that we want to change the background color for the body. We need to select body. Then we need to assign to it a background color. Now we have to use var function, which stands for variable. Inside the parenthesis, we have to specify the name of the variable. Let's say main background color. I mean main peachy color. So as you can see, background of the body element is changed. So that's the way how CSS variables work. Okay, let's get rid of this code because we don't need it anymore. Let's go ahead and add some styles to the sidebar. I'm going to select it. Let's define its width and height. Actually as the measurement unit, I'm going to use viewport width. Let's set the width of the sidebar as 15% of the viewport. We need 15 V W S for the height. I'm going to make it 100% of the viewport. So we need 100 vh. Then change the background color. You see your main BG color. And also I'm going to make the position of the sidebar fixed. Alright, so now the sidebar is feasible. And actually I think that the image is quite big. And I'm going to decrease its size from the HTML right now. At the end of the day, we will take care of the image from CSS. Let's go to index.html file and assign to Image attribute called width with value 50. It means that we set the width of the image to 50 pixels. The next thing that I want to do is to take care of the main section. I mean, the second part of the page, which is placed down below after the navigation. Let's go ahead and select it. The main section should take up the rest of the page. I'm in the right side. Therefore, I'm going to define it squeaks as 85 viewport width. Also, we need to define its position because the sidebar and the main section should be placed side-by-side. So let's make it position relative. Then set left property to 15 viewport width. Now, as you can see, the text dashboard is visible. It means that those two parts are placed side-by-side. Let's define the full-screen background for the header. Let's select it. First of all, let's define its width and height. I'm going to inherit from the parent elements. So let's assign to width property, inherit. As for the height, let's make it 100% of the viewport. Finally, let's define the background. I'm going to use here. Linear gradient with white colors, but with different opacity. The first color should have the opacity 0.3. As for the second one, it's going to be 0.5. Next we need to specify the URL. We have folder called images. We need to select bg dot PNG. Next we need center. No repeat. And finally, we have to define the size of the background as cover. Alright, so now as you can see, the image is set as the full-screen background. And the only thing that had to do is to take care of the heading elements. So let's go ahead and select it. I'm going to place it in the center. For that. Let's define this position as absolute. Then set top position to five per cent. Then we need left 50 per cent. And lastly, we need to use Transform with the translate function in order to send to the element perfectly. We need here translate x because we have to move the elements according to X-axis. And that's the value we have to pass here, -50%. Alright, so the heading is centered, and now I'm going to make it look better. Let's go ahead and increase its font size. Make it 12 Rahm. Change the color, make it white. Then finally, create some space between letters. Use letter spacing with the value one rem. Alright, let's see about the main section. Now we have to return to the sidebar. Let's go ahead and create some space inside the box using padding. I'm going to set padding to 1.5 rem on top and bottom and one rem on the left and right sides. And also in order to maintain the same size of the box, we need to use box-sizing With value border-box. Alright, so the sidebar consists of several parts. And I'm going to start with a card in which we have an image, title and subtitle. Let's select a card and make it flex container. For that we need display flex. Now I'm going to take care of the image. As you know, we define its width from the HTML. And actually I'm going to get rid of it. Then select the image class name admin image. Define its width as phi params. And also I'm going to make it slightly rounded using border-radius with the value 0.5 rem. Alright, that's it about the image. Let's move on and select card body, which actually includes the full name of the subtitle. So I'm going to create some space on the left side using margin. Let's assign two to one rem. Next, I'm going to use again Flexbox to align those two elements. Let's make card body flex container using display flags. Then we need to change the direction. We need column. In order to make some space between the items. We need justify content. Space around. The full name and subtitle are aligned. Let's go ahead and make them look better. I'm going to start with the card title. So let's select it. Change the font size, make it to Ram. Also, we need some space on the right side. Let's create it using margin right. Three rems. Then change the color. You see your tax color. And finally use letter spacing with the value 0.1 row with the title we are done. And finally, let's take care of the subtitle. Selected. Change the font size, make it 1.8 RAM, and also change the color. I'm going to use your secondary color. Alright, that's it about the card of the elements. Look good. Next comes the search a fulfilled. So let's go ahead and take care of it. Let's select a form element. It has class name search form. At first, I'm going to make some space using margin. Let's set margin to, to run on top. Zero on the right side. One rem at the bottom, and zero on the left side. Then, in order to align the input and button in the right way, let's make a form element flex container using display flex. And also center the items vertically using align items center. Alright, let's go ahead and style both elements. I'm going to start with the input. So it's selected. Define its width and height. I'm going to set width 200 per cent. As for the height, let's make it four rams and change background color. Use your primary color. Alright, let's go ahead add some more styles to the input. I'm going to get rid of the default border. Using border none. Also make a rounded use border-radius with a value 0.5 rem. Next, let's make some space inside of the inputs using padding. I'm going to set it to zero on top and bottom and one rem on the right and left sides. Then increase the font size, make it 1.6 RAM. Change the color, use your text color. And finally, create some space between letters using letter spacing, 0.1 ramp. Alright, so as you can see, the input looks good and we are done with it. Next, we have to take care of the search icon. I'm going to place it inside the inputs, I mean, in the right corner of it. So let's go ahead and select the Search button. First of all, let's get rid off its default styles. I'm going to make background color transparent. And also gets rid of default border with border none Now in order to move the icon to the left side, I'm going to use Transform with the Translate X function. Let's insert here minus 150 per cent. Okay, So the icon is placed in the right way and the only thing that had to do is to style the I element. So let's go ahead and select it. I'm going to increase its size with font size. Let's make it two rems, and also change the color. You see your secondary color. Right? That's it about the form element. Now we have to move on and start to work on the list. Let's go ahead and select the main list with the class name. Not least, I'm going to create this space at the top using margin. Let's make it three rems. Then select LI elements and create some space at the top and bottom margin, assigned to two ramps. And then zero on the left and right sides. Right? That's it about the LI elements. Now, it's starting to customize the link. Let's go ahead and select it. I'm going to set its width as hundred percent. Then. Make it flex container using display flex. Also center items vertically using align items center. And finally, change the color. Let's use your text column. Step-by-step. We are moving forward right now. The items are quite smaller because their size is just ten pixels. So let's go ahead and select the span elements, which has clustering nav link text. I'm going to increase the font size. Let's make it 1.8 RAM. And also create some space on the left side using padding left one rem. As you can see, the arrows and the items are placed too close to each other. We have to move the arrows to the right side. Actually, we can do that using a couple of different ways, but the best way for us is to use the flexbox properties called flex grow, which should be equal to one. Using this property, the element will take up all the available space inside the flex container. Alright, let's go ahead and take care of the Font Awesome icons, which are placed in front of the items. So let's select them. We need to select nav link followed by ions. And we have to use CSS pseudo classes called first-child. Let's set width and height, both of them to two rems. And also change the background color. I'm going to use your primary column. As you can see, we need to center the icons inside the box. For that, Let's use flexbox. We need display flex. And then we need to center the elements horizontally and vertically as well. So let's use justify-content center and align items center. Alright, now as you can see, the icons are centered perfectly. The only thing that I want to do is to create some space inside the box and also make them rounded. So let's use padding. We devalue point to RAM and border-radius, which value? 0.3 ran. After that, Let's create a little hover effect. When we hover over the item, I wanted to change the color of the icon. So let's select it. We need now link hover. Then again, I element with the first child pseudo-class. Let's change the color, make it Active, I can call them. Also use transition to make the effect smarter. We need to pass your color with the duration 0.2 second. Okay, So if we hover over the items than they will change their color. Lastly, I want to take care of the arrows. I'm going to move them to the left and also increase their size. So let's select them. We need again nav link. Then I element, followed by the pseudo-class called last-child. Let's create some space on the right side using margin right, 2.5 rem. And also increase the font size, make it 1.6 round. Alright, so with the main list items we are done and now we have to take care of the drop-down menus. At first, let's style them. Select the list elements using className sub novelist. Let's define the width, make it 90 per cent. And also placed the items to the right side using margin-left, the value R0. Okay, next I'm going to create some space between the items. So let's select LI elements using clustering subinterval item. I'm going to define margin as 0.5 RAM on top and bottom and zero on left and right sides. Next, we need to take care of the link element. So let's go ahead and select it. Change the font size. I'm going to make it 1.5 rem. And also change the color. Use here text column. So the items look much better. And next, I'm going to create a hover effect. On hover. I want to change the color of the items. So let's select link, hover. Then change the color. Let's use here hover text color. And also we need a transition with color and with the duration 0.2 s. Alright, so with dropdown items, we are almost done. We just need to add a couple of stars to the circles. So let's go ahead and select elements. You need sub novel link. I. Then change the font size. Make it one RAM. Also create some space on the right side using margin with value 0.5 rem. Next, we need to create our effect. Let's select link with hover, followed by the I element, and change the color. Use here, active I can call. Lastly, we need again transition the color and the duration 0.2 second. Alright, Some That's it about the list. They are styled, look good. And now we have to move on and customize the last part of the sidebar, which is a bottom list. So let's go ahead and select UL elements. It has clustering bottom list. First of all, let's define its width. I'm going to make it 100 per cent. And also change the background color. Use your color, primary color. The list should we placed at the bottom of the sidebar? Therefore, we need to define its position. I'm going to make it absolute. And then in order to place it at the bottom, we have to set a button property to zero. Alright? So the list is positioned in the right way. Next, I'm going to create some space inside the box. And also we need to place the items in a row horizontally. So we need padding on top and bottom, 0.5 rem and zero on left and right sides Next, we have to use flexbox. We need display flex. And also in order to create some space between the flex items, Let's use justify content with the values pace around. Okay? So the items are aligned nicely, but as you can see, we have some space on the left side of the list. So I'm going to move the entire list to the left side. For that, Let's use Transform with the translate x function. And as the value, let's pass in minus one rep. Alright? So that's it about the alignment of the list. Now I'm going to customize the icons and also this pattern elements which are created for the notifications. So let's go ahead and start with the icons. Select bottom list link, followed by the I element. Let's increase font size, make it 1.6 RAM, and also change the color. You see your secondary color. Now the icons look much better. I'm going to add here little hover effect. I want to change the color of the icons on hover. So let's select link with hover. And then I elements. Change the color. You see your active icon color. And also use transition with the color. And with duration 0.3 s. So if we hover over the icons, then they will change the color. So actually with icon's, we're done. Now I'm going to take here of this span elements. So let's go ahead and select them using bottom list link span. First of all, I'm going to change the font family. Let's use here font called Roboto Slab Serif. Also, I'm going to increase the font weight because I want to make span little bit bolder. Use here 600. Then change the font size, make it a one RAM. And finally, change the color, make it white. Alright? So those numbers should be placed at the top right corner of the icons. So let's go ahead and take care of their position. I'm going to make it absolute. Then in order to define the position according to the parent element, which in our case is a link. We have to make the parents position relative. So let's go ahead and select link itself and assigned to it position relative. After that, let's define the top and the right properties. Make Top position -100 per cent. As for the right position, let's make it -50 per cent. Alright, so the span elements are positioned and now I want to create different background for each of the nitrification. For that, Let's define width and height properties. I'm going to make both of them one point for RAM. And also add here some temporary background color, let's say red. So now we need to make those backgrounds rounded. And also I want to place those numbers in the center in order to make them rounded. Let's use border radius with value 50 per cent. As for the centering, the numbers, use flexbox. We need display flex and then justify-content center and align items center. Alright, actually, we are almost done with the notifications. We only thing that we have to do is to change the background color and make it different for each height. So let's get rid of the red background. Then in order to select the item separately, I'm going to use and Child selector, which is a pseudo-class. So let's select the bottom list item followed by the nth child. Actually this is a function. So inside the parenthesis as the argument, I'm going to insert the number of the item, one. Then it should be followed by span. As the background color. I'm going to use CFA 012. Let's duplicate this code twice. Change the number we need here to as the color. Let's use 54154 As for the third item, we need to cover E, two to seven to seven. Alright, so that's it with a design. Finally, we're done. Next, we have to take care of the functionality. And first of all, I'm going to work on the hamburger menu. Let's go ahead and add some stars to the Menu icon. For now it's not visible. So let's select it. The first thing that had to do is to make it visible. So let's define width and height. Make both of them 3.5 rem. And also change the color, the background color make it white. As you can see by default, it is placed at the top left corner. And right now we need to place it at the top right corner. So let's define its position and bake it absolute. And then set right and top positions, both of them to zero. Okay, So the icon is placed in the right way. Next I'm going to display the lines. So let's select them with a common class name, line, defined width and height. I'm going to set width to 2.5 g. As for the height, let's make it 0.3 rem, and also change the background color. In this case, I'm going to use secondary color. Alright, as the Z lines are, all are visible, but right now they are placed too close to each other. We need some space between them. And also we have to place them in the center of the box. In order to do that, I'm not going to use flexbox. I want to do the same using positions. So let's assign two line position absolute. Then I'm going to select each of the lines separately. Let's start with line one. Make its top position. One point to RAM. Then I'm going to duplicate it twice. We need here line to S4, the top position. Let's make it 1.8 RAM. As for the third line, we need to position 2.4. As you can see, now we have space between the lines. And in order to center them, I'm going to use padding. Actually, the size of the space equals to one RAM because the width of the icon is 3.5 rem and the width of the line is 2.5 rounds. In order to make lines perfectly centered, we have to set padding to 0.5 rem. Right now the size of the box is increased. And in order to fix that, we have to use box-sizing. Border-box. Finally, get rid of white background color. Alright, so the Menu icon is designed and now we have to make it work. I mean, when we click it, we need to transform it into x. For better demonstration, I want to define some styles for all three lines separately. I mean, we will overwrite the current styles, but eventually we will use a new class which will be added using JavaScript on click event. Alright, let's write the code and it will become much more clear. Let's select again line one. Line one and line. We will exchange their places that they will rotate. As for the line to, it will hide. For the line one, we need to define the position top as 2.4 RAM. Then we need to transform with the rotate function with the value -40 degrees. Then select line to an assigned to its opacity to zero. As poverty line three, I'm going to copy this code and change the class name. We need to line three. Also, we need top position as one point to ram. As for the rotation, we need here 40 degrees without the minus sign. So as you can see, lines are rotated. Well, we don't have here the x. We have to adjust the positions using the translate function. But before that, we have to change the origin of the transformation. By default, lines are rotated according to the Center. And in our case, we need to make the origin of the transformation left. So let's assign to the line transform origin. Make it left Then down below, use the translate function. For the firstline, we need to translate why we devalue 0.3 rem. As for the third line, we need the same, but with negative 0.3 rents. Alright, so now we have the perfect x and actually it's time to make the icon work. As we said, we need to add a new class. And then using toggle method, we have to add and remove this class on h click. So let's add it to all three lines. A new class, let's say change. Then open the JavaScript file. I'm going to select the menu icon for that. Let's use query selector method. Inside the parenthesis, we have to specify the class name, which is hamburger menu. Then attached to each event listener. Then pass here, click event, followed by the arrow function. We had to add and remove class change to the container because we need to manipulate the sidebar and main section as well. So let's select container using again query selector method. Specify here the class name container. Then we need to use class least property, which actually stores all the classes of the container. And now we need to use the toggle method which adds the class. If it doesn't exist, and removes the class if it exists. We need to specify here the class name change inside the parenthesis. So if I click the icon, we will get x. And if I click again, we will get back all three lights. Right now lines are rotating without any smooth transition. So we need to take care of it. Let's add it to the first and third lines transition. So first of all, we need to move line one and line three. I mean, we have to change the top positions for both of the lines. And once this is done, then we need to rotate the lines. So we need to opposition with the duration 0.3 s. After that, we need to transform with the same duration, but also with the delay. Alright, now, if I click, then we would get a nice smooth transition. Actually, when we click again the icon than the transition is not working because right now the change class is removed. So we need the same transition for the second click as well. And in order to do that, we have to assign it to the line, which is a common class name for all three lines. This transition will be slightly different because on the second clique, we need delay for the top property and not for the transport. We need here Transform with the duration 0.3 s. Then top position with the duration 0.3 s. And then we need delay 0.3 s as well. Also, we need to specify here the opacity for the second line with the duration points 2 s. Alright, so as you can see, everything works perfectly. The next thing that we have to do is to move the sidebar. By default, we need to hide it. And then once we click the icon, we need to display it back. Besides that, we have to change the width of the main section dynamically. I mean, we have to change its width according to the movement of the sidebar. Alright, let's go ahead and define the left position for the sidebar. We had to make it -15 viewport width. So as you can see, sidebar is hidden. Now we need to increase the width of the main section. Let's make it 100 viewport width. And also make lag position zero. Actually, this is a default position for the main section. But once we display the sidebar, then we should change again, left and width properties. Alright, right now the menu icons hidden because it is pla 23. Project 20 - Hamburger Menu: In this video, we're going to build the hamburger menu with some nice effects. This project will be built based on HTML, CSS, and little bit of JavaScript. So as you can see, we have here a landing page with full-screen background image. And at the top right corner there is placed hamburger menu icon. If I click it, than the icon will be transformed into x. And now part will be displayed from the right side. Here we have a couple of navigation items and if I hover over them, then we will get nice hover effects. In this video, you will learn about how to create all of this stuff. Let's go ahead and start building our project. In VS code. I have a couple of files for HTML, for CSS, and for JavaScript. And also we have here folder called images in which we have an image for background of lending page. You're able to download starter files from the link in the description. Okay, let's go ahead and open index.html file. I have prepared the basic structure of HTML document. Inside the head elements, I have two links. One for Google fonts, I'm going to use a font called doses, and another for CSS file. Besides that, I have inserted here script tag in order to link JavaScript file. Alright, let's start building HTML markup, open developments, which is going to be a container. So it's assigned to it class container. Then inside the container I'm going to open up elements which will wrap the entire content of navbar. Let's assign to it class navbar. Then inside it at first I'm going to create a hamburger menu icon. So open development and assigned to it a class name, hamburger menu. Then inside that div elements, I'm going to insert three div elements for three lines of an icon. Let's assign to its class name for common styling line. And also we need here another cluster name for individual styling. Right line one. Then duplicate this line twice and change class names. We need line two, line three. Alright, that's it about Menu icon for now, it's not feasible because we have just empty div elements without any styles. Next, I'm going to create navigation. It will be represented by UL elements. Let's assign to it class not least. Then insert in it LI elements. It should have class item. And finally, we need your link elements. Let's assign to it class name nav link, and also insert your first item. Overall, I'm going to have seven navigation items. So let's duplicate it six times and then quickly change the content right here about us. That news. Next one is going to be Gallery than events. Pricing. And for last one, insert your content. Alright, so that's it about HTML. It's time to start styling. Let's go to style.css file. At first I'm going to create some reset styles. Let's get rid of default margin and padding from every element. Select them using asterisk. And then pass your margin zero and padding zero as well. Then I'm going to change font family for body element. So let's select it. And then insert here font-family doses, san-serif. Next, let's take care of container. Set its width and height as a width. Let's write here 100 per cent. As for height. I'm going to set it as 100 per cent of viewport. So right, 100 pH than as a background. I'm going to set an image. So right background than we need here, linear gradient. I'm going to use three different colors. First one is going to be RGBA 000 and opacity 0.4. Next, let's write RGBA 14848, again 48 and opacity point to. And then insert RGBA 167-60-7607 and opacity 0.4. Then inside URL indicates part of image images and select the image called bg dot JPG as the position of background. We need Center and also pass here, no repeat. And finally, I'm going to use background size property with the value cover. Alright, so landing page is ready. We have here full-screen background image. And now I'm going to take here of hamburger menu As you know, it will consist of three lines and it should be placed at the top right corner of the page. At first, let's select the rapid development, which has a className, hamburger menu. Let's define its width and height. I'm going to set with 35 pixels. As for height, let's assign to it 30 pixels. For now, icon is still is not visible. And in order to fix that, let's assign to it some temporary background, let's say red. Okay, so now the icon is displayed by default is placed at the top left corner. But as I said, I'm going to place it at the top right corner of the page. For that, let's define this position as fixed. And then we need top position, set as 50 pixels and the right as 50 pixels. So now I can displace at the top right corner. And finally, I'm going to change cursor. Let's make it point. Alright, for now with parent div element, we are done. It's time to work on lights. Let's go ahead and select them using common class name line. Then set its width as 100 per cent. Means that line will take up the entire width of its parent element, which is 35 pixels. Next, I'm going to define height. Let's make it three pixels and also change background color. You see your color chocolate. Okay, Now lines are visible, but they are stuck to each other and we have to separate them. In order to achieve that, I'm going to use Flexbox. Let's make Hamburger menu flex container. For that we need display flex. Then change flex direction. We need to place lines as a column. So we need flex direction column. And finally, in order to make some space between them, use justify contents. Values pace around. Okay, so now lines are separated and actually we can get rid of that red background. Alright, so Menu icon is already created and before we make it work, I'm going to customize navbar. We should place it on the right side. So let's go ahead and select nav element with class name navbar. At first, let's define its width and height. I'm going to set its width as 300 pixels. As for height, let's make it 100 per cent. Then change background color. Let's use your color 26262. Okay, so in order to place now bar on the right side, Let's define this position as fixed. And then make top and right properties both zero. Alright, so navbar is positioned in the right way. Now I'm going to take care of the position of navigation items. I want to place them perfectly in the center inside navbar. And for that, Let's use Flexbox right here. Display flex. That in order to center items horizontally, use justify-content. Center. S for vertical centering. Use align items, center. Okay, So items are placed in the center. And the last thing that I want to do regarding navbar is to customize its shape. And I'm going to do it using border radius. Actually, this property can take four different values appropriate to four corners. I'm in top-left corner, top right, bottom right, and bottom left. So we're able to define different border radius, four different columns. In this case, I'm going to customize the top left and bottom left corners. As for the rest of the corners, we won't touch them. So as a value of border-radius of the top left corner, I'm going to insert here 20 per cent. Then, as we said, top right and bottom right corners won't be changed. So we need to insert here zeros twice. And for the bottom left corner I'm going to use 60%. Alright, so the shape of the navbar is customized and now I'm going to style navigation items. Let's go ahead and select UL elements. It has class name. Not least. I'm going to place text on the right side. So let's use text align right. Next, let's select LI elements. It has class name, not item. First, let's get rid of default bullets using list-style none. Then create some space using margin. 25 weeks. Alright, now we have to select the link elements, which has class name nav link. Let's get rid of default styles. Using text-decoration. None. Then increased font size, make it 22 pixels. Change color. You see your color E. Also, I'm going to make font lighter using font-weight. 300. Then creates some space between letters using letter spacing. One pixel. And finally make text uppercase using text transform Uppercase. Alright, that's it about navigation items. As you remember from the finished project, we're going to create some hover effects. On hover, we should display lines at the top and bottom of items. There will be displayed with a smooth transition. And from the opposite directions. Actually we're going to create those lines using after and before pseudo elements. Both of them will have some common styles. So let's go ahead and select both pseudo elements, right, nav link before. Then duplicate this line and change before and after. So first we need to define contents as empty. Next, I'm going to define the width and height. Let's set with us 100 per cent. Then make height to pixels and also change background color. You see your color chocolate. For now, lines are not visible because they are inline elements and therefore width and height are not applied to. So if we define their position as absolute, and then if we assign to the parent elements, which is not link position relative, then both lines will be displayed. At a glance. We see here just one line, but in fact, both lines are placed side-by-side. Okay, next I'm going to define a left position for both elements as zero. Now both lines are taking the same spots and in order to separate them, we have to define a bottom position for after pseudo elements and we have to make it zero. So let's copy this selector and assigned to it bottom zero. So now both lines are separated. As you know, by default, top position is set as zero. So if we do not define it manually, that won't be a problem. But anyway, I'm going to define it. So let's duplicate this code. Then change after, into before. And instead of bottom, right, top. Alright, the last thing that we want here is to create some padding because the bottom line is too close to the item. So let's assign to nav link padding on top and bottom right three pixels and then zero on left and right sides. Alright, that's it about lines now have to create a hover effect. By default, I'm going to hide those lines. And when we hover over the items than those lines will be displayed smoothly from the opposite directions. In order to hide lines, I'm going to use Transform. Then scale x. We have to set it as zero. So now on hover, we have to increase the scale and make it one. So let's go ahead and select nav link with hover. Then add here before. Duplicate this selector and change before and after. And then insert your Transform, Scale x with the argument one. And finally, in order to make effect smarter, Let's use transition transform 0.5 s. Alright, so if we hover over the items than lines will be displayed. But as you can see, by default, they start appearing from the center. It happens because transform origin property is set as sensor by default. So we need to change it for both lines. Let's assign to after pseudo elements, transform origin. Make it right. Then copy this code and paste it for before pseudo elements. And instead of right, let's insert here left. If we hover over the items, then everything will work perfectly. We have here a nice hover effect. Okay, So with navigation, we are done. Next. That we have to do is to make Hamburger menu work. First of all, I'm going to transform menu icon into x. For that we have to change positions for first and third lines. As for the second one, it should be heated. So let's go ahead and select line one. We have to rotate line one by 45 degrees according to the z-axis. To be more precise, for line one, we have to use Rotate Z -45 degrees. Let's duplicate this code. Change the class name right, line three. And also get rid of the minus sign from here. As we said, we have to hide line two. So let's select it and use your opacity zero. So as you can see, lines are rotated, but we don't have here any x. We have to take care of positions of lines. For that. I'm going to add here translate. Then as the value of x direction, right? Minus eight pixels, S4, y-axis. We have to pass your six weeks. Let's copy it And paste four-line three. Instead of six pixels we need here just minus six peaks. Now is considered. The problem is fixed and we have here x. Actually this is not the default state of the icon. We have to make it x when we click it. In order to achieve that, I'm going to use a little bit of JavaScript. But before we write some JavaScript, I'm going to add two lines. New class name, let's call it change. Then we will add this class two navbar using JavaScript. And all of this stuff will happen when we click the icon. Let's go to script.js file and first of all, create a new variable, let's call it menu icon. And then select the developments which has a class name hamburger menu. For that we need to write documents, dots, query, selector, and pass your class name hamburger menu. Then attach event listener to Menu icon, right, menu icon, dot, add event listener. As the first argument we have to pass your name of events, which is clique. That we need to pass your function, which is going to be an arrow function. Now we have to add two new class which is changed as first, let's create a new variable, call it nav bar. It should be equal to documents, dots, querySelector. Let's insert your cluster name navbar. Then inside function, right, navbar and easier property called class list. Now you may think that we have to use your method adds, but in this case it won't work because when we click the icon, class change should be added to Napa. But on Next click, it should be removed. And in order to achieve that, instead of add, we have to use method called Toggle. Let's insert your class name change. So if we click the icon, then it will be transformed into x. And then on the next click, it will get its default state. In order to make this affects motor, let's go back to style.css file and assign to the line transition with values 0.8 s. So now a fact became smarter, but I think we can make it even more nicer. Instead of rotating lines just by 45 degrees, we can let them make one whole rotation, rotation by 360 degrees, and then rotate again by 45 degrees. So as the values we have to insert here, sum of 360.45, which eventually is 405 degrees. So now you agree that it looks much better. Alright, so we're almost there. The other thing that have to do is to hide enough port by default, display it onClick. For that, Let's change the value of right position and make it -300 pixels. So now Navbar is hidden. In order to move it from right to left side, I'm going to use again class change. Let's assign to it, right, with value zero. Now, if we click, Napa will be displayed, but as a guest, in order to make effect nicer, we have to use transition with the values right? Than 0.8 s. And also, I'm going to use your function called cubic Bezier, which allows us to create a custom transition. In this case, I want the effect to start slightly slower and to end it faster. For that, I'm going to pass your values 100.1. So now we can say that everything works perfectly. We have here nice and modern looking navbar with some cool effects. 24. Project 21 - Creative Button: In this tutorial, we're going to be building a nice-looking button with some cool effects. Here we have a single button on the page. It has some content. And once we hover over it, then the content will be changed with some nice effect. That's it, what we're going to build. I hope it will be interesting. So let's get started. In VS code. I have two different files, index.html and style.css. Inside HTML file, I have prepared the basic HTML structure, the head element. I have two different links, one for Google fonts and the second one for style.css. But you're able to download this starter files from the link in the description. Let's go ahead and first of all, create HTML markup. Let's open development, which is going to be a rapper. So assigned to class BTN wrapper. Then inside of it, Create button with a class name btn. So as the content of the button, I'm going to institute to different span elements because as you remember, we will change those contents when we hover over the button. So open span elements with class name, BTN, texts one, and institute some text. Let's say explore more. Then duplicate it. Changed className instead of one, right? Two. And also change the content, right? It's interesting. Alright, that's it about HTML markup. Now it's time to write some CSS. So let's go to the style.css file. First of all, I'm going to create some common styles. Select all the elements using an asterisk and set margin and padding as zero. Also, I'm going to change the font family for every element. Let's use here Josephine Sans sensory. Alright, next I'm going to change background color of the body element. So let's select it and assigned to its background color C, F, D, E zero. Now I'm going to define width and height for btn wrapper. Actually it will take up the entire page. So let's assign to each width. And sadly that's 100%. As for the height, I'm going to set it as 100% of the viewport. Alright, so next, let's play button in the center of the page. And I'm going to do that using positions and transform translate. Let's select button. Set its position as absolute. Then I'm going to move it from top to bottom by 50 per cent. So let's set top position as 50 per cent and also move it from left to right by 50 per cent as well. Finally, in order to center button perfectly, we need to use transform translate. And we have to pass your -50 per cent. And then again -50 per cent. Alright, so once the button is centered perfectly on the page, I'm going to customize it. Let's define its width and height. Set with as 250 pixels. As for the height, let's assign to 70 pixels. Then change background. In this case, I'm going to use a linear gradient with three different colors. And also I'm going to change the direction of color transition. We will use from bottom to top. That insecure three different colors. First one is going to be 001 54c. Next one should be 123 76e as the last one, right? 234, 87f. Alright, so the background color is changed. Let's change the color of text as well. Make it white. Also, I'm going to make a button around it using border-radius. We devalue 50 pixels. Then get rid of the default border. Besides that, I'm going to get rid of the default outline because when we click the button than the blue line is appearing. So let's set outline as none. Also change the type of coarser, make it pointer. And finally, create some shadow effect. Use box-shadow with the values 015 pixels, two pixels. And as the color, right, RGBA 000.5. Alright, so for now that's it about the button. It's already looking good and now we'll have to take care of its content. So let's select span elements. At first, increased font size, make it 18 pixels. Then transform the text into uppercase and create some space between letters using letter spacing with the value one peaks. Alright, so now it's time to create the hover effects. But before that I'm going to position span elements. At first, I'm going to work on the first one Select it and set its position as absolute. For now, I want to hide the second span element in order to make our working process more convenient. So let's select it and assigned to each display, none. Alright, let's define the width of the first span elements and make it 100 per cent. Then place it in the center of the button. For that we need top position with the value 50 per cent. Then we need left zero. Now, in order to center elements perfectly, we have to use again transform. But in this case translate with the y-direction and with a value -50 per cent. Alright, that's it about the first span elements. Now, I'm going to define a position for the second one. By default, I'm going to place it down below the button. And then on hover will move it up and display it as the content of the button. So let's get rid off display none from here. Actually, we need to use similar properties for the second span element as well. So I'm going to copy those properties from here and paste them for the second span. As you see, both span elements take up the same place, but we don't need it. As I said, I'm going to place the second span down below the button. And for them, let's change the value for the top position and make it 150 per cent. Alright, so everything is ready, it's time to create a hover effect. On hover. I'm going to move up the first text. I mean, it should be hidden. As for the second span, will move it up as well and display as the content of the butt. So let's select the button with hover. Then select the first span elements. So I'm going to move up the first span element by 100 per cent. So we need to set top position as -100%. So if I hover over the button that the text will be moved up. Now we have to move this second span as well. Actually, let's duplicate this code. Change the class name. We need you to S4, the top position. We need to set it as 50 per cent. So if I hover over the button, then we will all or they get this result. Now we have just to customize this effect. I mean, I'm going to add to it some transition with the values top and 0.2 s. Now the effect is looking much better and the only thing that have to do is to hide the text while they are outside of the button. For that, I'm going to use overflow hidden. Alright, now everything was fine. And actually with this little project, we are done 25. Project 22 - Slideshow: Hi and welcome to our new video in which we are going to build a slideshow. Before we start building the projects, I'm going to describe what it is all about. As you can see by default, this slideshow is running with some nice fade effects. Here down below, we have a Play Pause button. If I click it, then the slideshow will stop. And also on the left and right sides, there will be displayed to controls or arrows. Using them, you can run this slideshow manually. If I click the Play button and hover over the right or left side than the arrows will be displayed. If I click any of them, this slideshow will switch to the manual mode. It will no longer run automatically, and also the post button will be changed into the play, but okay, let's go ahead and start to work on it. Here on the desktop, I have created a brand new folder called slideshow, in which I have another folder called images. It includes all the images that we're going to use throughout this project. Actually, you can download the source files from the link in the description. They are uploaded on GitHub, right? Let's go ahead and open up this folder into VS Code. I'm going to create three different files. First one is going to be index.html. Then we need style.css and also scripts dot js file. Then go to the index.html file and create a basic HTML document. For that, we need to place an exclamation mark and then press Enter or the Tab key. Let's go ahead and change the title. I'm going to insert your slideshow. Then I'm going to link CSS and JavaScript files. Let's open link tag. Adding H refers attribute indicates the name of the file, style.css. Then down below, right above the closing body tag, open script tag. We need here source attributes and we have to indicate name of the file script.js. Alright, Finally, we have to run our project to the browser. For that, I'm going to use a live server, which is a great package, and it allows us to run the project life in the browser without refreshing the page each time when we make some changes. So you can go ahead and install this package. In order to run a live server, you can use a right-click and then choose Open With Live Server. Alright, let's go ahead and organize a little bit the text editor and the browser, and then start creating the HTML markup. The first element that we're going to create is a div, which actually will be a container. It will wrap the entire content. Next, we need another div. It will include the slideshow itself. So it's assigned to class name slideshow wrapper. After that, I'm going to pass the left arrow into these development. So let's go ahead and open div will have two different classes. The first one is going to be a common class name for both arrows Control. And then I'm going to use an individual class name, left arrow. Actually, those arrows will be created manually. We won't have any icons. So I'm going to pass here another tip with the class arrow. And finally, we have to insert here two lines represented by developments. So the first development should have classes, line and line one. Let's duplicate this line of code and change the class name we need here line to. Alright, that's it about the left arrow. I'm going to duplicate it for the right arrow and change the class names we need here, right arrow. As for the line numbers, we need 3.4. Okay, That's it about the arrows. Now I'm going to insert in-between of them, the slides, I'm in the images. Let's open developments with className slides. So each image will be wrapped by a development. Therefore, let's open it With the class names, slide, slide one. Actually, we need to use those numbered class names because we're going to use them from JavaScript. Then insert here an image. Actually, I'm not going to use an alt attribute, so let's go ahead and get rid of it and then select the image from the images folder. So here's our image. Let's go ahead and duplicate slide twice for now and change class and image names in it here slide too. Image two and 3.3. So right now we have three images, but at the end of the day, you can add as many images as you wish. It will work fine and won't crash the project. Finally, I'm going to create a play pause button. Let's open developments right after the right arrow and assigned to the cluster name play pose. As the play pause button. I'm going to use the Font Awesome icon. And to do that, we have to grab the CDN link for Font Awesome. So let's go ahead and search for Font Awesome, CDN, js. Then go to this link and then grab the first link. From here. I'm going to open link tag. And then let's paste a link and the H reference attribute. Alright, then down below, insert element with the class names, FAS, f, dash, play. Alright, that's it about HTML markup. We have here images and also the Play button right after that. Now it's time to start to write some CSS. Let's go to the style.css file. The first thing that I'm going to do is to create some reset styles. So let's select all the elements using an asterisk and set margin and padding as zero. Then select slideshow wrapper. Actually, I'm going to expand these elements to the entire viewport. So let's set width as 100%. And then height as hundred vh. Vh means that height will take 100% of the height of the viewport. Right now, nothing much is happening here. So we need to add some more styles. We have to take care of the slide itself. So let's go ahead and select it. Let's set width and height, both of them as 100 per cent. And also I'm going to set its position as absolute. It will allow us to place images on top of each other. Now it seems that we have here just one image, but in fact, the rest of the images are placed in the background on top of each other. Alright, next up, let's take care of the image itself. So select IMG element. We need the same width and height for the image as well. So I'm going to inherit those two properties, width and height. And also in order to make the image look good, Let's use object feet cover. Finally, I want to make the image a little bit darker. And to achieve that, I'm going to assign to its parent element, black background. And then let's decrease the opacity for image. I'm going to make it 0.6. Okay, so I think that it looks much better now it's time to start to work on the left and right controls. As you remember, both arrows have common class names. Control. So let's go ahead and select it. Let's set position is absolute. Then in order to make Controls Position work according to its parent element, which in this case is a slideshow wrapper. We have to use position relative Next, I'm going to set the top position. Let's make it zero. And also define the width and height as a value of the width property. I'm going to use viewport width. It makes controls more responsive on different screen sizes. I'm going to use 15 viewport width. It means that the width of control is going to be 15% of the width of the viewport. As for the height, let's set it as 100 per cent. So right now, control is not visible. And in order to fix that, let's go ahead and change background color. In this case, I'm going to use RGBA value. So I'm going to pass here 902-90-4907. And then as the value of opacity, I'm going to pass 0.6. So now as you can see, we have here the control on the left side of the page. The second control is not visible right now because in HTML it is placed after the slideshow, and therefore it annually up behind this light. In order to fix that, I'm going to use z-index property. Let's make it 100. Now, at a glance, we have the same result, but in fact, both controls are placed on top of each other. Because by default for both of them, the left position is set as zero. So we have to take care of that. For the left arrow, we need left property to be set as zero. As for the right arrow, we need to make right position zero as well. Alright, now everything works fine. Both controls are placed in the right way. The last thing that I'm going to do about the controls is to set type of the cursor as point. Alright, now it's time to take care of the arrows. As we said, we have to create them manually with developments. So I'm going to select all of them using the common class name line. First of all, let's make them visible. For that, we have to define width and height. I'm going to set width as points to run. As for the height. Let's make it ten ramps. And also define background color. I'm going to use here called r d d d Phi, d Phi. So here we have our lines. In fact, we have four different lines and in order to transform them into arrows, we need to rotate them. So let's go ahead and select the first line, which has class name line one. I'm going to rotate it by 20 degrees. So for that we have to use transform property. Then we need to rotate function. And inside parenthesis we have to indicate 20 degrees. As you can see, the line is rotated but it is partially hidden. So to fix that, I'm going to center the lines inside the control for that. I'm going to use a couple of flexbox properties and values. The first one is going to be display flex. Then in order to center flex item horizontally, we need to use justify-content center. As for the vertical centering, we need to align items center. Right now the line is visible and actually the arrow is centered. Let's go ahead and take care of the second line. We need to rotate it by the same degree but with opposite direction. So let's go ahead and duplicate this code here. I'm going to change the class name. We need here, line two. And also we need negative 20 degrees. Alright, now we already have an arrow, but as you can see, lines are a little bit far from each other. So to fix that, I'm going to move them slightly using Translate function. We need to move them according to y-axis. So we need to translate y with the value 0.35 RAM. We need the same for the second line as well, but again, with the minus sign. So let's copy it, paste it here and right here, minus sign. Alright, so now as you can see, we have here the perfect arrow. Let's go ahead and do the same for the right one. Let's duplicate both lines. Then I'm going to change class names. We need line three and line four For the third arrow, we need a negative 20 degrees. As for the fourth line, we need just 20 degrees. Alright, so that's it about the controls. The last thing that we have to take care of is the Play Pause button. So let's go ahead and select these elements. First of all, I'm going to take care of the position of the button because right now it's not visible. It ended up behind the slides. So let's set its position as absolute. Then I'm going to say bottom five per cent. And that in order to center these elements, we have to set latch position as 50 per cent. And besides that, for perfect centering, we need to use Transform. With Translate X. We had to move the elements according to X direction, and we have to pass here -50 per cent. So this little technique allows us to send through the element perfectly. Finally, let's use cursor pointer. Okay, so now the button is feasible and it's centered. Finally, I want to make it look nice. So let's go ahead and select I element itself. Change the color of the element, make it white, and also increase the font size. Make it 50 pixels. Right? So right now we are done with CSS. All the elements are styled. And now we have to go ahead and start to write some JavaScript. Let's go to the script.js file. So at first we are going to run this slideshow automatically. For that, we're going to create two different functions. The first one is going to be change slides. Actually, I think will be better if we split the editor and display the HTML file as well, because we're going to select some elements using JavaScript DOM. So I'm going to select all the slides. Let's create a variable called the slide list. In order to select couple of elements which have the same class name, we can use query selector all method. Let's pass here the class name slide. Actually when you select elements using query selector all method, it returns an array-like object called node list. And in order to manipulate on that list as an array, we have to transform it into an array. So let's go ahead and create a new variable. I'm going to call it slides. Now, in order to transform node list into an array, we have to use array from method. And we have to pass your slide list. Alright, now I'm going to create a variable which will represent the current slide in the slideshow. I mean this slide which will be showing on the screen, the value of this variable is going to be changing. Therefore, we're going to use let declaration. Let's call this variable current and then set it as one. So by default, the value of that variable will indicate the number of a slide which will be currently showing. Alright? So we have selected all the slides and stored them in an array. As you know, they had class names. Slide one, slide two, and so on. We have to loop through the array, get access on the second part of those class names, I mainly numbers, and compare them to the value of the current variable. If they are equal, then we have to show that slide. And if they are not equal, then we have to hide it. Okay, that's it. What we're going to do. In order to loop through the array, I'm going to use one of the array helper methods, which is called for-each. We need to pass here an arrow function with the current slide. So to get access to the cluster name, we can use a property called class list, which actually gives us an array of the class names. So I'm going to use if statements. Then as a condition, we need the following slide dot class list. So as we said, this property will give us an array of the class names. In this case, those class names will be slide, slide one. We need the second item, I mean slide one. So we have to indicate the index number like one. Then after that we need to split this cluster name on the hyphen It will return another array in which we will have two items, slide and one. We have to grab the second item, which is one. So we need to indicate here the index number one. I hope it makes sense to you. So now we've got access to the number of each slide, but in fact, the datatype of this number is not a number, it is a string. So we have to transform it into number. And we can do that simply by multiplying it by one. Alright? So if this number equals to the value of the current variable, then we have to display the current slide. For that. Let's insert here slides dot style. And then I'm going to use property called CSS text, which allows us to use several CSS declarations. So we need here visibility, visible and also opacity one. If this condition is false, then we have to hide these slides. So we need L statement. Then let's grab this line of code. Make visibility hidden. Opacity zero. Right? That's it. We can call this function now. And let's see how it works. Right now. Current equals to one. Therefore, we see here the first image. In order to prove that I can hover over the image path here, index.html file. So you can see that this is definitely the first image. Actually, if you want to preview and image this way, you can install a package called image preview. Alright, if I change the value of the current variable, let's say 23, then the third image will be displayed. If I check again in the index.html file, then we'll find the same image. Everything works fine so far. Now, it's time to make the slideshow play automatically. For that, I'm going to create another function. Let's call it play pause. So we need to change the slide after every 3 s. So we need to use setInterval method. So the first 3 s, the first image will be showing. After that, this callback function will run. So we have to increase the value of currents by one. For that, Let's use the increment operator plus, plus. And also we need to call change slides function. Finally, that's indicate here the interval. I'm going to save it as 3 s. And you need to express it in milliseconds. So we need 3,000 milliseconds. Alright? So as you can see, slideshow is running successfully. After the last image, the current value continues increasing. Therefore, we are getting here a blank page. So we need to use if statements in change slides function. So if the current value is greater than the length of the slides, we need to make it one. Again. We need, if we, the condition current is greater than slides dot length. If this is true, then we have to set current as one. Now, as you can see, slideshow runs infinitely. Alright, so now we need to control the play pause button. By default, slideshow will run automatically. But once we click the Pause button, then we have to stop slideshow. So we need to add a couple of things to play. Pause function. I'm going to create two different variables. The first one we'll hold a Boolean value, which will help us to set up some logic. Let's declare a new variable, call it play pose. And by default setting that's true. Also, we need a variable called interval, which will store the set interval function that we used a minute ago. So we need to run this slideshow automatically if play post pool is true, and otherwise we need to stop it. So we have to use if statements in which I'm going to check if plate post Boolean Is true or not. If it is true, we have to insert set interval function inside of the if statement. And also, as we said, we have to store this function in the interval variable. And after that we have to make the play pause bool false. Next minute else statement. If play pause function was called The second time, then it means that the value of play pause Boolean would become false. Therefore, all the else statement will be executed in which we need to clear the interval. And we had to set play pause boolean back to true. Alright, the next thing that we have to do is to attach a click event to the play pause button. So let's go ahead and select this element. I'm going to use query selector method. Then we use className play pose. And attached to each event listener. Let's pass here, click event, and then the arrow function. Inside this function we have to call plate post function. So now, as you see, slideshow runs automatically. But if I click the button, then it will stop. If I click again, then it will continue to work. Alright? Now we need to change the icon of this button. When we click it. By default, we created a play button and we need to change it into a pause button when we click the icon. So we need to manipulate with two different font, awesome class names, FAA play an F, a pulse. So I'm going to create a new function. Let's call it change play pose. Then let's go ahead and select the icon. Is again query selector method. Pass your class name play pose. And then the Ireland. After that, I'm going to get access to the second class name, which is FA dash play. And for that again, I'm going to use a class list property. So let's create a new variable. I'm going to call it a shorter way. See ls. Then we have to write your icon dot class list with the index number one. Alright, so if the class name equals to f a play, then we should remove it and add a post and vice versa. So I'm going to use an if statement. We have to check if class equals to f a play. If this condition is true, then we have to remove this class name. So we need icon dot plus list, and we have to use remove method with a class name FAA play. And at the same time we have to add to the element different class. So we need icon, class list, dot, add, FA dash posts. So if this condition is false, if philos not equals to f, a dash play. Else statement in which we have to remove from the elements clustering FAA posts and adds to it F a plate. So let's grab those two lines from here and just change the class name. Alright, the last thing to do is to call this function, and we have to do that in play pose function. So as you see by default, we have a pause button because slideshow is running automatically. But if I click the icon, it will be changed back to the play button and also slideshow will stop. Alright, that's it about this part. Next, we need to take care of the controls. When we click any of the arrows, then slideshow should stop, and we should be able to change the slides manually. So first of all, we need to select the arrows. Let's start with a left arrow. I'm going to use again querySelector method. Let's pause here clustering left arrow, then attached to it Event listener. With a click event. Onclick, we have to call the play pause function if the play pose boolean is false. Because when it is false, it means that slideshow is running automatically. Once we call a game play pause function than it should stop. So we need an if statement that as a condition we should check. If not play pose Boolean. Then we need to call play pause function. Also in case of clicking the left arrow, we need to decrease the current value by one. So we need current with decrement operator minus, minus. We have to call again the change slides function. So if I click the arrow, then we will get just a blank page. It happens because the current value becomes zero. And with zero we don't have any slide number. So we need to avoid this kind of thing. For that, let's go to change slides function and add here. Else if statement. We have to check if current equals to zero. If so, if this is true, then current should be equal to slides dot length. Now if I test again, it will work fine. Alright, we need the same for the right arrow as well. So let's go ahead and duplicate this code. I'm going to change the class name. We didn't hear right arrow. In case of the right arrow, we need to increase the current value by one. So instead of minus signs, we need here plus, plus. Alright, so everything works fine. Step-by-step. We're going to the end of this project. But still we have to do a couple of things in order to make our slideshow look better. So by default, when this slideshow runs automatically, controls should be hidden. And we need to display them when we hover over the arrows. And also we need to display them once we stop the slideshow. So let's go ahead and go to the style.css file. I'm going to create a new class. Let's call it arrows visibility. We have to assign to it opacity zero. We will add and remove this class dynamically from JavaScript. Besides that, we have to make controls appear on hover. So we need control over and set opacity as one. Finally, let's make a hover effect nicer using transition. We have to insert here opacity, then duration 0.5 s, and also use one of the transition timing functions called linear. Alright, that's it about CSS. Let's go back to JavaScript file. I'm going to create a new function. Let's call it arrows visibility. First of all, we need to select both arrows. Let's do that using again query selector all method. Both arrows have the common class name control. Then I'm going to loop through them and based on some condition, add and remove newly created cluster arrows visibility. First of all, in order to look through arrows, we need to transform node list into an array. You already know how to do that. We have to use array dot from. Then we have to pass arrows than to loop through the array we have to use for each method. Let's pass your arrow function with current arrow. So if the slideshow runs automatically, then we should hide the arrows. So if statement then insert here as a condition, play pause Boolean. If it is true, then we need to add to class list of the arrow, class arrows visibility. So we need a row dot class list. Then we have to use method called ed. And we have to pass here the class name arrows visibility. Otherwise, if slideshow doesn't run automatically, we have to remove this class. So we need L statement. Then let's grab this line of code. Instead of Agile methods used remove. And finally, let's go ahead and call this function in play pause function. Alright, by default, arrows are hidden. If I hover over them, they should appear. If I click any of them, this slideshow will stop running automatically, and we will be able to change slides manually. Also, if I click the Pause button, then arrows will be displayed. Actually we are almost done. The only thing that have to do is to add some fade effect. Two slides I made to add fade effects when these slides are changing. For that in CSS, we need to add a transition to a slide assigned to it opacity and the duration 1 s. And also in order to make fade effect darker, we have to change background color for slideshow wrapper. Let's make it black. Alright, that's it. Congratulations, we have finished building this project. As you can see, everything works perfectly. Actually, I'm going to add here some more images. Let's duplicate the slide three times and change the class names. Also, we need to change the names of the Okay, so you're able to adhere as many images as you wish. You just need to number the classes in the right way. 26. Project 23 - Custom CSS Radio Button: In this video, we are going to be building a custom CSS radio button. Basically on different websites, you might see default radio buttons, which I think don't look quite good. So in this video, you will be able to learn about how to create modern and cool radio buttons using just HTML and CSS. Alright, so as you see, we have here two radio buttons, option one and option two. We have green circles. And if we click them, they will be checked nicely with some fade effect. Okay, so let's see what we are going to build. Here in VS code I have two different files, index.html and style.css. Inside HTML document, traditionally, I have prepared the basic structure of HTML document. We have here two different links, one for Google fonts and another one for the style.css file. Alright, let's go ahead and as usual, we start building HTML markup. I'm going to open a div element, which should be a wrapper for both options. So it's assigned to its class name wrapper. Then open another development which will be an option itself. So assigned to its cluster option. Inside the div elements, we need two elements. The first one is going to be input as the type we need here, radio. Besides the type attributes, we need two other attributes. First one is going to be an ID. We will use the ID in order to link inputs and label elements and to create a click event. So let's assign to it the value, check one. Also we need here the name attribute. The name attribute won't allow us to check several radio buttons simultaneously. Let's assign to it value radio. Next we need a label. As we said, we're going to link input and label elements. And for that ID and four attributes should have the exact same values. In this case, we need here check one. Alright, we're going to have two options. So let's duplicate development. And the only thing that we have to do is to change values for ID and for four attributes. Instead of check one, we need to check two. Okay, that's it about HTML. Let's go into style.css file and start writing some CSS. First of all, let's create some reset styles. Select every element using an asterisk. Then set margin and padding as zero. And also we need here box-sizing, border-box. Next, I'm going to select wrapper. Let's define this width and height. I'm going to set width as hundred percent. As for the height, I want to refer to take up 100% of the viewport. And for that, we have to use measurement unit called the H. Okay, I'm going to center content perfectly on the page for that. Let's use flexbox. We need to display flex that in order to center the element horizontally, we have to use justify content center, S4, vertical centering. We need align items center. And finally, as you see, options are placed side-by-side horizontally, but we have to place them vertically. And for that, Let's change the flex direction and make it column. Alright, that's it about wrapper. Next, I'm going to style an option. So let's select it. First. Let's define its width and height. I'm going to set with 400 pixels. As for height, let's make it 100 pixels and also change background color. You see your color light gray, right? Ccc. Next, let's create some space around each option using margin. Let's set it as 20 pixels and also create some space inside box using padding, 20 pixels. Finally, I want to place elements vertically in the center for that, Let's see again, Flexbox, right, display flex and then align items center. Alright, so that's it about option. After that, let's move on and style the label. Selected the right option label. At first, let's change the font family. I'm going to use your font called Josephine slab san serif. Then increase font size, make it 60 pixels. And lastly, change the type of coarser, make it pointer. Alright, so now it's time to create a customer radio button. For that I'm going to use after and before pseudo elements. The radio button, it will consist of two parts. We will have an outer circle, which will be created using after pseudo elements. As for the inner circle, it should be before pseudo element. So let's go ahead and select after pseudo elements, right? Option, label. After. First, let's make its contents Empty. Then in order to align the elements, let's set its position as absolute. Actually, I'm going to position circle according to an option div elements. And in order to do that, we have to assign to each position relative. After that. In order to make elements visible, let's define its width and height. I'm going to make both of them 50 pixels. And also create border. Assigned to the value is five pixels, solid. And the color zero, a, a, c83. Now the element is visible. It has the shape of a square, and actually we want to transform it into a circle. For that, let's define a border radius with a value 50%. Alright, so now it's time to align those circles. Let's define the right position and make it 15%. And finally, create a little shadow effect, right box shadow with the values 003 pixels. And then use color RGBA 000 and opacity 0.8. Okay, so that's it about after pseudo elements. Now we have to create an inner circle using before pseudo elements. Actually we're going to need similar properties for both circles. So let's go ahead and duplicate this entire code and then make some changes. First of all, let's change after, into before, then get rid of the border property. And instead of that, insert background color and assigned to it color zero, a c83. After that, Let's change the size of the circle. For that I'm going to decrease width and height. Let's make both of them 40 pixels. And now we have to take care of the position of the element. We have to pass it perfectly in the center inside of the outer circle. So let's define top position and make it 50 per cent. Then use transform. Translate why? I'm using it in order to move an element from its current position little bit up. So let's insert here -50 per cent. And finally, we have to move elements a little bit to the left side. For that, Let's change the value of the right position instead of 15. Let's try 17. As I see, it's not quite enough. Let's change it and make 17.5. Okay, Now it looks fine. And actually with styling, we are done. Now we have to make checkbox work. So as we said at the beginning of this lecture, we have to link input and label to create click event. So in general, for users, those circles will work as the radio buttons. I mean, visually, they will represent the radio button. But in fact, behind the scenes, this little inputs, we'll do the main job. Alright, so we have all already linked label and input elements using id and four attributes. And actually this connection allows us to check the radio button when we click those circles and actually the entire label. So eventually this will let us to create the click event. We're going to hide in circles by default. And then we will display them once we click the label. In other words, once we check the original radio button. So in order to achieve that, I'm going to use one of these pseudo-class is called checked, which allows us to define different CSS styles when the checkbox is checked mode. So let's select input elements, right? Option input. Then use pseudo-class called checked. Now we have to get access on the inner circle, which is before pseudo element. For that, I'm going to use one of these CSS combinators, which is called general sibling selector. And it's expressed by tilda sign. Now, we have to select elements which we need to manipulate on. In this case before pseudo element, right, label with before. Now, before we define a style for these elements, Let's make both circles hidden, assigned to before pseudo elements opacity to zero. Now as you see, both circles are hidden by default and onclick, we have to display them back. So let's insert here opacity one. So if we click any of the buttons than they should be checked. Alright, so we are almost done. We have just to customize a couple of things. Let's make checking effect smarter using transition assigned to it opacity. And the duration 0.4 s. Also I'm going to hide default input elements. So let's select option input and insert here display none. And finally, Remove Background From option. Alright, so as you can see, everything works perfectly. And now you know how to create really nice and modern radio buttons, which are much better than the default ones. 27. Project 24 - Business Card: Hello and welcome to our next tutorial. In this video, we are going to be building a nice-looking 3D business card. This little project will be created based on HTML and CSS. Before we start working on this project, Let's go ahead and describe quickly what we're going to create. So here is our business card. The front side consists of two parts. On the left side we have a logo with the text web design. As for the right side, here we have some information about the person, stuff like name, phone number, email, address. If we hover over the card, then it will be rotating in 3D space. And the backside will be displayed in which we have a logo of the company. Alright, that's it, what we're going to build. Again, all of this stuff will be created using just pure HTML and CSS. Here in VS code, we have two files opened, index.html and style.css. And also I have a folder called images in which we store logo of the company. You are able to download this starter source files from the link in the description. Alright, so inside HTML file, I have prepared the basic structure of HTML document. Inside the head element we have a couple of links. Links for Google fonts, Font, Awesome icons, and also we have a link for style.css file. Let's go ahead and start creating HTML markup. Let's open development, which should be a wrapper of the card. So let's assign to it class name card wrapper. Next, I'm going to open another development, which will be the card itself. So let's assign to it class card. So as we said, card will consist of two parts, front side and backside. So let's insert your development with class name called front. The front side itself will have two parts, left and right sides. So I'm going to insert here and other development with class left. So the left side will consist of two elements. First one is going to be an image. So let's open IMG elements. Then in source attribute, Let's indicate part of image. We have folder called images, and we have to select logo dot PNG. Next we need h for heading elements. Actually it will include two different words, web design. I'm going to wrap the first one with span element. Let's open it. That insert web. And then right sign. Okay, that's it about left side. Let's open development, which is going to be the right side assigned to it class, right? It will consist of several parts. The first one is going to be a person. So let's open development. Actually the part of the person will consist of two different parts. We will have Font Awesome icon on the left side. As for the right side, it will include the name of the person and also the position and the company. Let's assign to development class names, person, and then write content. Then insert your Font Awesome icon, open I element with class names, FAS, FA, dash, user, tie. Then we need to open developments. Let's pass your H4 hiding elements with text. John Smith. Then open paragraph and insert in IT web design. Alright, so we're going to have for similar parts on the right side. Let's go ahead and duplicate the entire development three times and then make some changes. For the second one, we need here className, phone. Then change class name for AI element as well. We need here, again phone. Next minute here both elements to be paragraphs. So let's delete heading. Then. Duplicate this line of code and insert here some dummy phone numbers. Okay? The next part is going to be an e-mail. Let's change the class name, right? Email. Also we need here different Font, Awesome icon. Let's change the class. We need here. Envelope, open. Then again gets rid of heading element from here and change the text of paragraph. Let's insert here some dummy e-mail. John smith@gmail.com. Alright, the last part is going to be for an address. So let's change class name right here at rest. Then also change the class name for AI elements. We need here map Dash, marker, ALT. Then again, delete a heading elements. Duplicate paragraph, and insert your following texts. Main Street, 1234, second paragraph. Let's insert here New York and y. Alright, so that's it about front side. Now I'm going to create the backside, which is going to be a really simple, Let's open development. And assigned to its class card back. We need here just one element, which will be an image so it's inserted. And as the source attribute, Let's indicate part of image. Alright, so that's it about HTML markup. Now, it's time to start styling. Let's go to style.css file. First of all, I'm going to create some reset styles. Let's get rid of the default margin and padding from every element. In order to select all the elements, we have to use an asterisk. Then let's pass your margin zero, n, padding zero. Next, let's select the body element. I'm going to change the font family. Let's use here found called Montserrat san-serif. Than change background color. Make it light gray using color C. C, C. Alright, now I'm going to work on card wrapper, but before that, in order to make our working process more convenient, would be better if we decrease the size of the images. I'm going to do that from the HTML document. So let's go ahead and assign to both of the images with attributes with the value hundred and 50. Okay, so now images are smaller and we can move on. Let's select call the wrapper. I'm going to place it perfectly in the center for that, Let's define its position as absolute. Then we need to set the top and left properties as 50 per cent. And finally, in order to center element perfectly, we need to use transform translate. We have to insert your values -50 per cent and then again -50 per cent. Alright, so that's it for now regarding card wrapper. Next, I'm going to work on the card itself. So let's go ahead and select it. At first, let's define its width and height. I'm going to set width as 550 pixels. Height. Let's set it as 300 pixels. And also change background color and make it white. Now, I'm going to start styling the front side and I think would be better if we hide the backside for awhile. Let's do that from the HTML document. I'm going to assign to eat the attribute called here. Then go back to style.css file, select Card, Front. Define its width and height. Let's make both of them 100%. Alright, next I'm going to place left and right sides, side-by-side. For that, Let's use display flex. And now I'm going to split the front side using the linear gradient function. As you remember from the finished version of this project, the front side is split into two different parts, and the right side has a different color. So in order to achieve that, Let's use background property with a linear gradient. Let's insert your colors. First one is going to be RGB to 55, to 55, and again to 55. Actually it's a white color. As per second one, I'm going to use RGB 308-30-8308. Now I want to define the direction of color transition. So let's insert here as the first argument, hundred degrees. Next, in order to split nicely those two colors, let's add two white-collar, the value 40% as Paul, the second color. Let's write here zero. So as you can see now the front side is played nicely into two parts. Let's go ahead and start working on the left side. Let's select it using className left. First of all, let's define the width and make it 40 per cent. Then I'm going to place content perfectly in the center on the left side. For that, Let's use flexbox. Then we need to change the flex direction. Let's make it column. And then in order to place items in the center, Let's use justify contents center. And also we need align items. Center. Right? Next I'm going to define size of image. But now from CSS, Let's select it. Right dot left, IMG and sat with us 80 per cent. Then go to index.html file and get rid of the width attributes from the image element. Now, the last thing that I want to do regarding the left side is to take care of heading elements. So let's go ahead and select it right, dots, left, H4. Then create some space around the heading using margin. Let's set it as ten pixels. Then increase slightly font size. I'm going to make it 18 pixels. And create some space between letters using letter spacing with the value one peaks. Okay, finally, I'm going to customize the first word of heading. Let's select the span element, right dot left span. Let's make text uppercase using text, transform. Uppercase, and change color. Let's use your color, 0d56, 92. Alright, that's it. About the left side. We have finished working on it, and now it's time to customize the right side. Let's select it, right, right. Then define its width and make it 60 per cent. And change the color of text. Make it white. Okay, next I'm going to select the right content. Actually, as you remember, it consists of two different parts. The Font, Awesome icon, and the text. I want to place them side-by-side. And for that, Let's use Flexbox, right? Display flex. And also I want to align them vertically in the center. For that we need a line items with Values Center. And finally, let's create some space on top and bottom using margin. Let's assign to it values 20 pixels and then zero. Alright, let's go ahead and start styling the first part, which is a person. Let's select it with class name, person. Change, its background color. In this case, I'm going to use color 1187 AAC. Then create some space inside box using padding. I'm going to set padding on top as five pixels, then zero on the right side, five pixels at the bottom, and 30 pixels on the left side. Also, let's add some space at the top and bottom of the box. Use margin with the values 30 pixels and zero. And finally, I'm going to create some shadow effect. Let's use box shadow with the values 010 pixels, 20 pixels. And as the color right RGBA, insert your black color 000, and the opacity 0.3. Alright, now it looks much better. Next, I want to take care of the Font Awesome icon. So let's select it right dots, right contents than I. At first, let's define width and height. I'm going to make both of them 35 pixels. Also, I want the icon to have the border. So let's assign two values, two pixels, solid and color white. And I want it to be rounded. So we need here border-radius with value 50 per cent. As a C. For now, icons are not looking quite good. I want them to be placed perfectly in the center inside the circle. For that, let's use again flexbox. We need here display flex. Then justify contents center, and also align items center. Now as you see there, looking good, Let's change background color. Use your color 11878. And finally, create some space on the right side using margin right? 20 pixels. Alright, so step-by-step, we're moving forward. Next thing that I want to do is to transform the name of the person into uppercase. So let's select heading elements and assigned to it text transform with value uppercase Okay, that's it about the person. Now as you see, we have to take care of an alignment of the rest of the parts. Let's start from the phone selected and assigned to it. Padding left with the value 30 pixels. Let's duplicate this code twice. Change class names. We need your email address. And also change the values of padding-left property. For second one, we need 20 pixels and for address, we need ten peaks. Alright, now we have to start working on making a 3D effect. First of all, we need to prepare the 3D environment for the card and also for it's including parts. For that we have to assign two card wrapper property called perspective. We have to set it as thousand pixels than we need for the card property called transform style, which should have value. Preserve 3D. We use this property because we need to prepare a 3D environment for child elements of the car as well. Right now, like the front side, we have to start the backside as well. First of all, let's make backside visible for that, let's go to index.html file and get rid of the attribute hidden. Then go back to style.css file. Now, I'm going to rotate card by hundred and 80 degrees. For that, we have to use Transform. Then rotate y n inside parenthesis. We have to insert 180 degrees. Actually, as you see, front side is still visible and we don't need it. And in order to make it hidden, we have to use a property called blackface visibility. We have to assign to it value called hidden. As you see, the logo is rotated and we have to fix that. For that, let's select card back. And assigned to it transform rotate y with the value hundred and 80 degrees. Alright, after that, let's take care of the position of logo. I want to place. It's perfectly in the center for that. First, Let's make its position as absolute. Then in order to define its position according to its parent element, which in this case is a card. We have to assign to the position relative. And then define the top and left properties for the car back. And set both of them as zero. Alright, so in order to center perfectly logo, Let's use again Flexbox. Let's write display flex. Then we need to justify contents center and also align items center. As I see, the logo is not centered and it happens because we did not define width and height for the backside. I'm not going to define it separately for the backside. Let's go up and add here right after the card front. Another selector called back. Then down below select Card Front. Because those two cells belong to the front side only. So let's grab them and paste here. Now everything looks nice. Alright, let's define the size of an image from CSS as first, let's go to index.html file and get rid of width attribute. Then select bec, IMG, and set its width as 40%. Okay, now it's time to make cotton working at first, let's rotate it back. Gets rid of this line of code from here. I want the car to be rotated when we hover over it. So let's select card wrapper with hover. Then select card and assigned to it, transform rotate y with the value 180 degrees. For smooth effect, Let's use transition with the values transform 1 s. Now, if we hover, then we will get really nice 3D rotation effect. Okay? Actually, we are almost done. The only thing that I want to do is to create some shadow effect. And also I want to make curved, slightly rounded. Let's assign to the card box shadow with the values 015 pixels, 60 pixels, and the color RGBA 000 and the opacity 0.3. Then in order to make a rounded, Let's assign to it a border radius with value 15 pixels. As you see for now, it seems that the front side doesn't have the border-radius. And in order to fix that, let's inherit it for front and back sides, right here, border-radius with the value inherit. Okay, now everything is looking perfect and actually we have finished working on that project 28. Project 25 - 3D Card: In this video, we're going to create a card with nice 3D effects using CSS transforms and transitions. This little project will be built based on pure HTML and CSS. So after watching this video, you will be able to create nice and cool 3D effects using just pure CSS. Alright, so here we have our card. It consists of two main parts. We have frame and content. They are placed in 3D space. I mean, they are rotated with opposite directions. And if we hover over the card, then those parts will be rotated back and placed together. Okay, so that's it, what we're going to build in VS code. I have two different files for HTML and CSS. Inside the head elements, I've got two links, one for Google fonts and the second one for style CSS file. Alright, let's go ahead and start building HTML markup, open development, and assigned to it class card wrapper. Then inside it open and other developments which is going to be the card itself. Then we need another div for the frame. So assigned to it class frame. Next, we have to create contents. So open again developments with className content. And finally, we have to insert the inside contents H1 heading elements, which you have class name heading. It will consist of two different words. They should have different styles. So I'm going to wrap the first one pi span element. Let's open it and institute texts 3D. And then we need second word, effect. Okay, that's it about HTML. Let's open the style.css file and start writing some styles. First I'm going to get rid of default margin and padding from every element. So select them using an asterisk and set margin as zero and padding as zero as well. Next, we need to select card wrapper. I'm going to place called perfectly in the center of the page. For that, let's first define width and height for the wrapper. I'm going to set with as 100 per cent S4 height. I want to set it as hundred percent of the viewport. So we have to assign to it 100 vh. And then use flexbox in order to send to the element perfectly, we need the following properties and values. Display flex. Then in order to center elements horizontally, we need justify contents center. And for vertical centering we need align items. Center. So as you can see, content is placed in the sense, Okay, Now we have to take care of card itself. First of all, I'm going to prepare the 3D environment. And for that, we have to use one of these CSS properties called perspective. Let's select card and insert your perspective with value 800 pixels. Perspective allows us to define how far the element is placed from the user. Alright, Next, I'm going to select frame. Let's defined border. Assigned to each value is ten pixels solid, and the color 333. And also I want to make its corner slightly rounded using border-radius with the value five peaks. Alright, so the border is ready and for now, let's see about the frame. Next, I'm going to start working on contents. So let's select it. Define its width and height. I'm going to set width as 400 pixels. As for height. Let's set it as 200 pixels. Then change background color. I'm going to use RGBA value right here, 255-20-1205 and opacity 0.9. Next, I'm going to place the heading in the center of the contents for that. Let's see again, Flexbox. I'm going to grab those properties from here and let's paste them for content. Okay, So as you can see, the heading is placed in the center, and now I'm going to customize it. So select H1 elements. First. I'm going to change font-family. Let's use your font called cancer Rael, San Serif. Then transform text into uppercase using text, transform uppercase and change color Use your color 333. Alright, next, I'm going to select span element, which actually wraps the first word of heading. So right heading, span, assigned to its background color, and use your color 333. And also change color of text, make it white. Alright, so our elements are customized and it's time to start creating 3D effects. As you remember, by default, frame and content are rotated. So let's rotate it first frame, we have to rotate it according to y-axis. So let's write here transform that use Rotate Y and institute -40 degrees. So as you can see, the frame is rotated and the content is rotated as well because it's the child elements for the frame. Actually we need to rotate content but with opposite direction. And also we have to rotate it according to y and also according to X axis. So we have to write you transform, then rotate y with value 60 degrees. And then after that we need to rotate x with value 20 degrees. Now as you can see, the content is rotated but not in 3D space because in this case, perspective doesn't have an effect on contents. The reason is that perspective is defined for card and content is not the direct child of the car. So in order to apply the 3D environment to contents, we should use another property called transform style. We have to assign it to frame, which is the parent of content. And we have to set it as preserve 3D. So now we have here needed results. Constant is rotated in 3D space. Okay, so now it's time to create a hover effect on hover. We need to give both frame and contents default positions. So let's select a card with hover. Then select frame and pass here, Transform, Rotate Y with value zero. Next, select contents, right, again, card hover content. We need to pass your transform. Again, rotate y with zero, and then rotate x with value zero. So now if we hover, then elements will be rotated but without any effect because we need a transition to make rotations motor. So let's assign to frame transition with values all and 0.4 s. Then grab this line of code and paste it for content as well. Now, if we hover again, then we will get a nice 3D effect. The last thing that I want to do is to make corners of contents slightly rounded, and then we will remove it when we hover over the card. So let's assign two contents for the radius with value five pixels. And then down below, insert border-radius with value zero. Alright, so if we hover over the card, then everything will work perfectly 29. Project 26 - Custom CSS Checkbox: Hello and welcome to our next YouTube video. In this tutorial, we're going to be building custom CSS checkbox. In most cases you may come across default checkboxes on different websites. But after watching this video, you will be able to create a really nice and modern checkbox. Here, as you can see, we have a box and if I click it, then it will be checked with some nice effects. The subject of this tutorial is to create just this custom checkbox. So that's why I don't have here any other content. Also, I decided to create a checkbox with the large size for better visibility. But of course you can make it smaller for your own projects. Alright, let's go ahead and start building this little project. In VS code. I have two different files, index.html and style.css. In index.html file, I have prepared a basic structure of HTML document. I have linked here HTML and CSS files. Let's go ahead and start creating HTML markup. Let's open development. It should be a wrapper for checkbox. So let's assign to it class checkbox wrapper. Inside that development we need to pass two elements, input and label. So let's open input elements. Let's make its type as chatbox. Then create label. Next that we have to do is to link label and input elements in order to create a click event. For that, we have to assign to an input ID attribute. And the values of id and four attributes must be the same. Let's pass your check. Then assigned to input element id attribute with a value check. Now, in order to demonstrate that label and input elements are linked, I'm going to pass you some content, let's say check. So if I click this word than the check box will be checked. So let's see what we can achieve by ID and four attributes and does each week, which will help us to create clean cuvette. Let's get rid of this word from here. The last thing that I want to do inside the HTML document is to assign to label class name, checkmark. Alright, let's go into style.css file and start writing some styles. We don't have here lots of HTML elements, but anyway, I'm going to create some reset styles. Let's select every element using asterisk. And then set margin and padding as zero. Then select checkbox wrapper. Actually I'm going to place chatbox perfectly in the center of the page. For that, I'm going to use one of the techniques. I mean, centering elements with the help of positions and transform. So we have to write here position, absolute. Then we need to set top and left properties both as 50 per cent. And then in order to center element perfectly, we have to use transform translate. We should have two values, -50 per cent and again -50%. Alright, so as you can see, now the checkbox is perfectly centered on the page. Actually, I'm not going to customize this checkbox. Eventually it should be hidden. We're going to create a box using a label element. This input element will just help us to create click event. So let's go ahead and select label with the class name checkmark. As you know in general, the label element is an inline element. And if we want to apply to inline element width and height than it first, we should transform it into either inline block or block level element. So let's write you display block. Then set width and height both as a two pixels. And also change background color. Let's make it light gray using D, D, D. So as you can see, we have here box, Let's make its corners slightly rounded using border-radius. With value ten peaks. Alright, that's sit, the box is created and now we have to take care of checkmarks sign. At first, let's go ahead and create it using After pseudo element. And then after that, we will take care of click event. So let's select the check mark with after pseudo elements. First of all, I'm going to change background of label elements I'm doing is just for awhile. Eventually we will change the background color on click. So let's change background color for the label right here, 08b b68. Then let's start working on after pseudo elements as first defined content and make it empty Actually the checkmarks sign should be created by borders. At first, let's define a position as absolute. And in order to position elements according to its parent element, we have to assign to its parent position relative. Next, let's define width and height. Set width as 25 pixels. As for height, let's assign to it 45 pixels. Now in order to make the elements visible and actually in order to create a checkmark sign, Let's use borders. I'm going to define borders for two different sites, for rights and for bottle. So let's write here border, right, and assign truth values, five pixels, solid, and the color white. That duplicate this line of code and change right into bottom. Now as you can see, the element is feasible, but as a guest, we have to take care of its position. We're going to place it in the center, and also we need to rotate it in order to make it look like checkmarks sign. So let's define top position as 40%. Then we need left 50 per cent. Then use again transform, translate with values -50 per cent. And again -50 per cent. Okay? Now the only thing that have to do is to rotate elements according to the z-axis. And then we will get needed a result. So let's write rotate Z and insert here for two degrees. Now you can see that we have here checkmarks sign, and now it's time to make it work. First of all, let's change background color on clique. For that, Let's get back here. Previous background color, light gray. Then in order to create a click event, I'm going to use pseudo-class called checked. It allows us to define styles and apply them to element when the checkbox is checked. So let's select input element with ID, check. Then add here pseudo-class called checked. Then we need to select the label elements. As you know, it's placed right after input elements in the index.html file. And in order to select label, I'm going to use one of the CSS combinators called general sibling selector, which is expressed by till the sign. And now we need the class name of elements, right? Checkmark. Let's pass your background color with a value 0868. Okay, so if I click the box, then background color will be changed. Let's make this affects motor using transition. Let's assign truth values, background, color, and duration, 0.4 s. So now it looks much better and actually it's time to work on checkmarks sign. By default, I'm going to make it hidden. Let's do that using opacity zero. And now we should display it. When we check the checkbox, we're going to do it using the same technique which we use just a minute ago. So let's grab this, select it from here. Then add after pseudo elements because we should display checkmarks sign. And now insert your opacity one. And also use the transition to make affects motor assigned to it all and 0.4 s. So now if I click, then everything will work fine. And actually we already have here nice effects. The checkbox is working. Before we finish this tutorial, I want to add to check books, some other facts. By default, I'm going to make checkmarks sign larger. And then onclick, we will give it its default size. And this eventually will look quite good. So let's go ahead and add to transform property function called scale, which allows us to manage the size of an element that's insecure ten. So it means that we just made elements ten times bigger than it was before. And now onclick we had to make it again smaller. So I'm going to grab this entire line of code. We need all of these functions because if we just use Transform Scale, then those two functions, I mean translate and rotate, will be overwritten and it will break position of the checkmark side. So let's change the value of scale, make it one. And now you can see that we have here really nice effect. Okay, we're almost done. The only thing that we have to do is to hide input elements. And I'm going to do that using HTML attribute called hidden. So let's assign it to input elements. Alright, so now we're done. Everything works perfectly and our little project is finished 30. Project 27 - Hamburger Menu: In this video, we're going to build the hamburger menu with some nice effects. This project will be built based on HTML, CSS, and little bit of JavaScript. So as you can see, we have here a landing page with full-screen background image. And at the top right corner there is placed hamburger menu icon. If I click it, than the icon will be transformed into x. And now part will be displayed from the right side. Here we have a couple of navigation items and if I hover over them, then we will get nice hover effects. In this video, you will learn about how to create all of this stuff. Let's go ahead and start building our project. In VS code. I have a couple of files for HTML, for CSS, and for JavaScript. And also we have here folder called images in which we have an image for background of lending page. You're able to download starter files from the link in the description. Okay, let's go ahead and open index.html file. I have prepared the basic structure of HTML document. Inside the head elements, I have two links. One for Google fonts, I'm going to use a font called doses, and another for CSS file. Besides that, I have inserted here script tag in order to link JavaScript file. Alright, let's start building HTML markup, open developments, which is going to be a container. So it's assigned to it class container. Then inside the container I'm going to open up elements which will wrap the entire content of navbar. Let's assign to it class navbar. Then inside it at first I'm going to create a hamburger menu icon. So open development and assigned to it a class name, hamburger menu. Then inside that div elements, I'm going to insert three div elements for three lines of an icon. Let's assign to its class name for common styling line. And also we need here another cluster name for individual styling. Right line one. Then duplicate this line twice and change class names. We need line two, line three. Alright, that's it about Menu icon for now, it's not feasible because we have just empty div elements without any styles. Next, I'm going to create navigation. It will be represented by UL elements. Let's assign to it class not least. Then insert in it LI elements. It should have class item. And finally, we need your link elements. Let's assign to it class name nav link, and also insert your first item. Overall, I'm going to have seven navigation items. So let's duplicate it six times and then quickly change the content right here about us. That news. Next one is going to be Gallery than events. Pricing. And for last one, insert your content. Alright, so that's it about HTML. It's time to start styling. Let's go to style.css file. At first I'm going to create some reset styles. Let's get rid of default margin and padding from every element. Select them using asterisk. And then pass your margin zero and padding zero as well. Then I'm going to change font family for body element. So let's select it. And then insert here font-family doses, san-serif. Next, let's take care of container. Set its width and height as a width. Let's write here 100 per cent. As for height. I'm going to set it as 100 per cent of viewport. So right, 100 pH than as a background. I'm going to set an image. So right background than we need here, linear gradient. I'm going to use three different colors. First one is going to be RGBA 000 and opacity 0.4. Next, let's write RGBA 14848, again 48 and opacity point to. And then insert RGBA 167-60-7607 and opacity 0.4. Then inside URL indicates part of image images and select the image called bg dot JPG as the position of background. We need Center and also pass here, no repeat. And finally, I'm going to use background size property with the value cover. Alright, so landing page is ready. We have here full-screen background image. And now I'm going to take here of hamburger menu As you know, it will consist of three lines and it should be placed at the top right corner of the page. At first, let's select the rapid development, which has a className, hamburger menu. Let's define its width and height. I'm going to set with 35 pixels. As for height, let's assign to it 30 pixels. For now, icon is still is not visible. And in order to fix that, let's assign to it some temporary background, let's say red. Okay, so now the icon is displayed by default is placed at the top left corner. But as I said, I'm going to place it at the top right corner of the page. For that, let's define this position as fixed. And then we need top position, set as 50 pixels and the right as 50 pixels. So now I can displace at the top right corner. And finally, I'm going to change cursor. Let's make it point. Alright, for now with parent div element, we are done. It's time to work on lights. Let's go ahead and select them using common class name line. Then set its width as 100 per cent. Means that line will take up the entire width of its parent element, which is 35 pixels. Next, I'm going to define height. Let's make it three pixels and also change background color. You see your color chocolate. Okay, Now lines are visible, but they are stuck to each other and we have to separate them. In order to achieve that, I'm going to use Flexbox. Let's make Hamburger menu flex container. For that we need display flex. Then change flex direction. We need to place lines as a column. So we need flex direction column. And finally, in order to make some space between them, use justify contents. Values pace around. Okay, so now lines are separated and actually we can get rid of that red background. Alright, so Menu icon is already created and before we make it work, I'm going to customize navbar. We should place it on the right side. So let's go ahead and select nav element with class name navbar. At first, let's define its width and height. I'm going to set its width as 300 pixels. As for height, let's make it 100 per cent. Then change background color. Let's use your color 26262. Okay, so in order to place now bar on the right side, Let's define this position as fixed. And then make top and right properties both zero. Alright, so navbar is positioned in the right way. Now I'm going to take care of the position of navigation items. I want to place them perfectly in the center inside navbar. And for that, Let's use Flexbox right here. Display flex. That in order to center items horizontally, use justify-content. Center. S for vertical centering. Use align items, center. Okay, So items are placed in the center. And the last thing that I want to do regarding navbar is to customize its shape. And I'm going to do it using border radius. Actually, this property can take four different values appropriate to four corners. I'm in top-left corner, top right, bottom right, and bottom left. So we're able to define different border radius, four different columns. In this case, I'm going to customize the top left and bottom left corners. As for the rest of the corners, we won't touch them. So as a value of border-radius of the top left corner, I'm going to insert here 20 per cent. Then, as we said, top right and bottom right corners won't be changed. So we need to insert here zeros twice. And for the bottom left corner I'm going to use 60%. Alright, so the shape of the navbar is customized and now I'm going to style navigation items. Let's go ahead and select UL elements. It has class name. Not least. I'm going to place text on the right side. So let's use text align right. Next, let's select LI elements. It has class name, not item. First, let's get rid of default bullets using list-style none. Then create some space using margin. 25 weeks. Alright, now we have to select the link elements, which has class name nav link. Let's get rid of default styles. Using text-decoration. None. Then increased font size, make it 22 pixels. Change color. You see your color E. Also, I'm going to make font lighter using font-weight. 300. Then creates some space between letters using letter spacing. One pixel. And finally make text uppercase using text transform Uppercase. Alright, that's it about navigation items. As you remember from the finished project, we're going to create some hover effects. On hover, we should display lines at the top and bottom of items. There will be displayed with a smooth transition. And from the opposite directions. Actually we're going to create those lines using after and before pseudo elements. Both of them will have some common styles. So let's go ahead and select both pseudo elements, right, nav link before. Then duplicate this line and change before and after. So first we need to define contents as empty. Next, I'm going to define the width and height. Let's set with us 100 per cent. Then make height to pixels and also change background color. You see your color chocolate. For now, lines are not visible because they are inline elements and therefore width and height are not applied to. So if we define their position as absolute, and then if we assign to the parent elements, which is not link position relative, then both lines will be displayed. At a glance. We see here just one line, but in fact, both lines are placed side-by-side. Okay, next I'm going to define a left position for both elements as zero. Now both lines are taking the same spots and in order to separate them, we have to define a bottom position for after pseudo elements and we have to make it zero. So let's copy this selector and assigned to it bottom zero. So now both lines are separated. As you know, by default, top position is set as zero. So if we do not define it manually, that won't be a problem. But anyway, I'm going to define it. So let's duplicate this code. Then change after, into before. And instead of bottom, right, top. Alright, the last thing that we want here is to create some padding because the bottom line is too close to the item. So let's assign to nav link padding on top and bottom right three pixels and then zero on left and right sides. Alright, that's it about lines now have to create a hover effect. By default, I'm going to hide those lines. And when we hover over the items than those lines will be displayed smoothly from the opposite directions. In order to hide lines, I'm going to use Transform. Then scale x. We have to set it as zero. So now on hover, we have to increase the scale and make it one. So let's go ahead and select nav link with hover. Then add here before. Duplicate this selector and change before and after. And then insert your Transform, Scale x with the argument one. And finally, in order to make effect smarter, Let's use transition transform 0.5 s. Alright, so if we hover over the items than lines will be displayed. But as you can see, by default, they start appearing from the center. It happens because transform origin property is set as sensor by default. So we need to change it for both lines. Let's assign to after pseudo elements, transform origin. Make it right. Then copy this code and paste it for before pseudo elements. And instead of right, let's insert here left. If we hover over the items, then everything will work perfectly. We have here a nice hover effect. Okay, So with navigation, we are done. Next. That we have to do is to make Hamburger menu work. First of all, I'm going to transform menu icon into x. For that we have to change positions for first and third lines. As for the second one, it should be heated. So let's go ahead and select line one. We have to rotate line one by 45 degrees according to the z-axis. To be more precise, for line one, we have to use Rotate Z -45 degrees. Let's duplicate this code. Change the class name right, line three. And also get rid of the minus sign from here. As we said, we have to hide line two. So let's select it and use your opacity zero. So as you can see, lines are rotated, but we don't have here any x. We have to take care of positions of lines. For that. I'm going to add here translate. Then as the value of x direction, right? Minus eight pixels, S4, y-axis. We have to pass your six weeks. Let's copy it And paste four-line three. Instead of six pixels we need here just minus six peaks. Now is considered. The problem is fixed and we have here x. Actually this is not the default state of the icon. We have to make it x when we click it. In order to achieve that, I'm going to use a little bit of JavaScript. But before we write some JavaScript, I'm going to add two lines. New class name, let's call it change. Then we will add this class two navbar using JavaScript. And all of this stuff will happen when we click the icon. Let's go to script.js file and first of all, create a new variable, let's call it menu icon. And then select the developments which has a class name hamburger menu. For that we need to write documents, dots, query, selector, and pass your class name hamburger menu. Then attach event listener to Menu icon, right, menu icon, dot, add event listener. As the first argument we have to pass your name of events, which is clique. That we need to pass your function, which is going to be an arrow function. Now we have to add two new class which is changed as first, let's create a new variable, call it nav bar. It should be equal to documents, dots, querySelector. Let's insert your cluster name navbar. Then inside function, right, navbar and easier property called class list. Now you may think that we have to use your method adds, but in this case it won't work because when we click the icon, class change should be added to Napa. But on Next click, it should be removed. And in order to achieve that, instead of add, we have to use method called Toggle. Let's insert your class name change. So if we click the icon, then it will be transformed into x. And then on the next click, it will get its default state. In order to make this affects motor, let's go back to style.css file and assign to the line transition with values 0.8 s. So now a fact became smarter, but I think we can make it even more nicer. Instead of rotating lines just by 45 degrees, we can let them make one whole rotation, rotation by 360 degrees, and then rotate again by 45 degrees. So as the values we have to insert here, sum of 360.45, which eventually is 405 degrees. So now you agree that it looks much better. Alright, so we're almost there. The other thing that have to do is to hide enough port by default, display it onClick. For that, Let's change the value of right position and make it -300 pixels. So now Navbar is hidden. In order to move it from right to left side, I'm going to use again class change. Let's assign to it, right, with value zero. Now, if we click, Napa will be displayed, but as a guest, in order to make effect nicer, we have to use transition with the values right? Than 0.8 s. And also, I'm going to use your function called cubic Bezier, which allows us to create a custom transition. In this case, I want the effect to start slightly slower and to end it faster. For that, I'm going to pass your values 100.1. So now we can say that everything works perfectly. We have here nice and modern looking navbar with some cool effects. 31. Project 28 - Pricing Cards: In this tutorial, I'm going to show you how to build a nice modern cards with some cool effects. So as you can see, we have here three similar cards with different price packages and conditions. If I hover over them, then the scale of carts will be increased smoothly. They will become bigger. And also if I make browser smaller than cards will be wrapped. So the project will be responsive on different screen sizes. Alright. So here in VS code, I've got a couple of files for HTML and for CSS. And also we have a folder in which I've got an image. In index.html file, I've created the basic structure of the HTML document. Inside the head element, we have a couple of links. First one is for Google fonts. I'm going to use fonts called Josephine Sans, and Montserrat. Then I have passed here a link for Font Awesome icons. And lastly, I have a link for style.css file. Okay, let's go ahead and start building HTML markup. I'm going to create div elements, which is going to be a container. It will include the entire content. So let's assign to it class container. Next we need another div elements which should be a wrapper for cards. So assigned to it class name cards wrapper. And now we have to create the card itself. Let's open another development with class name card. Actually the card will consists of three main parts. We will have card header, card body, and card footer. So let's insert your div elements, which should be a card header. Let's assign to his class name card header. It will consist of two heading elements. First one, we'll describe what kind of package do we have. I'm in free or standard or premium. As for the second one, it should be for the price of the package. So let's open h3 heading element and insert your texts free. Next we need H1 heading elements with texts, dollar, sign and zero. Okay, that's it about card header. Next, we need a card body. It will represent what kind of features do we have in case of the free package. So let's create development and assigned to its class name card body. The features will be represented by a least. Therefore that's open UL elements. Inserting it LI. So we will have here Font, Awesome icons with some texts. In case of free package, just two features will be available and the rest of them won't be. So the first two features will have check icons, and the rest of them should have x equals. Let's open here I elements and assign to it class F, a, S, FA dash check. That instituted some texts after closing, tag. Some feature text. Overall, I'm going to have six features. So let's duplicate this line five times. And then the only thing that we had to do here is to change class names for last, for Font Awesome icons. Instead of the check, we need here to write times. Okay, so that's it about card body. As we said, we need to create card footer as well. It will include just one button. So let's open developments and assigned to it class carb filter. Then inside the div element Create button, which should have type button and the text subscribe. Okay, so we have created the first card. Overall, we will have three of them. So let's go ahead and duplicate entire card twice. Then make some changes. Instead of three, we need here standard S for the second heading element instead of zero, right? Let's say 49 and slash, then open span elements and institute a month. So in case of a standard package, I'm going to make four features available. So let's change class names here. We need to check instead of times. So the second card is ready. Let's make some changes for the third one, we need here, premium than 99, open span element and insert month. Lastly, I'm going to make all features available. So for the last four features, we need class name. Check instead of times Alright, that's it about HTML markup. We have created structures for all three cards. Now it's time to start styling them. Let's go to the style.css file and first of all, create some reset styles. I'm going to select every element using asterisks. Then set margin and padding as zero. And also use box-sizing property and assigned to it border-box. Alright, so the first element that I want to take care of its container. So let's select it and define its width and height. I'm going to set width as 100% S bar height. Let's set it as 100 per cent of the pupil, and also change background color. Let's assign to it color d, d, d. Okay, after that, I'm going to select cards wrapper. So I want to wrapper to be placed in the center horizontally. And also I'm going to align cards in a row. In order to do that at first, let's define width as 90%. Then in order to center cards wrapper inside the container, we need margin, our row. Next, let's define height and set it as hundred per cent. Now, I'm going to align cards horizontally in a row, and also I want to place them vertically in the center using flexbox. So we need here display flex. Now as you can see, cards are placed in a row. Let's create some space between them. And for that, Let's use justify content with value space around. Finally, in order to send to them vertically, use a line items and set it as center. Alright, so that's it about the alignment of cards. Now we have to start styling cartilage cell. So let's go ahead and select a card. Adverse. Let's set width as 300 pixels. Then I'm going to change background. Actually, I want to set an image as a background. First, let's use here linear gradient and pass here some RGBA values. We need black color with opacity 0.5. Then again pass RGBA value with the same black color, but with opacity 0.6. Next we need to indicate part of image. So Insight URL, that's right, images and select Image bg dot JPG. Then as a position of image right Center. Also we need here no repeat. And finally, let's use background size property with the value cover. So as you can see, we have here image as a background of the card, but for now, the current itself looks really ugly. Next, let's change the color of contents in order to make it visible. Let's set it as white. And then just center the text inside card using text-align center. Alright, let's move on to styling individual elements inside the card. The first part that I want to style is the card header, which consists of two heading elements. At first, let's select card header itself and create some space at the bottom using margin bottom with value 40 pixels. Next, I'm going to select the first heading elements. So we need to write here card header. Then h3. Let's change the font family. I'm going to use your font called Josephine Sans. Sans-serif. That increased font size. I'm going to set it as 30 pixels. And also, I'm going to make font lighter using font-weight with value 300. Alright, so the first heading is all already looking good, but I want to add to it some more styles. Let's change its color. In this case, I'm going to use color called chocolate. Then create some space around the heading. Use margin with a value of 30 pixels. After that, I want to create a border at the bottom of the heading. So for that, let's use a border bottom. Then, right here values one pixel groove and the color white So as you can see, we have here border at the bottom, but I think it's too close to heading. And in order to fix that, Let's just use padding with value ten pixels, with value ten peaks. Alright, that's it about first heading Elements. Let's go ahead and style the second one. Select it right card header, H1. Actually, for H1, we need to use those three properties. So I'm going to grab them from here and then just change the values. As I font family, I'm going to use Montserrat. Then set font size as 60 pixels. As for the font weight, Let's leave it as it is. Alright, So the second heading element is styled, but we need to hear to make some changes. I want to make $1 sign smaller, and also I want to place it a little bit up. In order to do that, I'm going to use HTML tag called superscript. So let's go ahead and wrap dollar signs for all cards by superscript tag. So as you see, the dollar sign is placed little bit up, but it's to bigger. So let's decrease its font size. Select it right card header and soup, and set font size as 35 pixels. Alright, so let's sit about dollar sign. The only thing that I want to do regarding this part is to decrease size of math because as you can see, it's quite bigger. As you remember, we have a wrapped this word by span element. Let's go ahead and select it right card header, span. And then define font size and make it 18 pixels. We have finished working on card header. Both headings are styled and now we have to move on and take care of card body. Inside card body we have lists of features with Font, Awesome icons, and some texts. Let's go ahead and select that first card body and create some space at the bottom using margin bottom, 60 pixels. Next, I'm going to take here of LI elements, which actually wraps icon and text. So let's select it, right, carved Baldry. I. First of all, let's get rid of default bullets using list-style. None. Then change the font family. In this case, I'm going to use font called Josephine Sans san-serif than set font size as 16 pixels. And right font weight 300. Alright, so the list items are looking good, but we need some space between them. And for that, I'm going to use margin. Let's make it 50 pixels on top and bottom and zero on left and right sides. With texts values, we are done. And now I want to customize likens. The first thing that we need here is to create some space between icon and text. For that, Let's select elements called body. I use margin, right? 25 pixels. Next thing that I want to do is to change the color of icons. In case of check, I want to use green color. As for X equals, I'm going to make them red. So let's go ahead and select card body. Then F a check and set its color as 06838. Let's duplicate this code. Change class name we need to times instead of check, and also change the value of color right here, 911832. Alright, so as you can see, the color of icons are changed and actually with card body, we are done. Next guest, we have to take care of card footer. So let's select development with class name card footer. And create some space at the bottom using margin bottom with value 40 pixels. Next, I'm going to customize the button, so let's select it. We need your card footer button. First of all, let's set its width as 120 pixels. Then create some space inside button using padding Pixels change background color. I'm going to use your color chocolate. And also change the color of text. Make it lighter using color d, d, d. Okay, now I'm going to take here of texts inside button. First of all, let's change font family. I'm going to use font called Montserrat, sans serif. Then set its font size, make it 12 pixels. I'm going to make the font a little bit bolder for that, right font-weight. And set it as 600. Also make texts uppercase using text transform uppercase. And lastly, create some space between letters using letter spacing with value one pixel. Alright, that's it about the texts. We need here some more styles to make the button look good. Let's change the default border and create a custom one. Right here, two pixels, solid, and the color of chocolate. Then make the button rounded using border-radius. 50 pixels. Gets rid of default, outline, outline none. And finally change the type of coarser, make it point. Alright, so as you can see, button is styled. Now I want to add some styles to the card itself. I'm going to make its corner slightly rounded. And also I want to add to it some shadow effect. So let's go ahead and assign to the card border-radius with the value ten pixels. Then use box shadow. Insert here, values 010 pixels, two pixels, and the color RGB 000 and opacity 0.8. Okay, so now carts are looking much better. And next, I'm going to create little hover effect. On hover. I'm going to increase the scale of cards and also I want to change slightly box shadow. So let's select card with hover. Then insert here transform, scale. And as an argument in severe 1.1. Actually, as you know by default, scale of elements is one. Next, we need a box shadow with values 015 pixels, 60 pixels, and the color RGB 000.8. And also in order to make effect smoother, Let's use transition with the values all and 0.4 s. So if I hover over the card, then its size will be increased smoothly. Also, shadow will be changed and overall, we will get a nice effect, right? Actually, that's it. We're almost done with this project. The only thing that I want to do is to make project responsive on different screen sizes. For that, let's inspect the page and then switch responsive mode. So the breakpoint on which we need to make some changes, I think, is about 1,200 pixels. Because as you can see on the screen size project breaks. So let's go ahead and create a CSS media query. For that, we have to write at sign media. Then inside parenthesis, we have to indicate max-width. As we said, we need to write here 1,200 pixels. And now inside a media query, we have to create some CSS styles, which then will be applied to on that breakpoint. Let's select container and set its height as hundred per cent. Next, I want to wrap cards. For that. Let's select the card wrapper and assigned to it flex wrap with value rab. And finally, we need space around cards. In order to wrap them nicely. I'm going to create that space using margin. So select card and assigned to it margin 50 pixels. Alright, so if we make the page smaller than cards will be wrapped. And eventually the project will be responsive on smaller screen sizes 32. Project 29 - CSS Toggle Button: Hello and welcome to our next tutorial. In this video, we're going to build a CSS animated check box, which will allow you to create some toggling effect. So as you can see, we've got here our checkbox by default, we have here a circle place on the left side with a red background. If we click it, then the circle will move to the right side smoothly. And also background color will be changed from red integrate. Besides that, you can notice here a little dot placed in the center of the circle. When we toggled checkbox, then this little dot changes its color as well. Okay, so that's what we're going to do. Actually, we created this checkbox with large size just for better visibility. In general, on modern websites, you will meet smaller checkbox. Okay, let's go ahead and start building this project. In VS code. I've got two different files, one for HTML and the second one for CSS. In index.html file. I have prepared the basic structure of HTML document. Inside the head elements, I've passed the link for style.css file. Alright, let's first create HTML markup open development, which will wrap the entire content assigned to it class container. Then inside the container we need to create two elements. First one is going to be an input element with type checkbox. Next, we need to create a label inside for attribute, right? Check. And also assigned to the class toggle. And finally, we need to insert development inside label. It's going to be a circle. So let's assign to it class circle. The last thing that we need to do inside the HTML document is to link inputs and label. In order to do that, we have to assign two input ID attribute. And it should have the exact same value which we passed for, for attribute. I mean check. In order to see clearly what I'm talking about. Let's insert inside development some texts. Let's say clique. So if we click that text than the chat box will be checked automatically. Let's go to the style.css file and start writing some CSS. At first, I'm going to create some reset styles. Let's get rid of the default margin and padding from every element. In order to select every element, we have to use an asterisk. And then pass your margin zero and padding zero. Alright, next I'm going to place the contents perfectly in the center for that, Let's select container. And at first defined width and height, I'm going to set width as 100 per cent. As for height, I'm going to set it as hundred percent of the viewport. Then change background color. You see your color E. And now in order to center the content, I'm going to use flexbox. We need here display flex. Then in order to center element horizontally, we need justify-content center. And then align items center in order to center elements particular. Alright, so as you can see, the checkbox is placed perfectly in the center. Now I'm going to select the label. But before that, let's get rid of this text form here. Then go back to the CSS file and select label using className toggle. Let's define width as hundred and 50 pixels than we need height. Let's set it as 50 pixels. Change background color. I'm going to use your color e24 848, and also make elements rounded using border-radius 50 pixels. Alright, so the last thing that I want to do with the label is to create some shadow effect. But in this case, I'm going to create a shadow inside the elements. For that, we need box shadow. Then as a first value we need here in set than 02 pixels, ten pixels, and the color 555. Alright, so now you agree that it looks much better. Now it's time to create the circle. So select div element with class name circle. First of all, let's define the width and height and set both of them as five pixels. Actually we applied those start to circle because using them, we will create a little.in the center of the circle, S4, the white part of the circle. It should be created by the border. So we need here border with the values 27 pixels, solid and white column. In order to make along the rounded, Let's use border-radius with a value of 50 per cent Alright, so we have here the circle, but for now it's not placed in the right way. We have to take care of its position. For that, I'm going to use position absolute. Then in order to manage the position of the circle according to its parent element, which is a label, we have to assign to label position relative. Okay, Let's move this circle a little bit up and also to the left side. So we need to define the top and left positions as top minus four pixels and left minus five weeks. And finally, I'm going to create a little shadow effect, right? Box shadow with the values 005 pixels. The color AAA. Alright, let's see. We have customized our checkbox and now it's time to make it work. For that, we have to create the click event. You may think that for that we should use JavaScript. But in this case, I'm going to use some CSS tricks which will allow us to create the click event. As remember, we have linked input and labels using id and four attributes. So this is the way how we are going to create the click event. We have to define some CSS styles and we have to apply them to elements when the checkbox is checked. First of all, we have to select input element. It has ID check. Then in CSS we have a pseudo-class called checked, which allows us to select the checkbox in checked mode. Now we have to get access on the elements which we need to customize. In this case, we need to select the circle, but we cannot just write here circle. At first, we have to get access on the label, which is a sibling of input. In order to select the sibling of input elements, we have to use one of these CSS combinators called general sibling selector, which is expressed by tilda sign. Now we need a label, it has className toggle. And finally, we need here circle. Okay, so now we have access on the circle and all the styles which we are going to pass you should we apply to circle one check box will be checked. In case of a circle, we need to move it from its current position to the right side. For that, Let's use left position. And at first let's assign to it 100 per cent. Also, we need a transition for smooth effect assigned to it values left and 0.5 s. Let's check what will happen if I click here than the circle will move to the right side. But it will be ended up too far. So in order to get the needed results, we need to subtract 200 per cent the size of the circle. Let's calculate the size of the circle. Actually in size of the circle, I mean the diameter of the circle. It has width five pixels and Border 27 pixels. But we need to keep in mind that 27 pixels should be doubled because we have left and right sides. So overall, the value should be the sum of 27 pixels plus 27 pixels and plus five pixels. It's 59 pixels. So we need to subtract 200 per cent, 59 peaks. As you see we have here different measurement units, percentage and pixel. Actually this operation is not valid in CSS. And in order to make it valid, we have to use a function called calc, which stands for calculate. Now this operation is valid. So if we click again, then the circle will move and we will get a much better results. At a glance. That is the result which we needed to get. But actually, we need to move circle a little bit more to the right side. To be more precise, we need to move it by five pixels. Because as a default position, we have defined left minus five pixels. So instead of 59 pixels, we need 54 pixels. And I hope that it makes sense to you. So if we click, then everything will work. Perfect. Now we need to change the color of the label. We have to make it green. Actually, we need you to use the same technique. So let's duplicate this code. We have to change background color of label element. So let's get rid of the circle from here. Then delete this line of code as well, and in severe background color with the value 3963. Finally, we need a transition for the label as well. So right here transition with the values background, color and 0.5 s. So as you can see now, everything works fine and actually we are almost done. The only thing that we have to do is to hide this little checkbox. For that, I'm going to go to index.html file and assigned to input element attribute called hidden. Alright, so that's it. Our project is done. We have created a nice animated checkbox with toggling effect 33. Project 30 - CSS Grid Gallery: In this video, we're going to be building a responsive gallery using CSS grid. Nowadays it's really popular and I'm sure you have already come across such calories on modern websites. So as you can see, we have here 12 images with little gaps. And those images are aligned in two-dimensional space. That's it. What you can achieve using CSS grid. It's a two-dimensional CSS layout module. As we said, the gallery is responsive. If we make browsers smaller than images will shrink nicely and the gallery itself won't break. Alright, let's go ahead and start building this project I have here in VS Code, couple of files, index.html and style.css. And also I've got a folder called images, which includes all the images that we're going to use throughout this project. Actually, as a quick note here, I want to say that we're going to build this project in Mozilla Firefox, because this browser has a little bit better working environment for CSS grid. So that's why I have run the project in this browser. Alright, so in index.html file, I have prepared a basic HTML structure. As you see in the head element, we have a link for our CSS file. Let's go ahead and start building our gallery. First of all, I'm going to create HTML markup. So let's open development. It should be a wrapper for the entire gallery. So let's assign to it class container. Then I'm going to open another development which will wrap all the images. Let's assign to it class gallery. So now it's time to insert your images. Let's open IMG elements and indicate the path of image. We have folder images, and then we have to select IMG, one dot JPG. Also, we need to assign a couple of classes to the image element. First one is going to be four common styling, write IMG as well. The second one it should be for individual styles. So write IMG dash one. Alright, so as we said, overall, we're going to have 12 images. So I'm going to duplicate this line of code 11 times. And then quickly change names of images and also class names. Alright? So as you can see, we have here all the images, but for now they are quite big. And also they're looking ugly because we have here just pure HTML. So it's time to start styling for that. Let's go to style.css file. First of all, I'm going to create some reset styles. Let's set the margin and padding for all elements as zero. And besides that, I'm going to set box-sizing border-box. After that, I'm going to take care of the container. So let's go ahead and select it. Then, define width and height. Let's set with as 100%. As for height. I'm going to set it as 100 per cent of view port. Alright, that's it for now. Regarding container, I'm going to select a gallery which wraps all the images. The gallery is going to be a grid container. As for images, we will make them as grid items. So in order to make the elements grid container, we have to assign to it display grid. Now we have to define grid columns and grids rows. In order to do that, we have to use properties called grid template columns and grid template rows. Let's start from the columns. Use here property grid template columns. Actually, as a quick note here, I want to say that if you're not quite confident in CSS grid, then I recommend to check out our CSS boot camp in which we explained this module in details. And also we build the entire project based on CSS grid. So if you're interested, then you can find the link of this course in the description. Alright? So we're going to have eight similar columns that will have the same size. And for that, I want to use a function called repeat. Repeat function takes two arguments. As a first one, we have to indicate number of columns, eight. As for the second one, we have to indicate size for each column. In this case, I'm going to use a function called min-max. It allows us to define the minimum and maximum values of each column. So as a minimum value, Let's pass here ten pixels. As for maximum value, I'm going to use a special unit called fractional unit, right? One. So it means that available space will be divided into eight event parts. And each column will take up one part of available space. So as you can see, images have changed the layout. We have here, kinda messy situation. Let's inspect the page and open Developer Tools I said at the beginning of this tutorial that Firefox has a really good working environment for CSS grid. On the right-hand side, we have here the Layout tab in which you can find a section for the grid where we have our div elements, which is Gallery. If we check this box, then GridLayout will be displayed. I mean, you can find your eight columns which we have just created and proper grid line numbers. Okay? Next I'm going to take care of grids rows. For that I'm going to use a property called grid template rows. So we will have four rows. Each of them will have the same size. Therefore, I'm going to use, again repeat function. Let's indicate here a number of roles for s precise, I'm going to use here little tweak which will help us to make the gallery response. So I'm going to make the size of each row 10% of the width of the viewport. It means that once the width of the page will be decreased, then the size of roles will be decreased accordingly. And eventually, we will get a responsive layout. In order to see better, Let's go to the browser. So if I make the browser smaller than the size of the rose will be decreased. Alright, so for now, images are quite big. And in order to fix that, let's go ahead and select images with common class name IMG, and then set width and height as hundred percent. Now, images are placed inside grid cells. Also they are smaller. But we have here a slight problem. If you take a closer look at them, you will find that images are a little bit stretched and they don't look quite nice. So in order to fix that, Let's use property called object feet and assigned to each value cover. So now they look better. Next, I want to create some space between grid cells. For that, we have to assign to the gallery grid gap. Let's set it as 16 pixels. And also let's change background color. I'm going to use your call or zero, d four to zero. So as you can see, we have some space between grid cells and also background is changed. Alright? Now we need to align each image individually and eventually they will take up the entire gallery. So let's start from the first image. I want you to take up the first two columns and first row. So let's select it with individual class name IMG. Then define property called grid column. This property allows us to define the starting column line number and also the ending one. So as we said, the first image will take up the first two columns and first row. Therefore, we need here as a starting line number one, then slash and three. And also, let's write grid row with line numbers 1.2. So as you can see, the first image has taken up first two columns and it's placed in the first row. Second image will take up the next three columns and the first two rows. So let's go ahead and copy the code for the first image. Then change the class name. And also values for grid column and grid row. We need 3.6 S four grid row, right? 1.3. Alright, next we have the third image. I want to leave it where it is. I mean, it will take up all the debt one cell. So for the third image, we need grid column as 6.7 and courage role as 1.2. Next one we'll take up two columns and two rows. So for the fourth image, Let's write grid lines. For grid column we need 7.9. Add for grid row 1.3. Alright, Next we have image number five. I want you to take up two columns and two rows as well. I mean second and third rows. So for the fifth image, Let's change grid lines in the following way. We need here 1.3 as four grid row, right? 2.4. Okay? Actually that's the way how I decided to align images. But of course you can do it on your own. You can use more images or less and create the layout as you wish. I know that writing code for the gallery is kinda repetitive and maybe a little bit worrying. But that's the way how it works. Eventually we will get a nice result. Alright, Next we have image number six. I want it to be placed inside third and fourth columns. As for row, it will take up the third one. So for the six MHz, let's write line numbers for grid column 3.5, S4 grid row, we need 3.4. Alright, so we have aligned six images. There are still left other six images. As we said, the writing the code for such layout is kinda routine. So I will pass here the code for the rest of the images and then you can simply overwrite it. Okay, I hope you wrote the code for the other six images. Let's go to the browser and see how our gallery looks. So images are aligned nicely and our gallery is all already looking good, right? Actually, I want to make here some changes. As you see, we have a gap between images and I want to create such space on the edges of the gallery as well. I mean, on all four sides, top, bottom, left, and right. For that, I'm going to use padding. Let's write here 16 pixels. Next thing that I want to do is to place the entire gallery vertically in the center. For that, I'm going to use Flexbox. Let's assign to the container display flex. And in order to center flex items vertically, we need align items center. So the gallery is centered. And the last thing that I want to do is to create hover effect. By default, I want to decrease opacity for images. Then we will increase it on hover. So let's assign to image opacity 0.7. Then select image with hover and increase opacity right here, one. Lastly, let's use transition with values opacity and 0.5 s. Alright? So as you can see, we have here nice hover effect. And actually our project is done 34. Project 31 - Landing Page with Modal Forms: In this video, we're going to create a nice lending page using HTML, CSS, and little bit of JavaScript. Before we started working on this project. As Usually, I'm going to go through it and describe it quickly. So as you can see, we have here full-screen background. In the center of the page, we had a banner which consists of headings and paragraphs. And also at the top right corner, there are placed two different buttons. If we click them, then nice forms will be displayed as the model boxes. Actually those forms are similar. There is only one difference. One form is for login and the second one is for sign-up. Alright, that's it. What we're going to do. I hope it will be interesting and you will enjoy this project. So let's get started. On the desktop. I have created a folder called model forms, in which I have created three different files for HTML, CSS, and JavaScript. Also here is one folder which includes the image for the landing page. Okay, Let's go ahead and open this folder with the VS code. Then I'm going to check the index.html file. As you can see, we have here the basic structure of the HTML document. Inside the head element, we have a couple of link elements. I mean, links for Font Awesome icons, also a link for Google fonts. Throughout this project, I'm going to use fonts called Josephine Sans, and Montserrat. And lastly, we have here a link for our custom CSS styles. Actually you are able to download starter files from the link in the description. Okay, let's go ahead and run this file in the browser. I'm going to do that using a live server. It is a great extension of the VS Code so you can search for it from the Extension Manager and install this package. Alright, let's go ahead and place editor and browser side-by-side and start building at first HTML markup for our project. The entire content will be wrapped by development. So let's open it. And assigned to the cluster name container. The container will consist of three different parts. As a first part, we will have here Banner, which will include heading and a paragraph. Then at the top right corner we will have buttons for login and for sign-up. As for the third part, it will be a full container and we'll include our forms. So let's go ahead and open the development. And assigned to its class name, banner text. And insert in it H1 heading elements with text code and create. Then open p elements and insert in it some texts. Let's say learn how to cope. Alright, Next we should have here the buttons. So let's open development, which will have class name btn. And then insert it into parts and elements. I'm going to assign to each cluster name for common styles, btn. And also we need here another class for individual styling. Let's call it Login, btn as a text, I'm going to insert your login. Actually, we did the similar button for sign up as well. So let's duplicate this line of code and change the class name we need here, sign up btn. And also I'm going to change the text. Let's write you sign up. Alright, that's it about buttons. Next, we have to start working on forms. For that I'm going to create another development. It should be a form container. So let's assign to each class name for container. So we will have here two different parts. First one is going to be for a sign-up. So let's open the development and assigned to class name sign up. For wrapper. This class is going to be for individual styles. We need here another one for common styling. So let's call it model. The model will consist of a couple of elements. We will have closing X button. Also. I'm going to create a couple of headings. Then we will have several inputs with Font, Awesome icons. And lastly we will have a button. Alright, let's go ahead and create those elements, open development and assigned to eat several class names. First one is going to be x btn, and then we need sign-up x. Inside that div elements. I'm going to insert one of the HTML entities, right, at sign and times with a semicolon. So as you can see, we have here x. Next we will have a couple of headings. So let's open another development and assigned to it class name, form header. And then insert H1 heading elements with text code and create Next we need here another heading is going to be h3 heading elements. Let's insert your text. Join us. Alright, now it's time to create a form element itself, which will include a couple of inputs. So let's open the form elements and assign to eat className form. So the form element will consist of three different groups. Each of them will include Font, Awesome, icon, and the input element. So let's create a div element and assigned to it class input, group. Then insert in it I elements. So the first icon is going to be for username. Let's assign to each class names FAS, a user. Then we need an input element. Its type is going to be texts. And also we need here another attribute called placeholder with a value username. So as we said, we need a three input groups. Let's duplicate it twice and then make some changes. The second input is going to be for e-mail. So let's change the class name of AI elements. We need here, F, a, F, a envelope. Then change the type of inputs, make it email. And also as the value of placeholder, we need to insert email. Okay, the third input is going to be for a password. Let's change class name of AI elements. We need your FASFA key. Then change type of input elements. We need the password and also insert password for placeholder as well. Alright, let's see about inputs. The last elements that we have to create is a button. So let's open it. Then. I'm going to define type attribute as a bottom and then insert your texts, sign up. Alright, so we have created the first four sign-up. We need similar for login as well. So let's duplicate sign-up form wrapper, and then make some changes. I'm going to change the class name we need here login. Then we need to change the class name of x bottom. We need to login again. Then also instead of join us, we need to log in. In case of login form, we don't need an email at all. So let's get rid of the second input group. And lastly, changed the value of the bottom. We need here login. Alright, that's it about HTML markup. Now, it's time to start writing some CSS. Let's go to style.css file. First of all, I'm going to create some reset styles. Let's get rid of margin and padding from every element. We need to use asterisk in order to select every element. Then let's pass your margins and padding zero as well. Then I'm going to select container. Let's define its width and height as a width. I'm going to use hazard present. S4 height. I want to set height as 100% of the viewport. And for that, we have to use relative measurement unit called VH. So we need 100 vh. Next, let's set image as a full-screen background. I'm going to use your linear gradient. Then pass some RGBA values. First one is going to be black color right? 000 with opacity 0.6. As per second one, we need again RGBA black color, but with opacity 0.8. Next, let's indicate URL. I mean part of image. We have folder images and then image called PG dot JPG that we need position of background as center. And also no-repeat. Finally, let's use background size property with the value cover. Alright, so as you can see, we have here full-screen background image. Now, I'm going to style banner and buttons. And after that we will take care of styling forms and also will make them working for now. In order to make the working process more convenience, I'm going to hide the entire form container for awhile. You can do that using either display none or we can just simply use one of the HTML attributes called hidden. So let's use the attribute Keaton and assign it to form Container. As you can see, both forms of hidden and we have here just banner text and buttons. Let's go ahead and start styling banner text. So let's select developments which has class name banner texts. I'm going to take care of the position of the banner. I want it to be placed in the center. For that, I will use some technique using positions and transform property. If you have watched our recent videos, then you should already know about this technique. But if not, I'm going to show you it in a second. First of all, we need to set position as absolute. Then we need to top position, set as 40 per cent and left position with a value of 50 per cent. So now we say that boundary checks displaced from top to bottom by 40% and from left to right by 50%. That's not what we want. In order to central elements, we have to move it from its current position by 50 per cent to the left side and by 50 per cent to the upside. For that, we need to use Transform. Then translate. We have to pass yield the following values. We need -50 per cent and then again -50 per cent. Okay, So with the position of banner text, we are done. And now we have two style heading and a paragraph. Let's start from the heading. Select it right, banner texts, H1. First of all, let's change color. I'm going to make it white. Then change font-family. Let's use your font called Montserrat san-serif. That increased font size. I'm going to set it as 80 pixels. Also, I'm going to make font lighter using font-weight. Let's set it as 300. Then create some space between letters. Use letter spacing with the value two pixels. And lastly, I'm going to create some space at the bottom using margin bottom, two peaks. Alright, that's it about heading. Now, I'm going to select the paragraph. So right banner text p. Actually, we need here almost similar properties which we use for heading. So I'm going to copy them. Let's paste here and make some changes as a color. Let's use e. Then. I'm going to change font family instead of Montserrat right here, Josephine Sans. That decrease font size, make it 40 pixels. As a font weight, we need here the same. So let's leave it as it is. Next, I'm going to decrease space between letters. We need one pixel. And lastly, instead of margin bottom, Let's use text-align, right? Alright, that's it about the banner. I think it's looking good. And now I want to work on buttons. First of all, let's take care of their positions. I want them to be placed at the top right corner. For that, Let's select development, which wraps both buttons. It has class name BTN. Let's make its position as absolute. Then define top 50 pixels and the right 60 pixels. So as you can see, both buttons are placed at the top right corner. And now I'm going to style them. First of all, let's give both buttons some common styles. As you remember, they have common class, BTN. Let's select it. At first, set width as hundred and 70 pixels. Then create some space inside buttons using padding. On top and bottom, we need ten pixels, and then 15 px is on left and right sides. Then let's create space on the right side of the buttons using margin-right 20 pixels. Also, I want to make them rounded. For that, Let's use border-radius and make it 50 pixels. Now, let's take care of texts. First of all, change font-family. In this case, I'm going to use phones called Josephine Sans. Serif. Then increased font size, make it 16 pixels. Create some space between letters. Use letter spacing. One pixel. Also gets rid of default, outline, outline, none And lastly, change type of coarser. Make it a pointer. That's it about common styles. Now, I'm going to give some individual styles to both buttons. Let's select the first one using className, Login, btn. Then change background color. I'm going to use your color called tomato. Now, I want to change the color of the text. And actually I need the same color for both buttons. So I'm going to write it inside common styles. Let's use your white color. Besides the color, I want the same border as well. So let's define the border. Two pixels, solid and as a color, right? Tomato. And lastly, select the second button which has class name, sign up btn, and make it's background color transparent. Alright, that's it about this tiling of the buttons. Next, I want to create some hover and clicking effects. On hover. I want the button to move Elizabeth up. For that. Let's select btn with Harvard and then define transform. We need to translate Y with value minus two pixels. And also to make effect smarter, we need to transition transport 0.3 s. If we hover over the buttons, then we will get here. Nice effect. Next, as we said, we need to click effect. For that we have to use one of these pseudo-classes called active. So we need to select BGN with active. And now we can define styles which we want buttons to get when we click them. So as you know, on hover there, moving up and onclick, we need to place them on their old positions. Therefore, we need to copy this line of code and just change the value. We need to write here zero. So when we click, we will get nice clicking effect. Alright, that's it about customizing buttons. Now it's time to start working on farms. So for now form container is hidden. The first thing that we have to do is to display it back. But we don't need to display both forms at the same time. I'm going to start at first sign up form. Then the second form will be automatically style. That will happen because both firms share the same classes. So I'm going to hide login form for that. Let's assign to its wrapper attribute hidden. Then go back to the style.css file. I'm going to select both form rappers with common class model. Then define width as 400 pixels. Then I'm going to set an image as a background. Let's use here linear gradient and pass here some RGBA values. First one is going to be 148422, then I'm going to 42 and opacity 0.8 S for second one is going to be 185-12-9129 and opacity 0.6. Then select image. We need here bg dot JPG as a position, right center than no repeat. And also we need background size property with the value cover. Alright? So the forms should be placed in the center of the page. I mean, they should be centered perfectly. For that, I'm going to use the same technique which we used for the banner. So let's set position of model as absolute. That we need top 50 per cent, left, 50 per cent. And also transform, translate with the values -50 per cent and again -50 per cent. Lastly, let's make corners of modal, little bit rounded using border-radius with value 20 pixels. Okay, so for now, the form is looking really awful, but we'll make it looking good in a while. Let's go ahead and start styling elements which are placed inside modal. I'm going to start with x closing pattern. So let's select it. We need to class name x BTM. I'm going to place it at the top right corner of modal. For that, I'm going to use position absolute. Then set right? As 20 pieces. For now, as you can see, the button is quite small, so let's take care of that increased font size. Make it 50 pixels Also, I'm going to change the color. Let's use here called or two to two. And finally, change it coarser type, make it pointer. Okay, that's it about X button. Now we have to take care of those heading elements. Let's select their parent elements, which is form header. I'm going to place text in the center using text-align center. Then create some space at the top and also at the bottom of the header using margin, right, eight pixels, zero, hundred and 50 pixels. And again zero. And lastly, change the color of both headings, make them white. Alright, now I'm going to select first heading for that. We need to write here form header H1. Let's change the font family. In this case, I'm going to use font Josephine Sans, san-serif. Next, I'm going to increase font size. Let's make it 40 pixels. Then. Make texts lighter using font-weight 300. And then create some space at the bottom of the heading using margin bottom thirds pixels. After debts, I'm going to select second heading. So right form header h3. In case of the second heading, we will need almost similar properties. So let's grab those three lines of code. Paste them for second heading. Then change font-family. We need here more Surat. Then as font size, right, 25 pixels, font-weight, we don't need to change it, so let's leave it as it is. And lastly, add text, transform, uppercase. Alright, that sit about heading elements. Now we have to start working on inputs. At first, let's select the form elements, which has className form. I want to take care of its position. And for that I'm going to use flexbox. So right display flex. Flex items are placed horizontally in a row. So we need to change the flex direction and we have to make it column. Then in order to center elements, we need align items, center. Alright, now we have to start styling those inputs. At first, I'm going to select the input group, which wraps Font, Awesome icons and inputs. I want to create some space at the bottom of each input group. So let's use here margin bottom with value ten pixels. After that, Let's select input itself, right? Input group. That input. Defined width as 250 pixels. Next, I want to create some space inside input using padding. On top, right and bottom sides, we need the same amount of space. So right here, 15 pixels, three times S for the left side, I'm going to create a little bit more space because eventually we're going to place your Font, Awesome icons. So right here, 50 pixels. Next, I'm going to get rid of the default border and outline, right border none. And outline none. Also make input slightly rounded. Using border-radius with value of 30 pixels. Then I'm going to change the background of inputs. Let's use here RGBA value with black color and with opacity points six. Alright, after that, I'm going to work on text. So let's change font family. I'm going to use your font called Josephine Sans. Sans serif. That increased font size. Make it 16 pixels and then change color. You see your color di, di, di. Okay, So we have just started input elements. It's time to move on and take care of Font Awesome icons. So let's select them using input-group. I. At first I want to manage their positions. As we said, I'm going to place them inside input elements. For that, Let's define their position as absolute. And in order to make them working according to the parent element, which in this case is input-group. We have to assign to the parent element position relative. Then define four I elements, top as 13 pixels and left As 17 pixels. So now as you can see, they're placed inside inputs. Let's just increase the font size. Make it 18 pixels, and change color. Use here. Alright, so with input groups, we are done there looking good. And the only element which we want to take care of inside form is a button. So let's select it right for button. First of all, let's define widths, make it 310 pixels. Then create some space inside button using padding. Set it as 12 pixels, gets rid of default border and outline, right? Border none. And outline none. Then make button rounded. Use here, border-radius with value is thought to pixels. After that, I'm going to change background color of Batson. Let's use your color or d8678. Also, we need to change the color of the text. Let's make it white. Next, I'm going to work on texts. I want to change font-family. Let's use here Josephine Sans. Serif. Also increase font size. Make it 16 pixels and transform text into uppercase using text, transform uppercase. Alright, so as you can see, the button is almost styled. It's looking good, but we have to add to it a couple of styles. As you see, we need some space at the bottom of it. And also I'm going to create some space at the top of it as well. For that, we have to use margin. On top right, ten pixels that zero, that 50 pixels at the bottom and zero. Then create some shadow. Use box shadow with the following values. Like 05 pixels, 20 pixels. And as a color right RGBA, posterior black color with opacity 0.4. And finally changed coarser, make it point a right, that seat about customizing of a button. The last thing that I want to do is to create hover and click effects, like we did it in case of login and sign up button. So let's select for button with Harvard that we need here, Transform, Translate Y with arguments minus two pixels. And besides that, I want to change slightly shadow on hover. So right box shadow. We need here values zero, that eight pixels, 25 pixels. And as a color right, RGBA 000 and opacity 0.3. Also, we need to use transition, right? All 0.3 s. So as you can see, hover effect is working. It's looking nice. Now let's create click effect. I'm going to select for and bottom with pseudo-class E2. Then let's grab this line of code. Paste it here and as an argument pass zero. Alright, so that's it. Model is styled actually this is sign-up form. For now the login form is hidden. But if we display it back, then you will find that it's styled as well because both model forms have the same common classes. Okay, so everything is ready to make those model forms working by default. We will hide them. And when we click login or sign up buttons, they should be displayed. And also the rest of the page should be disabled. In order to achieve that, we're going to use a little bit of JavaScript. Okay, so before we write some JavaScript, at first I'm going to hide the forms, but I'm not going to do it from HTML. We will do it from CSS. So at first let's get rid of attribute hidden from here. Then go to style.css file. In order to hide forms, I'm going to use opacity zero and visibility hidden. And we should assign them to model. Foams are hidden. Now in order to display them, when we click the buttons, we have to create new class, which actually doesn't exist in HTML. And then using JavaScript, we have to add this class two forms onclick event. So let's first create class and call it display. Then grab those two properties. And change values. We need opacity of one and visibility visible. Now it's time to write some JavaScript. Actually, we need to link our JavaScript files to HTML cell. Let's go to index.html file and down below before closing body tag, open script tag. And in source attribute indicates part of JavaScript file. We need here script.js, then open script.js file. So before we attach a click event two buttons, I'm going to create a couple of variables. We have to create variables for models, and we need to select both models separately. As it remember, we assign to each of them individual class names. I mean, sign-up form wrapper and login form wrapper. So we need to use those classes in order to select models separately. So let's go back to script.js file and create variable, call it sign-up model. Actually, as a quick note here, if you're not familiar with JavaScript, in this case dom, then you can check out our JavaScript bootcamp on Udemy, in which we explain all main concepts from basic to advanced in details. You can find link of this course in the description. Now we have to select sign-up form wrapper for that. Let's write here document. Then I'm going to use method called query selector. Inside parenthesis, Let's indicate className, which is sign-up for rapid. And the same way we have to select login form wrapper. So let's duplicate this line of code. Then change name of variable that we need here, login model. And also changed className right here, login. Okay, besides models, we have to select sign-up and login buttons as well. So let's create another variable and call it sign up btn, which should be equal to document dot query selector. And inside parenthesis as a class name, right? Sign up BTM. The same we need for a login button. So let's duplicate this line of code. Then change name of variable. We need here Login btn. And also change the class name, right? Login btn. Alright, so for now we all know or they can attach click event two buttons for that we have to write here, sign-up btn. Then we have to attach to it method called add event listener. Inside parenthesis, we have to indicate name of the event as a first argument. And then we have to pass your function. In this case, I'm going to use ES6 arrow function. And now we have to add to sign up model class display, which we have just created in CSS. For that, we have to write here sign-up model that we need to use property called class list. And in order to add a class to model, we have to use method called add. Inside parenthesis. We have to pass a class name as an argument. So now if we click Sign Up button, then sign up model will be displayed. Nice, sign up button is working. We need the same for login button as well. So let's duplicate this code and change names of variables. We need Login, btn, and also login model. Okay, Let's click Login button and you can see that it works like sign up button does. For now. Just those two buttons are working. We cannot close models using X buttons. And also background is not disabled when modals are displayed. So now it's time to take care of those things. At first, I want to make X buttons working. For that. Let's create new variables separately for sign-up X button and login X button as well. Let's call it variable sine of x, which should be equal to document dot query selector. And then let's indicate your class name, sine of x. Let's duplicate it. Change name of variable right here, login x. And also changed className. We need login x, like sign-up and login buttons. We need to attach click event to X buttons as well. Actually, I'm going to duplicate this code Then let's change the name of variable, right, sine of x. So now when we click X button, we have to remove class display, which we added two models. So here instead of method add, we need to use method called remove. Let's do the same for login x. Duplicate this code. Change name of button right here login x. And also change name of model, right? Login modal. Alright, let's display models. So if we click X bottles, then they will be gone. So X buttons are working fine. Actually for now we have here kinda messy situation. We can display both models at the same time, but it's definitely the bad user experience. We need some restrictions. In other words, when one of those models is displayed, we should disable the entire page so that we can not click second button. In order to dissolve the page, we should cover eight by form container. And then we won't be able to click anywhere on the page. For that. At first, we had to assign some styles to form container. Let's go to style.css file and select. For container. I'm going to define its position as fixed. Then for visibility, Let's define this background color right here, RGBA, and inserting it black color with opacity 0.7. For now, formed container is not visible. And actually in order to fix that, we have to spread it on the entire page. For that, I'm going to define all four positions as zero. I mean, we need to top zero, right zero, then bottom zero, and finally left zero. So now from container is possible. But at the same time, we are not able to click the buttons and also click anywhere on the page. Of course it's not what we want by default. We want to make it happen when we display one of those models. So by default we have to hide from container. And for that we need opacity zero visibility hidden. Then we need to create new class which will be added to form container using JavaScript, which will manage appearing the form container. So let's create class and call it disabled. We need to copy those two properties. Then paste them here and change values. We need opacity one and visibility visible. Alright, now let's go back to script.js file. So we need to disable the page when we click one of those battles, I mean login or sign up. So we have to create a new variable. Let's call it form container. It should be equal to documents dot query selector. And let's indicate your cluster name for container. Then inside this function, we have to add to farm container class disabled, which we have just created. So for that we need foreign container. Then the property called class list. We have to use here method add. And inside parenthesis we have to indicate class name the same. The same we need for a login button as well. So let's copy this line and paste it here. So if we click one of those buttons, then model will be displayed. And also page will be disabled. And then if we click X button for will be hidden, but page will be stayed, still disabled. So when we click on X buttons, we should remove class disabled from form container. Let's copy this code and paste it for both X buttons. And just change method add into removed. So now if we test, then everything will work properly. The only thing that we have to do is to make displaying and hiding effects smoother. For that, we have to use transition. We need to assign it to model. Let's insert your values all and 0.5 s. Then grab it and assign it to form container as well. Alright, so our project is done. I hope it was really interesting and you'll learn lots of things. Thanks for watching. See you in the next tutorial. 35. Project 32 - Animated Landing Page: Hello and welcome to our next YouTube tutorial created by code and create. In this video, we're going to build a nice-looking landing page with some animation effects. The project will be created based on HTML and CSS. We're going to use CSS keyframes. So in this video, you'll be able to learn about how to create animations using just pure CSS. Let's go ahead and first of all, describe our project. As you can see, we have here full-screen image background. And in the center of the page, we've got a couple of elements. You can see here heading, paragraph, two different buttons. If I reload the page, then heading and a paragraph will appear from the opposite directions with some fade effect. And as soon as they finished, moving, buttons will be displayed in order. All of those animation effects will be created using CSS, keyframes, and a couple of animation properties. Alright, let's get started on the desktop. I've got a new folder called animated landing page, in which we have two different files for HTML and CSS. And also folder called images, which includes one single image for background of landing page. Let's open this folder with VS Code. Inside the index.html file. I've prepared a basic structure of HTML document. You can find here two links inside the head element. One for Google fonts, I'm going to use a font called doses. And we have another link for the CSS styles. Alright, let's run this project in the browser using a live server. If you don't use this package, then I recommend to install the live server from the Extension Manager. It's actually really handy and useful package. Okay, let's go ahead and place code editor and browser side-by-side and start creating HTML markup. He's going to be a simple one. We're going to have just a couple of elements. So first of all, let's create developments which will be a container for the entire content. So let's assign to it class container. Next we need another development which is going to wrap a couple of elements. Let's assign to it class name, banner. And then inside the banner, create H1 heading elements. Let's insert some text. Let's say my website. Actually, I'm going to wrap the website by span element because I want to style the second word of heading in a slightly different way. Next, we need a paragraph. Let's insert here some texts created by code and create. After that, I'm going to create a button with type button. Also, let's assign to it a class name, BTN, left. And as a text, let's insert you explore. Alright, we need the similar button as the second one. So let's duplicate this line of code. Then change the class name we need here, btn, right? And also instead of explore, Let's write Subscribe. Alright, that's it about HTML markup. We are ready to start styling the banner. Let's go to style.css file. At first, we will style all the elements and then we'll take care of animations. Let's go ahead and create some reset styles. Select every elements using asterisk. I'm going to set margin and padding as zero. And also change the font family. Let's use the font called ptosis and then sans-serif. Alright, next I'm going to select container. First of all, let's define its width and height. Set with us hundred percent S for height. Let's use 100 vh. If you're not familiar with VH measurement unit than it stands for viewport height. And in this case, we say that the height of containers should be hundred percent of the viewport. After that, I'm going to set an image as a background. Let's use here linear gradient and pass here some RGBA values. First one is going to be 53, then a two to 66. And opacity 0.5. As a second RGBA value. Let's pass year 47, 80, 63, and opacity 0.6 Next, I'm going to indicate part of image. We have folder called images and we have to select bg dot JPG. Next, we need position of background image to be set a center. Also we need here no repeat. And finally, I'm going to use background sites property with value cover. Alright, so as you can see, the image is set as a background of the container. And now we have to start working on the banner. So let's select it using className Banner. At first, let's set its width as 100%. It means that banner will take up 100 per cent of width of its parent element, in this case container. Now I'm going to take care of the position of the banner. I'm going to place it in the center of the page. Actually, it won't be perfect centering. I mean, I want to center it perfectly horizontally but not vertically. For that, I'm going to use some technique. Let's set its position as absolute. Then define top position as 40 per cent, then left as 50 per cent. So now the banner is moved from top to bottom by 40 per cent and from left to right by 50 per cent. But that's not the position which we want to bind them to have. We have to place it in the center. And for that, we have to use transform translate. We have to pass you the following values. We need -50 per cent and then again -50 per cent. So using transform translate, we moved banner from its current position by 50 per cent to the left side and by 50 per cent to the upside. Next thing that I want to do regarding banner is to place elements in the center inside box. And for that we have to use text align center. Okay, let's go ahead and style heading elements. Select it, right, ban or H1. Let's increase font size. Make it a two pixels. Then change color. I'm going to use your color D, D, D. Also, I want to make font a little bit lighter using font-weight. So 800. And lastly create some space at the bottom using margin, bottom two pixels. Alright? As remember we wrapped second word of heading. I mean website by span element. So I'm going to select it right, banner span. I want to transform text into uppercase. For that, Let's use text transform uppercase. Then make it slightly bolder. Font weight 700. And also make its color white. White collar, f, f, f. Alright, that's it about heading. Let's give some styles to paragraph. Select it, right banner p. Let's define its font size as 50 pixels. Then make texts lighter using font-weight, 300, change color, make it e, e. And lastly, create some space at the bottom using margin, bottom 20 pixels. Alright, so like heading paragraph style as well. And now we have to take care of those two buttons. Actually, they should be almost identical. So at first, I'm going to define some common styles for buttons. Select both of them. Right? Banner button. Define width as 180 pixels. Then create some space using padding assigned to it, 12 pixels. Next I want to create some space around buttons for that, Let's use margin and set it as 20 pixels. Then instead of default border, Let's define custom one, right border with the values two pixels, solid. And let's make color E. Also, I'm going to make buttons rounded using border-radius. Let's set it as 50 pixels. Besides that, I want to increase font size. Let's make it 18 pixels. Then get rid of the default outline using outline none. Also create some space between letters. For that, Let's use letter spacing with value one pixel. And finally, change type of course, make it point. Alright, that's it about common styles for buttons. Now, I'm going to assign to each of them some individual styles. So let's select button, which is placed on the left side. It has a className btn left. Let's change its background color. Use your color, ie E and then change color of text. I'm going to use here color for. Actually we need to similar properties for this second button. So let's go ahead and duplicate this code. Change class name we need here, right? Then I'm going to set background color as transparent. Es fur color. Let's use ie. Okay, So finally, all the elements are styled. The lending page is looking good, and now it's time to create our animations. In CSS, you are able to create animations using keyframes. Inside keyframes, you can define different CSS rules on different steps of animation. Then using a couple of animation properties, you can apply those CSS rules to different elements in order to see it in practice, Let's create keyframes. For that we need at sign. Then keyword, keyframes. It should be followed by the name of the animation. Actually it's optional. You can call it whatever you want. And in this case, I want to name it as move to left. Alright? So this part of the animation is going to be for heading one, heading two be placed to the right side by default. Also, I want it to be hidden in by default, I mean starting state of an element when the animation starts. Then when we reload the page, I want it to move from right to left and also to appear it with some fade effect. So in order to achieve that, we should define those styles inside keyframes. I mean, starting state of an element and its ending state as well. In order to define the styles when the animation starts, we need to write here zero per cent. Also, instead of zero per cent, you are able to use the keyword from. So as we said, heading should be placed to the right side and it should be hidden. For that we have to write to you, transform, then translate X. And as an argument, Let's place here hundred and 20 pixels. And also in order to hide an element, we need opacity. Zero. S4, the ending point of animation we want heading to be placed back on its old position. And also it should be visible. In order to define the ending point, we can write here keyword to. Actually in this case we have only two steps. We are able to use those keywords, I mean from N2. But sometimes, I think mostly we have more than two steps. And then in that case we should use percentage values. So anyway, let's change those keywords and use percentage values. Instead of from zero. Instead of two. We need 100%. Then grab stars from the first step. Insert your zero S for opacity, we need one. Alright, for now, nothing is happening here. The heading is not moving. We need something else to apply those styles to an element, we need to use some animation properties. So let's go ahead and assign two heading those properties. First one is going to be animation name. Let's assign to it a name of keyframes, move to left. And then we need animation duration. Let's set it as 2 s. So if we save that, the heading will move from left to right with some fade effect. Actually here we have a little problem. We are getting a scroll bar down below while heading is moving. That's because by default it's placed on the right side and space on the page is not quite enough. So in order to fix that problem, we need to use overflow hidden. And we have to assign it to the container. As you can see, steel. And maybe unexpectedly we have the same problem here. It happens because banner has positioned absolute. And for now it's working according to the body element. We have to make it working according to the container. For that, we have to assign to the container position relative. So now everything works perfectly. Next, I'm going to create keyframes for a paragraph. It's going to be similar to keyframes of heading. But in this case we need to use an opposite direction. I want the paragraph to be moved from left to right. So let's go ahead and duplicate this code. Change the name of animation. In this case, I'm going to write move to right. Then instead of 120 pixels, we need here minus hundred and 20 pixels. Then go ahead and assign two paragraph properties which we used for heading. So I'm going to grab them, paste for p elements and just change the name of animation. We need to move to right So if we save, then like heading paragraph will move from left to right with some faded effect. And overall it will create a nice animation effect. Okay? So as a guest, now we have to work on buttons by default, I want them to be hidden. And then after displaying heading and a paragraph, I want them to be appeared in order and with some fade effect. So let's create new keyframes. Name it as animate btn. So in case of button, we just need to manipulate on by Opacity. So on zero per cent, we need opacity to be zero. S for 100%. I'm going to make it one. Alright? So keyframes are ready. Let's go ahead and assign two buttons, animation properties. Let's start from btn, left defined animation name and set it as animate BTN. Then as I duration, let's use one-second. Besides those two properties, we need a little delay time because I want Batson's to appear when animations of heading and paragraph are about to finish. So let's use the property animation delay and set it as 1.5 s. Then grab those three properties and paste them for btn, right as well. For the second button, we need a little bit more delay time. So let's change its value and make it 2.3 s. Okay, let's save and see what will happen. As you can see, while animations of heading and a paragraph are running, to be more precise, during the delay time, buttons are visible and as soon as the later finished, they start animating. So we need to hide them during the delay time. And for that we have to use another property called animation film mode. And we have to set it as backwards. So in this case, we say that during the delay time, elements by default will have this particular style. So in other words, during the delay time, buttons will be hidden. Let's grab this code and paste it for the second button as well. Then Save. And here we go. Now everything works perfectly. We have here a nice animated landing page. Alright, actually that's it. Our project is done. And before we finish this tutorial, I want to show you one more thing regarding animation properties. As you can see, we use several of them. And instead of doing that, we can write them in a short way. We just need to use property called animation. And then we have to assign to each name, move to left, which should be followed by duration. Let's copy this line and paste it for paragraph. Change Name. We need to move to right. Let's save. And you see that everything works in the exact same way. Alright? Actually, I'm not going to change properties for Batson's. I think you'll see clearly how it works so you can do it on your own. Okay, Let's see it. We are done with this project. I hope you enjoyed it and learned some useful stuff. See you in the next tutorial. 36. Project 33 - 3D Button: Hi everyone and welcome to our next tutorial. In this video, we're going to build a 3D button using just pure HTML and CSS. And I think it will be really interesting and helpful because you'll be able to learn about some cool tricks and techniques using just HTML and CSS. So let's get started. As usual. First of all, let's describe what we're going to create. So as you see, we have here full-screen background image. And in the center of the page we've got 3D button. It's placed in 3D space. And when we hover over it, it's rotating with really nice effect. So I hope you're enjoying this little project. On desktop, I have created new folder in which I have two different files for HTML and CSS. Also, I've got here another folder which includes an image for background. Let's go ahead and open this folder with VS code. Inside index.html file. We have basic structure of HTML document. Inside had elements. There are two links, one for style.css file and another for Google fonts. Throughout this project, we're going to use phones called slab. Okay? Alright, let's go ahead and run this file in the browser using live server. In order to get this extension, you have to search for it in Extension Manager and install it. Okay, let's place editor and browser side-by-side in order to work in more convenient and flexible way and start building HTML markup. It's going to be a really simple. We just need to create developments, which is going to be container. Then inside it we have to insert button. Let's assign to it class name BTN. And also as a text right here, subscribe. Alright, that's it regarding HTML, Let's go to style.css file and write some styles. First of all, I'm going to create some reset styles. Let's select every elements using asterisks and set margin and padding as zero. Next, we need to take care of container. So let's select it. At first. I'm going to define its width and height. Let's set with as 100 per cent. As for height. I'm going to assign to it 100 vh. Actually, we have explained how viewport height works in other videos. But again, in this case, we say that height of container, it should be hundred per cent of Viewport. Next I'm going to set image as a background of container. Let's use your linear gradient. I'm going to pass your RGBA values, right? 000 and opacity points seven. Then again, we need RGBA value 000, opacity 0.8. Then I'm going to indicate inside URL part of image, we have folder called images. Let's select bg dot JPEG. Then I'm going to define position of background. It's going to be center. And also we need here no repeat. And lastly, I'm going to use background size property with a value cover. Alright, so now background looks really nice. And the last thing regarding container is that we're going to place button perfectly in the center of the page. Actually, we will manage it using Flexbox. So let's write here display flex. And then we need to use justify content with values center and align items. Again with a value center. Alright, that's it about container. Next we have to take care of, but let's go ahead and select it is in class name BTN. At first. Let's assign to eat some usual styles defined width and make it 350 pixels. Then set height as 100 pixels, change background color. In this case, I'm going to use linear gradient. Let's pass your two different colors. First one is going to be 8539, 16s4. Second one, I'm going to pass here 63019. Okay. So that's the way how our button is looking for now. It's really huge, but actually we need this. Let's go on and add some more styles. Gets rid of default border and outline, right border none. And outline none. Then let's go ahead and work on text. Change font-family. Use your font called slab 27 pixels than serif, increased font size. Let's make it 35 pixels. Next, I'm going to make letters uppercase using text transform. Uppercase, also create some space between them using letter spacing. Let's set it as four pixels and then change color, make it white. Step-by-step. Our button is getting nicer. Next, I'm going to add some shadow to text. For that, we have to use property called text shadow. Let's insert here the following values. We need zero, then ten pixels, again, ten pixels and color black. And also change type of coarser. Let's make it point. Alright. At this point with customizing of button, we are done. It's time to move on and start transforming it into 3D elements. First of all, we need to create a 3D environment for Bateson. And for that we have to assign to its parent element property called perspective. Let's assign to each value thousand pixels. Actually, perspective defines how far an element is from the user. Now we need to rotate button According to x and z directions. So let's assign to it transform property. At first, let's rotate button along x axis. Rotate x, and insert your 70 degrees. So as you can see, button is rotated, but besides x direction, we have to rotate it along z-axis as well. So we need here rotate Z with value 30 degrees. Alright? So that's the position which we want them to have by default. Now we need to give button shape of cuboid. Actually, cuboid is like a cube, but it has shape of a rectangle. We are doing that in order to transform it into even more 3D elements. I would like to note that this is going to be not quite simple stuff. We will use some advanced things from CSS. So I recommend to be more concentrated and focused on things that we're going to show. So we're going to use before and after pseudo elements. Let's select button with. Before pseudo elements. Write btn before live content as empty, assigned to it empty string. Then define the width as hundred per cent and height as 15 pixels. In order to make elements visible, let's assign to it background color and make it red for awhile. I mean, just for demonstration. Also, we need to define this position because otherwise height and width won't be applied to it. So let's set its position as absolute. So here is before pseudo elements, we need to change its position and place it somewhere here in front of button. So let's set bottom and the right positions as zero. The element has changed its position, but that's not what we want. Eventually, we need to rotate it along x axis by 90 degrees. Alright? So as you can see, at this point, element is no longer visible. The reason is that it doesn't have its own 3D environments because it's a child element of button. And it doesn't inherit displays from container. In order to achieve that, in CSS, we have property called transform style, which should have value preserve 3D, and we have to assign it to. But so let's write transform style and assigned to it preserve 3D. Element is displayed back bad we have here another problem. By default, origin of transform is set as center. In other words, you can imagine that x axis goes in the center of elements. In this case, we don't want it. We want to make origin of transform bottom. Actually, I know that this stuff is a little bit hard to understand, but that's the way how it works. If I have traveled to understand it will be better to test those things on your own. So let's go ahead and write transform origin and set it as bottom. Alright, so let's see what we want it to get. Step-by-step. We're getting the shape of cuboid. Now, I'm going to change background color. Let's use colors from linear gradient combination. I'm going to copy second one and paste it here. Now as you can see, it looks much better. So like front side, we need the same. On the right side. We have to create it using after pseudo elements. Actually we're going to need similar properties. So let's duplicate this entire code. Then change before into, after. First of all, let's change positions instead of bottom, we need here top. You see elements ended up behind the button. So we need to rotate it according to y-axis with value -90 degrees. So you see where elements is ended up at a glance, it looks weight, but the reason is that we need to change values of height and width. In case of after pseudo elements, we need to switch values for height and width. Width as 15 pixels in height with hundred percent. Okay, Now we're almost there. The only thing that we have to do is to change origin of transform. In this case, instead of bottom, we need to make it, right. Alright, so finally we got here, needed to shape. The last thing regarding its style is to change background color of after pseudo elements. In this case, let's grab first color from linear gradient and paste it to you. Okay, That's it about Batson. Now we need to make it working. I mean, we need to create hover effect on hover. I'm going to rotate it along x and z-axis. So write btn with hover and insert your Transform. Rotate X with arguments 30 degrees. Then we need to rotate Z with zero degree. And finally, for smooth effect, I'm going to use transition. Let's write here transform with duration 0.5 s. Alright, let's hover over the button. And he said that we have really awesome effect. Okay, So that's all about our projects. We have created cool 3D button, and I hope you enjoyed it. Thanks for watching. See you in the next tutorial.