Build Multi-Page Responsive Website: HTML, CSS, JavaScript (2024)

1. Introduction: Hello and welcome to our hands on course Build multipage responsive website with HTML, CSS, and Javascript. I want to thank you for choosing to enroll in this course. If you are excited about diving straight into the creation of a real world multi page website, you've come to the right place throughout this course. I will be your guide as we build a complete, modern and adaptable website from scratch using HTML, CSS, and Javascript. Here you won't find any lengthy theoretical discussions. Instead you will receive practical step by step instructions to equip you with the skills required to develop impressive websites. In this introductory video, I will provide an overview of our project and detail what we're going to accomplish. Our project is designed to be a multi page website and it will adapt to different screen sizes and devices. We will start by creating a website header followed by the navigation, which you can open by clicking the menu icon at the top right corner of the page. The navigation consists of two parts. We have the image on the left side with a nice and cool hover effects for the right side. You can see here the navigation items with hover effects as well. Next, we will move on to the About section, which then will be followed by the book section. Moving forward, we will develop a testimonial section, and then you can find here a footer that includes the contact section. By clicking the back to top link, we will navigate to the top edge of the website. As mentioned earlier, our website is multi page and you can navigate to different pages by clicking the links in the navigation. You will discover about us Page where we have the header features also team section followed by the footer. Next we can navigate the book section, where you can find the different books with names and authors. The next page is going to be about the testimonials. You can find here the testimonial slider. By clicking the arrows, you can play the slider. Also down below, you can find the dots. And you can play the slider using those dots as well. All right, so once we click the home link in the navigation, then the website loader will appear. After a couple of seconds, the web page is loaded Every time when you reload the page, then the loader will play and the page will be displayed. Rest assured that our website is responsive to various screen sizes. If you inspect the page, switch to responsive mode and preview it on different screen sizes and devices, you will find that it is adaptable. Okay, I'd like to note that this project is designed for extra large screens with a resolution of 1920 pixels with and 1080 pixels of height. If you're using a smaller screen. I recommend switching to responsive mode during the lectures and specifying the within height accordingly. This will ensure that the projects its best on smaller screens until we make it fully responsive. All right, I hope you will enjoy working on this project as much as I do without further ado. Let's get started. 2. Setup: Hello and welcome to the course. We're delighted to have you here, and we're confident you'll find this course enjoyable. Before we start diving into our project, let's first prepare our working environment. If you're already set up and ready to write code, you can skip this video and jump straight into the project. However, if you are not prepared yet, that's perfectly fine. We'll guide you through setting up some essential tools throughout this course. There are two main tools you will need. A modern web browser and a text editor. Our web browser, I'll be using Google Chrome, but I also recommend Mozilla, Firefox. You likely already have these browsers, but let's quickly go over how to download them, just in case to get Google Chrome, simply visit this URL and download the browser. The installation process is straightforward, so we won't spend much time on it. For Mozilla, Firefox, you can obtain it from this URL. Both links will be included with this lecture for your convenience. All right, now let's talk about the text editor. We will be using visual studio code which is one of the best text editors available today. However, you're welcome to use your preferred text editor if you have one. It's entirely up to you still. I recommend giving Visual Studio code a try download Visual Studio code, visit this website and select the version for your operating system, Windows, Mac or Linux. The installation process for visual studio code is also straightforward. You should not encounter any issues. Once you've installed both of these tools, you'll be all set To get started with the course, let's dive right in. 3. Getting Started: All right, finally we are ready to start to build our project. In this lecture, I'm going to prepare our working environment and then we'll start to write the code. I have created a new folder on the desktop called responsive website, in which I have a folder for the images. This folder includes all the images that we need for our project. I'm going to open this folder in VS code. The first thing that we have to do is to create our working folders, we need three different, actually, not folders but files. We need three files. The first one is going to be index HTML. Then we will have style CSS. Finally, I'm going to create scripts. Now I'm going to open indexled Html file, and we have to create the basic H tmall structure. For that, I'm going to use met. We need to place here an exclamation mark and that hit top or Enter. Here we go. We have here the basic HTmel document. I mean the basic HTmel elements. The first thing that I'm going to do is to change the title. Let's here, responsive website. Then we have to link the CSS and Javascript files. I'm going to open link Tac. And we have to specify here the path of the file. In this case, we have to specify here the name of the file because we don't have here any other folders. We need your style CSS. Then I'm going to link the Javascript file, We have to open script. Then in the source attribute, I'm going to specify the file, I mean the name of the Java file we need here, script JS. Okay? Once the CSS and Javesby files are connected, now I'm going to open the project in the browser. For that, I'm going to use one of the packages called Live Server. You can either click here, Go Live, or you can press the right button on mouse and then select Open with Live Server. Now as you can see, the project is live in the browser. I'm going to place the browser and the editor side by side. So in order to make our working process more convenient, if you don't have a live server, you can search for the packages here and you can install this package here. All right, besides those links, we need to bring in a couple of different links as well. Because throughout the project we're going to use some different phones and icons. I'm going to bring in link for the Google phones, we're going to use a couple of different Google phones. Let's go ahead and search for Google phones. I'm going to visit this link here. The first phone that we need is something like oh or oh, I don't know how to pronounce this word. The phone is called Kohen script. Here it is. Let's click Get Phone, then go back and search for phone called Molly. Let's click again Get font. The third font that we need is called permanent marker. We need here permanent marker. Here it is. Click get font. Then we need get Ambit code. And I'm going to copy those links from here. Let's paste it in the head element. Besides that, I'm search for phone awesome CDN JS. We need to grab this link from here. Let's click this icon, copy URL. Then we need to open link tag in Head Elements, and I'm going to paste here the copied CDN. Okay, I think that's it. Everything is ready to start to write the code for that. Let's move on to the next lecture. 4. Creating HTML Markup for Website Header: In the previous lecture, we have created our working environment. We have prepared everything to start to write the code. We have three different files here, Files for HTML, CSS, and Ile script. In the index of HTML file, we created the basic HTML structure with some links, links for CSS and ilescopt files. And also we brought in some different links for phones and the icons. Now we have to start to create the HTML markup for our first section of the project. If we take a look at the finished project, you will see here the website header. In this lecture, I'm going to create the H til markup for the website header. It consists of different elements. We have here logo and also the banner with some textual elements. In this lecture, as I said, I'm going to create the H tel markup. Let's go back to the VS code and I'm going to institute comments for the container. I'm going to open tag with a class name container. Inside the container, I'm going to create the header. But before that I'm going to insert comments for the header. Let's open H five header tag. The first element that I'm going to create inside the header is going to be logo. I'm going to insert your comments for logo, then open link tag. I'm going to insert here index HTML because once we click the logo, we have to navigate to the home page. That's why I inserted here index HTML. Then I'm going to add here class name and it's going to be logo. Inside the link elements, I'm going to insert Span with the text reader. Okay, so here we have the link element with the text reader. That's it about the logo. Next I'm going to create the banner. So let's open comment for banner, we need to open tag with the class name banner inside the banner. I'm going to create three different heading elements. The first one will be H three heading with the text reading. Then I'm going to open H one heading elements in which we'll have spun. I'm going to insert your letter O. Then I'm going to interfere line we have here online. But the O is placed inside this panelement because we need some different styles for the first letter of this word. Finally, I'm going to interfere H, four heading elements with the text free book library. Okay, So I think that's it. All the elements are created. For the website header, we need to style those elements. And for that, let's move on to the next lecture. 5. Stylilng Website Header: In the previous lecture we have created the HTML markup for the website header. We have here all different elements. Now as I said, we have to style those elements and we have to make the website header look like. So let's go back to the VS code and open style of CSS file. I'm going to move this file and place it on the right side. The first thing that I'm going to do is to create some default styles. I'm going to insert your new comments for default styles, then I'm going to select every element, and for that we have to use an asterisk. Let's set default margin and padding both of them to zero. We need margin to be zero and also padding to be zero. Next we have to set box sizing border box. This is a CSS property that affects how the size of an element is calculated by default. When you set the width or height of an element in CSS, it applies to the content area of the element. However, with box sizing border box, the width and height you set include the padding and also the border of the element rather than just the content. That's why we use box sizing border box as the default style. Next, I'm going to use text decoration with the value non. We don't need any text decoration for the link elements. Also, I'm going to set out line to non. Finally, let's set phone family to every element to phone called mull cursive. Okay, let's check the browser. As you can see, all the default iles are applied to the elements. We don't have here any margins. And also the font is changed for every element. Next, I'm going to change the font size of the HTML element. Right now, the font of the HML element is equal to 16 pixels. Throughout this project, I'm going to use Ram as the measurement unit. By default, one Ram is equal to 16 pixels, because as I said, the font size of the HTML element is equal to 16 pixels. I want to convert one Ram and make it equal to ten pixels. For that, we have to decrease the font size of the HTML element. Let's select HTML and set its font size to 62.5% Right now, one Ram is equal to ten pixels. If we check the browser, you will find that all the elements became smaller. Okay, I think that's it about the default styles for now. Next, I'm going to customize the container. I'm going to insert your new comment for the container. Then I'm going to select container. First of all, I'm going to define within height. Let's set with 100% As for the height, I'm going to make it 100 viewport height. It means that container will take up 100% of the viewpoint as the height. Next, I'm going to change the patron color. Let's use color 212121. As you can see, we have here container with dark background color. Next I'm going to take care of the header. Let's insert here new comments for the header. Then select header elements, I'm going to set with to 100% Then I'm going to set height of the header, 100 viewport height. I'm going to change the height of the container, let's make it 100% so as you can see, nothing is changed here. Next I'm going to select logo, let's insecure comments for logo and select link element for the class name logo. I'm going to define the position for the logo as you remember. It is placed at the top left side of the header. I'm going to define the position of the logo. First of all, we need here position absolute. Then in order to place the elements according to the header, we need position relative for the header. Now we can define top end left properties. So the top position is going to be three Ram. As for the left position, I'm going to set it 225 Ram. As you can see, the logo is positioned correctly. Next, I'm going to customize this element. I'm going to select Span Elements. As remember we have span inside the link element. Let's go ahead and select logo, followed by the span element. Let's change the phone family. In this case, I'm going to use phone called permanent marker cursive, then increase font size. It's going to be seven ram. Also, I'm going to make the font italic. Let's use font style and make it italic and also change the color. The color will be 32 B0ce. It is blue color. Here we have the logo. It looks pretty nice. The last thing that I'm going to do regarding this element is to add a little shadow effect. I'm going to use text shadow with the values 0.5 Ram, one Ram. Then the color of the shadow is going to be black. We need here 000. And also I'm going to set opacity of the black color 2.2 Now the logo has shadow effects and I think it looks much better. Okay, so that's it about the logo. Next we have to take care of the banner. We have to style the elements to make look like. So I'm going to insert your new comments for the banner. Then I'm going to select Development, which has class name banner. I mean this development here. First of all, let's define the position. I'm going to set position to absolute. Then I'm going to define right position. It's going to be 20 Ram. And also we need bottom position. I'm going to set it to 30 Ram. As you can see, the banner is positioned and it is placed on the right side. I'm going to place the text elements in the center using text line center. As you can see, the text elements are placed in the center. Now I'm going to customize the H one heading elements. I mean this element here. Let's go ahead and select banner H one. Let's change the phone size. It's going to be 15 Ram. Then I'm going to create some space between the letters. So let's go ahead and use letter spacing with value one Ram. Let's check the browser. Here we have the H one heading element. As you remember from the finished version, we're going to add a background image to the heading. Let's go ahead and do that. For that, I'm going to use a couple of different background properties. The first one is going to be background image. We're going to define the URL of the image as you know, we have folder called images, then we have to select text G one, the first image from here. Next we need another background property and it's called background size. I'm going to set it to cover. As you can see, we have here a background image, but that's not what we need here. We need to add the image as the background for the text and not the entire heading. In order to do that, we need to use property called background clip with the value text. Besides that, we need the same property with Webkit, otherwise it won't be applied. Finally, we need to make color transparent. Now it should work. As you can see, we have here image as the background of the text. Okay, I'm going to add shadow effect to the text. Let's corrab the text shadow from here. Now we have to take care of the first letter, as, remember we have wrapped the first letter with span element. I'm going to select banner H, one, followed by the span element. I'm going to increase the phone size. Let's say it, 225. Okay. Let's check the browser. As you can see, the phone size of the first letter is bigger, but that's not what we need. Let's check the finished version. We have here different results. I think we need here the capital letter and not the small one. Let's use here capital and then check the result. Okay, now it looks like as they finished version. All right, so let's sit about the H one heading element. Let's move on and take care of the rest of the headings. I'm going to customize the three heading elements. Let's select Banner, followed by the H three heading element. I'm going to change the phone family. In this case, let's use phone called script cursive, then increase the phone size. It's going to be seven Ram. We need to change the phone weight. Let's set it to 300. Here we have the H three heading elements. I'm going to change the color of the text. And also I'm going to move it down close to the H one heading elements. Let's set color to it. Then in order to move the element down, I'm going to transform with translate function. I'm going to translate x to three Ram. As for the translate y, we need to set it to 11 Ram. We're moving the element horizontally by three. As for the vertical direction, we move the element by 11 Ram. As you can see, it is placed correctly. The last thing that I have to do in this lecture is to customize the heading, I mean the four heading element. Let's go ahead and select the banner followed by the H four heading element. Set the phone size to 1.8 then the phone weight will be 300. Also, I'm going to transform text to upper case, then I'm going to increase the space between the letters. Let's set letter spacing 2.7 Ram, and finally change the color of the heading. Let's use here. Blue color, I mean, this color here. Okay, that's it. The website header is customized and I think it looks pretty nice. Next, we have to take care of the navigation. We have to create the navigation, I mean, the menu icon, and also create this nice and cool navigation here. For that, let's move on to the next lecture. 6. Creating HTML Markup for Navigation: All right, in the previous lecture we have customized the website header. As you can see, it looks pretty nice. Now, as I said, we have to take care of the navigation. We're going to be creating the menu icon and also the navigation items. In this lecture, we're going to be creating the HTML markup. And then we'll customize the elements and also make the navigation work using Javascript. Okay, let's go back to the VS code. And in the HTML file right after the container, I'm going to insert new comments for the navigation. And then inside the commons, I'm going to open div tag, which will be menu icon. The menu icon will consist of three different lines. Therefore, I'm going to insert you three P tags. We need class names, line and line one. The first class will be used for common styling. As for the second class, we will use it for individual styling. As I said, we need three lines. Therefore, I'm going to duplicate this line of code and then change the class names. We need line two and line three. All right, After that, I'm going to create the navigation items. First of all, I'm going to add here comments for the menu icon. Then we need here of menu icon. Then I'm going to insert again, new comments for navigation items. Let's open HTML five. Now, tag with the class name navigation. Then I'm going to insert tag with the class name left. This element will include the image which is placed on the left side of the navigation. I mean this image here which has nice and cool hover effect. Let's go ahead and insert here image. I'm going to select image from the images folder. In this case, we need book JPG. Let's sit about the left side. Let's go ahead and create the right side. We need to hear right inside the no right development. I'm going to insert another deep, which is going to be no items. Then we'll have five different navigation items. We need to open link tag, I'm going to insert your home. The first link element will be different from the rest of the link elements. Let's open a element, then inside the link element, I'm going to insert span with number 01. Then we need about, let's duplicate this line of code four times. Actually, three times, because overall we need four items with span elements. The second link element will be books. Then we'll have third item, and it's going to be testimonials. Finally, we need contact. Okay? So that sits about the HTML markup. I think everything is created. Let's check the browser. We have here the image and the navigation items. Right now, we have just the HTML markup. That's why the elements look bad. In order to fix that, let's move on to the next lecture. 7. Styling Menu Icon: In the previous lecture, we have created the HTML mark up of the navigation. Right now, we have here just the elements without any styling, and they look pretty ugly. We have to take care of that in this lecture. I'm going to customize the menu icon. We will style it. I mean, we will create those lines. And also we'll create this nice and cool hover effect. Okay, let's go back to the VS code and find the container right after the container, I'm going to insert new comments for the navigation of navigation. Then we need commons for menu icon before we start to style the menu icon. First of all, I'm going to hide for a while the image and the navigation items. I'm going to insert to your new comments for the navigation items we need here of navigation items. Let's select elements with the class name navigation and assigned to it display. No. Okay, so the image and the navigation items are hidden. Now we can start to style the menu icon. I'm going to select menu icon. Then let's define with in Hyde, I'm going to set with 24 Ram. As for the Hyde, it's going to be two Ram. In order to make the element visible, I'm going to add here just temporary background color. Let's make it, I don't know, Let's say red. Here we have the menu icon. Next we have to take care of its position. We have to place it on the right side. I mean, at the top right corner of the page, I'm going to set position to fixed. Then the top position is going to be seven Ram. As for the right position, I'm going to set it 215 Ram. As you can see, the menu icon is positioned nicely. Next I'm going to get rid of the temporary background color from here. Then I'm going to select the line. I mean we are selecting lines with common class name line. Let's define height. It's going to be 0.2 m. Then change the background color. I'm going to use here, this blue color. Here we have the lines, as you know from the finished version, the first and the third lines have with 100% As for the second line, it is smaller relative to the rest of the lines. I'm going to select line one and line three, defined therewith as 100% As for the line two, I'm going to set it to 70% As you see, actually this is the finished version. As you can see, the second line became smaller. Let's separate lines from each other. For that, I'm going to use flex books. I'm going to add here Display Flex. Then we have to change the direction because lines should be aligned vertically. Flex direction is going to be column, then we need to separate flex items. And for that, let's use justify content space between. As you can see, the lines are separated and actually with the styling of the menu icon we're almost done. I'm going to add cursor pointer. As you can see, the cursor pointer is not applied to the menu icon. We need to fix that problem using index property. Let's set the index to the maximum value, which is 1,000 Now the problem is fixed. Okay, with the styling, we are done. Next, we have to create the hover effect on hover. We have to make the first and third line smaller. As for the second line, we have to move it to the right side. I'm going to select menu icon with hover. Then followed by line one. We need dissenting for the line three as well. On hover, we have to decrease the width of the lines. Let's make it 70% As for the line two, let's copy this code, change the class name. We need line two. In case of the line two, we need to use margin left. The value is going to be 30% We need to move the line to the right side. If we check the result, as you see, everything works fine. The only thing that we need here is to use transition in order to make the effect smoother. I'm going to add here transition with the value and the duration is going to be 0.3 second. So as you can see, we have here nice and cool hover fact with the menu item we are done for now. Next we have to take care of the navigation items. For that, let's move on to the next lecture. 8. Styling Navigation Items: In the previous lecture we have styled the menu icon. We have created this nice and cool hover effect. Now in this lecture, I'm going to take care of the navigation items. We're going to style the navigation. In this lecture, I'm going to make the navigation look like. So then next we will of the Java script. I mean, we will add functionality to our navigation. We'll make it work. Okay, let's go to the VS code. Right now the navigation is hidden. I'm going to get rid of display none from here. Let's set within height of the navigation. I'm going to set with 100% As for the height, I'm going to make it 100 viewport height, I 100% of the viewport. And also I'm going to change the background color. In this case, I'm going to use color 191919. It is a dark gray color. Here we have the navigation. Actually, I'm going to cover the header with navigation. For that, we have to use index property with some higher value than zero. I'm going to 30 to 100. Right now it is not covered because we have to define the position for the element. In this case, I'm going to set position fixed. Also, I'm going to define top and left properties. Both of them should be zero, okay? Now the header is covered and we see here just the navigation. Next thing that I'm going to do is to use Flex box in order to align flex items horizontally. So we need to display flex. After that, I'm going to take care of the left and right sides of the navigation. As you remember, we have two parts, left part and the right part. I'm going to start with the left part. Let's select no left. I'm going to define within height. The width is going to be 50% As for the height, I'm going to make it 100% Right now, nothing is changed here. We need to take care of the image. It should take up with in height of the parent element, which is no left. We need to select no left followed by the image we need here. With 100% also height 100% then we should feed the image. For that, I'm going to use object feet col. Now as you can see, the image takes up the half of the navigation. Next, I'm going to create the hover effect. I mean this hover effect here. By default, we should make the image black and white and then want to hover over the image. It should get back its original color in order to make the image black and white. I'm going to use filter with gray scale function and I'm going to set it to 100% Now as can see, the image became black and white. Besides that, I'm going to decrease the opacity. Let's make it 0.5 Okay? So now we need to create the hover effect. I'm going to select enough left with hover. And then we should select image in order to get back the original color. We should use again filter gray scale and we should make it zero. Also we need to increase the opacity. Let's make it one use transition for smoother effect. We need all as the duration. I'm going to use 1 second. Now, once I hover over the image, then we'll get this nice and cool hover effect. Actually, I'm going to make the pointer the cursor pointer. Let's add here cursor pointer. All right, so that sits about the image. Let's go ahead and take care of the right side of the navigation. I'm going to select right, I'm going to define within height. The width is going to be 50% like the left side. The height would be 100% Next, I'm going to change the background color of the right side. I'm going to make it 171717. Then we have to take care of the navigation items. I'm going to place them in the center of the right side. Let's use flex books. We need Display Flex. In order to place the content in the center, we have to justify content center and also a line items center. All right, now let's go ahead and take care of the navigation items themselves. I'm going to select no items, which is the parent elements, the wrapper of the items. We need to place the items vertically in the column. I'm going to use flex book. We need to display flan. We need to change the direction of the flex box. It's going to be column. Now they are placed vertically in a column. Now I'm going to customize the link elements. Let's go ahead and select another items followed by the link element. The font size is going to be 1.8 Ram. Then we need margin to create some space between the flex items. The margin will be two Ram at the top and bottom and then zero on the left and right sides. Also, I'm going to transform text to upper case we need here text transform upper case. Then I'm going to change color. Let's make it whites. All right, now our link elements look much better. Next, I'm going to create the hover effect on hover. I want to change the color of the link elements. Let's go ahead and select now items A with hover and change the color. Make it we need color. Let's use here this blue color also. I'm going to use transition for a smoother effect. Let's say transition to color. And then the duration is going to be a 0.3 seconds. Okay, So once we hover over the link items, as you can see they changed their color. All right, now let's take care of those numbers here. As you remember, we created span elements inside the links. So I'm going to customize those span elements. Let's go ahead and select no items followed by the A element. And then we need span. Actually, when we selected the Google phones, I forgot to select one additional phone. So let's go back to the Google phone website and search for phone called sin. Let's select the first one. Then we need to click Get pont. Then get M code and copy this code from here. Let's paste it here. I mean, we need to replace those links. Now we can use the newly added font. I'm going to change the phone family. Let's use Sz Sansorif. Then I'm going to increase the phone size. It's going to be three run. I'm going to make the phone boulder using phone weight. Let's make it 900. Then I'm going to create a space at the, I mean, on the right side. We need margin, right? Let's say to one. Finally, let's increase on space between the letters, make it 0.2 Okay, now as you can see, the numbers on the left side of the link elements look pretty nice and cool. Next I'm going to create the lines under the numbers. I mean, if we take a look at the finished project and hover over the link items, you'll see that we have here nice and cool effect under the numbers, the line appearing. I'm going to create those lines using force element. Let's go ahead and select no items, a span. And then we need before. So elements, first of all, we need to define content which is going to be empty. Then we need within height, the W is going to be 100% Then I'm going to set height to 0.5 Ram. Also change the background color. The color will be the same, I mean this blue color here. Then we need to take care of the position of the element. Let's set position to absolute. I'm going to position element according to the parent element, which is the span we need here, position relative. Now if we take a look at the project, you will see that the lines are displaying. But we have to adjust the position. They should be placed down below. Let's set bottom position to zero. And I'm going to set left position to zero as well. Okay, that's it about the lines. Now we should hide them and display them back. Once we hover over the link items, I'm going to set width to zero. Then I'm going to select before elements with hover, we need to add here hover we should make with 100% And also I'm going to use transition. Let's insert here with, with the duration 0.3 seconds. Now, once we hover over the link items, then those lines will be displayed nicely. The only thing that I have to do is to take care of the first link item. As you can see, we have here the line I'm going to create this line using again before do element, let's select the first link elements. For that we need nov items a followed by the first child select it is a pseudo element, actually it is a pseudo class, not the pseudo element. First of all, I'm going to create a space using padding left. Let's set it to six. Then I'm going to grab the selector and I'm going to add here before the elements, actually, let's correct this code from here and make some changes. The content should be empty then. The width is going to be 4.8 Ram. The height will be 0.2 Ram. Then I'm going to make the background color white. We need position absolute. Then we need position relative. For the parent element, we need relative. Besides that, I'm going to set top position to 50% We need to place it in the center vertically. Then left position will be zero. And also we need to use transform translate Y with -50% because we need to center the element perfectly. Right now it's not visible. Let's check the code. Actually, we need her Ram. Let's go back to the browser. And as you can see now, before the element, the line is visible, the only thing that I have to do is to change the color. Once we hover over the first link element, I'm going to select this selector here, then I'm going to add hover. After first child, we need to change the background color. Let's use here this color. And then use transition. All 0.3 seconds, okay? Now everything looks nice, the navigation is customized. And now we have to make the work. I mean, we have to make the hamburger menu work. Once we click the menu icon, then the navigation should be displayed. For that, let's move on to the next lecture. 9. Making Navigation Work: All right, in the previous lecture, we have finished styling the navigation. I think that it looks pretty nice. Now, as I said, we have to make it work. Let's take a look at the finished project. As you can see, by default, navigation is hidden. Once we click the menu icon, then it will appear with nice and cool fade effects. Also, as you notice, the navigation items are hidden. And they appear with fade effects and with some intervals. Besides that, the menu icon is transforming, those lines are transforming into an arrow. All those things we will do in this lecture. Okay, the first thing that we have to do is to hide the navigation by default. For that we have to find navigation and add to it capacity zero and visibility he. As you can see now the navigation is hidden. The next thing that I'm going to do is to open script JS file and write some gas code. We're going to select two elements. The first one will be menu icon. As for the second one, we should select the container, I mean the wrapper of the content. I mean this element here. Let's go ahead and create new variable. I'm going to call it menu. I'm going to select this element using query selector method. We have to specify the class name of the menu icon. Let's duplicate this line of code. Change the name multi variable. It's going to be container. And also we have to change the class name. Let's insert here, Container. Okay, after that, I'm going to add an event listener to the menu icon with a click event, because we should display the navigation once we click the menu icon. So I'm going to add an event listener to the menu icon. We have to specify here the click event. We have to specify here the click event. And also we have to pass the back function. It's going to be an arrow function. This line adds an event listener to the menu icon element. It listens for a click event, and when the click event occurs, it executes the error function. Now I'm going to add a new class to the container with a total method, and then we will use this class name in the CSS file. I'm insecure container class list. Then we need total method. I'm insecure new class name. Let's call it navigate Inside the arrow function. This line toggles the CSS class navigates on the container element. If the navigate class is not present, it adds it. And if the navigate class is already present, then it removes it. That's the way how the toggle method works. Now we have to go to the CSS file and select Navigation. With this newly created class, Navigate, we have to display the navigation pack. So I'm going to grab those two lines and place them here. We need opacity to be equal to one. As for the visibility, it should be visible. Okay, so now if I click the menu icon, then the navigation will display. And if I click back the menu icon, it will hide. Everything works fine for now. Now I'm going to add little smooth effect to the navigation. Let's add here transition with a and with the duration point to second. Now the navigation is displaying and hiding with some smooth effect. All right, now we have to take care of the left and right sides. We need to hide the left side. I'm going to find no left and add to it opacity zero and visibility. Then I'm going to select no left with the class. Navigate. Then let's grab those two lines. Change the values. We need capacity one and visibility visible. I'm going to add transition here. We need all then. The duration of the transition is going to be 1 second. But besides that, I'm going to add little delay time. Let's set it 2.7 seconds and check the result. If we display the navigation, then the image on the left side will appear with a little delay. We need the same transition by default. I'm going to grab this line of code. Let's add it here and get rid of delay time. Okay, so everything works fine. Next we have to take care of the right side. Let's take a look at the finished project. As you see the right side, I mean this part is coming from the left side. Let's go ahead and take care of that. I'm going to find enough, right then I'm going to move it to the left side using transform translate x as the value I'm going to pass here -200% Besides that, I'm going to increase the width of the enough right elements. By default it should be 100% It will make our effect nicer. Now we need to use class Navigate with enough, right? Once we click the menu icon, then we should move the element to the right side. We need to transform, translate x and the value will become zero. Also, I'm going to make the width of the elements 50% Then we need transition 1 second. Okay, let's go ahead and check the results. So as you can see, everything works perfectly. Now we have to take care of the navigation items by default, I'm going to hide them. Let's add here capacity zero and visibility. Then we need to use, again, class navigate. Let's select enough items and grab those two lines. We need to make the link elements visible. We need opacity one and visibility visible. But in case of transition, we need different delay times for the link items like we have it in the finished project. As you can see, they appear with some intervals. Therefore, we need different delay time for each navigation item. I'm going to select nub items. With class navigate, we need to select the first nob item. Therefore, I'm going to use and child selector. We need first no item and we have to transition with opacity 0.5 second. It's going to be the duration. And also we need the delay time 1 second. Besides that, we have to add here color. Because as you know by default, no items have transition with color. I'm going to add color here and I'm going to get rid of this line of code from here. The duration for color will be 0.3 second. Now I'm going to duplicate this code four times. Then I'm going to change the chat selectors we need here, the second item and the delay time is going to be 1.2 seconds. Then we need third item with the delay time 1.4 seconds. Then we'll have here fourth item, 1.6 seconds, and finally fifth item, 1.8 seconds. Okay, let's go ahead and check the results. Open navigation. So as you can see, everything works perfectly. All right, so the only thing that I have to do is to take care of the menu icon. We have to transform those lines into an arrow, like we have it in the finished project. Let's go ahead and do that. I'm going to find the lines, then I'm going to select line one with class navigate. So in case of line one, we have to decrease the width and make it 50% Also, we have to move and rotate the line one. We need to transform then translate function. The value of translate x is going to be 103% Also, we need to move the elements according to the y axis with 0.5 gram. Besides that, we have to rotate the element according to the z x. The value is going to be 25 degrees. Okay, let's check the result. As you can see, the first line is rotating and also it changed its position. Let's do the same for line three. I'm going to duplicate this code. We need here line three. We need to add here minus sign. And also need to add the minus sign here. As well. As you can see, the first third lines move perfectly. Now we have to increase the width of the second line. I'm going to select second line with class. Navigate and set with 100% If I click the menu icon, then we will get here an arrow. We have here one tiny problem, once the icon is transformed into an arrow. And then we hover over the icon. The lines will have still the hover effect, and we don't need that in order to fix that problem. I'm going to use cloth navigate. Then I'm going to use hover with menu icon, followed by the line one. We need the same thing for line three. On hover, I'm going to set with two 50% As for the line two, let's duplicate this code. Get rid of this line of code and change the class line. We need line two. In case of line two, we need here margin left to be zero. As you can see, we no longer have here the whole effect. All right? So actually that's it. Everything works fine. And with the navigation, we're done. Now we have to move on and start to create the next section of our project. And for that, let's move on to the next lecture. 10. Creating HTML Markup for About Us Section: In the previous lecture, we have finished working on the navigation. Everything looks pretty nice and works perfectly. Now we have to move on and start to create the next section of our landing page, which is About section. Here we have about section. It looks pretty nice and it's simple one. As you remember, each section on the landing page has its proper page. I mean, if I click here, then we'll go to the At page. Right now I'm going to create the about section on the landing page. As for the pages, we will take care of them a bit later. The about section consists of two parts. We have left side where we can see the number of the section and also the button with nice and cool hover effect. As for the right side, we have here some textual elements. Okay, that's all about the about section. In this lecture, I'm going to create the HTML markup. Let's go ahead and right after header, insert new comments for about us section, I'm going to call it about. Then let's go ahead and open section tag with the class name. Next I'm going to insert your development which is going to be about content. As I said, we will have two parts, left side and right side. I'm going to open tag with a class name about content left. Let's create the right side. I'm going to change the class name we need here. Right inside the left side we will have the number of the section and also the button. I'm going to open tag with the class name section in which I'm going to insert spannelement with the number 01. Then I'm going to open button tag with the class name main BTN. Let's insert your link elements right now. I'm going to place your hash sign. As for the text, I'm going to insert here, Explore. Let's see about the left side. Let's move on and take care of the right side. Inside the right side, I'm going to insert a couple of different elements. I'm going to insert here, H four heading with the fast name section heading M, it means small. Let's insert here about us. I'm going to duplicate this line of code. We need one heading elements, then the name will be section heading LG large. As for the text, I'm going to interfere who are we? Then we will have section border this element here. After that, I'm going to create paragraph with some dummy text we need here. Lorem 30. Then I'm going to create another paragraph with the dummy text. In this case, I'm going to inter lum 40. Okay, I think that's it. Everything is created. Let's check the browser. Here we have all the elements. Now we have to move on and style about a section for that. Let's go ahead and move on to the next lecture. 11. Styling About Us Section: All right, in the previous lecture we have created the HTML markup for our above us section, I mean this section here. Now, as I said, we have to move on and style those elements. Let's go back to the VS code in the CSS file. Right after the header, I'm going to insert new comments for about. Then I'm going to select the section element with the class name About. The first thing that I'm going to do is to define the width. It's going to be 100% Also, I'm going to change the background color. It's going to be 20 to zero to zero. Then I'm going to set padding to ten at the top side. The zero on the right side, 15 Ram at the bottom side, and zero on the left side. As you can see, the space is created inside the section using padding. Next, I'm going to place the content in the center using Flex books. We need Display Flex. Then I'm going to justify content to center. And also we need a line items center, the content is placed in the center. Next, I'm going to take care of the about contents. I mean this element here. Let's go ahead and select about contents. I'm going to define within heights. The width is going to be 100% As for the height, I'm going to set to 100% as well. Also, I'm going to place the left and right sides side by side horizontally. For that, I'm going to use flex books. We need display flex. Okay, so as you can see, the left and right sides are placed horizontally, side by side. Next, I'm going to take care of the left side. So let's go ahead and select about content left. Each side, I, left and right sides will take up 50% of width of the section. I'm going to set width to 50% Then I'm going to place the text on the right side. Let's go ahead and set text de line to right. Also, I'm going to create padding on the right side using padding, right? And the value is going to be six round. Okay, that's it. About the wrapper development, I mean about content left. Next, I'm going to take care of the number of the section. Let's go ahead and select section followed by the span element. First of all, I'm going to change the phone paily. In this case, I'm going to use phone called sori. Then I'm going to increase the phone size. It's going to be 25 fram, I'm going to make the phone bolder using phone weight. The value is going to be 900. Now I'm going to set image as the background of the text like we have it in the finished version. I'm going to use the same technique that we used in case of the heading in the website header. We need here the following properties. The first one is going to be background image. We have to define the URL of the image. We have folder images and I'm going to select G two. Then we need to use background size, it's going to be cover. Also we need background clip, the value will be text. Then we need the same property with web key. Finally, I'm going to set color to transparent. Okay, so as you can see, we have here image as the background of the section number. The last thing that we have to do regarding this element is to create a little shadow effect. I'm going to use tax shadow with the values 0.5 Ram, one Ram. And the color is going to be RTP, a black color with the opacity 0.2 that sit above the section number. I think it looks pretty nice. Next we have to take here of the bottom, I'm going to select Main BTN. Let's define within height. The width is going to be 28 Ram, then the height is going to be six Ram. I'm going to change the background color. Let's use here blue color. Then I'm going to get rid of default border. Let's set it to none. I'm going to make the button rounded. For that we need border radius, but the value of three Rams, I'm going to set cursor to point. Okay, let's see about the button element. Next we have to take care of the link, which is placed inside the button. So let's go ahead and select the main BTM followed by the elements. I'm going to set within height to 100% so that the link element will take up the entire within height of the butttom. Let's set to 100% Next I'm going to change the phone size. It's going to be 1.4 As I'm going to make the phone bolt, we need to transform text to upper case. Also, let's create some space between the letters. Let's set it to 0.3 Ram. And finally, I'm going to make the text whites. The button looks pretty nice. Next I'm going to create the click effect. For that, we need to use pseudoclass called active. And we have to transpore to translate why the value is going to be 0.2 Run as you can see, we have here nice and cool click effect. All right, let's place this code after main BTN. Now I'm going to create the hover effect. I mean this nice and cool hover effect. For that, we will need before pseudo elements. Let's go ahead and select main BTN followed by the before pseudo element. First of all, we need to define content. It's going to be empty. Then I'm going to set within heights, both of them to 100% Then we need to change the background. I'm going to use linear gradient. I'm going to change the direction of color. Transition is going to be two rights, then the first color will be transparent, then we will have white color. Then I'm going to in third color, which is going to be transparent. Right now, element is not visible because we have to define the position. It's going to be absolute. Also, we need position relative for the main BTN because it is a parent element. And we're going to position before element according to the parent element. I'm going to add here position absolute relative elements should be visible. Here we have the before pseudo elements. Let's go ahead and change the position. I'm going to set the position to zero. As for the left position is going to be -100% Besides that, I'm going to skew the elements. We need to transform skew x function. We need to skew the element along the x axis. Let's set the value to -30 degrees. Here we have the before the element. Once we hover over the button, then we should move the element to the right side. I'm going to select the main BTN, followed by the hover class, and then we need the elements. I'm going to move the element to the right side. I'm going to set left position to 100% Now if I hover over the button, then before element will move to the right side. Actually we need to make the effect smoother. We need transition. I'm going to add transition before suit elements. We need he left 0.3 second. As you can see now the effect became smoother and the only thing that we have to do is to hide the before to do element. For that, I'm going to use overflow heated. Okay, that sits above the bottom. We have here, nice and cool. However, in fact, next I'm going to take care of the right side. Let's go ahead and select about content. Right? I'm going to define with, it's going to be 50% then we need, I'm going to set padding to eight Ram at the top side, then zero on the right side, zero at the bottom side, and six Ram on the right side. After that, I'm going to customize the headings. Let's go ahead and start with the small one. I'm going to select section heading SM. Let's set phone size to 1.2 Ram. Then we need phone weight, it's going to be 300. I'm going to transform text to upper case. Then we need letter spacing to create some space between the letters. It's going to be 0.5 Ram. Finally, I'm going to change the color of the heading. Let's use blue color. Okay? The first heading, the small one, looks nice. Next, we have to take here of the second heading. Actually, I'm going to duplicate this code. Let's change the class name. We need here LG. Then the phone size will be three Ram. Then we need font weight 300. Also, I'm going to leave here text transform upper case. Then the letter spacing is going to be 0.3 Ram. As for the color, I'm going to make it white. I'm going to add here, margin three Ram at the top and bottom sides and zero on the left and right sides of the second heading. Looks pretty nice. Next we have to take here of the section border. I mean this album here. Let's go ahead and select section border. I'm going to define with height. The width is going to be 50 Ram, then the height will be 0.1 Ram. Let's change the background color. I'm going to use gray color, 333. Finally, we need margin at the bottom side, let's set it to three Ram. Okay, so here we have the border. If we take a look at the finish project, you will see the blue elements at the beginning of the section border. I'm going to create this element using after the elements. Let's go ahead and select section border. Actually we need here. After the element, I'm going to define the content. It's going to be empty. Then I'm going to define within height. The width is going to be seven Ram. Then we need height, it's going to be 0.7 Ram. Also change the background color. Let's use here blue color. Then we need to define the position of the elements. Let's set position to absolute. As you already guessed, we need position relative for the parent element because we are going to position after to the element according to the section border, which is a parent element. We need here top and left properties, both of them to be zero. Okay? That's it. We have here section border With this nice addition. The only thing that we have to do is to customize the paragraphs. We have two paragraphs, I'm going to select about, let's set with 250. Then I'm going to define the phone size. It's going to be 1.4 so let's change the color, make it white. Then I'm going to change the line height. We need some space between the lines. Let's go ahead and select line height. The value is going to be 3.5 Ram. And also we need some space between the two paragraphs. Let's set margin bottom to again so that sits about section looks pretty nice and we're done with the section. Next we have to take care of the next section, which is going to be a book section. For that, let's move on to the next lecture. 12. Creating HTML Markup for Books Section: In the previous lecture we have styled the About section. Now, as I said, we're going to create the next section of our landing page. Let's take a look at the finished project. The next section is going to be book section. As you can see, it consists of header. Then we have three different books and those covers nice and cool over effect. By default they are black and white. And once we hover over the covers, then they get their original color. Down below, you can see the name of the book and also the author of the book. Down below you can see View All Button. This button is similar to the button that we created in the last section. If we click on the button, then we will navigate to the books page. Right now we're going to create the section, and then we will take of the page later. Okay, in this lecture I'm going to create the HTML markup for the book section. Let's instre new comments for books. Then I'm going to open section elements with the class name books in which I'm going to insert deep elements with the class name books content. This element will include the entire content of the book section. Inside the books content element, we will have three different parts. We'll have Bookstop, which will include the header of the section. Then we'll have the list of the books. And after that, we'll create the button. The first element that I'm going to create is going to be bookstop. It will include the books header. I'm going to grab the header from the previous section. I mean, we need those two heading elements and also the section border. Let's grab those three elements and paste them here. I'm going to change the content we need here. Books, The H one heading elements will be our best sellers. We need her best sellers. Next, I'm going to grab the section number from the previous section. Let's grab this element and paste it right after the header. We need to change this panelement. It's going to be 02. As you can see the header, those headings and section border and also the section number are already styled. Because we created styles for the elements in the previous section, we just need to align them correctly in this section. Next, I'm going to insert your books list in which I'm going to open tag with the class name book. Each book will include the image, I mean the cover image and three span elements for the name of the book. Also, we will have here this border. And down below you can see the author of the book. As I said, we need three different elements. The first one is going to be Image. I'm going to select image from the images folder. The first image is going to be book one. Then I'm going to institute pan elements with the class name, book name. I'm going to institute you the name of the first book. It's going to be the Adventure of Tom Sawyer. Then we will have here another span elements with the class name book line. Finally, we need third span elements with the class name book other. The author of this book is Mark Twain. I'm going to ins Mark Twain. Okay. In this section we will have three different books. Therefore, I'm going to duplicate this code twice and change the details we need here. Book two. It's going to be, let's insert here. Idiot. And the author is Fody. Then we have here book number three. The name of the book is The Count of Monte Crystal. The author of the book is Alexander. So let's sit about the books. Next we have to create the button, actually I'm going to grab the button from the previous section. Let's grab this code. Pace it here. I'm going to change the text of the link elements. It's going to be view A, so I think that sits about the HTML markup of the book section. Again, the header and the section number are already styled, as well as the bottom. Next, we have to style the rest of the elements, and also we have to take care of the alignments, the elements in the section. For that, let's move on to the next lecture. 13. Styling Books Section: All right, so in the previous lecture we have created the HTML markup of the book section. Now as I said, we have to style this section. Some of the elements are already styled the header, the section number, and also the main button down below. We need to align those elements correctly and also we have to style the remaining elements. Let's go to the VS code and right after about section, insert new commons for book section. Then I'm going to select section elements with the class nine books. Let's define the width. It's going to be 100% Then I'm going to place the content in the center using Flex books. We need to display Flex, then justify content center and Align items center. Also, I'm going to create some space inside the section using putting. It's going to be ten Ram at the top side, then zero on the right side, 15 Ram at the bottom side, and zero on the left side. Okay, so the space inside the section is created and also the content displaced in the center. Next I'm going to take care of the top side of this section. So let's go ahead and select books. Top. I'm going to place the elements, I mean the flex items side by side horizontally. For that, we need Display Flex. Then I'm going to center the content using Justify Content center and Align items center. Also, I'm going to create space at the bottom using margin. Bottom ten kids can see the header and the number of the section are placed horizontally, side by side. Next, I'm going to take here of the header. Let's go ahead and select books header. I'm going to align text on the right side. We need text align right. Also, I'm going to create some space on the right side using margin, right? The value is going to be ten. Okay? As you can see, the headings are placed on the right side and we have space between the header and the number. Actually, we need to move this blue elements on the right side. For that, let's go ahead and select after element. But first of all we need to select books header. Then we need section border followed by the after element. I'm going to set right position to zero. If we take a look at the default styles for the section border, I mean the after element, you will find here the left position. If we right here, just right position without left position, then the alignment won't be. Correct me. If we save it and go to the browser, you can see that the after element is still on the left side. We need here left to be auto. As you can see, the access to the element now is placed on the right side. All right, after that, I'm going to take care of the number. Actually we need different background image for the number. I'm going to select span element, but first of all, we need books to the section followed by the span element. Let's change background image. I'm going to select image from the images folder. It's going to be text BG three. Let's take a look at the project. Here we have the background image and it's different from the previous background image. I think that we can move slightly the background image in order to make the result a little bit nicer. I'm going to change the position of the background image. We need a background position as the values. I'm going to intere 50% and 75% now. The background image is positioned at 50% of the containers width from the left edge horizontally and 75% of the containers height from the top edge vertically. If you imagine a rectangular container, the background image will be placed such that its center horizontally aligns with the center of the container, and its bottom edge aligns with 75% of the containers height from the top. Hopefully, it was clear for you. Next, we have to take care of the books. Let's go ahead and select, We need your list. I'm going to use flex box. Let's set display to flex. Then I'm going to change the width of the book. Let's select book and set to 35 fram, actually we need to change the width of the images because they are too bigger right now. Let's go ahead and select book. Followed by the image element. I'm going to set with 30 Ram for the height. Let's set it to A. Now as you can see, the images became smaller. Actually, we used to hear display flags and therefore, the books should be placed horizontally in a row. Well, we have here maybe a mistake. Well, we need here books list and not book list. Now, the problem should be fixed. As you see, the books are placed horizontally in a row. Next, I'm going to customize the book. I'm going to add here display. We're going to align elements vertically in the column. I'm going to use flex books. Let's set display Flex. Then we need to change the direction it's going to be column also, I'm going to place elements in the center. I mean horizontally in the center. And let's check the result. As you can see, the span elements are placed in the center. I mean the text elements are placed in the center. Next, I'm going to set margin to six Ram in order to create space around the book so that sit about the books right now. Next I'm going to take care of the cover images. We're going to make them black and white. In order to do that, as you remember, we have to use filter with the gray scale function. I'm going to interfere 100% now the images are black and white. After that, I'm going to make them a little bit rounded, important radius one Ram. And also I'm going to create the shadow effect. Let's use book shadow with the value of 01 Ram, then three Ram, the color. Let's use black color with the opacity 0.4 I'm going to change the cursor, make it pointer. Okay, The books look nice. Next, we have to create the hover effect. Once we hover over the cover images, then we should get back here the original color. I'm going to select book image. Actually, let's leave here book with hover. Then select image. We need to use filter with the gray scale function. We have to set it to zero, as you can see. Now we're getting here the original color. Let's make the effect smoother. Transition filter, the duration is going to be 1 second, okay, so everything looks perfectly. Next we have to take care of those span elements here. Let's go ahead and start with the book name. I'm going to change the phone family. It's going to be co script cursive. Then I'm going to change the phone side. It's going to be 1.4 Ram. I'm going to transform text into upper case. Then we need color to be blue. Create some space between the letters, let's say 2.1 And create some space at the top and bottom sides. Let's make margin 3.0 Okay, so the book names look pretty nice actually. Once we hover over those panelments, then the image is changing the color. Actually, I think that it's not quite good. I was right when I was going to add the hover effect to the image and not to the book. Let's add hover to the image. I think it would be more correct. Okay, so now, now I think we have better results. Once we hover over those spinelements, then the images are keeping their black and white color. Okay, let's move on and take care of the book line. I'm going to set width to ten Ram, then the height is going to be 0.1 Ram. Let's change the background color. It's going to be RGBA color. I'm going to use white color. We need 25053 times, then I'm going to change the opacity. Let's make it 0.1. Finally creates a space at the bottom side using margin. Bottom with value three Ram. Okay, so here we have the lines, they look pretty nice. Next we have to take care of the authors of the books. So let's go ahead and select book author. Actually, I'm going to grab this code in here. Get free phone family. Don't change the phone size. It's going to be two. We need transform per case. Also the color is going to be white. Then I'm going to make spacing 0.5 Ram. As for the margin, I'm going to get rid of it. Okay? So as you can see, the authors look nice. But we have here a tiny issue. We need to align text in the center for that. I'm going to add here text line center. It should fix the problem. Okay, Everything looks nice. Next, I'm going to take care of the main bottom. We should place it in the center of the section. And also we need some space between the books and the bottom. I'm going to select books, content followed by the main BTN. Let's create space using margin, top ten Ram. In order to place the bottom center. I'm going to select books content and use just text the line center. Okay, that sits, we have styled the book section. Everything looks pretty nice. Next we have to take of our next section, which is going to be the testimonial section. For that, let's move on to the next lecture. 14. Creating HTML Markup for Testimonials Section: In the last lecture, we have finished working on the book section. As you can see, it is tiled and it looks pretty nice. Now, as I said, we're going to move on and start to create the next section of our lending page. The next section is going to be testimonial section. Here we have the testimonial section. It consists of a couple of different elements. We have here the top side, I mean the header and the section number with background image. Then you can see the feedback. One of the clients, we have here, black and white, a picture of the client. And once we hover over the image, then it will get its original color. We have used this effect a couple of times in this project. Down below, you can see the quotes from the client's feedback. And down below, you can see the bottom, Learn More. If I click this button, then we will navigate to the testimonials page, where you can find the slider of the testimonials. It works. We have here a couple of different testimonials of the client. All right, so in this lecture we're going to create the HTML markup of the testimonial section, then we will style it as for the testimonial page, we will take care of that later. Okay, let's go ahead and to create the HTML markup, I'm going to insert your new comments for the testimonial section. Then I'm going to open section tag with the class name testimony. The testimonial section will consist of three different parts. We will have testimony on top the top side which will include the section number and the header. Then we will have feedback. And also we'll have the bottom, I'm going to open tag with the class name testimonial in which I'm insert section. Let's change the number we need here, three. And also I'm going to insert here header. Let's insert header after section number. I'm going to change books to testimonials. Also we need clients instead of books. And then I'm going to insert here testimonials. Okay, that's it about testimonial top. Then I'm going to create tag with the class name feedback. Inside the feedback, I'm going to open another div tag. It's going to be feedback top in which I'm going to insert image of the client. Let's select Image from the images folder. We need clients name. Then I'm going to open tag with the class name feedback heading in which I'm going to insert H one heading elements, we need her clients. Then I'm going to insert here Spin elements with the text feedback again. After that, I'm going to open another deep tug and it's going to be feedback bottom. Inside the feedback bottom element, I'm going to insert which is going to be background BG. These elements will be empty. Next we need in which I'm going to open deep tu with the class name he. Then we need to insure for icon. Let's use elements with the classes a solid quote left. Then after I elements, I'm going to insert H one heading elements. This heading will be for the name of the client. Let's interfere Robert Smith. Then after H one heading elements, we need second icon for. Let's copy this one. Paste it here. And instead of left interfere, right? All right. Next thing that I'm going to do is to create new development with the class name code body inside that element. I'm going to open elements with some, um, we text when you hear Lorem, let's insert 30 words. And then after body I'm going to insert stars. We need divot with the class name stars. Then I'm going to insude your E elements with the class solid star. We'll have five stars, therefore I'm going to duplicate this code four times. Finally, I'm insure bottom, I mean the main bottom. Let's add here class name, PTN, insure A elements as the text. I'm going to insepe, learn more. All right, so I think that seats in this section. We have lots of different HTML elements. I hope that everything is correct. We will see that later. Let's check the browser. As you can see, we have here all the elements like the previous section, the header, and the section number are already styled. As well as the main button. We need to align those elements and also we need to customize the remaining elements. For that, let's move on to the next lecture. 15. Styling Testimonials Section: In the previous lecture, we have created the HDML markup for our testimonial section. We have here all the elements, some of them are already styled because we have the similar elements in the previous sections, But now we have to take care of the alignment of those styled elements. As for the remaining elements which we created in the last lecture, we have to take care of them and style. Okay, let's go to the VS code and in the CSS file right after the book section, I'm going to insert new comments for the testimonials. Then I'm going to select the section element with the class name testimonials. First of all, I'm going to define the height of the section. It's going to be 160 viewport height. Also, let's adhere with make it 100% Then I'm going to check the background color. It's going to be 202020. Here we have the section element with a different background color. Next I'm going to align the elements using flex books. I'm going to set display to flex. Then we need to align elements vertically in the column. Therefore, we have to use flex direction with the value column. Also, I'm going to align items in the center using align items center. Finally, let's create some space inside the section is in putting, I'm going to say patting to ten ram at the top side, then zero on the right side, 15 ram at the bottom side, and zero on the left side. Okay, As you can see the content is placed in the center. Next I'm going to take care of the top of the section, I mean the header and the section number. Let's go ahead and select Testimonial Top. Let's use again flex box because we're going to place the header and the section number side by side horizontally. We need Display flex. Then I'm going to place the content in the center using a line items center. And also we need here justify content center. Finally, let's create some space at the bottom using margin, Bottom five, okay? So as you can see, the section number and the header are placed side by side. Next we have to change the background image for the section number, and also we need some space between those two elements. Let's go ahead and change the background image of the section number. Let's go ahead and select testimonial stop, followed by the section number. Then we need span element, we need here background image. Let's define the URL. We need images folder. And I'm going to select image called text G33, but four. Then I'm going to create some space on the right side of the number. I'm going to grab this selector from here and pace here, let's set margin right to ten. Okay, let's sit about the top side of the section. Next we have to take care of the feedback. I mean this element here. Let's go ahead and select feedback. I'm going to define with height. The width is going to be 50% As for the height, I'm going to set it to 60% Then let's use again, flex books. We need to align elements, the flex items vertically in the column. We need flex direction to be column. Also, we need to align items in the center so the elements are aligned. Next, I'm going to take care of the feedback top. I mean this element here. It includes the image of the client and also the heading. Let's go ahead and select feedback top. Use again flex box, we need to align items in the center. Then I'm going to create some space on the left side using padding left, let's say it's a seven Ram. And also we need some space at the bottom using margin, bottom five Ram. All right, after that I'm going to take care of the image because right now it's too bigger. So let's go ahead and select feedback top followed by the image element. Let's set within height to 30 Ram. Then we need to fit the image. I'm going to use object fit with the value cover. As you can see, the image became smaller. Next, I'm going to make it rounded using border radius. Let's set it to two Ram. Also we need, I'm going to make it 0.8 Ram solid. The color is going to be the same color that we use for the background color of the section. I mean 202020. Also we need some space on the right side using margin, right, three ram. Let's take a look at the results. Okay, the image looks good. Next we have to make it black and white. And also I'm going to create the same hover effect that we used a couple of times in this project. Let's use again filter with the gray scale function, make it 100% Then also we need cursor to point, okay. So as you can see, the image became black and white. Let's add to it a hover effect. I'm going to select feedback, top image for the hover pols, we need filter with a gray scale function and it's going to be zero. Also, I'm going to add here transition for a smoother effect. We need filter with the duration 1 second. Okay, that's it about the image. It looks pretty nice. And we have here nice and cool hover effect. Next, I'm going to take care of the heading. Let's go ahead and select Feedback Heading. I'm going to use again, flex books. Let's set display to then I'm going to set with 50% Then we need to place the text center. We need Textline center. Okay, Right now nothing is changed here. We need to increase the size of the headings. Therefore, I'm going to go ahead and select the first heading. Actually, we have here just one heading, but inside the heading, I have inserted the span elements for the second part of the heading, that's why I'm saying the headings. I'm going to select feedback heading followed by the H heading elements. Let's increase the phone size, make it seven Ram. Then we need color. It's going to be white. Here we have the heading, it looks good, but we need to add some styles to the second part of the heading, this pan element, we need to make it look like. So let's go ahead and grab this selector from here and add to its Pan element. First of all, I'm going to change the phone family. The phone is going to be script cursive, Then I'm going to increase the phone size. Let's make it eight Ram. Next, I'm going to create some space between the letters using Lexi spacing. The value is going to be 0.2 Ram. And also change the color, Use the blue color. All right, so that's it about the heading. Both parts of the heading looks both parts of the heading look pretty nice. Next we have to take care of the quotes. First of all, I'm going to take care of the background. I mean, this blue part here. Let's go ahead and select G. Let's define within height. The width is going to be 35 Ram. Then we need height. I'm going to make it 40 Ram. Also change the background color. Let's use this blue color here. Then we need to change the position of the element. I'm going to set position to absolute. Then we need position relative for the feedback. Because it is a parent element, I'm going to align the BG element according to the feedback we need. Position relative. Next I'm going to define top and left properties. The top position is going to be 26 Ram. As for the left position, I'm going to make it 4.5 Ram. Let's take a look at the result we have here, The background for the code. I'm going to make it rounded. Let's use border radius three Ram. As you noticed, we have here a tiny issue. This element covers the image partially. I'm going to place the image on top of this element here. In order to do that, I'm going to use z index property. And let's make it one. Now the problem is fixed and everything looks good. The next thing that I'm going to do is to create this triangle here. I'm going to do that using after elements. Let's go ahead and select BG followed by the after elements. First of all, we need to define the content, which is going to be empty. Then I'm going to set when height, both of them to zero. Next, we need to change the position. Let's set position to absolute. Now I'm going to create the triangle using borders, that's why I sat there with and height both of them to zero. We need to use a couple of different border properties. The first one is going to be border left. The values will be for Ram solid, the color is going to be transparent. Next, I'm going to use border right. Actually, let's duplicate this line. Change the property we need here, border, right. Then we need another property called border bottom. But in this case, I'm going to change the color we no longer need here transparent. Let's use the blue color. Now the element is not visible. Let's change the color, make it red. Here we have the triangle. And now we have to change the position of this element. Let's get back here the color blue. We need the bottom position to be minus three. Also, I'm going to say position, let's make it one Ram. The last thing that I have to do is to rotate this element. I'm going to use transform. With rotate function, the value is going to be -45 degrees. Now everything looks good with the background. We are done. Next, we have to take care of the quote itself. I mean this element here. Let's go to the VS code and select, let's define within height. The width is going to be a Ram, then the height will be 28 Ram. I'm going to change the background color. Let's use here color 28 to eight, to eight. Here we have the quote. I'm going to make it rounded using border radius. Let's make it three Ram. Also, I'm going to change the position of the element. Let's have position to absolute unit to position is going to be 33 Ram. As for the left position, I'm going to make it eight Ram. Let's check the results here. We have the, now I'm going to align the elements inside the quote using flex book. Let's go ahead and use display flex. Then we need to align elements vertically in the column. We need to change the direction, it's going to be flex direction, column. Also, we need to align items in the center. As you can see, the elements are aligned lasting. Regarding the quote is going to be to create the space inside the element, I'm going to use pudding. We need here pudding. It's going to be three ram at the top and bottom sides and zero on the left and right sides. Okay, let's it about the next. I'm going to create the triangle for the, as well we need after the elements. Actually, let's grab this code. And then change the class name we need here. I'm going to change the color. It's going to be 28 to eight to eight. Then I'm going to actually, let's check the results. I'm going to move this triangul to the left side like we have it in the finished version. I'm going to set left property to zero. Ok, so that's it about the triangle. Next I'm going to take care of the header of, let's go ahead and select Header. Use again Flax book we need here, display Flax. Then I'm going to align items in the center and create some space at the bottom using Margot two ram. Okay, after that I'm going to customize those quotes. I mean the phone, so icons. So let's go ahead and select header followed by the eye elements. Let's syncrese the phone size, make it a ramp, and also change the color. It's going to be blue color. Okay, After that, I'm going to customize the heading, I mean the name of the client. Let's go ahead and select Header, followed by the H one heading element. The font size is going to be two m. Then we need text transform upper case. Let's change the color of the text is going to be white. Also, I'm going to create some space between the letters, Let's make it 0.2 And finally, we need space inside the elements on the left and right sides. Let's do that using padding. The values will be zero at the top and bottom size and ten m on the left and right sides. Again, the header of the quote looks good. Next we need to take care of the paragraph. Let's go ahead and select Header. Followed by the PL. Actually header, but body with the element. It is the part of the, let's set with 250 Ram. Then the phone size is going to be 1.2 Rams. I'm going to change the call, let's make it, I mean, it is a light gray color. Then I'm going to create some space at the bottom using margin. Bottom 2.5 Rm. Let's take a look at the paragraph. We need to place the text in the center. And also I'm going to increase the line height slightly like we have it here. Let's go ahead and use text line center. And I'm going to set line height to 2.5 Rm the cam that sits about the paragraph. Next we have to take care of the stars. I'm going to select those eye elements here. Let's go ahead and select Stars, followed by the eye elements. Let's increase the phone size. I'm going to make it 1.8 then the color is going to be blue. We need here this color. And then creates space on the left and right side using margin, let's set it to zero and 0.5 Ram. All right, so let's it about the quote. The last element I have to customize in this lecture is the bottom. I'm going to define its position. Let's go ahead and select testimonials main BTN. I'm going to position absolute. Then we need position relative section elements. In order to position the bottom according to the section elements, we need position relative. Let's go back to the main BTN and add here left position 50% Then we need bottom to be 15 gram. In order to center perfectly the element, we need to use transform translate x function with the value -50% cam that sits. The testimonial section is customized, it looks pretty nice. Next we have to move on and take care of the footer. I mean this section here. The footer includes the contact section as well. Let's go ahead and create this section in the next lecture. 16. Creating HTML Markup for Footer: All right, in the last lecture we finished working on the testimonial section, we have styled it, and as you can see, it looks pretty nice and cool. In this lecture, we're going to start to create the last part of the main landing page. I mean, we have to create the footer which includes the contact section. I have integrated those two parts. I'm in the contact section and the footer. In this lecture, I'm going to create the HTM mark up for the footer. As you can see, we have lots of different elements here. Then in the next lecture we will style this section. All right, let's go back to the VS code and in the HTML file right after the testimonial section, I'm going to issue new comments for the footer. Then open HTML five footer elements. The footer will consist of a couple of different parts. The first part is going to be footer header, in which I'm going to insert the headings and also the section border. We used those elements a couple of times in our project. I'm going to copy these three lines from here and paste them down below. Let's change the contents of the headings we need here to get in touch. As for the second heading element, I'm going to insert here, Contact us. Let's take a look at the project. As you can see, we have here two headings and the section board. All right, the next thing that I'm going to do is to insert here New Developments, which is going to be footer content. This element will include the rest of the content. I'm going to open developments and it's going to be focial. It will include the social media icons and also the address. Let's go ahead and insure Developments, which is going to be address. I'm going to insure developments which will include the phonemic and also this panelmentsmicon here and also this panels. Let's open elements with the class names regular A envelope. Then after I element, I'm going to insert span with the text address. All right. After that, I'm going to open paragraph and I'm going to add here class name, paragraph PAR. The paragraph will include five different span elements. Let's open span and insecure book library. Then I'm going to duplicate span element four times. Let's go ahead and change the content. The second span is going to be Main Street 123. This is a dummy address. Then we will have seventh floor. The next one is going to be New York, And finally we need the state, New York, USA. All right, next I'm going to create the social media icons. Let's open tag with the class name social media. I'm going to insert here four different social media icons. The first one is going to be FA brands, FA, Facebook. Let's duplicate it three times and change the fast names. The second social media icon is going to be for Instagram. Then we will have here linked in in. Finally, I'm going to insert here X Twitter. Let's go ahead and check the icons if all of them are displayed. As you can see, we have here four for icons, everything works fine. Next I'm going to insert the second part of the footer content, which is going to be form. Let's interfere form elements. Get rid of action attribute, we don't need it. Inside the form element, I'm going to open the tag which is going to be input group. I'm going to insert here four different input elements. Let's open input tag with the type text. And also we need placeholder attribute. Let's insert here name. Let's duplicate this line of code three times. The second input element is going to be for e mail. Let's change the placeholder attributes intere email. Then we will have input with text, and the placeholder is going to be phone. As for the last input element, it's going to be address. All right, after that, I'm going to intro text area. Let's add here placeholder attribute. It's going to be message after text area. We need bottom with the tight bottom as the value of the button I'm going to insert here. Do okay, so let's sit about the form elements Next I'm going to create development, which is going to be fo bottom the bottom part of the footer. It will include paragraph, let's insert here the copyright sign. It's going to be H T five entity we need percent copy and sammy column followed by some text three book library. Then all rights reserved. After paragraph I'm going to insert button with the type button inside the button. I'm going to insert link elements with the text back to top and I'm going to insert your eye elements with the class names, a solid chevron up. All right. So I think that sits. Let's go ahead and check the browser. As you can see, we have here all the elements. I hope that everything is correct here because we have lots of different HTM elements. All right. So let's go ahead and move on to the next lecture, in which we're going to style the 17. Styling Footer: In the previous lecture, we have created the HTML mark up for the footer, and now we're going to style those elements. As you can see, the header is already styled. We need to position those elements also. We have to style the remaining elements. We have to make the footer look like. Let's go back to the VS code and right after testimonials in the CSS file, insert new comments for the footer. Then I'm going to select footer element. Let's define with it's going to be 100% Then I'm going to use Flex box to align the content inside the footer. We need display flex. Then I'm going to change the direction. We're going to align elements vertically in the column. We need flex direction to be column, Then I'm going to align items in the center. Finally, let's create space inside the footer. We need pudding. It's going to be 15 ram at the top side, zero on the right side, three ram at the bottom side, and zero on the left side. All right, let's sit about the footer elements. As you can see, the content is placed in the center. Next, I'm going to take care of the header. Let's go ahead and select footer header. Let's align text in the center. Also, I'm going to create space at the bottom using margin. Bottom with the value 15 grand. As you can see, the headings are placed in the center. We have to take here of the border. I'm going to place this blue element in the center of the border. Let's go ahead and select footer header followed by the section border we need after the element in order to center the element. I'm going to set left position to 50% Then for the perfect centering, we need to transform translate x function with the value -50% Okay, after the element is placed in the center of the border, next we have to take care of the content. I mean the footer content, this element here. Let's go ahead and select footer content. I'm going to define the width, it's going to be 60% Then I'm going to place the content, the flex items side by side horizontally. Therefore, we have to use Display Flex. Also, I'm going to create some space at the bottom. Let's use margin, Bottom ten m. As you can see, the address and those input fields are placed side by side horizontally. Next, I'm going to take care of the social part. I mean for social element, let's go ahead and select social and define with it's going to be 30% Okay. After that, I'm going to take care of the development inside the address. I mean this development here, let's go ahead and select Address, Followed by the development I'm going to use again, flax box, we need display flag, then we have to a line items in the center and also create some space at the bottom. Let's make it two. Okay, so as you can see, the elements are aligned and we have some space between the address and those elements here. Next, I'm going to take care of the phonosomicum, I mean, this phonosomicum here. Let's go ahead and select dress, followed by the elements. I'm going to increase the phone size. It's going to be 3.5 Then I'm going to change the color. Let's make it white. And also create some space on the right side using margin, right? The value is going to be 2.3 Ram, so the icon looks good. Next we have to take care of this pan elements. This word here, address. Let's go ahead and select Address, followed by the development. And then we need span. Let's set phone size to 1.8 Ram. Then I'm going to change the phone weight. Let's make the phone bolder. Let's set it to bold. I'm going to transform text to upper case. Also, we need letter spacing to be 0.2 Ram. Finally, let's make the text white using color white. Okay, so that sits about the span element. Next, I'm going to take care of the paragraph as you remember. We have here paragraph which includes five different span elements. Let's go ahead and select Address power. Actually, we have here little type. We need double D. Now let's select paragraph. I'm going to use flex book. Let's use display flex. Then we need to align elements vertically in the column. Flex direction, column. Then I'm going to create some space at the bottom using marching bottom. Besides that, I'm going to create some space inside the paragraph on the left side using padding. Left six Ram. Okay. So as you can see, the span elements are placed vertically in the column. Next we have to customize those span elements. Let's go ahead and select address par, followed by the span element. Let's set with 210 Ram. Then the phone size is going to be 1.4 Also, I'm going to change the color. Let's make it white. Finally, I'm going to create a space at the bottom using margin. Bottom 0.5 Ram. All right, the pin elements look good. Next we have to take care of the phone icons. I mean the social media icons. We have four different social media icons. So let's go ahead and customize those elements. We need to select social media followed by the eye elements. Let's increase the phone size. It's going to be three. Then we need color to be white. Also, we need some space on the right side. Let's set margin right to the Rams. I'm going to change the cursor, Let's make it point. Okay, so the form, some icons look good. Next we have to take care of the form. Let's go ahead and select wrapper, which is foot form. Let's select fo form. I'm going to define width, It's going to be 70% as you remember, the left side took up 30% of the width of the section. As for the right side, the form, it should take up 70% of the entire width. Next, I'm going to select the form elements. Let's use flex box. We need display flex. And then I'm going to place the flex items vertically in the column using flex direction column. All right, after that I'm going to select input group. I mean this element here. It includes four different input fields. So let's go ahead and select Input Group. Let's use again, flex books. We need display flex. Then I'm going to create space between the flex items using justify content, space between. All right, after that I'm going to customize the input itself. So let's go ahead and select input group followed by the input element. Let's set W 273, then I'm going to set height to six Ram. Also let's create space at the bottom using margin, bottom three Ram. All right, if we take a look at the finished version, you'll see that input elements are placed on two lines. In order to do that, I'm going to add here one of the flex box properties called flex wrap with the value of p. Now as you can see, they are placed, the input helmets are placed on two different lines. Next I'm going to select inputs and also the text area simultaneously. Because we need some similar styles, I'm going to grab the selector from here. Let's add here text area. I'm going to change the background color. It's going to be 111, then I'm going to get rid of the fold border. Let's set it to non. Also, I'm going to create some space inside the Empa fields using pudding one m. Then let's set the phone size to 1.4 and also change the color. It's going to be light gray color. Okay, so as you can see, the input fields look pretty nice. Let's make them slightly rounded using border radius. Let's set it 2.5 All right, so that's about the input fields. Next we have to take care of the text area. We need to add some individual styles to the text area. Let's go ahead and select text area. I'm going to set height 215 Ram. Also, let's create some space at the bottom using margin, bottom three Ram. Besides that, I'm going to disable the resizing function. Right now we can resize the text area and as you can see it can break the layout. I'm going to disable this function. We need to resize to be none, okay? Now we no longer can resize text area. Next I'm going to take care of the button. Let's go ahead and select Footer Form, followed by the button element. We need Width, it's going to be 20. Then I'm going to set height to five. Also change the background color. Let's use here blue color. Next, I'm going to place the button on the right side. And we can do that simply using margin left property with the value, now it is placed on the right side. Okay. Next let's get rid of the default border. I'm going to set it to non. Also we need border radius. Let's set it to 0.5 fram, change the fat weight. Let's set it to bold and change the color of the text. I'm going to make it white so the button looks nice. I'm going to add to it a couple of different properties. The next one is letter spacing. We need some space between the letters. Let's make it 0.1 ram. Also, I'm going to set cursor to pointer. The last thing that I'm going to do is to create some shadow effect. Let's set box shadow to 0.5 Ram, one Ram. And the color is going to be R B A. The opacity will be 0.1 All right, so I think that the bottom look bit nice. Next I'm going to add to it a click effect. For that we need to select bottom followed by the active pseudo class. And then we have to use transform translate y with the value 0.21 If I click, then we will get here this nice click effect. All right, now we have to take care of this part here I footer bottom. We need to customize the elements and align them like so let's go ahead and select bottom. I'm going to define the width, it's going to be 60% Then we need flex box to align the elements to use Display Flex. I'm going to create space between the flex items using justify content. Space between. And also we have to align them vertically in the center. Using align items center. Okay, they are aligned nicely. Next we have to customize each of the elements. I mean the paragraph and also the bottom. Let's go ahead and start with the paragraph. Select footer, bottom p. Then I'm going to set the fault size to 1.4 Ram and also change the color, make it light gray using CCC. Again, that's it, about the left side, now we have to take care of the bottom. I'm going to select foot Bottom, followed by the button element. I'm going to set width and height. The width is going to be 15 Ram. Then we need height, I'm going to set it to five Ram. I'm going to get rou default border. Let's set it to none and also get default background. Let's set it to none as well. All right, next I'm going to select Link Elements. Remember we created link element inside the button. It includes the arrow, I mean the element. Let's go ahead and select F bottom. Then we need button followed by the elements. Let's set within height to 100% I'm going to use Flex box. Let's set display to flex. Then I'm going to create some space between the text and the elements. We need to justify content space evenly. Then we need to place the items in the center vertically using a line items center. As you can see, we have some space between those two parts. Next, I'm going to change the phone size, let's say to 1.4 Ram. Also, change the color. Use again, CCC. Then we need to make the text uppercase using text transform uppercase. Finally, create some space between the legers using letter spacing 0.1 Ram. Okay, everything looks good, and actually with the footer we are done. Next, we have to take care of the scroll bar. I mean, we have to customize the scroll bar. Also, I'm going to take of the link down below. Once we click this button here, back to top, then we should scroll up smoothly. In the next lecture, we will take care of those things. Let's move on to the next video. 18. Custom Scrollbar and Smooth Scrolling: All right, so in the last lecture we finished working on the main landing page of our project. We have customized the footer of the page. Now as I said, we have to move on and customize the default scroll bar of the page. As you can see in the finished project, we have this is nice and cool scroll bar, which is different from the default one. In this lecture, I'm going to customize the scroll bar. And besides that, I'm going to create this smooth scroll effect. I mean, once we click here, this button back to top, then we have to scroll up smoothly. Let's go ahead and go to the VS code and first of all take care of the scroll bar. I'm going to institute new comments, custom scroll bar. Then I'm going to select scroll bar. And the following way we need body elements. Then followed by web kit, scroll bar. That's the way how you can select scroll bar. It is a pseudo element. First of all, I'm going to define the width of the scroll bar. Let's set to 1.2 m. Right now we defined the width of the scroll bar. If I make it let's say ten Ram, I mean 100 pixels, then you will see that the width will be 100 pixels of the scroll bar. Let's get back here, 1.2 Ram. Once the width of the scroll bar is defined. Next we have to take here of the scroll bar, thumb this part here. Let's go ahead and duplicate this code. As I said, we need web kit, scroll bar thumb. I'm going to change the background color. It's going to be the blue color that we are using throughout this project, like this color. Besides that, I'm going to add border radius to the thumb. I mean, I want to make the corners of the scroll bar rounded like, Let's add here border radius and make it five. Okay, so here we have blue scroll bar with nice and cool border radius. The next thing that I'm going to do is to change the color. I mean the background color of the track. As you can see, we have here track with dark gray background color. Let's go ahead and duplicate this code we need to add here track instead of thumb. Let's get rid of border radius then as the background color and continue to 121 to one. Okay, that's it. We have here nice and cool scroll bar, which is different from the default scroll bar. To be honest, I don't like the default scroll bar at all. I think that this one is much better. Okay, that's sit above the scroll bar. Next, we have to take care of the smooth scroll in order to scroll up smoothly. Once we click this button here, we just need to use one property and we have to add it to the HTML element. I'm going to use scroll behavior, I'm going to make it smooth. Now, once we click the link elements down below, then we will be able to scroll up smoothly. Okay. So that's it. We have finished working on the main landing page. Next we have to take care of the pages. The first page that we're going to build will be about this page here. For that, let's move on to the next lecture. 19. Creating HTML Markup for About Us Page: In the last lecture, we have finished working on the main landing page. I mean, we have created all these sections. Now, as I said, we're going to build the different pages because as you know, our website is a multi page website. In this lecture, we're going to start to create the About page. We can navigate to the About page in a couple of different ways. We can click either button called Explore. Also, we can navigate to the about S page from the navigation. If we click the about link, then we will navigate to the about page. Okay, in this lecture, we're going to create the HTML markup. First of all, we need to create new files for the about page. Let's, the first one is going to be about HTML. Also, we need file for CSS. I'm going to cope this file about the CSS. All right, let's move the Html file to the left side. Then I'm going to go to the index of the HT mail file and copy the entire page. Then I'm going to paste it in, the about HT mail file. Let's go ahead and delete all the sections. I'm going to delete those sections except the footer because we need footer. Then I'm going to delete banner from the header. As for the navigation, I'm going to insert here the names of the HTmul files we have already created about the HTML. Actually, we need to correct the name of the file because it should be about. I'm going to insert here the names of the files. Let's go to the index Html file and insert here the names of the files instead of the pound signs. The first link will be index HTML. Then we will have here about the HTML, the next page, which right now is not yet created, it's going to be books HTML. Then we'll have testimonials HTML. As for the contact section, I'm going to insert here, just contact, because we won't have the separate page for the contact section. I'm going to insert here pound sign followed by the contact. All right, let's go ahead and copy those five links and paste them here instead of those links. All right, now we need to link the CSS file, which we have just created. I mean, the about CSS file. Let's duplicate this line and change the name of the CSS file. It's going to be about CSS. All right, let's go ahead and check the browser. If we open the navigation and click the about link, then we will navigate to the about S page. Right now, we have here just a logo, also the menu icon, and the foot. Now we have to create the content of the abouts page. Before that, I'm going to do one thing. Let's go to the index d, h, t mail file, and find the button Explore. I'm going to define the H reference attribute. It's going to be about Html, because once we click this button, we have to navigate to the Bods page. Let's go to the browser. Click the button. As you can see, it doesn't work. If we click the link, then we will navigate to the abodes page. There is something wrong with the bottom and the link. Let's go to the style of CSS file and find the button. I'm going to change the background color of the link element in order to see what's the actual problem. Let's make the color red. As you can see, the link element doesn't cover the entire bottom. That's why we could not navigate to the modus page. In order to fix that, I'm going to set display to flex. Now as you can see, the link element covers the entire button. But we have to center the text. Therefore, we have to use here justify, content center, and a line items center. Now the problem is fixed. The bottom, I mean, the link element works fine. Let's get rid of this background color from here and check once again. Now everything looks and works fine. All right, let's go back to the bolded HTML file. Inside the header element, I'm going to insert two headings, I mean H, four heading elements with the class name section heading SM. The text is going to be about us. Let's duplicate this code. We need H one heading element. Also, I'm going to change the class name. It's going to be section heading LG. As for the text I'm going to insert here, explore our values. Let's check the browser. I'm going to navigate to the about page. Here we have two headings. They are already styled because we used here the class section heading SM and section heading LG. Those classes were used in the index of HTmilopile. Those elements have already some styles. Next, I'm going to insert the comments right after the header we need here about the about. I'm going to open section elements with the class name About section. Inside the section element, we'll have a couple of different parts. The first one will be the header of the about section. I'm going to open elements with the class name about section header. Inside the header, I'm going to open H one heading element. It's going to be our features. I'm going to add here class name, section heading LG because we need the similar styles actually we need here class, let's grab the value and paste it inside the class. Besides that, I'm going to use section border that we used in the main page. We need here section border. Let's check the browser. Here we have the heading and the section border. Next I'm going to create the features. I mean, this part here, I mean those features. Let's go ahead and right after section header I'm going to open new development. And it's going to be above page features in which I'm going to open the feature itself. In this section, I'm going to use Google Material Symbols. Therefore, let's go ahead and visit the website Material Symbols. The first icon that I'm going to search for is going to be in port Contacts. I need this icon here. Let's copy the code and paste it in the head element. Then I'm going to grab the span element and insert it here. Besides the span elements, we will have H three heading elements and it's going to be white selection of books. Overall, we'll have eight features. So I'm going to duplicate this code seven times. Then we should change the icons and also the headings. First of all, let's check the browser if the icon is displayed. As you can see, the icon is displayed. Let's go to the Google phones website and search for icon called Grid view. Let's grab these span elements and replace this one. As for the heading, it's going to be user friendly. Interface. Next, we need to search for library books. Let's grab the pane elements and replace this Elm here. The heading will be accessible formats. Then I'm going to search for icon call form. Let's copy this pan element and paste it here. The heading is going to be community engagement. Let's check the browser, all the icons are displayed. Next, I'm going to search for school. Let's grab this panelments and paste it here. Then I'm going to remove this content from here and insert educational resources. Next, I'm going to search for language we need here, Language. Let's grab this span element and replace, actually this one here. As for the heading, I'm going to insert multi lingual support. The next icon is going to be wi fi off. Let's copy this span element and paste it here. As for the heading element, let's insert here, off line reading. Now I'm going to search for the last symbol. It's going to be signature. We need signature. We need here a. Let's grab the span element and also change the heading. It's going to be other promotions. A cam that sits all the icons are displayed. Next, we have to take care of the second part of the about section. I mean the team part. We have here the background image followed by the heading and also three different images of the stuff of the website. Let's go ahead and open development with the class name team. I'm going to insecure H one heading element, it's going to be team. Then after H one heading elements we need to open tug and it's going to be members, it will wrap the members section. After that I'm going to open tug and it's going to be the member itself. Each member will consist of image and two spin elements for the name and for the position. Let's open image tag. I'm going to delete the out attribute for the source attribute. Let's select images folder, and then we have to select member one. Then I'm going to open span tag with the class name, member name. It's going to be John Roberts. Let's duplicate member twice because overall we have three team members. I'm going to change the name of the image. It's going to be image member two. Actually, we forgot here to add the position. Let's add here member position. It's digital archivist. I'm going to grab this fan element and add it for both span elements, I mean both members. The second member is going to be brown. As for the position, I'm going to insert here, Curator. Finally, we need here member three. It's going to be a lease winters. As for the position, let's insert here, community manager. All right? I think that's all the elements are created right now. The abouts page looks pretty ugly, but we will take care of that. The only thing that I'm going to do is to add a new class name for the foot. It's going to be foo. We need this class name in order to add some individual styles to the foot. In the about page, all the H mark up of the abouts page is created. Next, we have to style those elements. And for that, let's move on to the next lecture. 20. Styling About Us Page: All right, in the previous lecture we created the HTML markup for the about S page. Now as I said, we have to style this page right now. As you can see, the page looks pretty ugly. Let's go ahead and start to customize it. The first thing that I'm going to do is to add a couple of different classes to the header element. I'm going to add two classes, the first one is going to be about header. I'm going to use this class for individual styling. Also, I'm going to add here second class name, page header. I'm going to use this class in other pages as well For the header element that we're going to create in the coming lectures. Again, this class name will be for individual styling. As for the page header, it's going to be for some common styling. A Next I'm going to insert here a couple of different comments. I'm going to add comment here for about header. Then we need end of about header. I actually we need end of about header. Let's move this line down. Next, we need comments for features. I'm going to grab this line and paste it down here. Also, I'm going to add comments for team. Let's cut this line of code and paste it down below. Actually, yes, that's correct. All right, that's it. I'm going to go to the CSS file, I mean about of CSS file and I'm going to hide a couple of elements. Let's go ahead and start with about section. Let's add here display N. Then I'm going to hide team also, I'm going to hide footer. I'm doing this in order to make our styling process more convenient and simple. Let's set display to none. I'm hiding those elements for a while. Let's go to the browser. So as you can see, we have here just the header element. Next thing that I'm going to do is to go to the style of CSS file. And in the header element, I'm going to customize the page header. I mean this element here. Let's select page header. First of all, I'm going to, in your comments, for page header, I'm writing this code in the styled Css file because we will use this code for other pages as well. We need here end of page header. Let's select page header. First of all, define with in height. The with is going to be 100% As for the I'm going 32, 40, then I'm going to use flex box in order to align the content. Let's use Display Flex then we need flex direction to be column because I'm going to align elements vertically in a column. After that, let's place the content center using justify content center and a line items center. Let's go to the browser. Here we have the header. I'm going to move the heading a little bit down. Let's go ahead and select page header. Followed by the section heading SM. I'm going to set marching top to 15 ramp. All right, so that's it, about the alignment. Next I'm going to change the background. I'm going to set background image. Let's go to the about that CSS file and I'm going to insprew comments for about. About. Actually, I'm going to place the ending common here. I'm going to select About header. Then I'm going to define background. Let's use linear gradient function. The first color is going to be RGBA 3033 times, and the opacity 0.9 As for the second color, I'm going to use the same color, but the opacity is going to be 0.7 Then I'm going to define the URL. Let's select image called about PG. Then we need the position to be center. Also, we need no repeat. Besides that, I'm going to add here background size for the value cover here. We have the image as the background of the header. Next I'm going to take care of the about section. Right now it is hidden. I'm going to get rid of this line of code. I'm going to use Flex box in order to align the elements display flex. Then we need to change the direction it's going to be column Also, I'm going to align items in the center. Here we have the features. Next I'm going to create some space using, I'm going to set padding to 15 Ram at the top and bottom side and zero on the left and right sides. Now we have some space inside the section. Next, I'm going to take care of the header of the section. Add here new comments for the about header. Let's go ahead and select About section header. I'm going to a line text in the center. Next, I'm going to create some space at the bottom using padding. Bottom, it's going to be ten Ram. Besides that, I'm going to move the header to the right side as we have it in the finished project. I mean this header here. In order to do that, I'm going to use to translate with the values 7% and then 50% We move the elements along the x axis and also along the y axis. Okay, As you can see, the header is placed on the right side. Actually, we need it here. Text line right, and not the center, because we need the text to be placed on the right side. Okay, next thing that I'm going to do is to take care of the after the element. I'm going to place it here. Let's go ahead and select about section header followed by the section border with after the element I'm going to set left position to auto. Then we need right position to be zero. And also I'm going to use transform translate x with value zero in order to place on the right side the element. Now everything looks good. All right, let's see the above the header. Next I'm going to take care of the features. Let's go ahead and insert your new comments for the features. Then I'm going to select about page features. First of all, I'm going to set this plate to flex because we're going to align elements using flex book. Then I need justify conference center. Also actually we need here center. And then I'm going to define the width. Let's set it to 60% Let's take a look at the browser. All right, After that, I'm going to define the width and height for the feature. So let's go ahead and select feature itself. I'm going to set width to 20 m, then the height will be 20 as well. And also I'm going to change the background color. Let's set to 18183 times. Next, I'm going to create some space between those features using margin, let's say 23 ramp. Right now I'm going to place the features on two different lines like we have in the finished project. For that I'm going to add here, I'm going to add to the parent element, the property called flex wrap with the value p. Now as you can see, the features are placed on two different lines. After that, I'm going to customize the features. I'm going to add here a couple of different properties. The next one is going to be border radius because we're going to make the elements around it, the value is going to be three Ram. Then I'm going to create some shadow effect using box shadow. The values will be 0.5 1 gram and the color will be RBA. We need here black color with the opacity 0.2 All right, then I'm going to align the elements inside the features. For that, I'm going to use, again, flex books. I'm going to change the direction because the elements should be placed vertically. The direction is going to be column. Then I'm going to align items in the center. And then we need some space between the items using justify content space even. Let's check the results. Okay, as you can see the elements are aligned nicely. I'm going to make the cursor pointer. All right, before we style those two elements, I mean the icons and the headings, I'm going to change the positions for some of the features. I'm going to align the features this way here. Let's go ahead and select Feature with chart selector, we need the feature number two and then feature number six. We need the same positions for two features. I mean in the same position that we have to move those two features with the same distance. Let's go ahead and use transform translate. The value is going to be six d. As you can see, the second and the six items are placed down. Let's do the same for the rest of the items. I'm going to duplicate this code we need here, child number three and then number seven, we need to move them by 12 Ram. Finally, we have to take care of those two items as well. Let's duplicate this code. Change the numbers we need here. 4.8 As for the value of the translated y function is going to be 18 Ram. Okay, So as you can see, the features are aligned perfectly. Now we have to create this part here, I mean this circle. I'm going to do that using four pseudo element. Let's select feature followed by the before pseudo elements. Let's set content to empty. Then I'm going to define w and height. I'm going to set both of them to 15 Ram. Next, I'm going to change the background color. The color will be 111. Also, we need to make the element rounded using border radius with the value of 50% Then I'm going to set the position in order to make the element visible. Then we need position relative. For the parent elements, the parent is feature, we need position relative. Let's check the results we have here. Circle next as guess we have to move the circle up. I'm going to set top position to -40% As for the left position is going to be 50% Then we have to center the element perfectly. We need to transform translate x with the value -50% Okay, here we have the circle. We have to decrease the opacity like we have it here. I'm going to set opacity 2.7 then I'm going to hide the outer part of the circle. For that we have to add here overflow. All right, that's about the before the element. Next we have to take care of the icons and the headings. I'm going to select Feature followed by the span element. Right now as you can see, the circle covers the span element and we have to fix that problem. Let's set the index to one. Now as you can see, the icons are placed on top of the circles. The problem is speak next. Let's increase the phone size of the icon. It's going to be six. Also, I'm going to change the color. Let's use here color 320b. So the icons look pretty nice. Next we have to take care of the headings. I'm going to select Feature followed by the H three heading element. Let's set font size to 1.8 tram. Then we need weight to be 300. Also, I'm going to change the color of the text. Let's set it to white. Then I'm going to define the width. Let's set it to 70% Finally, I'm going to use text, the line center, okay, So as you can see, the headings look pretty nice. And actually with the features we're done. Next I'm going to take care of the team section. I mean this section here right now, it is hidden. First of all, I'm going to add here comments for team. Then I'm going to get rid of display none. And I'm going to make those images smaller because they are too big. So let's go ahead and select member IMG and set with height of the image to 27 Ram. Also, I'm going to feed them using object fit color. Okay, so now we have much better results. Next, I'm going to take care of the team. I'm in the wrapper element. Let's go ahead and grab this code, Add it here. Let's define weight and height. The width is going to be 200% then I'm going to set height to 200 m. Also, we need to set the image as the background of the section. Let's use background. I'm going to use linear gradient function. First of all, we need to define the direction of the color transition. It's going to be to bottom. Then I'm going to use three different colors. The first one is going to be 3033 times, and the opacity 0.7 Then we will have RGBA with the values 1927, 29. The opacity is going to be 0.9 As for the third color, I'm going to use again RGBA 3033 times, and the opacity 0.9 All right, Next we need to define URL. I'm going to select image called team BG. And then we need center, no repeat. Okay, after that I'm going to use background size property with the value cover. And then let's check the result. Here we have the background image. Actually, if we take a look at the finished project, you will see that the background has different shape. And I'm going to add this shape to the element using Clip Path property. I'm going to visit one of the websites. Let's search for Clip Path Property and then visit this website. Here it is, called Bennett Filly. Here you can select any of the shapes you want. In our case, we need triangle. I'm going to move those dots in order to get the triangle. We need perfect triangle. We need here 100% and 50% and 100% Now we have the perfect triangle. Let's grab this code from here and pace here. If we check the result, you will see that we have here the triangle. Okay? Next, I'm going to hide the outer parts, and for that we need to add overflow heading to the section elements. Let's add here overflow he. Now we no longer have here the scroll bar. After that, I'm going to add a couple of different properties to the team. We need to align the content. I'm going to use Display Flex. Then we need to change the direction because we have to align items, particularly we need flex direction column. Then I'm going to place the content in the center using justify content center and align items center. Let's check the result we have here, the images and also the heading next. I'm going to add little shadow effect to the. Triangle using box shadow. The values will be 01, ramp three Ram and as the color, let's use black color with the opacity 0.9 Okay, next we have to take care of the members. I'm going to select Wrapper development, which is Members. Let's place the items horizontal line row using display flex. Now as you can see, the images are placed horizontally, side by side. Next, I'm going to take care of the heading. Let's go ahead and select Team then followed by the H one heading element. I'm going to change the phone family. Let's use here phone called script cursive. Then I'm going to increase the phone size. It's going to be ten, then change the color. Let's use the blue color. Also, I'm going to create some shadow effect using shadow. The values will be 01m2 and the RGBA color, it's going to be black color with the capacity 0.5 Finally, we need some space between the images and the heading. Let's use margin with the values. -15 Ram at the top side, then zero, then 15 Ram at the bottom side, and again zero on the left side. All right, let's sit above the heading. Let's move on and take care of the members. I'm going to select member, then I'm going to align elements using again, flax book. We need display flax. Then we have to align elements vertically. We need to change the direction, it's going to be column next, we need to align items center. And finally, I'm going to create some space using margin. The values will be zero at the top and bottom side and six m on the left and right sides. Let's go ahead and check the results we have here images and down below you can see the name of the member and also the position right. Next we have to take care of the images. I'm going to add here a couple of different styles. Let's make them rounded using border radius 50% Then I'm going to make them black and white using filter gray scale 100% Also change the coursormkeic pointer. I'm going to add to the images the hover fact that we used a couple of times throughout this project. I'm going to select member image followed by the hover. Then we need filter gray scale with the value zero also. I'm going to add here transition for smoother effect, we need filter 1 second. Okay, so now we have here this nice and cool who effect. Okay, let's move on and customize the names and the positions of the members. I'm going to select member name. Let's increase the font size. It's going to be 1.8 Ram. Then we need to transform text to upper case. Actually we need here upper upper case, but transform. And then upper case. Let's change the color, make it white. Also, I'm going to add some space between the lattice lattice spacing 0.1 Ram. And finally create some space at the top margin. Top two Ram became the names look pretty nice. Next we have to take care of the positions. Let's go ahead and duplicate this code. I'm going to change the class name, it's going to be position. Then the phone size will be one Ram. We need text transform upper case, the color is going to be the blue color, this one. Then we need spacing 0.1 Ram. And let's get rid of margin top. Let's check the results. The positions look pretty nice. Okay, with the team part, we're done. Everything looks pretty nice. Next we have to take care of the footer, which right now is hidden. So I'm going to add here comments for footer. Let's move this line down. I'm going to get rid of this line of code. Then I'm going to move the elements using margin, Top -50 Ram. It will move the elements up. Next I'm going to place the header to the right side like we have it here. Let's go ahead and select footer about followed by the footer header. I'm going to use text align with the value right. And then we need to transform translate x with the value 8% As you can see, the header is placed on the right side. Now the only thing that I have to do is to move the after element to the right side as well. For that we have to grab this sector. Let's add it here Also. I'm going to add here section border with after element we need to define right position is going to be zero right now the after Pdmon has led position by default and I'm going to set it to auto work in order to let the right position work. Also, we need here to transform translate x with a value zero. All right, that sits with the about page. We are done, Everything looks pretty nice. Hopefully you like it. Next, we have to take care of the next page of our project, which is going to be books page. I mean this page here. For that, let's move on to the next lecture. 21. Creating HTML Markup for Books Page: In the previous lecture, we finished working on about page we have styled this page and it looks pretty nice and cool. Next we have to move on and take care of the next page of our project, which is going to be books page. Here we have the book page. As you can see, it consists of header, I mean this header here with background image. Then we have nine different books. Down below, you can see the footer. All right, so in this lecture I'm going to create the HTML markup for this page. Let's go back to the VS code. First of all, I'm going to create two new files. The first one is going to be books, Do HTML, and then we need books. All right, let's open about the HTML file and grab the entire content. From here, I'm going to copy the entire code. Let's insert the code inside the books do HTML file. The first thing that I'm going to do is to change the name of the CSS file. It's going to be books, SS. Then I'm going to change the headings. We need books. Then the second heading is going to be our best sellers. Next, I'm going to delete the contents from the about page. I'm going to leave here, just let's change the fast name we need here. Books. All right? So I think that's it actually. I'm going to do one more thing. Let's go to the index dot HTML file and find books section. As. Remember we have here main button view all. And I'm going to change the value of the H reference attribute. Once we click this main button, we should navigate to the books page. I'm going to Institute books, HTM. Okay, let's check the browser. Let's go to the main page. Then click this button here. So as you can see, we are navigated to the books page. Right now, we have here logo, the menu icon, also the headings, and the footer. All right, let's go to the industrial HTM file and grab the books list. I'm going to grab this element, Then I'm going to go back to the books on HDml file and right after the navigation, I'm actually not the navigation but the header. I'm going to insert new comments for books. Then I'm going to open section elements with the class name book section. I'm going to insert here the copied code from the index of the H team of file. I mean books list. Let's take a look at the project. We have here three different books. As you remember in this section, we need six other books as well. I'm going to duplicate book six times. Then I'm going to change the names of the books and also the authors. Let's do that quickly. Next book is going to be War and Peace by Leo Tolstoy. Then we will have Jane Eyre by Charlotte. Then the next book is going to be, actually, I forgot to change the names of the images we need here. Book four. Then it's going to be book five. Then we need book six. The name is going to be 1984. The author is George Orwell. Then we have book seven. The name is going to be Don Quixote. As for the author, it's going to be We Kill the Servants. Then we have book number eight. It's going to be the Lord of the Rings. As for the author, I'm going to insert here, J R R Tolkien. As for the last book in the list, it's going to be book number nine. The name is the Great Tsp. As for the author, it's going to be Scott Feral. All right, so let's sit about the HTML markup. Hopefully everything is correct. Let's go to the browser and check the books. I think that everything is correct. Let's sit about the H L markup. Let's move on to the next lecture, where we're going to style this page. 22. Styling Books Page: In the previous lecture, we have created a new page for our project I books page. And we have created the HTML markup. Now it's time to style this page. Actually, if you look at the books page, you'll see that most of the elements are already styled. We just need to add background image to the header and also we have to take care of the alignment of those books. Let's go to the VS code. The first thing that I'm going to do is to change the class name of the header. We need here books header and not the about header. Then I'm going to open books of CSS file. First of all, let's insert your new comments for header. Then I'm going to select books header. I'm going to change the background image for the books header. Let's select background. Then I'm going to use linear gradients. Use here RGBA value 3033 times and the opacity 0.9 Then we need to use again, RGBA the same color but with the opacity 0.7 Next I'm going to select image from the images folder. It's going to be books BG. Then we have to define the position of the background image. It's going to be center and also we need here no repeat. All right, let's take a look at the project. So as you can see, the header has the background, I mean the background image. Next I'm going to take of the alignment of the elements. I'm going to add here new comments for book section. Then I'm going to select section elements. In order to align the elements, I'm going to use CSS, Flax book, we need display Flax. Then we have to center the elements. I mean the contents. For that, we need to justify content center and align items. Actually, we need a line items Also, I'm going to create the space inside the section. Let's set padding to 15 m at the top and bottom sides and zero on the left and right sides. Okay, after that, I'm going to align the books for that. Let's go ahead and select book section followed by the books list. I'm going to set width to 80% then I'm going to use again flex book. We need display Flex. Then I'm going to place the conflict in the center using justified conf center. In order to place the books on different lines, we need to use one of the Flexbox properties called flex wrap with value p. All right, so as you can see, all nine books are placed nicely actually with the books page, we are done. The footer looks good. Now we have to move on and create the next page of our project. The next page is going to be testimonial page, where we will create this nice and cool slider for that. Let's move on to the next lecture. 23. Creating HTML Markup for Testimonials Page: All right, in the last lecture we finished working on the books page. As I said, now we have to move on and start to create the next page of our project. This page is going to be the testimonials page. Here we have the testimonials page. We have here the standard header with background image, and then you can see here the slider of the client's testimonials. We have here two controls, left and right arrows. If we click them, then the slider will work. Besides that, we have down below the controls dots, We can manage playing the slider from here. In this section we're going to create all those things. First of all, we have to create the page and then take care of the HTML markup. Let's go to the VS code and create new files for testimonial page, we need testimonial Html, and then I'm going to create testimonials CSS. I'm going to move the HTM file to the left side. Let's open it. Okay? I'm going to grab the stuff from the books dot HTML file. I'm going to copy the entire content and paste it here. I'm going to make here some changes. Let's close this panel. I'm going to change the name of the CSS file in the link element. It's going to be testimonials CSS. Then I'm going to change the class name of the header element. It's going to be testimonials header. Then we need to change the content of the heading elements. We need here clients. Then the second heading is going to be what customers say. Then I'm going to get rid of this section from here and leave the foot. Let's change the class name of the footer element. It's going to be foot testimonials. Besides that, I'm going to go to the index HTML file and find here the testimonial section. As you remember, we have main buttson in the testimonial section. And we should insert here testimonials HTML, because once we click the button on the main page, I mean in the testimonial section, then we should navigate to the testimonial page. Okay, here we have the header and the footer. Now we have to create new section in the testimonials HTML file right after header. I'm going to into new comments for testimonials. Then I'm going to open section elements with the class name testimonial section. Inside that element, I'm going to create developments with the class name ttmonials top it will include two headings and also the stars. I'm going to open H three heading elements with the text our customers. Then I'm going to create H one heading elements and the text is going to be testimonial. Then we need stars. I'm going to open tag with the class name stars. Then I'm going to insert here five phonoicons we need elements with. The class is a solid a star, we will have five stars. So I'm going to duplicate this line of code four times. Then let's go ahead and check the browser. As you can see, we have here the headings followed by the stars. Next, I'm going to create developments and it's going to be testyules wrapper. Inside the wrapper, I'm going to create the slider in which I'm going to create the slide itself. Overall, we will have five slides, but for now I'm going to create one slide because we have to style the slide and then we have to make the slider work. We'll add the remaining slides a bit later. I'm going to insert here, slide background, I mean, slide BG. It's going to be an empty element. Then after a slight background, I'm going to create new development with the class name, slide content in which I'm going to insert two elements. I mean the phone omics we need I element with the classes FA solid a left. Then I'm going to duplicate this line of code and change the class name we need here, right? Let's check the browser. As you can see, we have here two quotes. Next, I'm going to take care of the slide image. I'm going to insert your development with the class name inside the development. Let's open image. I'm going to select the image from the images folder and it's going to be client one. After that, I'm going to create another development with the class name slide text in which we need H three heading element. It's going to be best library. Then after H three heading element, I'm going to open paragraph in which I'm going to insert some dummy text. Let's use Lorum 20. Here we have some dummy text. After the paragraph, we need to create another paragraph. And it should have the class name client. I'm going to insert your name of the client. Let's say Bob Smith and then the age 20. Okay. After paragraph, I'm going to take care of the controls. I mean, the arrows on the left and right sides of the slider. I mean those arrows. Let's go ahead and open developments with the class name controls inside the development. I'm going to open element with the class A solid A arrow left and then we need arrow right. Let's check the results here. We have the arrows left and right. After that, I'm going to create development. It's going to be wrapper for the dots. Let's add to it class name dots. Inside the dots, I'm going to create spanlments, which is going to be an empty element. Let's duplicate it four times, because overall we will have five dots. All right, that's it about the HTML markup for now. As I said, we will add the remaining slides a bit later once we take care of working the slider. I mean, when we add the Javascript to this part here, we have all the elements. We should style them. Actually, the dots are not visible because we have here just the empty span elements. We will take care of that a bit later. Okay, as I said, we have to style those elements. And for that, let's move on to the next lecture. 24. Styling Testimonials Page: All right, in the previous lecture we created the HTML markup for the testimonials page. And now we have to style the slider. And also we have to take care of the header. Then after that we will make the slider work. All right, let's go to the VS code, and in the testimonials of CSS file, I'm going to insert new comments for header. Then I'm going to select testimonial header and change background. I'm going to use linear gradient function. With RGBA value we need 3033 times and the opacity 0.9 Next we need another RGBA value with the same numbers, but the opacity is going to be 0.7 After that, I'm going to select image from the images folder. It's going to be testimonial PG. Then I'm going to define the position of the background. Let's set position to 50% for x axis and 40% for Y axis. Then we need no repeat. Okay, so here we have the background image for the header. Next we have to take care of the testimonial section, I mean the slider. So let's go ahead and insert here, comments for testimonials. Then I'm going to select testimonial section. And defined within heights, the width is going to be 100% As for the height, I'm going to make it 140 viewport height. I mean one 40% of the viewport. And then I'm going to change the background color. It's going to be 191919. All right. The within heights are applied to the element and also the background color is changed. Next, I'm going to take care of the testimonial top. I mean this element here, it includes the headings and also the stars. So let's go ahead and select testimonial top. First of all, I'm going to define the position is going to be absolute. Then I'm going to add here position relative. Because we are going to position the element according to the parent elements. We need here position relative. Then I'm going to define top and left properties. The top position is going to be 10% As for the left position, I'm going to 30 50% Then we need to transform translate x function with value -50% because we're going to center the elements. Let's take a look at the project. Here we have the header, the headings and the stars. Next we have to place those elements vertically in the column. For that I'm going to use flex box. Let's use display flex. The I'm going to use flex direction column and then let's align items in the center. Let's take a look at the project. So as you can see, the headings and the stars are placed vertically in the column. Next I'm going to take here of the first heading which is H three heading element. Let's go ahead and select Testimonial top three. Let's set the phone size to two Ram. Then the phone weight is going to be 300. And also I'm going to change the color at 72 C C. The first heading is tiled. Next, I'm going to take care of the second heading. Let's go ahead and duplicate this code. I'm going to change the selector we need here, H, one heading element. The font size is going to be five Ram. Then I'm going to set font weight to 300. Next we need color, it's going to be white. Then I'm going to transform text to upper case. Also create some space between the letters using letter spacing, 0.4 Ram. Then I'm going to create some space using margin. I'm going to set margin to two m at the top and bottom sides and zero on the left and right sides. Okay, the second heading is customized. Next I'm going to take care of the stars. I'm in the phone icons. So let's go ahead and select Testimonial Top, followed by the element. I'm going to set phone size to 1.6 Ram. Then the color is going to be blue color, I mean 320e. Then we need margin in order to create some space on the left and right sides of the stars. I'm going to set margin to zero and 0.5 Ram. That's it. The headings and also the phonomicans. The stars are customized. Next I'm going to take care of the image because it's too big right now. Let's go ahead and select slide G. I'm going to set within height. The width is going to be 15. Then I'm going to change the height set to 16. Then we need to apply the within height to the image element itself. We need slide image followed by the image element. Let's set with height, both of them to 100% Then we need to fit the image using object fit cover. We can saw the image became smaller. Next, I'm going to take care of the controls. I'm in left and right arrows. I'm in those arrows. Let's go ahead and select controls. I. I'm going to define with and heights. Let's set both of them to five. Then I'm going to change the background color. It's going to be 78584. Let's make the elements around it using border radius 50% Let's take a look at the project. Here we have the circles. I'm going to decrease the opacity, it's going to be 0.6 Then I'm going to place the arrows in the center of those circles. For that we need display with justify content center and a line items center. Now as we see, the arrows are placed in the center of the circles. Next, let's go ahead and change the font size. I'm going to make it three m. Then we need color with the value of 444. As you can see, the arrows are bigger. Next, I'm going to change the position of the controls. Let's set position to absolute. Then I'm going to place them in the center vertically. For that we need top position to be 50% And then I'm going to use transform translate y with the value -50% As you can see, they are placed in the center of the section, in the center vertically. Now we have to define the positions separately for each arrow. Let's go ahead and select controls with child selector. We need here child selector with value one. Let's set left position to 15% Then I'm going to duplicate this code we need here, child two instead of left position, I'm going to use right position. Okay, so as you can see, the arrows are placed and positioned next, I'm going to take care of the dots, those elements here. As you remember, we created empty span elements. Let's go ahead and select dots, the parent elements, I mean the wrapper. Let's set position to absolute. Then we need bottom position to be 15% then we need to center the dots for that, I'm going to use left position 50% and then we need to transform translate x -50% Right now the elements are not visible, but we will take care of that in a minute. Let's select dots span. Let's set within height to one Rm. Then I'm going to change the background color. It's going to be C. Let's take a look at the project. As you can see, the span elements are not visible. I'm going to fix that problem using flex books. Let's set display to flex. Once you define display property, then the elements will be visible. Let's align them in the center. Now we should see the span elements. We have here five span elements. Let's make them rounded using border radius 50% And also create some space between them using margin 0.5 Ram. Now as you can see, we have here five dots. Next I'm going to change the cursor. Let's make it pointer. Finally, I'm going to make one of them active. I mean, if you take a look at the finished project, as you can see the one dot is active. I'm going to add class active to the first fine element. Then I'm going to select dots, spin elements followed by the active class. Let's set within height to 1.5 Ram and change the color, make it white. Okay, so the first spin element first thought is active. Next I'm going to take care of the slider, I mean the testimonial wrapper. So let's go ahead and select testimonial wrapper right after testimonial top. Actually, let's check the HTML element. That's correct, we need to select it after the top, I mean the testimonial top, Let's define with and heights. The width is going to be 55% then I'm going to set height to 50 Ram. Also change the position, let's set it to absolute. Then we need to place the testimonious wrapper in the center of the section. So we need to define top and left properties. Both of them is going to be 50% Then we need to transform with translate function. And the values will be -50% and again -50% All right, let's take a look at the project. The testimonious wrapper is centered, but the positions for those arrows are changed. It means that we have a mistake in the HTML file. Let's check the controls. As you can see, the controls is placed inside the testimonious wrapper, and it should be placed outside of the testimonious wrapper. Let's grab controls from here and insert them outside. Okay, I think now the problem should be fixed. As you can see, the controls are placed in their places. Next, I'm going to create the remaining slides. Right now we have just one slide. Let's duplicate it four times because we're going to have five slides overall. I'm going to change the details quickly. The second slide is actually the image for the second slide is going to be clim two. Then we have here Mary Brown. Let's leave the same age. Then we have here clin three. It's going to be Nick Jones. Let's change the H, make it 27. Then we have clin four, it's going to be Brown. Let's change the age, make it 22. And finally we have here clin five with the name John Smith. 25 So you have all five slides. Next I'm going to select slider and define within height. I'm going to set with 500% That's for the height, it's going to be 100% Then I'm going to place the slides side by side horizontally. For that, I'm going to use Display Flex. As you can see, the slides are placed side by side. I'm going to add border to the testimonious wrapper in order to see clearly what is going on here. We need here 0.1 Ram solid, and color is going to be white. Here we have the testimonios wrapper, and each slide should be placed inside the wrapper. In order to do that, I'm going to define the width of the slide as 20% As you see, we defined width for the slider and made it 500% Once the width of the slide is 20% then it will take up one fifth of the slider. Now as you can see inside the box, we have just one slide. Next I'm going to select slight background and customize it. We need width, It's going to be 70% then I'm going to define height. Let's make it 65% Next I'm going to change the background color. Let's use RGBA color. The first value is going to be 50. Then we'll have 176. Then the next one is going to be 206. And we need here opacity 0.5 again. So here we have the background of the slide. Let's define its position. I'm going to set position to absolute. Then we need position relative for the slide. I mean the parent element. I'm going to place the background in the center of the slide. Therefore, we need here to position 50% then left position 50% and also transform with translate function -50% again -50% As you can see, the background is placed in the center of the slide. Actually, as you see, the background is slightly rotated. Therefore I'm going to add here rotate the Z function, and the value is going to be minus six degrees. Now the background of the slide is rotated. I'm going to make the corners rounded. We need here border radius with the value two Ram. Also, I'm going to decrease the opacity. Let's set it 2.7 Okay, let's see about the slight background. Next I'm going to take care of the slight content, I mean, this white element here. So let's go ahead and select slight contents. Actually, I'm going to grab the styles from here. We need some similar styles for the slide content. The wooden height will be similar. Next, I'm going to change the background color. Let's use EE. Then we need position absolute. And we need to censor the element, but without the rotation. So let's get rid of rotate Z function. Let's check the browser we have here the slide content. We don't need opacity for slide content. Also, I'm going to align elements using Flex box. I'm going to add here Display Flex. Then we need to create some space between the flex items using justify content, space between. And then I'm going to align items in the center. As you can see, the flex items are aligned. Next, I'm going to create some space inside the slide content using padding. It's going to be zero at the top and bottom sides and five ram on the left and right sides. Okay, that sits about the slide content. Next I'm going to take care of those. I'm going to select slide followed by the elements. I'm going to increase the phone size, it's going to be 12 Ram. Then change the color used here. Blue color. Also, we need to define the position for the, let's say position to absolute. I'm going to define positions for each separately. I'm going to select slide I with child selector. We need the first icon. Let's set top position to -20% Then we need left position. It's going to be 10% I'm going to duplicate this code. We need the same thing for the second icon as well. Let's set bottom position to -30% and instead of left position, I'm going to use the right position. The value will be the same, 10% Okay, the quotes are placed nicely and then I'm going to take care of the image. The image already has some styles. I mean, the wrapper development, let's change. I'm going to set width to 35% then I'm going to create some space on the right side of the slide. Mg, let's set margin right to three Ram. Okay, after that I'm going to take care of the image itself. Let's add here a couple of different styles. I'm going to make image rounded. Let's use border radius. We need to make image rounded but not on all four sides. I'm going to set border radius to three at the top left corner. Then we need zero at the top right corner, we need three at the bottom right corner and zero at the left bottom corner. Okay, so all the image looks pretty nice. Next I'm going to make it black and white. Using the same technique when it filter great scale function with the value 100% Let's set cursor to pointer. Now let's create the hover fact. I'm going to select slide image followed by the image elements with hover. Let's set filter to gray scale with the value of zero. And also we need here transition with filter with a duration 1 second. All right, let's sit about the image next. We have to create the borders around the image. For that, I'm going to use after and before elements. Let's select slide IMG, followed by the elements. Then we need before element as well, because those elements will have some common files. First of all, I'm going to define the content. It's going to be empty. Then we need within height, both of them equal to 100% Then I'm going to set position to absolute. We need position relative for the parent elements. Next I'm going to set border 2.2 Ram solid, and the color is going to be RGBA. We need black color with the opacity 0.4 Here we have the borders. Next I'm going to make the rounded. We need the same border radius, which we use for images. Now we have to define the positions for those elements separately. Let's go ahead and corp after element from here the two position is going to be minus one Ram. But then we need left position -0.5 Ram. Let's duplicate this code, change the selector we need here before pseudo elements, we need here bottom position with the same value and then we need to right position again with the same value. Okay, that sits images look pretty nice. As you can see, the borders are placed on top of the image. We need to place them behind the image. Let's fix that problem using index property with value minus one. Now the problem is fixed and with the images we are done. Next, we have to take care of the right side of the slide. Let's go ahead and select slide text and define width as 65% Next, I'm going to select H three heading elements. Let's go ahead and select slight text followed by the H three elements. We need font size to be 2.5 Then I'm going to define font weight. Let's make it 300, change the color. I'm going to make the color one on one. And also create some space at the bottom using margin. Bottom one Ram. Okay, so the heading looks good. Next I'm going to take care of the paragraph. Let's go ahead and select slight text followed by the element. I'm going to set the font size to 1.4 Ram. Then we need font weight. It's going to be 300. Let's change the color of the text. I'm going to use 020 D14. Then we need to change the line height of the text. We need here line height, let's make it 1.6 Ram. Also create some space at the bottom using margin. Bottom three Ram. And then I'm going to change the width of the paragraph. Let's set it to 35 from, okay, so the paragraph looks good. Next I'm going to customize the name of the client. So let's go ahead and select slide text followed by the client. I'm going to set phone size to 1.8 and then I'm going to change the color. It's going to be 07235. Okay that the slides are customized, they look pretty nice. Next, we have to make the slider work using Javascript. Before we move on to the next lecture, I'm going to get it off this border from here, let's delete this line of code. Okay, let's move on to the next lecture and make the slider work. 25. Making Slider Work: All right, in the previous lecture we have customized the testimonial slider. We have styled the slides also the arrows and those dots here, the controls. Now we have to make the slider work. This slider sometimes is called Rosal. You may come across this name as well. Let's take a look at the finished project. Once we click the arrows, then the slider will also, the corresponding dots will be active. And we can manage playing slider from here as well. Okay, so we're going to do those things using Javascript. Let's go to the VS code and open script or JS file. The first thing that I'm going to do is to add the comments for this code here. I'm going to add here navigation. We use Javascript for the navigation. Let's move this line down below. And then I'm going to add new comments for the testimonials. The first thing that I'm going to do is to select a couple of different variables, I mean the elements. Let's create variable and call it slider. I'm going to select this element using document query select from method and we have to specify the class name slider. I'm going to duplicate this line of code three times. The second variable is going to be slides. I'm going to select all the slides using query selector, all method. And we have to specify here the class name slide. Next, we have to select the arrows. I mean left and right arrows. Let's call the variable left arrow. Then I'm going to specify here the class name controls. Then we need to select elements. We need here chat selector. The left arrow is the first element. Let's specify here the number one. If we take a look at the index HTML file, then actually we need here testimonial HTML file. We have here controls. The left arrow is the first element inside the controls. Let's get rid of this line of code and duplicate this one. We need right arrow. I'm going to change the number of the nth child selector. In this case, we need number two. Okay, the variables are created. Next, I'm going to select one of the arrows, let's say right arrow. And I'm going to add an Emt listener to the arrow with click event. Also, I'm going to pass here the callback function which will be executed once we click the right arrow. Once we click the right arrow, I'm going to move the slider we need here, slider followed by this style property. Then I'm going to use transform. Then we need to translate x function. I'm going to move the slider by -20% Let's go to the browser now. Once I click the right arrole, then the slider will move to the left side. Actually, in order to see this movement better, I'm going to add transition to the slider. Let's adhere all then 0.8 seconds. Also I'm going to use cubic Sir function where the values 100.1 This will make the movement effect much nicer. Let's click the right arrow. As you can see, this slider moves nicely. Okay, After that I'm going to create new variable and it's going to be slide index. Let's set it to zero. Actually, this variable will be used to keep track of the current slide being displayed. It starts at zero and it indicates the first slide. Okay, now I'm going to duplicate this code. Let's change the variable when you hear left. Then I'm going to add here slide index equal to slide index minus one. In this case, we decrement the slide index variable by one in order to move the previous slide. Next, we have to update the style of the slider element, translating it horizontally To show the previous slide, the amount of translation should be determined by multiplying the slide index by -20% because each slide takes up 20% of the containers width, we need here template strings then translate x function in which I'm going to insert slide index multiplied by -20% Actually, we need percent outside of the brace. Let's copy those two lines, Paste them here. In the case of right arrow we need here plus sine. Let's go to the browser and click the arrows. As you can see, the slides move all the slides. If we click both arrows, once we reach to the last slide and click again the arrow, the slider will move. Actually, we don't need that. We have to stop the slider once we reach to the last item, I mean, the last slide in the slider. Let's go back to the VS code now We need to use conditional statements. I'm going to define here the condition if slide index is greater than zero, then we need Tannery operator. Now we have to interfere slide index minus one and then zero again, this is a tenory operator in Javascript. It evaluates the condition, slide index is greater than zero. If the condition is true, it evaluates slide index minus one. Otherwise, it evaluates to zero. The same thing we need for the right arrow as well. If slide index is less than slides length minus one, then we need slide index plus one. In the second case, we need here slides dot length minus one. Here, slides length represents the total number of slides. Slide dot length minus one gives the index of the last slide. Since indexing starts from zero, this line ensures that slide index is less than the index of the last slide before incrementing it. If slide index is less than the index of the last slide, it increments slide index by one with this expression here. Otherwise, it sets slide index to the index of the last slide. Okay, Let's go to the browser and check the results. Let's click right arrow. As you can see, we reach to the last slide, and I'm clicking the arrow, but the slider is not playing. The same will happen for the left arrow. Now I'm clicking the left arrow, but slides are not moving. Okay, I'm going to hide the slides outside the wrapper. Let's do that using overflow heating. Now they are hidden and everything works fine. Okay, next we have to take care of the dots. Once we click the dots, we should move the slider. Also, once we click the arrows, we need to make the corresponding dot active. Let's go to the VS code and I'm going to add here two more variables. The first one is going to be dots wrapper. Let's select this element using documents, do query selector. And I'm going to specify here the class name dots. Let's duplicate this code. The second variable is going to be dots. In this case, we need query selector. All method I'm going to specify here this panelement. All right, now we have to iterate over each dot element in the dots collection using forage method. I'm going to add here do forage. We have to insert here Calbeck function with two parameters. The first one is going to be dot and then we need also index. Now we have to add click event to the dot. I'm going to attach an even listener to the dot with click event. Also, we have to insert your callback function which will be executed once we click the dot. Now I'm going to define slide index. And it should be equal to index, which we used here as the parameter. When a dot is clicked, this line updates this slide in this variable to the index of the clicked dot. This effectively changes the current slide to the one corresponding to the clicked dot. Then we have to remove the active class from the dot that was previously active. We need to select the dot with the active class. I'm going to use documents query selector. We have to specify here dots followed by the active. Actually we need here dot, then class active. We have to remove the active class from its class list. We need here class list followed by the remove method. And we have to specify here the class name active. Okay? After that, I'm going to move the slider, so we need to adhere this line. All right, let's go to the browser. Click the dots. Actually, we need to add here one more line. Once we remove class active from the active dots, then we should add class active to the clicked. Do we need here add method? I'm going to specify here the class name active. Okay, so now the dot should work. As you can see, once we click, the slider will move and also the corresponding dot will be active. All right, so everything works fine. Next, we have to take care of the once we click the arrows. Once we click the arrows and move the slider, then the corresponding dot should be active. Let's go back to the VS code. I'm going to add here for both arrows the following. We need dot wrapper, then children property. And we have to specify here the index as slide index. And we have to add to the class list. Actually we need here dots, then add method and we have to specify here the class name active. So in this case, children is the property of dot wrapper and it represents a collection of all child elements within the dot wrapper. Then we have here slide index and it is used to access a specific child element within dot wrapper. Each navigation dot should correspond to a slide in the slider, and slide index represents the index of the currently active slide. Then we're adding class active to the active, I mean corresponding dot. Okay? Now I'm going to add this line for both arrows. Let's go to the browser and check the result. Actually, we need to click the arrows. As you can see, once we click the arrows and move the slider, then the corresponding dots become active. Everything works perfectly. Okay. Before we finish this lecture, I'm going to reorganize the code. I'm going to create function, let's call it set index. Then I'm going to grab those two lines, because we are using those two lines everywhere. I'm going to add those two lines here. Instead of them, I'm going to call the function index. Let's remove add here set index, and do the same for the right arrow as well. Remove those two lines and call the function set index. Okay, Now our code is more clean with just adding one function. And we have here the same. Something's wrong. Actually, we should grab only two lines, those two lines here, and we grab this line as well. So now everything should work. As you can see, this slider works perfectly. All right, so let's sit with the testimonial page. Actually, we can say that the project is almost done. We have created all the sections, all the pages, and now we have to make the project responsive to different crisises. For that, let's move on to the next lecture. 26. Making Project Responsive - Part 1: All right, in the previous lecture we finished building our projects. I mean, we have created all the sections on the main page. And also we have created, installed all the pages of our web project. In this lecture, as I said, I'm going to start to make our project responsive to different screen sizes and devices responsive. Web design is super important in web development because it makes sure websites work well on all kinds of devices and screen sizes. So many different gadgets like smartphones and tablets, responsive web design helps websites look good and easy to use everywhere. It saves time and effort by avoiding the need for separate designs for each device. Plus search engines like Google prefer websites that are mobile friendly. Responsive web design can boost a site's visibility. In simple terms, responsive web design is a must have in web development to make sure websites stay user friendly and effective on the wide range of devices people use today. In my web projects, I've made it a priority to make the website look awesome on various devices. We're talking big desktop screens, like 1920 pixels of width and 1080 pixels of height and 1,600 pixels of width and 900 pixels of height. As well as slightly smaller ones like 14, 40 pixels of width and 900 pixels of height, 13 66 pixels of width, 768 pixels of height, and 12 80 pixels and 780 pixels. For tablets, I've got 82000 pixels and 11 80 pixels, and also 768 pixels and 1024 pixels. And of course, for those who love browsing on their phones, I've optimized those three break points here. All right. So I have added those break points to my responsive mode. As you can see, we have here screens, which is for desktop screens, I mean the six breakpoints. Then we have two breakpoints for tablets and three breakpoints for mobile phones. By doing this, I'm ensuring that no matter how someone accesses the site, whether it is on a computer, tablet, or mobile phone, the experience is smooth and looks great. This approach is essential today because people use all sorts of devices, and I want everyone to have a positive and user friendly time on my website. Responsive web design isn't just a fancy term. It is about making things easy and enjoyable for everyone, no matter what gadget they're using. All right, I'm going to inspect the page. Select the first break point, which is screen 21600 pixels of width and 900 pixels of height. Then I'm going to check the project. Almost everything looks good except the footer on the main landing page. Now I'm going to open style CSS file, and then I'm going to scroll down and insert new comments for responsive web design. Next, I'm going to create CSS media query, where I'm going to define max width and it's going to be 1,600 pixels. I'm going to change the width of the input in the input group in, let's go ahead and select input group followed by the input elements. I'm going to set width to 31, ramp. Let's go back to the browser. So as you can see, the footer looks good. Actually with the main landing page, we are done here because everything looks good. Let's go ahead and check other pages we have here about page. Actually, the features about page don't look quite good. I'm going to customize them. As for the rest of the elements, they look good. I'm going to open about the CSS file that's closed this file for now. Then I'm going to insert your new comments for responsive mode. Then I'm going to create media query with max width of 1,600 pixels. Then I'm going to select about page features. Let's set with to 70% Now they look good. Actually, with a bonus page, we're done. Everything looks good. Next, let's go ahead and check books page. It looks good, but I want to change here one little thing. Let's go ahead and open books. Css file and create new comments for responsive mode. Then create again media query with maxwith of 1,600 pixels. Let's go ahead and select book and change margin. Right now we have margin equal to six Ram on all four sides. I'm going to make margin six at the top and bottom sides and three on the left and right sides. Now I think we have slightly better results. The books page looks good. Let's go ahead and check the testimonials page. I think in the testimony on page, everything looks great with this break point, we are done. Next, we have to make our project responsive on the next breakpoint, which in this case is 14, 40 pis of width and 900 piss of height for that. Let's move on to the next lecture. 27. Making Project Responsive - Part 2: In the last lecture, we started to make our project responsive on different screen sizes and devices. We have made some changes on the first breakpoint, which was 1,600 pixels of width and 900 pixels of height. Next, we have to make our project responsive on that breakpoint. I mean 14, 40 pixels of width and 900 pixels of height. Let's go ahead and change the breakpoint. I'm going to select this one. Let's go ahead and check the page. As you can see, we have to make some slide changes. Let's go ahead and open style the CSS file and then create new CSS media query. I'm going to specify max width as 14, 40 pixels. The first thing that I'm going to do is to decrease the phone size of the HTML element. It will allow us to decrease the size of all the elements on the page. So let's go ahead and select HTML and then decrease the font size. I'm going to make it 58% Okay, Let's go ahead and check the results. Everything looks good. Actually, I'm going to take care of the book section because I don't want this fact here. I mean, I don't want the book to be covered by the main icon. Actually, let's check the previous breakpoint. We have here the same problem. Therefore, I'm going to add here in the previous break point the following. We need book. I'm going to change the margin. Let's set margin to six Ram at the top and bottom and three M at the left and right sides. Let's check the results now. It looks good. Let's next break point. We no longer have here this problem. Okay, I think we can customize the feedback of the client. I'm going to change the default style. Let's go ahead and select but find feedback as you remember, we defined within height by default. Actually, I think that we could omit the two properties. I mean, we can comment them out and check the results. Now, as you can see, we have here slight change and I think it looks much more better. It was a little mistake from my side, so I'm going to get rid of those two lines from here. We no longer need them. All right. I think that the main page looks good. Let's go ahead and check other pages. I'm going to go to the about page. As you can see, we have here the same problem. The menu icon covers the header. We have the same problem here for the footer, the heading of the footer. Let's go to the about SS file and create new CSS media query. I'm going to set marks with 14 40 vehicles. Then I'm going to select about section header and move the header using transform translate. I'm going to translate to 60% this is going to be for x axis and 50% for Y axis. I mean the horizontal and vertical directions, okay? So the problem is fixed. Actually, I'm going to check the about page and previous breakpoint. As you can see, we have here the same problem. I'm going to add here the following. Let's select footer about followed by the footer header. Then I'm going to move the header to the left side using transform translate x, I'm going to set it to 60% Now the problem is fixed on that breakpoint if we check the project on the next breakpoint. So as you can see, it looks pretty nice. Okay, I think that with the about page we're down. Let's move on and check the next page, which is books page. Everything looks good. Let's check the testimonial page. As you can see, it looks good as well. All right, so I think that with this breakpoint we're done. I'm going to check this breakpoint. The next one is 13, 66 pixels of width and 768 pixels of height. I'm going to select screen four with those dimensions. Let's go ahead and check the page. So we have to make here some changes. Let's go ahead and open style CSS file and create new CSS media query. I'm going to define max width, it's going to be 13 68 pixels. The first thing that I'm going to do is to decrease again HTML, the phone size of the HTML element. I'm going to select HTML, and let's set phone size to 55% And then check the results. Now we have much better results. The only thing that I'm going to do is to move the banner little bit down. Let's go ahead and select Banner And set bottom position to 25 Ram. Okay, then I'm going to increase the height of the testimonials page. Little bit. Let's go ahead and select testimonials. I mean, the testimonial section and the page section. Let's set height to 170, view height. Okay. So I think that's it. Everything looks good. Let's go ahead and check other pages. I'm going to check about everything looks good. Next we have books page. It looks good as well. Let's check the not contact, but testimonials page. I think we don't need here any changes. We can say that with this break point we're done. Let's go ahead and check it. Next we have this break, 0.12 80 pixels and 780 pixels. I'm going to select screen five. Let's go ahead and check. Okay, we need some changes. I'm going to create new CSS media query with Maxwidth of 12, 80 pixels. I'm going to customize the about section. I'm going to change the width of both parts. I mean, the left part and the right part. Let's go ahead and select about content left. The width is going to be 45% Then I'm going to duplicate this code. Let's change the class name we need here about content, right? The value of the width property is going to be 55% okay? That's it. Next I'm going to take care of the books list because we have here the same problem. The menu icon covers the books. Let's go ahead and select books List. Change the width. I'm going to say 80% Once we change the width, then the books are no longer placed in the center of the section. Let's go ahead and fix that using margin a. Then we need also to use Flex box to align the content in center. We need Display Flex, then Justify content center and Align items center. Now as you can see, the problem is fixed. Actually, I think that we can wrap the flex items. We can place the books on two lines for that. I'm going to add here flex wrap with the value p. Now I think that we have better results with the book section. We're done. Let's move on to the next section. The testimonial section looks good. Now we have to take care of the foot. Let's go ahead and select foot content I'm going to set with to 70% Now the footer content looks good. And we have to change the width of the bottom side as well. I'm going to select bottom. Let's set width to 70% All right, so let's sit about the main page. Let's go ahead and check the page. As you can see, the features are messed up. We have to take care of that. Let's go ahead and open about the CSS file and create new C media query. We need here with equal to 12, 80 pixels. I'm going to select about section header, I'm going to move it slightly to the left side using transform translate. We need here 50% and again 50% Next we have to take gear of the features. Let's go ahead and select about Page Features and set with two 80% Okay, so I think everything looks good. Actually, we need to move the footer header to the left side. Let's correct this code and add it here. I'm going to change the value of translate expansion. Let's set it to 55% Okay, now the problem is fixed. Let's go ahead and check the next section. I mean, the next page it is books page, it looks good. Then we have testimonials page. Well, you can see that we have to make here some changes. Let's go ahead and we need to open here testimonials. Let's see this file. We didn't write here any code for responsive mode. Let's insert comments responsive and of responsive. And then create CSS media query with max width equal to 12, 80 pixels. I'm going to select slide background and set its width to 80% We need the same thing for slide content as well. Let's duplicate this code and add here content instead of PG. Okay? So as you can see, the slide looks good, and actually everything is responsive and fine. Let's sit about this breakpoint. We can check this breakpoint here, and then we have to move on and make the project responsive on that breakpoint I 1024 pixels of width and 768 pixels of height. Let's go ahead and select screen six. Well, we can see that we need to make the changes on the breakpoint. I'm going to go to the Style Do CS file and create new CS media query. It's going to be 1024 pixels. First of all, I'm going to decrease again the font size of the HDML element. Let's go ahead and select HDML and set its font size to 52% Next I'm going to move the menu icon to the right side. So let's go ahead and select menu icon. And set it right position to five Ram. Okay, I think the most part of the page looks good. I'm going to move the banner little bit down. Let's go ahead and select Banner and set it Spots and position to 20 Ram. Then I'm going to take care of the footer because everything else looks good. Let's go ahead and actually I'm going to grab this code from here. I'm going to change the width of the footer content and footer bottom. Let's make it 80% Now the footer looks good actually with the main page. We're done. Let's move on and check about page, well, we need here some changes. Let's open about the CSS file and create new CSS media. Let's specify max width as 1024 pixels. I'm going to select about section header. We need to move the header to the left side. I'm going to translate function to 30% and then 50% also. Let's go ahead and select about page features and set its width to 90% Well, I think it's too much. Let's make it 40% Well, I think that if we get rid of this code check, we don't need to change anything regarding the header. Let's get rid of this code at all. It looks pretty nice. The next thing that I'm going to do is to take care of the images in the team section. Let's go ahead and select member with image elements I'm going to decrease within height. Let's set both of them to 23 ramp. Okay, so they look good. Actually everything looks good. We can move the header a little bit to the left side. The menu icon doesn't cover it, but it's too close to the header. So I'm going to cor this code, let's add it here. And decrease the value of the translate expansion to 50% It looks much better. Let's go ahead and check the books page. Well, everything looks good. Then we have here testimonials. We have to take care of these slides. Let's go ahead and open testimonials CSS file and create new CS's media. The xw is going to be 1024 pixels. Let's select slid BG and set its width to 90% We need here with 90% Then duplicate this code and change the class name we need here. Content, it's going to be 90% I mean the width of the content. Then I'm going to change the positions for the controls. I mean the left hand right arrows. Let's select controls. And then we need elements with child selector. Let's select the first one we need to set left position to 10% Then let's duplicate this code, change the number of the nth child selector. We need two and we need here right position. So now everything looks good. And the testimonial slider, actually I think that we can move the logo to the left side because we have here quite a big space. I'm going to open start the CSS file. Let's select logo and change left position. I'm going to make it 15 Ram. Okay, Actually, let's set it to ten m. Well, I think now it's better. Let's check out the pages. Okay, that sits with the desktop screens. We are done. Next, we have to make our project responsive to those break points. I mean, those two breakpoints are the breakpoints for tablets. For that, let's move on to the next lecture. 28. Making Project Responsive - Part 3: All right, let's go ahead and continue making our project responsive to different screen sizes and devices. In the last lecture, we finished working on the desktop screens. Now we have to move on and start to make the project responsive for tablets. I mean, we need to make the project responsive for those two breakpoints. Let's start with the first one. It's going to be 820 pixels and 11 80 pixels. Okay, let's change here the screen size we need table. As you can see, we have to make the changes because a lot of things are messed up. Let's go back to the VS code in the style CSS file. I'm going to create new CSS media with max width of 820 pixels. The first thing that I'm going to do is to decrease again, the font size of the HTML element. Let's select HTML and then define font size as 48% It will decrease the size of all the elements in the page. Next I'm going to place the banner in the center of the page. So I'm going to select banner. Then I'm going to define the right property. It's going to be 50% Also we need bottom. It's going to be 50% as well. In order to center the element perfectly, in this case we are using right and bottom properties. We need to use transform translate with the values 50% and again 50% When you use left and top properties instead of right and bottom, then you should transform translate with -50% and -50% Okay. So as you can see, the banner is placed in the center. Next I'm going to take care of the about section. Let's go ahead and select the left part. It's going to be about content left. I'm going to define the width. It's going to be 40% Then I'm going to duplicate this code because we have to define the width of the right side as well. So we need here right instead of left. And the width is going to be 60% All right, After that, I'm going to change the phone size of the small heading. I'm going to select section heading SM and set the phone size to 1.4 Then I'm going to take care of the paragraph. Let's go ahead and select about P. First of all, I'm going to change the phone size. It's going to be 1.6 Ram. And then I'm going to decrease the width. It's going to be 45 Ram. Let's go ahead and check the browser. Okay, so the menu icon doesn't cover the text of the paragraph. Next, I'm going to take of the book section. As you can see, the menu icon covers the section number. I'm going to take care of the header. Let's go ahead and select Books, followed by the books header. I'm going to define the width. It's going to be 35 Ram. As you can see, the width of the header is changed, but we need to adjust the size of the section border. Let's go ahead and select Books header followed by the section border. I'm going to set the width, 235 Ram. Okay, now the problem is fixed and the menu icon doesn't cover the section number. The book section looks good. Next we have to take care of the testimonials. I'm going to adjust the height of the section because right now it's too long. I mean the section length. Let's go ahead and select testimonials and set height to 100 poo height. Right that sits about the testimonial section. Next we have to take here of the footer, the input fields. Let's go ahead and select input group followed by the input elements, and it's width to 28 Rm. Let's check the browser. As you can see, the foot looks good. Actually, with the main page, we're done. All the sections and all the elements look pretty nice. Let's go ahead and check other pages. I'm going to start with the about pages. Can see everything is messed up here. Let's go ahead and open about the CSS file and create new CS's media. The marks with is going to be 820 pixels. I'm going to start with the section header. I want to place it in the center of the page. Let's go ahead and select about section header. Let's set text the line to center. And then I'm going to use transform translate function. And I'm going to set the values to 0.0 The header is placed in the center. Next, we have to take care of this blue element here. We need to place it in the center as well. Let's go ahead and select about section header followed by the section border. Then we need after see the element, let's set right position to 50% And then in order to place the element in the center, we need to transform translate x with the value 50% Okay, so let's sit above the header. Next we have to take care of the features. We're going to change the alignment of the features. Let's go ahead and select about page features. First of all, I'm going to change the padding at the bottom. Let's set it to 25. Then I'm going to change the alignment of the pictures. Let's go ahead and find the default styles. I'm going to grab this code from here. Let's paste it here and make the changes. Actually, we need to insert here zero everywhere. Let's check the browser. Now, As you can see, the features are placed in a different way. I think they look pretty nice. Next, I'm going to take care of the team section. I'm going to change the shape of the background and make it rectangle instead of triangle. Let's go ahead and select team. As you remember, we used property called clip path. I'm going to set it to none, then I'm going to adjust the size of the element. Let's set with 100% As for the height, I'm going to make it 70 epo height. The shape of the element is changed. Actually I'm going to get rid of this box shadow. Let's set box shadow to none. All right, so I think that the team section looks pretty nice. Next we have to change the size of the images. I'm going to select member, followed by the image elements. Let's set w and height, both of them to 20 m. Then I'm going to change the font size of the member position. Let's set it to 1.2 m. As you can see, the header of the footer ended up on the background of the team section. We're going to fix that problem in a minute. Let's go ahead and select footer about and set margin top to zero. Now the problem is fixed. Next, I'm going to take care of the header of the footer. We're going to place it in the center of the page. I'm going to select footer about, followed by the footer header. Let's set text the line to center. Then we need to transform translate x with value zero. Okay, now we need the same thing with this after element. I mean this bull element. We have to place it in the center. I'm going to select footer about followed by the footer header. Then I'm going to select section border with after element we need right position to be 50% and then transform translate x 50% Okay, so that's it. The header is placed in the center and everything looks pretty nice with the about page. We're done. Let's move on and check other pages. The next one is books page, and I think that it should look good. We don't have to make here and changes. Next we have testimonial section. As you can see we have to make some changes. Let's go ahead and open testimonials CSS file and create new CSS media query with max width of 820 pixels. I'm going to select the section element, I mean testimonials section. I'm going to define the height. It's going to be 100 pat height. Let's check the results. The height is decreased. Next I'm going to take care of the slight. Let's start with the slight background. I'm going to set width to 95% Let's duplicate this code, because we need the same thing with the slight content. Let's check the browser, the width is increased. Next, I'm going to take care of the paragraph. Let's go ahead and select slide text, followed by the elements. And I'm going to set with 232 m. Now we have much better results. Next, I'm going to change slightly the positions of the arrows. Let's go ahead and select controls, followed by the elements. Then we need the nth child selector. We need the first one. Let's set left position to 5% Then I'm going to duplicate this code and change the number of the nth child selector. We need here two. As for the position, it's going to be right. Okay, so everything looks good actually with this break point, we're done. Let's go to the home page. The next one. The next breakpoint for tablet is this breakpoint here. I'm going to check this one. And then let's go ahead and select table two. I'm going to take care of the books. I'm going to make them slightly smaller. Also, I'm going to take care of the testimonial section. Okay, let's go ahead and create new CSS media. In this style of CSS file, the max width is going to be 768 pixels. Let's go ahead and select book and set it to width to 32. Run then we need book with image elements. I'm going to set with 27 r. All right, so the books became smaller and I think they looked pretty nice. Next I'm going to take care of the testimonial section. Let's go ahead and select testimonials and I'm going to change the height of the section. Let's say 2115 view pot height. All right, after that I'm going to take care of the inputs in the footer. Let's go ahead and select input group followed by the input elements. Let's set with 226 m. All right, I think that's it. About the main page. Let's check other pages. The about page looks good. We have to make here one slide change. I'm going to decrease the width of the images because as you can see, the menu icon covers the image of the member. Let's go ahead and open about the CSS file and create new CS media. The max is going to be 768 pixels. Then I'm going to select member with image elements. Let's set width of the image to 18 Ram. And also we need to change the height, but 32 18 Ram as well. Okay, that sits about page Next, I'm going to check the books page. Everything looks great. Then we have testimonial page, looks fine. All right, that sits about the breakpoints. Let's check the second breakpoint table. Next, we have to make our project responsive mobile phones. And for that, let's move on to the next lecture. 29. Making Project Responsive - Part 4: In the last lecture, we have finished making project responsive for tablets. We had two different breakpoints. Those breakpoints, and the project is responsive to both tablet screens. Next, we have to make the project responsive for mobile phones. I mean, we have here three different breakpoints. Let's go ahead and select mobile one. So as you can see, everything is messed up here. So we have to do a lot of things on the breakpoint, let's go to the VS code and open start the CSS file. I'm going to create new CSS media. The max width is going to be 413 pixels. The first thing that I'm going to do is to change the font size of the HTML element. Let's select HTML and define the font size. I'm going to set it to 42% It will decrease the sizes of all the elements. Next I'm going to take care of the logo. Let's select Logo and move it a little bit to the left side. We need her left position with the value five Ram. Next I'm going to take care of the banner. I'm going to decrease the size of the heading elements. Let's go ahead and select banner H three. And change the phone size. It's going to be five Ram. Then I'm going to duplicate this code and select H one heading elements, the phone size is going to be 12 Ram. Okay, so I think that the website header looks good. Next we have about section. I'm going to select about section. Let's define height. It's going to be 80 view height. Then I'm going to create space at the bottom of the section using padding. Bottom, the value is going to be 25 m. Next, I'm going to change the alignment of the elements. First of all, let's decrease the size of the section number. I'm going to select section followed by the span elements. Let's decrease the phone size. It's going to be 16 Re. Then I'm going to decrease the space on the right side of the number. I'm going to select about Content Left. Let's set padding on the right side to zero. Then I'm going to change the padding for the right side. Let's go ahead and select about content, right. Define padding with the following values. We need four Ram at the top side, zero on the right side, zero at the bottom side, and six on the left side. All right, after that, I'm going to take care of the main button. I'm going to place it here. Now let's go ahead and select about. Followed by the main PTM. I'm going to set position to absolute that we need position relative for the section elements. Let's define bottom position is going to be 15 Ram. Then I'm going to place the button in the center horizontally with the left position with the value of 50% And then transform translate x with -50% Okay, the button is position next, I'm going to take care of the heading in the right side. Let's go ahead and select section heading LG and decrease the phone size. Let's make it 2.5 Ram. All right, after that I'm going to take care of the section border. I'm going to decrease the width. Let's go ahead and select About Content, right? Followed by the section border and set width to 25 D. All right. I think that's it about the header. Next we have to take of the paragraph. I'm going to place it in the center. Let's go ahead and select about content, right? Followed by the element. I'm going to set position to absolute. Then we need to position to be 50% The let position is going to be 50% And then we need to center the element using transform translate x -50% Also, let's align text in the center. Now as you can see, both paragraphs ended up together on top of each other. Let's go ahead and change the position for the second paragraph. I'm going to actually, let's grab the selector from here and add to the paragraph, last child to the class. I'm going to set the position to 50% All right, so that's it. The about section looks pretty nice. Next we have to take care of the book section. Let's go ahead and select books header. I'm going to set margin on the right side to three ram. Then I'm going to take care of the section number. Let's go ahead and select books, followed by the section numb. I'm going to change putting on the right side, let's set it to five Ram. Then I'm going to change the width of the border of the section. Let's go ahead and select books, followed by the section border. And I'm going to set with 230 Ram. Actually, we don't need this here. The width of the border is changed, but as you can see, it changed its position. We have to move it to the right side. For that, I'm going to use margin left with the value to. Okay, so that's it about the header of the book section. The books themselves look good and actually with this section, we're done. Next, we have to take care of the testimonial section. As you can see, we have to make here a lot of changes. Let's go ahead and select section elements for the class name testimonials. I'm going to change the height, let's make it to 125 height. Then I'm going to select section number. We need your testimonials top followed by the section and I'm going to change margin on the right side, let's say to five Ram. Next I'm going to change the side of the border. So let's go ahead and select testimonials followed by the section border. Actually, we can use here testimonials without testimonials. Top, I'm going to set width 229 Ram. Let's check the browser. All right, so the header with the section number looks good. Next we have to take care of the feedback. Let's go ahead and select feedback top. I'm going to change the flex direction, but in this case I'm going to use column reverse because I want the first elements in the section to be heading instead of the quote. Now as you can see, the heading is placed at the top of the. And the image next, I'm going to get rid of padding on the left side. Let's set it to zero. Now the heading will be placed in the center of the section. After that, I'm going to create some space at the bottom of the heading. Let's go ahead and select feedback heading and set margin at the bottom to five Ram. After that, I'm going to take care of the background. Let's go ahead and select PG. I'm going to change top and left properties. I mean the position, let's set top position 250 Ram. As for the left position, I'm going to nine. And also let's increase the height of the element. Let's 32 50 Ram. All right, after that I'm going to take care of the quote itself. So let's go ahead and select, let's change the position of the quote. The top position is going to be 58 Ram. Then I'm going to set left position to 12 Ram. And also change the size of the elements. We need. Width to be 40. Also change the height, let's make it 37 Ram. Okay, so the quote looks pretty nice. Next we have to take care of the content inside the quote. Let's start with the phone atomic. Let's go ahead and select I actually header. We need phone size to be five. Then I'm going to change the space between the heading, I mean the name of the client and the. Let's go ahead and select header followed by the H one heading element. Let's set putting to zero and then five Ram. Now the heading. The header looks good. Next I'm going to take care of the paragraph. Let's go ahead and select Body, followed by the elements. The width of the paragraph is going to be 30 Ram. Then we need font size. Let's set it to 1.4 Actually we need here 1.4 Then I'm going to create space at the bottom using margin. Bottom with the value of 3.5 Ram. Okay, so the content of the quote looks nice. And actually with this section, we are done. Let's move on and take care of the footer. I'm going to change the alignment of the content inside the footer. Let's go ahead and select footer content. Let's change the flex direction. It's going to be column reverse because I want to place the input fields at the top of the content. Like next, I'm going to change the width of the form and also the social part. Let's go ahead and select social with form and set to 100% Next, I'm going to select Foot Social individually. Actually, before we take care of the Foot Social, I'm going to take care of the form because we have here form at the first place. Let's go ahead and select input group and set its width to 100% Then I'm going to select input group, followed by the input element, set its width to inherit. In this case, input element will inherit width from the parent element. As you can see, the inputs look nice. Next, I'm going to take care of the bottom. Let's go ahead and select fo form, followed by the bottom. Let's settle with to 100% Then we need margin at the bottom, ten Ram. As you can see, the bottom looks pretty nice. Next, I'm going to take care of this part here. I mean Foot Social. Let's place the code here. Select Foot Social. I'm going to use Flex box. Let's set display Flex because we're going to place the elements side by side horizontally. And then let's create space using justify content. Space between, as you can see, the address and the phone Awesome icons are placed side by side. I'm going to move the phone aesomeicons in the center vertically. For that we can use, actually let's select social media and then use property called Align Self with a value center. The phone asomicons are placed in the center vertically. All right, so actually with the main landing page, we're done. Everything looks good. Let's go ahead and check the navigation. I'm going to get rid of this image at the whole and just leave here the navigation items. Let's go ahead and select left and make it hidden using this play. No, the image is hidden. Next, we have to extend the right side to the entire page. For that, we need to use class name, navigate. And then we need enough, right? That's said with 100% Okay, so that's it. Navigation looks pretty nice. All right, with the main page, we're done. Let's go ahead and check other pages. Let's check about page, we have to take you off the team section. All other elements look good. Let's go ahead and open a bottle CSS file and create new CSS media query. We need max with 430 pixels. Let's go ahead and select Team Section and define height. I'm going to make it 100 viewpoint height, Then I'm going to place the images vertically in a column. Let's go ahead and select members and change flex direction. It's going to be column and then I'm going to create some space between the members. I'm going to select member set margin to four M at the top and bottom side and six Ram on the left and right sides. All right the members look good. We have to take care of the heading. Let's select team followed by the H one heading elements and change margin. It's going to be zero at the top side, zero on the right side, Ten Ram at the bottom side, and zero on the left side. Okay, so the team section looks good. And actually with the bowed page, we're done. Let's go ahead and check books page, everything looks good. Then we have testimonial page. As you can see, we have to make some changes. The slider, the slides don't look quite good. Let's go ahead and open testimonials of CSS file and create new CSS media query with max width of 430 pixels. First of all, I'm going to change the size of the testimonial wrapper. Let's go ahead and select testimonial wrapper. I'm going to set with 60% As for the height, it's going to be 60 gram. Next, I'm going to change the size of the slide itself. We need slight background. Let's set with 80% then the height is going to be 90% Also, we need slide content. Let's set with 80% and then we need height 90% Okay. After that, I'm going to take care of the quotes. Let's go ahead and select Slide, followed by the elements. I'm going to change the phone size. Let's set it to seven Ram. Right now the quotes are not visible because we have to change the positions of the phon. Let's go ahead and select slide I, followed by the N selector. I'm going to select the first icon. Let's set top position to -5% As for the positions right now it is set to 10% So I'm not going to change it. Let's go ahead and duplicate this code. Change the selector we need here too. Now I'm going to set bottom position to -5% All right, so here we have the quotes. They are positioned and look nice. Next I'm going to change the alignment of the slide. I'm going to add here flex direction column. And then we need space between the flex items using justify content space. Even now as you can see, the flex items are placed vertically in a column. I'm going to take care of the image. Let's go ahead and select slide image and change the size. We need width to be 75% As for the height, I'm going to set it to 16, then let's get rid of margin on the right side. Let's set it to zero. All right, so image looks good. Next I'm going to take care of the text. Let's select slide text and set its width to 100% And now I'm going to change the width of the paragraph. Let's go ahead and select slide text followed by the P element. I'm going to set width to 25 D. All right, so that sits about the testimonial page. Everything looks good. Actually, with this breakpoint, we are done. All these sections and aller pages look pretty nice. Let's go ahead and check this breakpoint here. And now we need to customize the project On the breakpoint, let's go ahead and select mobile Two. I'm going to decrease again, the phone size of the HTML element. Let's go ahead and create new CSS media query with maxwidth equal to 393 pixels. Let's go ahead and change the phone size of the HTML element. I'm going 32, 38% Let's check the projects. As you can see, everything looks good. I'm going to check the pages about page looks good. Next we have books page, it looks good. And let's check the testimonial page. Everything looks pretty nice. All right, let's sit about this breakpoint. Next, I'm going to take care of the next breakpoint, which is the last one. Let's go ahead and select Mobile three. In this case, we have to make some changes. Let's go ahead and create new S media. Actually, I'm going to duplicate this code we need here, max width equal to 375 pixels. I'm going to decrease the phone size. Let's make it 36% and check the project. The website header looks good. Next we have about section. It looks good. The book section looks good. We need to customize the testimonial section. Let's go ahead and select testimonials. I'm going to change the height. Let's make it 150 foot height. Now the problem is fixed and the footer looks good as well. Okay, let's check other pages. We have here a book page, which looks good. Next we have books page. It looks good as well. And finally, we have here testimonials. I'm going to increase the height of the testimonial section. So let's open testimonials of CSS file, Create new CSS media query with max width of 375 pixels. Then select testimonial section and change height. I'm going to make it 130 viewport height, Okay? Now this section looks good, and actually everything looks pretty nice, All right? We can say that the project is responsive for different screen sizes and devices. Before we finish our course, I'm going to do a few things. Let's take a look at the finished project. I'm going to create the website loader, I mean this animation here. Then we should deploy the website and make it online. All right, let's go ahead and move on to the next lecture. 30. Creating Website Loader: In the last lecture, we have finished working on the responsive mode. Our project is responsive to different screen sizes and devices. Now, as I said, we're going to create the website loader. Let's take a look at the finished project. If we reload the page, then this nice and cool animation will appear. And once the animation ends, then the web page will be loaded. In this lecture, we're going to create this nice and cool website loader. Before that, I'm going to do one more thing. If we open the navigation and click the contact link, then we will navigate to the contact section. If we open another page and click again the contact link, then we will navigate to the contact section of that page. In our project, we don't have this feature. Let's go to the VS code. I'm going to find footer. I'm going to add to the footer ID attribute with the value contact. Then I'm going to grab this attribute. Let's copy it and open all the HTML files. We need a bottle HTML, then books of HTML, and the testimonials that HTML is opened everywhere. We have to pass the attribute for the full server. Let's open books of HTML file and add here ID. Finally, we have here footer for testimonials, that's insert ID. All right. Now if we go to the browser and click Link, then we will navigate to the contract section. But as you can see, the navigation is not closed. We are on the contact section, but we need to manage closing navigation. Once we click the contact link, let's go to the Java script. I'm going to select the contact link. Let's create new variable contact link and then select it using document query selector method. We have to specify here navigation followed by the A elements. And we need here last child because contact link is the last link in the navigation items. Okay, after that, I'm going to select Contact Link and add to it an event listener. With click Events, I'm going to insert here callback function, which will be executed once the contact link is clicked. Once we click the contact link, we have to remove class. Navigate from the container. Actually, we don't need here. Let's grab this line of code instead of togalmove, Then go to the browser. I'm going to go to any of the pages. Let's click Contact Link. As you can see, we are navigated to the contact section. Let's go to the home page. Click Contact. We are navigated to the contact section. All right, so everything works fine. Let's go to the home page. And then I'm going to start to create the loader. We need to insert the HDMon mark up here inside the body elements right before the container. Let's insert new comments to a loader. Then I'm going to open dip tag with the class name loader wrapper. Inside that development, I'm going to open another dip with the class name loader that sits about the HTML markup. I'm going to open style CSS file and find the container. I'm going to hide container using opacity zero and visibility. Then I'm going to insert your new comments for the loader. I'm going to select wrapper. Let's define within heights. The width is going to be 100% then height it's going to be 100 viewpoint height. Change the background color. Let's set color to 151515. Then we need to change the position. It's going to be fixed. Also, I'm going to define top end left properties, both of them as zero. Here we have the wrapper. Next we have to take care of the loader. Let's go ahead and select loader. I'm going to define width. Let's make it 40% Then we need height. I'm going to set it to 0.1 ramp and then change the background color. It's going to be white. Let's check the browser. Here we have the loader. I'm going to place it in the center of the page. For that, let's use Flex book. We need here display flex, then justify center, and align items center. Okay, so here we have the loader. Now I'm going to create the animation, I mean CSS key frames. Let's add here key frames with the name loader. We're going to have a couple of different steps. At 0% I'm going to decrease the scale of the element. Let's use scale x function and make it zero. Also, we have to change the origin of the transformation. Let's make it left. At the start of the animation, the element won't have any width and it will be transformed from its left side. Next we have 20% Let's grab those two lines. At 20% I'm going to increase the scale. Let's make it one. And the origin of the transformation will be again, left. After 20% progress, the element is fully visible and still transformed from its left side. Let's duplicate this code. The next step is 25% We need scale x one. As for the origin of the transformation, it's going to be right again. At 25% progress, the element remains fully visible, but now it's transformed from its right side. Let's duplicate again code. The next step is 45% At this step we need scale lex zero. The origin of the transformation will be again, right at 45% progress, the element disappears while being transformed from its right side. Next we have 50% we need scalac zero and transform origin. Right at 50% progress, the element remains invisible while being transformed from its right side. The next step is 70% At 70% we need calc one and transform origin. Right At 70% progress, the element reappears while being transformed from its right side. Next we have 75% We need here calc one and transform origin left At 75% progress, the element remains visible, but now it's transformed from its left side. Finally, we need here 100% actually duplicate the code. We need 100% scale x zero and transform origin left. At the end of the animation, the element disappears while being transformed from its left side. All right, in order to apply those rules, I'm going to add animation to the loader. We need the name loader. And then the duration is going to be 5 seconds. Also, I want a little delay time, 0.5 seconds. Okay, let's go to the browser. As you can see, the animation works. Actually, I'm going to hide by default, The loader I'm going to add here transform scale x zero. Once the animation ends then the loader will disappear. All right, everything looks good. Next I'm going to add V script to the project. I'm going to open script OJS. Let's insert here, new comments for the loader. Then I'm going to select loader wrapper. Let's create a new variable, call it loader. And select loader wrapper. We need here loader wrapper. After that I'm going to attach to the window object event listener. With the event we need here window event listener. The event is going to be load. Then I'm going to insert here callback function, which will be executed once the window is loaded. Now I'm going to use one of the built in functions in Javascript called set time Out. Let's use set time Out. I'm going to insert your cobc function. After some amount of time, I'm going to hide the loader. And also after some amount of time I'm going to display back the container. Now I'm going to add a new class to the loader, which then will be used in CSS to hide the loader. In the same way, I'm going to add new class to the container which will be used in CSS to display back the container. I'm going to add here loader class list. I'm going to call the class name Hide Next, we have to add here, the amount of delay is going to be 6,000 I mean 6 seconds. Then I'm going to duplicate this code. We need different amount of time for the container. I'm going to add here container. Let's call the class name, Show. As for the amount of delay time, it's going to be 5,500 milliseconds. Okay, let's go to the CSS file and I'm going to add here height with load the wrapper, I'm going to set here opacity to zero and visibility. Then I'm going to show the container we need here, show followed by the container. Then we need here those two properties. Capacity is going to be one. As for the visibility we need here, visible. Okay, let's check the browser, load the page. Here we have the loader with animation. Once the animation ends, then the container appears. If we open any of the pages, you will see that the container is not visible, but it will show up after some amount of time. Actually, we don't need that. I'm going to fix those problems. Let's go to the VS code and open index HTM file. I'm going to add class to the container. It's going to be main container. We have to use the container which is in the indexed HTmalpile. That's why I'm adding here a new class. Besides that, I'm going to use body of the index HTmalpile. I'm going to add here body, then I'm going to hide the scroll bar. For that we need body then overflow heating. Next I'm going to select main container. I'm going to add those properties to the main container. And then I'm going to add here main. Okay, The next thing that I'm going to do is to add position to the container. It's going to be relative. Also, we need transitions for main container, paul 0.5 seconds. Also, we need transition for the loader wrapper. Let's add here transition paul 0.5 seconds. Okay, let's go to the browser and reload the page. Now we have here the animation. Once it ends, then the container will display. Let's open about as you can see, we no longer have here the problems. Actually, we have one tiny issue. Once the animation ends, we no longer have here the scroll bar and we are not able to scroll down. Let's go ahead and fix that problem. Go to the Geoskhy file. I'm going to select here body elements. Let's call the variable body, then select it using query selector method. Specify here the class name body. Then I'm going to add here body dot style dot overflow. It should be equal to auto. Once the container is displayed, we no longer need overflow heating. It will allow us to display back the scroll bar. Let's go to the browser. The animation runs. Once it ends, then the container will be displayed with scrollbar and we're able to scroll down Ok. So everything works perfectly, the loader is created. The next thing that I'm going to do is to make the website online. We need to host it on the Netlify platform. For that, let's move on to the next lecture. 31. Deploying Website: In our previous lecture, we created the website loader, and now it's time to move on to the final step, deploying our website online. There are numerous ways to host your website, but in this course, I prefer using Netlify. Netlify is a cloud platform that provides a range of services for modern web development and hosting. It offers a platform as a service solution that simplifies the process of deploying and managing websites and web applications. Let's go ahead and visit Netlify.com The first thing that have to do is to sign up, which is quite a simple process. So I'm not going to go through it. I've already registered, so I'm just going to login here. We have a dashboard of the user. In order to deploy the website, you can either import your existing Git repository or you can just drag and drop your working project folder. I prefer the second way, I'm going to drag and drop the project folder. It will take some time. Okay, so that sits. Let's go ahead and click Open Production Deployee. Here we have our website. It is online. Everything works fine. We have here the project. Let's navigate through different pages. As you can see, everything works fine and looks good. Let's check the testimonial page. Okay, so our website is online. The only thing that I'm going to do is to change the domain name because we have here a long name with some characters. Let's go to the site configuration. I'm going to change site name. Let's get rid of those characters. I'm going to call the website and create a library. Let's save it. All right, here we have the link. Let's click it. We have here our website with a new domain name. You can call it whatever you want. I know that it's not a perfect name, but that's not the main thing. All right, so that sets. Finally we can say that with the project we are done. Congratulations, fantastic job on finishing this course. You're now equipped with the skills to create awesome websites. I'd like to say a huge thank you for being a part of this course. Keep learning, stay curious, and enjoy the journey. As a web developer, I wish you the best of luck with all your future projects. Happy coding and mayor websites. Always impress. Good luck. Bye, bye.