The Complete Responsive Website - HTML, CSS, JavaScript | George Lomidze | Skillshare

The Complete Responsive Website - HTML, CSS, JavaScript

George Lomidze, Developer / Designer / Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (2h 26m)
    • 1. Promo

      1:30
    • 2. Introduction

      8:24
    • 3. Header

      24:04
    • 4. Cards

      32:10
    • 5. Stories

      14:09
    • 6. Contact

      20:41
    • 7. Footer

      6:57
    • 8. Navbar

      24:25
    • 9. Make Project Responsive

      13:19

About This Class

The Complete Responsive Website from scratch with HTML, CSS,  and JavaScript. If you want to learn about how to build modern, beautiful and responsive websites, then this is the right class for you.

The project will consist of a couple of different sections. We will be building header, cards, stories, contact section, footer and navbar. We will use CSS Flexbox as the layout tool. Also, you will be able to use CSS 3D transforms, transitions and CSS keyframes.

The project is full of modern and cool features and techniques.

Throughout the class if you have any questions, then you will get fast and friendly support from the instructor.

Transcripts

1. Promo: 2. Introduction: hi and welcome to our new class on skill. Sheer. In this video, Siri's we will build a complete responsive website from scratch with HTML, CSS and JavaScript. The project is going to be something like a tortoise website template. I called it the Road again. The project will be built based on HTML, CSS and JavaScript. We will use CSS flax books as the layout to Also the project will include differences. The teachers like CSS variables, CSS animations and lots of other interesting and cool stuff. So I hope the project will be interesting and you will enjoy it. If you don't feel quite confident in those technologies, then you can check out my other classes where I teach all of them in detail. Okay, before we start to build the project, let's go ahead and describe it, so we will have a couple of different sections. We will start with a header, which includes several parts. We have some tax on the left side. Also, there is an animated logo at the top, right corner off the header. And besides that, you can see here an animated air balloon. It seems that it flies in the air and actual creatives effect with CSS three D transforms transitions and CSS key frames at the top left corner. We have a menu, Eichel. If I click it, then the navigation menu will display with a couple off navigation items and also at the top right corner, the closing experts and will display If I click it, then the menu will close. All right, let's move on to the next section, in which we have three cards representing the most popular tours. Each card has two sides, the front side and the back side and the front side. We have some details about the tours, and if I click the price buttoned them, the backside will display the price details. All right, next comes through story section. I'm in these stories off the customers from the tours. This section will have a video background. I decided to use it because nowadays it's a popular and in demand feature, so you will be able to learn how to set the video as the background. After that, we will build a contact section with a couple of input fields, and also this section will have a animated background image as you can see it changed its colors, and we get a kind of day and night effect, All right. Lastly, we have here a little footer within navigation items, and they have some nice and cool hover effect. Okay, so that's what we're going to build. The project will be responsive to different screen sizes. If we open up developer tools, then switch to the Responsive Mode and Chocolate Project on different screen sizes. You will find that it's fully responsive so you'll be able to learn how to use CSS media queries to make the project responses. I want to mention he one thing. The project is built with a dust up first approach. We have built it on the largest queen size. I'm in the screen size with 1920 pixels off with and 10 80 pixels of height. So through all the working process, it might not look good on smaller screen sizes. But at the end of the day, we will make it responsible. If you're using a relatively smaller Smith size, then you can just switch on responsive mode and specify here the width and height off the larger screen size. All right, so actually, we're ready to start to work on the project. I've created a new folder on the desktop called The Road, in which I have a couple of different files and the folder for images. Let's go ahead and open it in V s code. So right now, CSS and JavaScript files are empty. As for the index of HTML file, we have here the basic structure off the HTML document in the hand elements. I have two different links one for the Google phones on the 2nd 1 for the CSS file. And also I have prepared script tuck for JavaScript file. Okay, let's run the project to the browser. For that, I'm going to use one of TVs code packages called live Server. It ellos us to run the project, live to the browser and make updates without refreshing the page each time. So I recommend to install and use this package. Okay, so finally, let's place the editor and the browser like So before we introduce some content, I'm going to create some reset and common styles in CSS. First of all, I'm going to get reductive default margin and parting from every elements in order to select them. We have to use an asterisk, and then that set margin and parting both off them to zero. Then I'm going to change the phone family. Throughout this tutorial, I'm going to use one of the Google phones called Full Corn. Sorry. Also, I want to get rid off the default bullets from the list items using least style type. None. Also, we don't need the default link styles, so let's used text decoration none. After that, I'm going to set the box sizing property to border books and finally get rid off the default outlines using outlined. Not okay. So throughout this project, I'm going to use RAM as the measurement unit by default. One ramp equals 2 16 peaks is because the phone size off the HTML element is equal to 16 pixels. I want to convert one room into 10 pixels, so for that we have to decrease the phone size off the HTML element. Let's make it 62.5%. So right next, I want to create a couple off CSS variables for the colors that we're going to use. We will use five different colors and instead off specifying them each time. I think It would be better if we told them in the variables and then use those variables. So we need to use the variables on the global scope. Therefore, let's select a route and then specify the color names and the values. 1st 1 is going to be primary color. Let's face it. Year to be eight one e four. Next, we will have secondary color. I'm going to use your E. Next thing. I should be white color s f f. Then I'm going to use great color with value 555 and finally light gray color seven 77 All right, that's it about the colors. Next, I'm going to select across center. Actually, throughout this project, we're going to use flax books to manage the layout and in most cases will need to center the elements perfectly. For that, we have to use three different property value pairs and in order to avoid writing them every time, we will insert them here, and we'll just add classed center to the HTML elements, which we need to be centered. So that's insecure, display flex, then justify content center and a line items center. All right, so that's it about the common cells. Now it's time to start to create the H demon market 3. Header: Let's open developments, which is going to be container. Actually, it will include the entire content off the project. So we're going to create the mark up off the header and then we will add to eat some CSS so we'll build our project section by section. Let's open Heather Element and assigned to the class heather so they had their will consist of three different parts. The 1st 1 is going to be detects, which was placed on the left side, so it's open a development with a class header text. The text will be represented by heading and paragraphs, so we need to open the H one heading element with class heading and with text around the world. Next, I'm going to open P element with the Class Lane Heather paragraph and then let's execute some text traveling. It leaves you speechless, then turns you into a story teller. All right. Next I'm going to institute an image. I'm in the image off the air balloon. Let's specify here the path off the image. We have the folder images and then we need to select air balloon dot PNG. Next, I'm going to insert. Here's the text header image. I mean, as the value of the art attribute. And finally, let's assigned to the image element class attributes with the value had their image. Okay, so here we have the air balloon image and finally, we have to create a logo. As you remember, we will use an animated text as the logo, so let's open a development with the class logo. Next, I'm going to interview the H one heading element. So each letter in the heading will be represented by this parliament because we need to create animations with a difference. Delay time for each letter. So it's open span, element and instant here. The first letter T then duplicated six times and change the letters for the 2nd 1 We need age, then E then our oh a and deep, they wrote. All right, some. That's it about the market for the header. Now it's time to customize the sexual. Before that, I want to take a year off the container, so let's go ahead and select it. I'm going to change the background color. So as you know, we created a couple of variables for colors and in order to use them, we have to use here. The bar function, which actually stands for the variable as an argument to have to pass here the name off the variable in this case secondary color. So as a seat, background color has changed for the container. Next, I'm going to create some space around it using margin. Let's make it 3.5 ram. Besides that, let's create some shadow effect. Let's use books shallow with their following values. When it zero, then one room, three room and as the color. Let's use again of our function with the color. Great. All right, so right now that's it about the container. Next, we need to start to work all the header. First of all, it's defined within height. I'm going to set with as 100%. As for the height, I'm going to make some calculation. Let's take a look at the finished project. So as you see at the top off the header and at the bottom of it, we have the same amount of space, each of them equal to 3.5 ram because the size of the margin equals to 3.5 ram. Now, in order to create the same space at the end. Off the header. I'm going to use the following calculation. We need to use skulk function, which stands for calculate. Then we need to subtract 200 view Put height. Seven round, Actually, 100. Beaufort Hide is equal to 100% off the view put, and the seven room is this some off the space at the top and at the bottom. So is concede. No, we have the same space around the heather. Okay, next, let's define the background for Heather. I'm going to set the image as the background. First of all, let's use linear Grady int. I'm going to use to similar colors, but with different capacities. So the color is going to be 18 1 13 2 55 and the opacity 550.5. Next, we need the same color, but with opacity 0.3. After that, I'm going to specify the pass off the image using the URL function. So we have folder called Images, and we need to select Header Dash BG Doc jpg Next minute center and no repeat. And finally, let's define the size off the background. I'm going to make it color. All right, so as you can see the images set at the background on it. Although day looks good, the next thing regarding behavior is to airline. It's child elements. For that, I'm going to use flax books. Actually, I will not assign flex properties to it manually. As you know, we have already created class center, and I will just assign this class name to be header in the HTML so all three parts of the header are centered inside of it. Okay, let's go ahead and customize the header text. So we need some common styles for the heading and paragraphs as well. And for that we can add some stars to their parent element. So I want to send to the tax inside of the box that's east of your text align center, then transform tax into uppercase and create some space between letters. Let's set. Let's a spacing 2.1 rep, and now we can customize heading in paragraph separately. Let's start with the heading. I'm going to increase its phone size. Let's make it a tram and then change color. I'm going to use your white call, okay, that's it about the heading. Next, let's take a year. Off the paragraph. Let's go ahead and select this element. Increase the phone size, make it three ram, then change the phone. Tweet. I'm going to make it 500 and finally change the color in this. Guys, I'm going to use secondary color. All right, some. The paragraph is styled as well, but I think it is stretched too much, so I'm going to define the maximum with for the paragraph. Let's use months with property and make it seven to run. And finally, no dissent of the text. Let's use margin, Otto. Okay, so no, I think it looks much better. Actually, with Heather text, we're almost done. The only thing that I want to do is to add some shadow effect, both off the elements. So that's ad text shadow to the parent element, where the values zero 0.3 room 0.5 run and as the color. Let's use great color. All right, so finally we're done with the header text, and now we have to move on and start to work on the logo. It should replace at the top right corner off the heather for that winning to use the position. Let's select the logo and make its position absolute. Next, I'm going to make the position of the header relative because we need to define the position of the Lago according to its parent element. And after that, let's defined top in the right positions. I'm going to make both of them for rent, so the logo is placed at the top right corner, and now we have to customize it. As you know, Agent Letter is wrapped by this parliament, so let's go ahead and selected. Let's increase the phone size, make it to ram, then change from weight. I'm going to make them bolder, so it's a scientific 900. Then change color. In this case, I'm going to use primary color, then transformed text into uppercase and finally changed the background color. Make it white. Okay, now we need to define the width and height off each letter. Let's make both of them three points, vibrant as you can see within Heitor, not applied to letters. The reason is that this pan element is an in line element, Therefore we cannot define with and hide for it. In order to fix that, I'm going to make the block level elements for now because eventually but will use flex books. So let's use you display block. Now. The width and height are applied to the letters, and also they're placed vertically in a column because it's the default behavior off the block level elements. All right now, in order to place them side by side horizontally, let's use flex books. Select H one heading Element is the parent element for this pants assigned to eat display flex. Okay, now we need some space between the letters and also make them around. It used margin with value 0.5 ram and then for the radius 50%. Besides that, I'm going to get rid Doctors play block from here because right now, this pan elements are flex items and we no longer need this property. All right. The last thing that we need here is to place letters in the center off those circles for that Nazis again class center, and assign it to all the span elements. All right, so the Lago is customized, and now it's time to create the animation. For that, we will use CSS key frames we need at sign key frames which should be followed by the name off the animation. Actually, you can name the animation, whatever you want. So inside the key frames weaken, define some CSS rules with some steps, and then we can apply those rules to the elements using the animation property. So we will have five different steps. They will be represented by the percentage values. I'm going to start with the 0% and go through 100% from 0 to 10%. The letters shouldn't move. So therefore, we need here the following. We have to indicate here 0%. Then inside of the color braces, I'm going to use transform with translate wife function, which would have the value zero because we don't need to move the electors. Next step is going to be 10%. Actually, we need here the same transform. Translate. Why? Zero after that, from 10% to 15% I'm going to move the letters up, so next step is going to be 15% and we need you transform. Translate. Why, with the value minus 100% then from 15% to 20% we need to drop letters down back to their positions. So on 20% we need again transformed. Translate Why zero? And finally, from 20% 200% letters should stay on their positions. So we need again transform, translate. Why zero? All right, sell. These are the rules, which we should apply to the letters, but with a different delay time. We need a difference delight time to move them in order. So we have to select a SPAN element separately. And for that, I'm going to use the child pseudo class. So let's select logo H one and then spun Fold by the F Child Selector. And we have to specify here the first spinal. No, we need to assign to the element different animation properties. The 1st 1 is going to be animation name. Then it should be followed by the duration off the animation. For that, we have to use the property called animation duration. Let's set it to five seconds. Next, we need the delay Time for the first letter. I'm going to use 0.1 2nd in order to define the delight time we have to use animation delay . It's a scientific point on Second, and finally, when it's a specified value off the animation, it's oration count property. In our case, we need to run the animation infinitely. So when it here. Infinite. All right, So we have defined the animation for the first letter. For that, we have used to you a couple off animation properties. Basically, in practice, we can use a shortened way. We just need one CSS property called animation. Instead, off using several animation properties so we can use it here. Animation and the following values. The 1st 1 is going to be the name. Then we need duration. Five seconds, followed by the delay 0.1 2nd And finally, we need infinite. We can simply get rid off all those properties from here. So let's go ahead and duplicate this code six times because we have seven letters, then changing number off the lighters and also changed the delay time for the 2nd 1 We need 10.2 seconds. Next, we need 0.3 seconds. Then for the fourth lecture, when you 0.4 seconds 0.5 2nd next one is going to be 10.6 seconds. And then finally, we need 0.7 seconds. All right. So, as you can see, the animation is working and we have here nice cool effect. It's actually we're done with the logo, and now we have to move on and take here off the image. I mean, the air fellow. Let's go ahead and select an image. First of all, let's decrease its size. Make its with 35%. Let's take a look once again at the finished version off the project. So as you can see, Air Balloon is moving through the headers background image. To achieve that, we need to create a three D environment, and for that in CSS, we have a property called perspective, which we need to assign to the header. In general, the perspective property defines how far the object is away from the user. The lower value will create a more intensive three D effect. So in our case, we need a little bit higher value. So it's a scientific 100 grand. All right, black the logo. We have to use CSS key frames here as well. I'm going to name the animation as image float, so overall we will have five different steps. We will move the beldam through the image using the transform with translate Z function it l o system of the object in three D space. So from 0% to 40% we need the following properties and values we need. You transform translate Z with value for to run. In this case, we use a positive value, and it actually moves the object close to the user. In order to show it, I'm going to assign it to the image directly. So that's the way how translate Z function works. If we make the value negative but say, minus 400 rounds, then the image will be placed deep inside the header at a glance. You may think that the size of the images decreased, but in fact the images far away from the user. All right, let's get rid off this line of code from here. So besides the transformed property I'm going to use capacity during the animation will change the opacity slightly on 0%. Let's make it one. Actually, you can omit this property at all here because by default, capacity for every element is set to one. But I use it any way to make the working process clearer. All right, that's it. About the 0%. The next step is going to be 40%. So from 0 to 40% we need to move air balloon deep inside the image. Therefore, we need here transform, translate, see with value minus 500 run. And besides that, we need to move the Belem a little bit to the right side. So I'm going to use translate X function with value 1 50 rent. We need this because the ballon moves to the center off the image by default. Lastly, let's use capacity. I'm going to decrease it slightly. That's making 2.8. All right, The next step is going to be 70%. Let's duplicate this stuff here. I'm going to change the values we need. 70% self from 40% to 70%. We need to move the balloon even deeper inside the image. So I'm going to pass here minus 1500 ram. As for the X direction, we need to change the direction off the balance explicitly at the same time. So I'm going to increase the value of the translate X function. Let's make it 800 ramp and finally decrease the opacity making 0.6. Okay, then that step is going to be 80% so once again, let's duplicate this coat from 70% to 80%. We need to move the balance back. I mean, closer to the user. So let's change the values that's interfere minus 50 rounds. Then we need 100 ramp and the opacity 0.8 and finally on 100%. We need to make the value off translate Z property function equal to the starting point. So we need transform, translate, see with value 40 round and the opacity one. All right, So with the key frames were done. And now we need to apply those rules to the image using the animation property that's assigned to it. The name image cold. Right now I'm going to define the duration as five seconds in order to see quickly the entire animation process. Also in eight year to make the animation infinite. So it's concede the balloon is moving in the right way. The only problem that we have here is those scroll bars. And actually we can fix that simply by using overflow heating. We should be assigned to the contain. All right, so everything works fine. Let's just increase the duration off the animation. I'm going to make it 1 50 cents. All right, so that's it about the header. Everything was perfectly. And now I have to move on and start to work off the next section. 4. Cards: actually step by step, the code becomes larger because the project itself is big. Therefore, before we start to build the next section, I think it would be better if we add some comments in our HTML and CSS files. So we have here a header. Let's insert header then and off header. The next section is going to be about popular tours, so let's at here popular tours and then end off popular tourist. As for the CSS at the beginning, we have some common styles. So I'm going to put here common styles and then at the end, right and off calm styles. Then we have the header then and off header and finally and want to adhere popular tours and off popular toast. All right, let's take a look once again at the finished project, so we're going to build the second section called the Popular Tours. It consists of heading and three different karts. Each car has two sides, front and back. On the front side, we have a button image image background with heading on down below. We have some conditions about H tour. If we collect the price button, then the backside will display with the price and the bottom for booking. If I click the back button here than the front side will display back, all right, so that's it. What we're going to do. Let's go ahead and start to create the H demon markup. I'm going to open section elements with class popular tours. Next, I'm going to insult here H one heading with the class name Popular tours heading and with the text, the most popular tours. Next, we need developments, which is going to the wrapper off the cards. So let's assigned to a class name carts robber. After that, I'm going to create the card itself. So let's go ahead and open a defeat. Tuck with a class cog so we will create one card, and then we will duplicate it twice as beset, each carcass itself to different parts of the front side and the back side. So it's insert another development with the class name front side. So in that development we will have an image heading least and the but So let's answer to you. I am G element in the source attributes. Let's specify the part off the file. We have images, folder and Then I'm going to select Forest Doc Jpg and the altar attribute. I'm going to put Forest, and also I'm going to adhere class attitude with the value carved image. Next, we need the H one heading elements with a class name Tor name. Let's institute the name off the tour, which is going to be the wild forest, so the conditions off the tour will be represented by the least. That's open you element with a class name card least. So overall we will have five different least items that's open Ally Element with a class name, card, least item and insert here the first condition, a seven days tour. Then I'm going to duplicate it four times, and also we need to change the content. The second item is going to be up to 20 people. Next, we will have four tour guides also sleep in private tents, and finally, I'm going to put you difficulty medium. The last element in the front side is going to be the button, so let's open bottom tug with the class name navigation bottom. I used to your navigation because we will navigate between the front and back sides with the help off this button. That's east of you. Price. Besides that, I'm going to use HTML five entities. I want to display the greater than science. So for that we need to insecure and percent GT, which stands for greater them. Then we need semi column and once again the same. All right, so that's it about the front side. Let's go. I hadn't created backside. It's going to be smaller because we will have just three different elements. Let's go ahead and open thief tug with the cross name backside. Then let's go ahead and copied this bottom from here. So instead, off the price we have to put here back. But we need to write it after the age team of five entities. And also instead, off the greater than science, we need less than science. So instead, off GT, we need you, lt. Okay, next comes the heading. So it's open h three heading tug with the class Name your price. I'm going to put here 3 $99. And finally we need another bots and for booking. So it's open bottom talk with a class car bottom and then insert year booking. All right, so that's it about the first card overall will have three of them. Let's go ahead and duplicate the entire card twice and then change a couple of things we need to select here. River dots jpg Also change out a tribute we need here River, then as the heading I'm going to put here along the river. Next, I'm going to change the conditions we need here. Nine days tour up to 30 people. Seven total guides. The next condition is going to be the same, so I'm going to leave it as it is. As for the difficulty, let's make it hot and also changed the price. Let's make it 4 $99. Okay, let's go ahead and change those things for the third card as well we need here. See thought J. P. G also changed a value off the out attribute I'm going to put here. See the heading is going to be the island beach. Then change the conditions we need here. Five days tour. Next one will be up to 40 people, eight tour guides, then sleep in hotel. Then I'm going to make the difficulty easy and finally changed the price. Make it 5 19 adults. All right, so the HTML markup is ready Right now. Cards look at way because we have here just the pure HTML. Let's go ahead and start to rise from CSS. First of all, I'm going to create some space on top and bottom. So let's select Section Element, which has the class popular tours and assigned to it. Parting. I'm going to make putting on top five room, then zero on the right side, 10 round at the bottom and finally zero on the left side. Okay, next, I'm going to take here off the heading off the section. Let's silverback disarmament. So first of all, let's increase the phone size, make it a tram. Then I'm going to put the heading in the centre using text Align center. Next, I'm going to create some space at the bottom off the heading, using margin bottom. Let's set it to eight ram. Change the color. That's youth you call our primary, and finally I'm going to create some shadow effect using text shadow with the following values we need here. Zero then points one room going to RAM and the primary column. Okay, So as concede the heading is styled, and it looks good. Next, I'm going to take here off the cards. First of all, it's aligned them side by side horizontally. For that, I'm going to select carts. Rapper assigned to it display flex, then in order to create even space between the carts that seems justified. Content space evenly. Okay, so the cards are placed side by side, but right now we don't have the space between them. The reason is the with off the images, so let's go ahead and take care of them. First of all, selected card itself on define its with. I'm going to set it to 35 around, then select an image with the class card damage and define its with. Make it 100%. So in this case, the image will inherit the with from the power element. Now, as you can see, images are smaller and we have the space between the carts. All right now, let's go ahead and start to work on the front side. I'm going to select it at first. Let's place the tax in the centre using text, align center, then change the background color I'm going to use year wide scholar. After that, I'm going to make the front side a little bit rounded. Using border radius callings career on All right, so right now we see a border radius only at the bottom because off the image. So we need to make the top corners off the image around as well. So that's assigned to image border radius. When you want to make the individual corners off the element around it, then you can assign several values to the border radius property. The 1st 1 belongs to the top left corner. Let's make it a 10.3 ramp. Next comes the top right corner. I'm going to set it to the same value 0.3 Ram. Then we have the bottom right corner. Let's make it zero. And finally, when you to specify the bottom left corner with make it zero as well. All right now we have border radius on all four corners off the card. Let's go ahead and customized the heading out. First of all, I'm going to increase the phone size. Let's make it 2.5 rounds. Check the phone. Wait, that's sat it to 700 and also transform tax into uppercase After that, I'm going to change the position of the heading. I want to place it at the bottom, right corner off the image. So let's make its position absolute that in order to position according to its parent element, which is the front side, we need to assign to the parent position relative. And after that, let's define the top and right properties. I'm going to set top to 30%. As for the right position that's making 1.5 run. Okay, so they're heading is positioned next, I'm going to change its color. Let's make it white and also add to eat some shadow effect, use text shadow with values zero zero one room and the black color. All right, so that's it about the heading. Let's go ahead and move on to the least. Let's select police element using Carly's I'm going to define its with. I mean, I want to decrease its with, So let's make it 80% that in order to center the least, we need to use margin or oh, and finally, let's create some space inside. Off the least, I'm going to set parting on top to to Ram then zero on the right side. Three remedy bottom and zero on the outside. All right. Now it's time to customize the least items, so let's go ahead and select them. First of all, let's define the phone size, make it 1.6 run, then changed the phone. Wait. Set it to 500 and a chance to call, though. And this guy's I'm going to use light gray color. Okay, so the items look better, but we need to add to them some more styles. Let's create some space at the top on the bottom off the item, using margin with the values to ram on zero. Then I'm going to create border at the bottom. So let's use property called border bottom with values 0.1 run solid and the primary call. So as you can see, each wished item has a border at the bottom, but they are too close to each other, so we need to add some space on Let's create the space using parting at the bottom with value 1.5 run. All right, so everything is styled except the price button. Right now, we're not going to style it because both buttons I'm any price Bottom in the back button have the same cross, and I think it would be better if we start at first backside and then take your off the buttons. So let's go ahead and select backside. First of all, I'm going to take you off the position. Let's make it absolute that in order to positioning, according to the card, that's a sign to the card position relative, then defined the top position. Let's make it zero and change the background color that's setting to the primary call, right? So that's the way how the backside looks right now. I'm going to expand it to the entire card for that. Let's set within height too 100%. All right. Next, let's make it around it. And also add to its, um, shadow effect. I'm going to use border radius with value 0.3 ram and then box shadow with the values zero to run four room and the color 777 Okay, now we have to align the elements inside the backside, and then we have to customize them. I'm going to place the elements in the center for that. Let's use flag spokes and just at the class name center to the backside in HTML. Okay, so the elements are placed in the center of their place, side by side, and actually, we don't need it. We have to change the flex direction and make it a column. All right. Next, let's go ahead and customer the price in the bottom for booking. Select your price. That's increase its phone size, making five run change the fault. Wait. I'm going to set it to 300 then Maxie, Color White and also create some space at the bottom using margin Bottom three round. All right, so the price looks nice. Let's go ahead and move on to the but let's select it. I'm going to change the color. Let's make it primary. The change, the background color. I'm going to make it white. Get rid off the default border using border none, and then change the phone Size maggot 2.5. Run. All right, let's go ahead and add some more styles. I'm going to create some space inside of the button, using parting that started to one room on top and bottom and two rams on the right and left sides. Also, I'm going to increase the space between the letters using letter spacing points to run, then make the button wronged. Using border radius. Let's set it to five. Run. Finally, change the type of the coarser. Make it pointed. All right, so the price and button are customized. And now it's time to style the navigation buttons I'm in the back, Barton and the price button, which is placed on the front side. So let's selecting navigation bottom. First of all, I'm going to place it at the top left corner off the card. So let's set its position to absolute, then define the top and right properties. I'm going to set both of them 2.5 run. Okay, okay, so the button is positioned. Now let's go ahead and customize it. I'm going to set parting 2.5 ram, then change background color, and this guy's I'm going to use our to be a value. I mean the white color with the opacity 0.8. Then change the color. I'm going to use your light gray color. Then make the button rounded using border radius 0.3 room and get rid off the default border using border None. Okay, Finally, let's customize the text. Do you find the phone size? Make it 1.5 ram, then set phone. Wait to 600. Also trans phone text into uppercase that creates and space between letters using letter spacing points to ram. And finally my courser pointed. Okay, so both sides I'm in the front and back are styled. Everything is prepared to make the card work. First of all, we need to display the front side back for that. Last year's in next property. Let's set into 10. After that, we need to create a three D environment because, as you know, front side on the backside should move in three D space. So in order to create a three D environment, we have to use a property called perspective that sounded to 1 50 ramp. Then we need to move the backside with the translate dizzy function. So let's use transform translate Z with the Value mines five run. And besides that, we need to move it a little bit to the right side. For that. Let's use translate X function with the value three ramp. All right, so both sides are placed in the right way Next I'm going to decrease the opacity for both sites, but with different values. I'm going to make the opacity off the front side 0.9. That's for the backside that's assigned to capacity 0.5. All right, so now we're ready to create the click events and make the card work. For that, we're going to use JavaScript. So once we click the button, then the backside should display. And also the capacities and shadows should change. So let's go to script dot Js file. First of all, we need to select both buttons. Both of them have the same class name navigation button, and in order to select them, I'm going to use a query selector, all method. Inside the parenthesis. We have to specify the class name, which is navigation. But so this method returns a note least, which is an array like object. We need to transform it into an array. Then we have to look through the buttons on attached to both of them on click event handler . In order to transform no loose into an array we need to use Yes, six Array does from method than to look through the items and to attach to them on a click event handler. Let's use one off the air. A helper Methods called for each. Actually, this method helps us to execute the function for each array item separately. We have to pass you a call. The function which should take one argument. And it's going to be the current item off the array. And now we need to attach to the item on click event handler. So we need item dot on click, and we have to assign to it an arrow function. All right, so let me explain what were going to do. Actually, we're going to create a new class in CSS, which then will be assigned to the card from JavaScript. This class will help us to define new CSS styles which that should be applied to the front and back sides on quick. So now we need to assign to the card the cross change. It will be the name off the new class. In order to select the card, I'm going to use dump navigation in this case, I temporary first to the navigation bottom. Then we have to move one level up using the parent element property. Then we need to move again. One level up and finally we will reach to the court. Okay, Now I have to use a property called Colossus, least which stores all the classes the element has. And then we have to use the toggle method. Sell the total method. That's the class name to the element if it doesn't exist and removes it from the element even exists. Finally, that's instantly the class name change. All right, so that's it about the chalice script. Let's go back to CSS file and select the class name change. It should be followed by the front side, but we need to use here one off. The CSS Combinator is called Child selector, which is expressed by the greater than sign. Actually, the Child Selector select all elements that are the Children off a specified element. So once we click the bottom, then the car will get a new class change, and this entire selection will be valid. Now we have to define the styles that we want to assign to the front side. On click, both sides will exchange their positions shadows, capacities on disease in next property. So for the front side, we need here transform translate Z function with a value minus five run. Also, we need translate X we value through Iran. Next comes books Shadow with the values zero to ram four. Run and the color 777 Next, I'm going to set capacity to 0.5. As for the Zeon next, it should be equal to zero. All right. Next, we need the same for the backside. I'm going to copy this code from Pew and pay. Sit down below with the backside when it backside instead off the front side. Let's change the values here. We need zero and stand again. Zero. As for the box shadow, it should have zero 0.5 room to ram on the color. A. Next I'm going to set opacity 2.9 as far as Ian Eggs. I want to get rid of it, All right, so if I click the buttons than the card will work fine, the only thing that we have to do is to make the effect smoother. For that, we have to use transition. It's insert your capacity with the duration point for a second. Next, we need transform with the same duration and also box shadow point for second. Actually, we could use here all instead off those properties. But then, in all, we would include Seon Knicks as well, and it would break the effect. Okay. Lets copy this line of code and pacing for the backside as well. All right, so now everything works perfectly. We have nice, cool transition effects. Actually, we're done with this section, and it's time to move on and start to build the next one. 5. Stories: the next section is going to be the stories. I mean the stories from the customers. Let's take a look at the finished project, so we have to customers with their stories on the video background. So 12 this part, you will be able to learn how to set the video as background. All right, As usual, let's go ahead and start to create HTML markup. Actually, first we will build the stories. And then after that, we'll take here off the video background. Okay, let's insert. You knew Commons stories then and off stories an open section element with the class stories. Next, we need a developments, which will wrap both stories so it's assigned to a class stories rapper. So overall we will have two stories That's open development, which will be used to create and manipulate the background off the story. So assigned to it a class story BG and then put here the story itself. I'm going to open another defeat tuck with a class story, so each story will consist of an image heading on the paragraph that's answered here. I m G elements and the source attribute. I'm going to specify the path off the image inside off the images folder. I'm going to select story. I'm G $1 jpg. Then, as the value off the art attribute, I'm going to put here customer image. And finally, I'm going to adhere class attribute with the value story image, so the image should be followed by the text off the story. As we said, it's going to be the heading and the paragraph. They will be a wrapped by the development. So that's created with the cross story text that incident year H one heading Tuck with the class name story heading, I'm going to put here some text. Let's say these were the best days off this year. Next, I'm going to create a paragraph with the class story paragraph and I'm going to put here some dummy tax. All right, so this is the first story we need to off them. So that's duplicate it wants and then make some changes. I'm going to change the name off. The image is going to be story. I'm g to Dr A. P. G. Also change the heading here, right? I enjoyed the's great talk. All right, so right now that's it about the html markup. Let's go ahead and start to write some CSS. I'm going to easily Hugh New Commons stories and off stories, then still like this section element and create some space at the top and bottom using putting we need here 10 round and then zero on the left and right sides. Okay, after that. But select the wrapper off the stories. So I'm going to place stories in the center off this section, and they should be placed vertically for that. Let's use flax books. I mean this play flex in general display flex alliance elements side by side horizontally. Therefore, we have to change the direction, and we need to make it call, so we need flex direction called then, in order to center the elements horizontally, we need a line items center. Okay, Next, let's select background off the story. It has class name, story BG. So eventually the background off the story will be similar to white color. But right now, before we take care of the video background, let's make the background color off the stories light great in order to make it visible before we move on and add some more stars to the background. Let's take a year off the images because right now, there to Bigger. So I'm going to select the image, first of all, as defined within height. Let's make both of them 20 ram. Also, I'm going to you make them rounded, using for the radius with the value 50%. And besides that, we have to use object feet cover. Okay, let's go back to the background. I'm going to create some space inside of it. For that, I'm going to use putting that's setting to five run. Then we need some space around the background for that. Let's his margin on Set it to five. Run as well. All right. After that, let's increase the with off the background, make it 70% off the section and then creates him shadow effect using box shadow with the values zero to rent five run and as the call. Or I'm going to use RGB, a value that's place year 51 3 times and than the capacity point for All right, so step by step, the story looks better. Let's take a look once again at the finished project, as you can see the shape off the background is different, it is skewed. And we're going to achieve that using transform with skew X function. Actually, it allows us to skew the element according to the X axis. So we need transform that skew X function. And inside the parentheses, I'm going to insert 20 degrees. Okay, So as can see, the background is skewed, but we have here a little problem. The content of the story is skewed as well. In order to fix that, we can skew the story itself back by the same degree. So we're going to select story and I'm going to pass here, transform skew X, and as the value I'm going to pass minus 20 degrees. All right, so now the problem is fixed. Next, I'm going to place the image and they text side by sight for that. Let's use display flex. Okay. After that, let's customize heading in paragraph. But besides that, I think we need to add some space between the image and the text. So it's used margin right? Five rounds. Okay, let's go ahead and select. Heading elements has class name story heading. First of all, let's take you off the phone size. I'm going to make it 2.5 run, then tries for eight into uppercase. Also, change the color. In this case, I'm going to use great color. And lastly, let's create some space of the bottom using margin bottom with value one round. Okay, that's it about the heading. Let's go ahead and select paragraph, but across Name, story paragraph. Let's increase its full size. Make it 1.8 ram and then change the color. Use your light. Great color. All right, so they're heading and paragraphs look good. I want to adhere to more things. Let's indent the paragraph a little beat and also create some space between the letters. I mean, between the letters off heading and paragraphs. Well, so I'm going to select their apparent element, which is give with a closet story text. Let's use here electro spacing 0.1 room that in order to invent the paragraph, I'm going to still like its first letter. For that, we need to use pseudo element called first letter. So at first, let's select paragraph and Stan adhere. Cedar Element. First letter. We need to create some space on the left side, so use margin left with value one run. All right, so that's it about the stories. Everything is ready to start to work on the video background. First of all, let's go to the index dot html file and at here, age Demon Markup For the video, I'm going to open the talk with the claws video container. Then we have to use a video tuck, which actually is new in HTML five. I'm going to assign to read class name BG Video. Also, we need to adhere a couple off attributes. The 1st 1 is going to be auto play. This attribute Talos, is to play the video automatically. The next one is going to be muted. It will play the video without a sound. And finally we need a loop, which will play the video without stopping. Okay. After that, we need to specify the source off the video using a source tug. It is actually the self closing tug. Then we need here source attributes in which we have to specify the path off the video, it's place and the Images folder. Besides the source attributes, we need to use a type attribute as well, in which we should specify the type off the video. I'm going to set it to video slash and people all right, so as can see the video is playing. And now we need to take your off its position. Let's go ahead and select the container and said its position to absolute. We need to position it according to the apparent elements, which is the section. So let's add to it position relative so as to see the video is all over the place as the background that defined the top and left properties, I'm going to set both of them to zero. Also, we have to define within height. Let's set both of them 200%. And besides that, let's decrease the opacity. Make it a point for all right. The last thing is to add a couple of styles, the video itself, in order to maintain the quality off the video. I mean, to avoid stretching it or things like that, we have to use the following styles. Let's elect BG video and assigned to it within height. Both of them set 200%. And besides that, we need here object feet with value cover. All right, finally, let's change the background color for the stories. I'm going to get rid off the current background, and then I'm going to set back own color to our to be a That's past year 2383 times and the opacity point 85 all right. As you can see, everything looks really nice, and actually, we have finished working on this section. If you want to find some free videos, you can go ahead and visit the website called Cover with two R's not see hope where we can find lots off different free videos. All right, that's it about the stories. Let's go ahead and move on to the next section. 6. Contact: First of all, let's take a look at the finished project. So after these tourist section, we're going to build the contact section in the center of the section. We have a couple of input fields with they submit button at the top off the form we have a heading, contact us. And besides that, a section has a full screen background with some animation effects, has conceded. The Cold War is changing and it creates something like the date and night effect. All right, so that's it. What we're going to build. Let's go ahead an insert new Commons in HD Mill file contact and then end off contact. Then I'm going to open section Element with a class name contact. So inside the section element will have two different parts. The 1st 1 is going to be a heading. As for the 2nd 1 it should be deformed. So let's go ahead and open H one heading Tuck, which will have class, name, contact heading and then interview. Contact us next. We need form elements with a class contact for so inside that form, we will have three different groups off inputs and a submit bottom. So let's go ahead and open Thief Tuck with Class April Group and the first group will have label on the input. Let's interview full name with the asterisk. Then I'm going t open input tug with type text. Then I'm going to adhere class. Attribute with the value contact input, and also we need placeholder with the text. Enter your name. All right, so the second group is going to be slightly different. It will consist of two different April groups. I'm going to open the talk with class input groups. Notice that I'm using Q Group in the plural. So now we need to create here two different April groups. Let's grab these coat from here and paste twice. I'm going to change labels types, and also placeholder intrudes. So we need to your email, then the type female. And also I'm going to change the value off the placeholder attributes we need. Enter your email. As for the second input group, it's going to be for the phone. Let's change here. The value off the placeholder making answer phone number. All right, so now it's time to create the 3rd April group. It will consist off a label and text area. I want to open defeat. Tuck with the class April group than insecure label with the text message. So the label is going to be followed by the text area. I'm going to add to eat class attribute with a value form text area. And also we need placeholder Your message. You all right? So the last thing that we want to do is to create the submit button. I'm going to do that using an input element. We need your type submit, then the value submit. And also, I'm going to adhere Class attribute for BTM. All right, so the html markup is ready. All the elements are created and now we have to move on and start to write some CSS. I'm going to interview new comments for conflict and off contact. Let's select section element and create some space on top and bottom. Using putting, I'm going to make parting 15 ram on top than zero on the right side, 20 room on the bottom, and zero on the left side. Also, I'm going to place the content in the centre using text align center. Okay. Next, I'm going to set the image as the background. Let's specify the part of the image in the world function. I'm going to select image called Contact us, BG Dog, PNG. Then we need center and no repeat. Besides that, I'm going to define the size off the background. Let's make it cover became so right now that's it about the section element. Let's go happen. Customized heading that's selected. First of all, let's increase the phone size. Make it seven ram. Then I'm going to make the text later with Boulder using phone. Wait with a value 700 transform taxing to upper case and also create some space between the letters using letter spacing 0.5 room. Next, I'm going to change the color. Let's use here. White collar. Next, I'm going to add some shadow to the text using text shadow with a following values 01 round to ramp on the black color and finally create some space at the bottom using margin bottom a trim. Okay, so they're heading is customized right now, it's not quite visible, but once we add an animation to the background, it will look much better. Next. We have to take a year off the form around so Let's go ahead and select it. And first of all, let's define its width and height. I'm going to sell its with 27 to Ram. As for the height that's making 50 rounds, then change the background color. In this case, I'm going to use white collar. But what they are to be a value we need to place here to 55 3 times. And also I'm going to adhere the opacity 0.95. Okay, It's gonna see the form is placed on the left side and we need to center it for that. I'm going to use marching, Orel. All right. Next I'm going to center the content inside of the form. For that, I'm going to assign to the former element class center so the content is centered, but input groups are placed side by side. And in order to fix that, let's change the direction off the flex and make it call. Okay, After that, I'm going to make the form slightly around it. For that I'm going to use for the radius with value 0.5 ram. And also, let's add some shadow using books shadow with values zero one room three room and they black hollow. Okay, that's it about the form. For now, let's go ahead and select the April group. First of all, let's set. It's with 200%. Then I'm going to use flex books. We need to make input group flax container using display, fax, and also we need to change the direction. Let's make it call. Okay, so right now, the first thing put on the text area are stretched and they take up the entire with off the form. As for the second and third include elements, they are the parts off the April groups on. So let's select input groups and make its with 100%. All right, so now all the inputs in the text area are stretched. We need some space inside of for, and that's created space using putting with the value five run. Okay, so now we have a better result. But actually, it's not what we want. We need to place the email and the phone a put side by side, and for that, I'm going to use again display flags. Now we need some space between the input fields for that. Let's at first decreased there with so I'm going to select April groups, followed by the April group. Let's go ahead and set with two 48.5%. And then after that I'm going to assign to the April groups justify content space between all right so the inputs are aligned and next we have to customize them. First of all, create some space between the imprint groups. Let's assigned to the April group marching with values one ram on top and bottom and zero on the right and left tights. Okay, let's go ahead and customize the inputs and also the text area. I'm going to select both of them. At first. Let's select a put that duplicate this line of code and change input into text area. First of all, I'm going to create some space inside of the fields. Let's use for that potting. Actually, we need a little bit more space at the top because we're going to place the labels there. So we need here the values in the following way. The 1st 1 is going to be three Ram and the arrest of the values are going to be one room. Okay, next, let's change the background color. I see this year the secondary caller also, Do you find the border that's at here? 0.1 room solid and again the secondary call. All right, so the fields look much better, but we need to add to them some more styles. Let's decrease the phone size. Make it 1.4 room. Also change the color. Let's use here. Light gray color. Next, I'm going to create some space between the letters. Let's make it 2.1 room and finally, let's make input and the tax area around it using Border radius 0.5 rounds. All right, so we are almost done with the input fields. I'm going to customize them on focus. I mean, once we focus on the fields, then I want to display the border. So we have to select again. He put on the tax area, but with a focus suitor class that's at here Border 0.1 room solid and the color C. C. C. Also, let's use here Lito transition in order to make the effect smoother right border and the duration 0.3 seconds. All right, so that's it. Regarding the April fields on the text area. Now we have to take a year off the labels I'm going to customize and place them inside the fields. So let's select them as first list to find the phone size. Make it 1.2 rum. Also, change the phone. Wait, make it 600 Then I'm going to transform text of your upper case. Then use letter spacing 0.1 room and lastly, changed the caller. Make it great. All right, so the labels look nice and now have to place them inside off the fields. For that, we need to make their position absolute. Then we need to position relative for the April group because we need to position the label according to the power element. Next, let's set top and left properties both of them to one rent. All right, that's it about the labels. They look nice, and actually there is left on the one element to customize, which is a submit. But so let's go. I hadn't select this element. First of all, I'm going to define its width. Let's set it to 100% then creates and space inside off the element using parting with value one room. Next, I'm going to to find the phone size as 1.6 room. Also create some space between the lattice. Then we need some space at the top, using margin, top one room and then change the background color. Make it light. Great. All right, So that's the way how the submit button looks right now, we need to add to its and more styles. Let's change the color off the text. I'm going to make it white. Also, we need to make the button around it, using border radius points five rum, then get rid off the default border using border none, and finally changed the type off the course or made pointed. All right, so the last thing regarding the button is to create a hover effect. I'm going to change the background color slightly on over. So let's select for beauty and with hover and change the background color. Make it great. Also, let's use here transition. We need background color and the duration 0.4 seconds. Okay, so now we're almost done. Before we move on and create the animation on the background, I want to mention here about one little issue. As you know, by default, you can increase the size of the text area. And if I do that, then the layout off the form element will be messed up. So in order to avoid that, I'm going to set months, height and marks with for the tax area. Let's go ahead and selected. That said Marks height, too 15 rounds. As for the marks with Let's Make It 100% All right, so now everything works perfectly with styling. We are done and now have to create an animation. Actually, the animation is going to be a simple one. Overall, we will have five different steps and we will change the background called our own each step. So let's go ahead and create key frames. I'm going to name the animation as contact beachy. So on 0% I'm going to make background color. Three D. Three d three d, then on 25% I'm going to make it C B d. Eight e four. Next, we will have 50%. As for the value, it's going to be one he eight one at three. Next comes 75%. I'm going to make the background color F F seven eight for two and all the last step. I mean, on 100% I'm going to make the back on color again. Three D three D three D. Okay, so that's it about the key frames. They're ready. Let's assign the animation property to this section element. At first, we need to specify the name of the animation, which is contact BG. Next. Let's define the duration. Right now. I'm going to set it to 10 seconds, but we will change it later. And also we need to around the animation infinitely. So we have to right here. Infinite. All right, So is conceding. The animation works fine. It runs a little bit faster, so let's change the duration. Make it 35 seconds. All right, that's it. About the contacts action. We have finished working on it, and now I have to move on and take years off the filter. 7. Footer: First of all, let's insert new comments in HTML. Right footer and off footer and then open. HTM of five footer semantic element with class name, Footer so the footer will consist of two different parts. The 1st 1 is going to be a least off a couple off navigation items. That's for the second part. It should be paragraph for some copyright text. If we over over the items, then they will rotate and we will get some three D effects using shadow at a glance. It seems that the items are moving up. Let's go ahead and create a least. It should be represented by development on a couple of links. Let's open. Give Tuck and a scientist crossed food to released that instant here. Link element with class, foot or link and with the text Hope so. Overall we will have five different items that's duplicated four times and change the content. The second item is going to be tours. Then we will have about US offer and content. Okay, that's it about the first part. Let's go ahead and created paragraph that's assigned to P element class food or paragraph, and put here's and content copyright then for the copper right side. I'm going to use a steamer five entity. We need em. Person copy, send the column, then code and create all rights reserved. All right, that's it about the markup. Let's go ahead and at ST some CSS. First of all, I'm going to instantly your new Commons footer, end off footer, then selected food or elements. And first of all, let's change the background color. I'm going to use gray color, and also I want to create some space inside off the food tour using parting, Let's study to four run on top, fancy role on the right side to run at the bottom and zero on the left side. All right. Next I'm going to place the least in the center. And for that, let's go ahead and select food to released. I'm going to make it flax container using display flex and then, in order to place the items in the center, let's use justify content center. All right, so the least items are placed in center, and now we can customize them. Let's go ahead and select the link. At first, let's increase the phone size, make it to ramp then change the color, make it a white. And also I want to create some space on the right and left sides off the items using margin with value zero on to ram. Okay, after that, we're going to create some space inside of the wings using parting. But before that, in order to make this place visible, let's change the background color or feelings for a while. Let's make it right and then creates and space he was putting. Let's set the space on top and bottom, too. 0.3 ram and then three room on the right and left sides and also increase the space between the letters using letter spacing 0.3 room. All right, that's it about the links. Let's change the background color. Make it great. Okay, Before I move on to the paragraph, I'm going to add a hover of fact to the links. I'm going to rotate them and also acted them. Box shadow on over. So let's go ahead and select food a link with hover. Then I'm going to use transform with rotate function. Let's rotate links by minus 10 degrees and also adhere box shadow with values. Zero two room three room and the black hole. And finally, let's see the transition we need here all and the duration 0.2 seconds. Okay, so if we hover over the links, then we will get a nice and cool effect. All right, that's it about the links. Let's go ahead and take care of the paragraph that's selected. At first, I'm going to align the text in the center, then to find the phone size. Make it 1.5 rounds Chinese. The color in this case, I'm going to use secondary caller. Then that's creating space between the letters. Make it a point to ramp. And finally I'm going to create some space at the top. He was in margin Top five run. Okay, so where the footer were done, it was kind of simple one. But I think it looks nice, actually. Step by step. We're moving to the end of this project, but we still have some work to do next. We have to start to work on navigation 8. Navbar: First of all, let's take a look at the finished project. As you can see at the top left corner off the webpage, we have a fixed menu item. If I click it, then the NA port will display links air coming from top to bottom with nice transition effects. They change opacity on hover, and also KNOPPER has its full screen background or presented by the inch. Besides that, we have X closing button at the top, right corner off the knopper, and if I click it, then we'll get back to the main page. Okay, so that's it. What we're going to build. I'm going to insert this spot right about the header. So let's insert New Commons no far and off number, then open a developments and assigned to it a couple of classes. The 1st 1 is going to be open up or I come. As for the 2nd 1 it should be enough or I could so the menu icons will consist of three lines. They will be represented by the developments, so it's open it with class line, then duplicate this line twice. Next we need to open another developments. We should be the rapper so assigned to eat Cross, not for robber. Next, we need enough elements with class. Now, for so inside, Enough Element will have two different parts. The 1st 1 is going to be ex closing button. As for the 2nd 1 it should be the navigation list. So let's go ahead and open development assigned to it crosses close now for Aiken and not for Ike. That interview two lines, open development and assigned to two classes. The 1st 1 is going to be the common cross line. As for the 2nd 1 it should be riding one, then duplicate this line of code and change the cross name we need here lying to. All right, let's go ahead and institute the second part. I mean the least off the navigation items that's open. Developments on a scientist cross now policed and then past year, couple off link elements that's assigned to me to class name NAWF Link and insert here the first navigation item home. Let's duplicate link element four times on change the items the 2nd 1 is going to be towards then we will have about us. It's all for and contact All right, some That's it about the HTML markup. I'm going to start to write some CSS. Let's go ahead and instant new comments right after the common styles we need here now far , then end off number, then select enough where I come. Actually, this class name belongs to both buttons. Let's define a width and height. I'm going to set both of them to 5.5 grams and also change the background color. Make it white. All right, so now both buttons are visible. Right now, it's hard to distinguish them. So it would be better if we hide the second button as well as the least because right now we're going to work on the first part. So let's select not for Rapper and assigned to it. Display. Not All right, Let's go ahead and position the Eiken I'm going to selected with its individual class, which is open up where I can let's go ahead and set its position to fix, then defined Top and Left properties. I'm going to set both of them to 6.5 run. Okay, As you see right now, the ICANN is not visible because it has ended up behind the header and in order to fix that , let's use Z Index property and set it to 200. All right now the problem is fixed. Next, I'm going to make the Eiken rounded. Actually, we need both buttons to be around its old. That's a scientific enough for Aiken for the Radius 50% and also changed the course certain . Making a point. Okay, next, I'm going to take here off the lines. First of all, let's go ahead and display them. I'm going to select lines using the common cross now for Aiken Line. That's defined its high to make it point to run, then set with to 3.5 rounds and also change the background color use here. Light great. So right now the items are placed on top of each other. We need some space between them, and also we have to place them in the center off the Ike. For that, I'm going to use our pre defined class center. We need this cross for both off the icons. Also, we need to change the flex direction and make it a column because display flex alliance the flex items horizontally in a row by default and finally We need space between the lines. For that, let's select again line. But now, with open number, I can class and create space using margin with the values 0.3 room and zero. All right, so the first nap or I can discuss demise and now have to move on and start to work on the navigation. So right now it is hidden, so that's get rid off display. None. So the rapper will take up the entire Vieux Port. I mean 100% off the width and height of the airport. So that's set with 200 Viewpoint with it's fully height was make it 100 Vieux Port height and also change the background color I'm going to use year are to be a value with white collar. That's place year to 55 3 times and also D capacity points up. All right, so right now that's the way. How not for rapper looks like we need to define its position. It should have position fixed, and also I'm going to set left and bottom properties, both of them to zero. So right now, not for Rapper ended up behind the header. And now let's use again Z in this property to fix that problem. That set sitting next to 300. Okay, let's move on. Answer to work on the enough for itself. I mean the enough element that selected and defined within height, I'm going to set both of them 200% and also changed a background color. Let's use your royal blue. So now the now poor takes up the entire width and height off the view port. We need to add some space around it like it's in case off the header. Remember, the amount of space on each side equals to 3.5 ramp. So therefore, let's define putting and assigned to it the first value 3.5 ram. So the spaces created but has conceded we have a little issue on the right side. He will have a scroll bar, not for Rapper has positioned set a fixed and it doesn't take into account this Kroeber. So we need to increase the amount off this pace on the right side. The size off this crowbar equals to 20 pixels. So we need to make the parting on the right side 5.5 ramp and then we need 3.5 rounds twice . Okay, so the problem is fixed. Let's go ahead and take a year off the closing up right. It's going to be placed at the top right corner off the Knopper. So let's selected and maggots position absolute in order to place the Eiken according to its parent element. That's a scientist, Knopper Position wrote, and then define the top and right properties. I'm going to set Tell Property to 2.5 rounds. As for the right position, let's make it three rounds. Okay, so the icon disposition. Let's place those lines in the right way and display the X for so far. Let's select them with common cost name. Close not for icon line and make the position absolute. Now we need to rotate each of the lines by 40 degrees, but with opposite directions. Let's go ahead and select the first line with class Line one. We need to use transform with rotates function. It's put here fourth degrees. Then I'm going to duplicate this entire coat. Change the cross we need here line to and instead of 40 degrees, we need minus 40 degrees. All right, so the X snapper Aiken is customized, and it's time to move on and change the background for now up. Are we no longer need that blue background? So let's catch with off eight and inside here, linear Grady int. With our to be a values, I'm going to use black color twice, but with different capacities. In the first case, the opacity is going to be 0.5. As for the second hard to be a value, we need the opacity 0.3. Next, I'm going to specify the girl I'm going to select image called NOP R B G or J P. G. It's classic images folder. Then we need center and no repeat and also defined the side of the background. Let's make it cover. All right, so the images said as the background. And now it's time to take a year off the navigational East. Right now, links are not quite visible. So first of all, let's select them. Here's in crossed now fling. Increase the phone size. Make it three round, then change the phone. Wait, I'm going to make links. Boulder, let's set phone way to 700. Change the caller making white on transform tax into uppercase. Okay, So now we can see the links, and the next thing that I want to do is to define the background caller for H Navigation night. We can do it from CSS. I mean, we are able to select each of the items with F child pseudo class and assigned to each of them different back own color. But I'm not going to do that from CSS. Let's use JavaScript. First of all, I'm going to create an array of colors. Let's put here five different colors. The 1st 1 is going to be 649 five e. D. Then the next one is going to be seven f f f d four. Then I'm going to use F F A 078 then next winning F 08080 and the last card, or is going to be a f E E eight. All right. After that, we need to select all the links. Then we need to look through them and assigned a background call to each of the items. So let's go ahead and select them using the query selector. Old method. Let's specify here the class name now feeling so in this case, the current selector, All Method regions and array like objects, which is called No list. I'm going to transform note least into an array, and then we will look through the air a using before H method. So in order to transform note list into an array, we need to use a Raiders from effort. And then after that, we can use the four each method. So for each ellos is to look through an array and execute a function for each area. Right, So we need to pass year callback function, which will take one parameter, and it's going to be the current item, and then we need to define background color. For that. I'm going to use style and CSS text properties, so we need item dot style, not CSS text. So now we need to pass years. Some serious is code for that. I'm going to use us six templates. Strings, unity open back ticks than easy to your background color. So now we need to use the values from colors array separately on each iteration, we need to define the index number off the colors, and for that I'm going to create new variable called I notice that I used here. Let declaration. So this variable is going to be something like counter by default. It should be equal to zero now down below, we have to use a dollar sign with cold braces. Now we have to past year colors, array and in square brackets when it in to get the index number. So we need to pass year I followed by the incoming operator, which is expressed with double plus sites. So on the first iteration, the next number is going to be zero and the first color will be used. Then, on the second iteration, the counter will become one, and the second color will be used and so on. So, as you can see, each navigation item has its own back roll call. Okay, Next, I'm going to expand links all the way to the bottom off the now poor. So let's go ahead and select novelist and make its height 100%. And also besides that, I'm going to make it flex container using this play flex. So now the items are stretched from top to bottom and they take up 100% off the height. Next we need to take a year off the with. Those items should take out the entire with as well. So let's define with and make it 100%. All right, so right now everything is going fine. I want to place those items in the center off Those columns from that that's assigned to each off the link element Class center. Okay, after that, let's decrease the opacity. Make it a point eight. As you see, the opacity has affected on the bottomless well, so it defines the index property for the bottom and make it 300. All right, Next I'm going to create a over effect. I want to change the color off the items and also increase the opacity on over. So let's go ahead and select nav link with over, make its capacity one and also change the color. Make it primary. Besides that, I'm going to use transition with the values all and 0.3 seconds. Okay, sell the hover effect works fine. And now I'm going to make the icons work. So by default, I'm going to place now for rapper down below and make it hidden for that. Let's change the value off the bottom for inoperable for and make it minus 100% and also make capacity zero. So enough for rapper is hidden. Next, I want to place the navigation items up because once we click the many Wycombe, they should move from top to bottom. For that, it's a scientist. Enough link position relative and then defined top position. Make it minus 100%. All right, now we have to use JavaScript. Actually, we will create class change in CSS, which will be added to the container from Travis Group. So let's create a variable in which I'm going to store the container. Let's call this variable container and then select these elements using query. Select your method. Now we have to select the menu. I come and we need to attach to it. Click event. Let's select the element again. Using curry selector mattered. I'm going to specify the class name. Open enough Bar Aiken, and then that's attached to it. Event Listener. We need here Click events, Anthee Arrow function. So once we clicked in, many Aiken will have to add to the contain the class change. Therefore, we have to answer to your container, not class least, as you know, class leased stores, all the classes that the element has. It should be followed by the ad mattered, which that's close to the class lease in the practices are specified. Class Name change. Okay, that's it about the first item. Let's move on to the second item. I mean the X close in bottom. Once we click it, we need to remove the class change from the container. So let's go ahead and duplicate this code. Then change the class name when it here close now for icon and also instead off. Add Mattered. Used, removed. All right, that's it about JavaScript. Let's go back to CSS now. Have to create the cross change. Then we need to select Knock a rapper in order to display the rapper back when you to set its bottom position to zero and we need to increase the capacity we have to make it one. Then again, we need to change the class, but for the nothing. Now, as you know, links are placed above and we need to make their top position zero. So let's select change, followed by now bling and make the top position zero. So if I click the many Wycombe than inoperable display, and if we click the X, it should height. So actually we're almost done. We need to customize effect slightly. Also, we need to display the navigation items in order with some tea lights that's assigned to not a rapper transition with the following values when it bottom 0.5 seconds that capacity calling 22 seconds. We need the same transition down here, but with some delay. So let's grab this line of code pace that year and at here delay 0.25 seconds. Now if I click the icon, the KNOPPER will display with some smooth transition. But actually that's not what we want. We need to display the navigation items in the order, so we need transitions for each off the items, but with different delay time. Let's go ahead and select again. Change followed by now. Link what they see The Class F child. What's specify here? The first item one and he's of your transition with the following values. We need top property with duration one second and the delay time 10.4 seconds, then opacity 0.3 seconds and the color 0.3 seconds as Well, let's duplicate this code four times and changed the numbers off the items on the delay time. So for the second item, we need 0.6 seconds. Then for the third item, that's use your 0.8 second for the fourth item. We need one second. As for the last item, I mean the fifth item. We need delay 1.2 seconds. All right, so it's concede items of displaying in order. And actually we are almost done. The only thing that have to do is to make the items he didn't. While they are placed up for that, I'm going to use overflow hidden, but according to the Y direction. All right, so now everything works perfectly. And actually, we're done with our project. All the sections are built and customized, and finally, we have to make the project to responsive to different screen sizes. 9. Make Project Responsive: all right. First of all, let's inspect the page and turn on the responsive mode. As you know, we have built this project on the resolution, and now I'm going to find a different break points on which we will need to make some changes throughout this part. We will use CSS media carries. So let's go ahead and find the first break point. I think we need to make some changes. Once we make the with off the window lower than 1200 pixels on the break points, I'm going to place cards perfectly in a call. Let's check in upper. It looks fine. The only thing that we see here is a little space on the right side. We've seen that space because in the responsive mode, this crowbar is not visible and that there is enough that issue so you can just ignore it because or smaller devices, it will look good. Okay, let's create a CSS media query. I'm going to specify the marks with as 1200 pixels, then select carts Rapper Change the Flex Direction. I'm going to make it call him, and also we need a line items center in order to place the cars in the center. All right, so the cards are placed vertically, and now we have to add some space between them. So let's select the card itself and adhere. Margin three room on top and bottom and zero on the left and right sides. All right. Finally, I'm going to increase the with off the backgrounds off the stories so select story PG and make its with 85%. Okay, so on the break point, we're done. Everything else looks fine. Let's move on and find the next one. I think the next one should be 1000 peaks us because on that break point, some of the elements need to customize. So let's use again CSS media and specify the marks with as 1000 pixels. Let's check the Knopfler. I think it would be better if we place navigation items vertically, and I call them for that. We need to change the flex direction, so let's select the least and change the flex direction. Make it call. So right now they're placed vertically but have here an empty space. Those items should take up the space, and in order to achieve that, let's use one of the Flex books properties called Flex Grow but select nothing and said Flex grow to one this property Alosi flex items to take up the available space inside the container. I came, Let's move on and take a year off the header I'm going to place heading and paragraph in the center of the page so it's selected header text and defined its position, making absolute. Then we need to set top and left properties both of them to 50%. And in order to send to the element perfectly, we have to use transform with translate function. And we have to pass here minus 50% for both directions. I mean, X axis and why excess? Okay, so the heading and program for place in center, But it's concede they ended up behind the air balloon in order to fix that. Let's set the index to 10. Okay, Next, I'm going to decrease the phone sides off the heading and paragraph so it's select. Heading changed the phone size. Make it six room. Next, I'm going to select Heather Paragraph. Let's maggots font size 2.5 rounds. All right, we had They're taxed were done. Let's move on to the next section. We need to decrease here the size off the heading. So that's selected and make its phone size six rounds. Okay, that's it about the section. Next comes the story section. I think from this brake point, we no longer need to skew the backgrounds, so I'm going to give them the shape of the rectangle. Let's go ahead and select story, BG The news. Transform skew eggs and make it zero next week. Did the story itself. Let's grab this line of code and paste if you all right. Besides that, I'm going to place the contents vertically. For that, we need to change the flax direction, so let's make it call them and also a line items in the center. All right, so the last thing regarding the stories is to create in space under the images. Let's go ahead and select the image and assigned to it margin bottom with the value of three room. Okay, that's it about the story section finally and want to take a year off the footer. I'm going to decrease the space inside of the links, and also I'm going to decrease the space between them. So let's go ahead and select the link, then defined parting as 0.3, ram on top and bottom and to ram on the right and left sides. And also we need to use margin with zero and one ram. All right, so I think we're done on the break point. Everything looks nice. Let's go ahead and find in next one, so it should be 800 pixels. So let's go ahead and create new media with the marks with 800 peaks lis. So on the break point, I'm going to hide the paragraph at all. Let's go ahead and select it and assigned to display none. Next, let's decrease the size of the heading off the cart section. So it's elect popular tours heading and make its phone size five run. All right, So actually, everything seems to be fine, except for the contact action and the footer. I'm going to decrease the with off the form element, so let's go ahead and select it and said it's with to 90%. As for the future, I'm going to place the links vertically in a column. So let's go ahead and select food to release changed the flex direction make it. Call them. Also, we need to align the items in the center. And lastly, let's xom space between the links Select Footer link and adds to it margin one room on top and bottom and zero on the right and left sides. All right, so actually, that's it about this break point. Let's go ahead and find the next one so the next one is going to be, I think, 650 pixels. So let's create new media Curry and specify the marks with as 650 pixels. So on the break point, I'm going to extend the sections to the entire page. So let's selected container and gats reductive margin. Make it zero. Then I'm going to take years off the Knopper. Let's start with icons. Select Open up or Aiken and change top and left positions. I'm going to set both of them to 2.5 run before we move on to the next I come. I want to get rid off the space around Enough are so let's select now for rapper and set potting to zero. Then select the second Aiken, which is close. Not for Aiken and change the right position. Make it for em. All right, that's it about the Knopper. Let's go ahead and select Header. I'm going to said its height. 200 VH. All right, so we're done with Heather. Let's move on to the contact section. I'm going to decrease the size of the heading, so let's go ahead and select contact heading and make it's fun. Size six RAM. Also, I'm going to add some styles to the contact form. Let's change the amount off the parting. Make it to Ram. As for the height, let's make it four to ramp. All right, so that's it. About 650 pixels. And finally, we need to customize the project on the last break point, which I think he's going to be 500 pieces. So let's go ahead and create new media with the marks with 500 pixels. So the easiest way to make the elements look nice on that break point, I thought off to decrease the phone size off the HTML element. As you know, right now, it equals to 62.5% and I'm going to decrease it too. 45%. This gold will have a fact on the size off every element. Because throughout this project, we were using RAM as the measurement unit. Okay, so I think everything looks pretty nice. And finally we're done. We have finished building this project, so congratulations. I hope you enjoyed it. Learned lots of cool and interesting stuff. Okay, See you next time.